GoogleのモバイルフレンドリーテストapiをPHPで使ってみる。

プログラミング

2023.03.122019.09.29

今回は、PHPでモバイルフレンドリーapiを使ってみました。Googleがモバイルファーストインデックス（Mobile First Index、MFI）これまでパソコンのページを元にインデックスしていたのに対しこれからはモバイルページを元にインデックスし評価しいていくと発表して結構な月日が流れました。

「WEBページといえばパソコンで」と思っていた古いタイプの人間なのでこの情報を知ったときは衝撃を受けました。

今や、ネットを見るのはスマホユーザーのほうが圧倒的に多いことを考えれば当たり前の流れだと受け入れるしかないですね( ;∀;)

そこで今回は、Googleから提供されるapiを使ってモバイルフレンドリーに対応しているかどうか知ることができるツールを作成しました。
最近、ブログをやっている方は、ほとんど対応していることかと思いますが、見た目ではモバイル対応していてもツールで見てみると非対応とみなされていることもあります。

一度はツールを使ってチェックしてみるといいかもしれません。

公式ツール
1. PHPで作成

公式ツール

ただページをモバイルフレンドリーかどうかチェックしたいのであれば画像のようにGoogleからも提供されているツールがあります。

Overview | Lighthouse | Chrome for Developers

Learn how to set up Lighthouse to audit your web apps.

PHPで作成

ただ公式でのツールでは一つづつURLを打ち込む必要があったりで、複数チェックしたい場合には不便です。

そこで以下のようなコードでリクエストしてループさせるなりして複数チェックすることができます。

実はあんまり需要なさそうですねｗ

以下がPHPのコードになります。

    <?php
$url="https://"; $data="https://searchconsole.googleapis.com/v1/urlTestingTools/mobileFriendlyTest:run?key=｛APIKEY｝";
    
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $data);
    $payload = json_encode( array( "url"=> $url ) );
    curl_setopt( $ch, CURLOPT_POSTFIELDS, $payload );
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST"); 
    curl_setopt( $ch, CURLOPT_HTTPHEADER, array('Content-Type:application/json'));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $api_content = curl_exec ($ch);
    curl_close ($ch);

    $api_result = json_decode($api_content);

if(preg_match('/NOT_MOBILE_FRIENDLY/', $api_content)){
$mobile = "<img src=\"./bad.png\" class=\"spam\">このページはモバイルフレンドリーではありません。";
}else{
$mobile =  "<img src=\"./safe.png\" class=\"spam\">このページはモバイルフレンドリーです。";
} 
?>

コードを実行する前に、apiを使う準備をしななければなりません。

以下の手順で、APIKEY取得します。

APIキーの取得・設定｜Google Maps Platform｜ゼンリンデータコム法人向けサービス

Google Maps Platformの利用に必要な、アカウント作成～APIの有効化～Google Maps Platform APIキーの取得・発行～APIキーの指定についてご紹介します。APIキーの設定の確認方法についてもご案内いたします。

次に三行目の$data=”https://searchconsole.googleapis.com/v1/urlTestingTools/mobileFriendlyTest:run?key=｛APIKEY｝”;

｛APIKEY｝という部分に取得したAPIKEYを入れます。

$data=”https://searchconsole.googleapis.com/v1/urlTestingTools/mobileFriendlyTest:run?key=hogehoge”;

取得後のURLはこのようになります。hogehogeにはランダム英数字が入ると思います。

$url=”https://”; にモバイルフレンドリーかどうか見たいページのURLを入れると以下のような情報が

$api_result

にJSON形式で返ってきます。

object(stdClass)#2 (3) { ["testStatus"]=> object(stdClass)#1 (1) { ["status"]=> string(8) "COMPLETE" } ["mobileFriendliness"]=> string(19) "NOT_MOBILE_FRIENDLY" ["mobileFriendlyIssues"]=> array(3) { [0]=> object(stdClass)#3 (1) { ["rule"]=> string(24) "SIZE_CONTENT_TO_VIEWPORT" } [1]=> object(stdClass)#4 (1) { ["rule"]=> string(21) "TAP_TARGETS_TOO_CLOSE" } [2]=> object(stdClass)#5 (1) { ["rule"]=> string(18) "CONFIGURE_VIEWPORT" } } }

mobileFriendlinessというステータスがNOT_MOBILE_FRIENDLYだったらモバイルフレンドリーに対応していない、MOBILE_FRIENDLYだったらモバイルフレンドリーに対応ということで判断できます。

今回テストしたURLはモバイルフレンドリーではないようですね(´;ω;｀)

このように非常にめんどくさい工程をいくつも経てSEOツールを作ってみましたので是非活用してみてくださいｗ