最近のウェブサイトやブログはスマホやタブレットでアクセスされることが多くなり、Google など検索サイトもスマホ対応に重きを置く傾向があるためウェブサイト管理者向けのツールである Google Search Console でモバイルフレンドリーテストでエラーが表示された場合の変更すべき重要な 3 点について紹介する。
このページの目次
1.Google Search Console のモバイルフレンドリーとは
モバイルフレンドリーとは、検索サイトの Google がウェブサイト管理者向けに提供しているツール「Google Search Console」で登録しているウェブサイトがスマホやタブレットなど携帯端末で表示した時に見た目や操作性に問題が無いか診断して、その結果を示してくれる機能である。
モバイルフレンドリーの結果を確認するためには Google Search Console にログインして左メニュー内より「モバイルユーザビリティ」をクリックすると、Google が検知したページの中からエラーがあったページ数と問題無いページ数が表示される。
モバイルフレンドリーのテストを受けるためには特に何も設定などを行う必要が無く、Google Search Console でサイトマップがある XML のパスを送信するだけで自動的に診断してくれる。
ただし、サイトマップ内の全てを診断してくれるわけではなく、結果に表示されるエラーと成功のページ数とサイトマップでクロール済みまたはインデックス済みになった総ページ数と異なり、Google 側でサンプリングしていると考えられる。
2.モバイルフレンドリーで変更すべき重要な 3 点
Google Search Console のモバイルフレンドリーのテストでエラーと診断された理由は下図のように確認することができる。
その中でもスマホなど携帯端末利用者にとって文字が読みづらい、リンクをタップする時に誤操作しやすいなど利便性が落ちる 3 点は早急に修正した方がよい。
2-1.「テキストが小さすぎて読めません」の対応
「テキストが小さすぎて読めません」と表示された場合は、ウェブサイトまたはブログ内のテキストの文字サイズが小さいと診断された結果である。
表示される文字が小さいと閲覧者が一目で識字しづらかったり、拡大操作(ピンチイン)が必要になり利便性が落ちると考えられている。
テキストが小さい場合の対応方法としては、テキストの文字サイズを 16px 以上になるように CSS の font-size を大きくするとよい。
また、画像内に文字がある場合は、その文字の大きさも診断対象となるため文字を大きくする必要がある。
2-2.「クリック可能な要素同士が近すぎます」の対応
「クリック可能な要素同士が近すぎます」と表示された場合は、A タグでリンク設定している文字または画像通しの幅が狭いと診断された結果である。
リンク設定されたテキストや画像が近いと画面の小さいスマホでは想定と違うリンクをタップして誤操作を誘発させて利便性が落ちると考えられている。
クリック可能な要素同士が近すぎる場合の対応方法としては、A タグとの間を 20px 以上の間隔を取るようにし、CSS で maring または padding で余白を作るとよい。
2-3.「ビューポートが設定されていません」の対応
「ビューポートが設定されていません」と表示された場合は、記載の通り HTML 内にビューポートの指定がされていないと診断された結果である。
ビューポートの指定を HTML 内にしておかないとスマホのブラウザがディスプレイに表示する適切な幅で表示できないため、閲覧者が拡大または縮小の操作を強いるので利便性が落ちると考えられている。
ビューポートを設定するためには HTML の HEAD セクション内に meta タグで viewport の指定をするだけでよい。
3.ウェブサイトを変更した後に再テストする方法
Google Search Console のモバイルフレンドリーのテストでエラーと診断された後にウェブサイトまたはブログを修正して、その修正が有効かどうかを再テストして結果を確認する方法がある。
例えば「ビューポートが設定されていません」のエラーに対してウェブサイト側を修正してアップロードした後に、Google Search Console で「モバイルユーザビリティ」の画面を表示して「ビューポートが設定されていません」をクリックする。
次に「ビューポートが設定されていません」と診断されたページ数と該当ページの URL 一覧が表示されるため、その画面内にあるボタン「修正を検証」をクリックする。
再テストのチェック中は下図のように初期検証中の文字が表示されるため、終了するまで待機する。
ここでの再テストは修正に対して改善されたかどうかを診断するものではなく、エラーと診断した URL を Google Search Console へリクエストするものなので、診断は後日実施される。
そのため、ボタン「修正を検証」をクリックした後はエラーと診断されたページ数に代わり、下図のように「保留」にステータスが変わる。
後日改めて Google Search Console を確認すると、診断の結果問題が無ければ「修正を確認しました」または「合格」にステータスが変わっていることがわかる。
関連記事
301 リダイレクト(htaccess)が使えない時に検索順位を落とさずにブログを引っ越す方法
ウェブサイトやブログを引っ越す場合に古いサイトが持っていた検索サイトの順位(SEO)を落とさない方法に htaccess を利用した 301 リダイレクトが推奨されているが、無料ブログなど htaccess…
Google の検索結果への表示を早めるインデックス登録の方法
インターネット上に公開したウェブサイトやブログの記事は1秒でも早くアクセスしてもらいたいものだが、何時まで待っても検索結果に自分のサイトが表示されない場合や検索結果への表示を早…
Google にインデックスされてから検索結果に表示されるまでの時間を検証した結果
ウェブサイトやブログをインターネット上に公開して検索サイトの結果に表示されるまで一般的には約 3 ヶ月ほど時間が必要になるが、Google Search Console を利用して具体的にインデックス…