Google Search Console でエラーが表示された場合に変更すべき重要な 3 点

最近のウェブサイトやブログはスマホやタブレットでアクセスされることが多くなり、Google など検索サイトもスマホ対応に重きを置く傾向があるためウェブサイト管理者向けのツールである Google Search Console でモバイルフレンドリーテストでエラーが表示された場合の変更すべき重要な 3 点について紹介する。

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 を確認すると、診断の結果問題が無ければ「修正を確認しました」または「合格」にステータスが変わっていることがわかる。

「修正を確認しました」にステータスが変わった様子
「合格」にステータスが変わった様子

関連記事

コメントを残す