SearchConsoleのモバイルユーザビリティでエラー表示!原因と対処方法

区切り線

blog_01

スマホなどのモバイル端末で、自社サイトの見え方が問題ないか確認できるツールとして代表的なGoogleのSearchConsole。
今回は上記ツールでエラーが表示された場合の原因と対処方法について紹介します。

エラーが表示されている!という方は、ぜひ参考にしてみてください。

目次

SearchConsoleのモバイルユーザビリティとは?

スマホで閲覧した際に、ユーザーがスムーズにサイトを閲覧・回遊できるような文字サイズ、ボタンの間隔、コンテンツ表示領域などがきちんと対応しているか確認できるレポートです。

よろしければ、下記記事もモバイルSEOについて意識したいポイントを紹介していますのでご覧ください。

これからの時代のモバイルSEOで意識をすべき7項目
これからの時代のモバイルSEOで意識をすべき7項目

SearchConsole上での確認方法

[検索トラフィック]→[モバイルユーザビリティ]

Search Consoleに未登録の方はこちらを参考にしてください。

サイト改善に必須!Googleサーチコンソールの使い方と登録方法【2017年度版】
サイト改善に必須!Googleサーチコンソールの使い方と登録方法【2017年度版】

モバイルユーザビリティレポートはGooglebotがサイトをインデックスした最終のページで判断しています。
表示されていると、モバイルでのユーザー体験を低下させている状態ですので、早めに対応しましょう。放置しておくと、モバイル結果からサイトが表示がされなく場合があります。

ちなみにエラーが表示されていなければ、特に問題はないということになりますので現時点では気にする必要はありません。

以下のような状態の場合は読み進めてくださいね。

Search Console モバイル ユーザビリティ

SearchConsoleで検出されるエラー内容

・Flashが使用されています
・ビューポートが設定されていません
・固定幅のビューポート
・コンテンツのサイズがビューポートに対応していません
・フォントサイズが小です
・タップ要素同士が近すぎます

上記のようにコンテンツの視認性や操作性といった要素に問題があるとエラーとして検出されます。

各エラーの対応方法

・Flashが使用されています

一昔に動的なコンテンツを配信するために使用されていた「Flash」ですが、スマホやタブレットのデバイスには対応しておらず、モバイルユーザーによっては空白となり閲覧が出来ません。
可能であれば、静止画像や、Javascriptを使用してFlash以外の手法で表現できるように変更をしましょう。

・ビューポートが設定されていません

PCとスマホ・タブレットなどデバイスの幅は異なります。
それぞれのデバイスの幅に応じて適切に表示するにはheadタグ内にviewportの指定が必要です。

<meta name="viewport" content="width=device-width, initial-scale=1">

・固定幅のビューポート

一般的なデバイスサイズに合わせて横幅をピクセルサイズで指定している場合などに表示されるエラーです。
この場合は、サイトのデザインにレスポンシブデザインを導入しheadタグ内に先述したビューポートの設定を行いましょう。

・コンテンツのサイズがビューポートに対応していません

コンテンツを閲覧する時に上下のスクロールではなく、左右へスクロールをしなければいけない画像やコンテンツがある場合に表示されるエラーです。対象画像やコンテンツに対して横幅の指定がcssで絶対値が指定されている場合に表示されます。この場合は、CSSにメディアクエリを使用して相対値を設定し画像サイズに応じて適切な表示がされるようにしましょう。

・フォントサイズが小です

文字通りですが、スマホで閲覧した際には指二本を使用して画面を拡大(ピンチ操作)をしなければ読みにくいなどの場合に、表示されます。
最適な文字サイズとして公表はされていませんが、Googleのページ速度状態を確認できるGoogle Page Speed Insideツールでは16pxを推奨しています。

・タップ要素同士が近すぎます

ページボタンやテキストリンク、フォームのフィールドなどタップできる要素同士が近すぎると表示されるエラーです。
大人の平均的な指の腹が10mmと言われており、またAndroidのガイドラインには7mm以上を推奨しているため、タップ同士の間隔は7mm~10mm以上が望ましいです。
しかし、使用頻度の低いリンクやボタンは推奨サイズの7mm以下でも問題はないです。
該当するタップ要素の使用頻度などに応じて対応を検討をしましょう。

エラー修正後行うこと

エラーに対して修正後は、検索エンジンに知らせるためにSearchConsole画面から以下の対応をしましょう。

・Feach as Google のリクエスト
・サイトマップ の送信

その他、モバイルユーザビリティを確認できるツール

モバイルフレンドリーテスト

上記ツールでも、モバイルユーザビリティーを確認することができます。
Search Consoleとの違いとして、まれにあるのがモバイルフレンドリーテスト確認ツールと、モバイルユーザビリティレポートでの結果内容との相違です。
モバイルフレンドリーテストツールでは、今表示されているサイトの状態をチェックするツールでありますが、モバイルユーザビリティレポートは、Googlebotがページをインデックスした際の情報で判断しているためです。

その為、修正した情報が検索エンジンにインデックスされる前の情報だった場合、相違がある場合があります。

まとめ

昨年から話題になっているモバイルファーストインデックス。
今後は、スマホなどのモバイルとPCの主従関係が逆転することにより、より一層モバイルでの見え方については意識をしていく必要があります。

今一度、自社のサイトがモバイル端末で問題なく表示されているかツールを使用して確認をしてみましょう。
今回エラーが検出された方は、是非対応を検討してみてください。

  • このエントリーをはてなブックマークに追加

区切り線

コメントをどうぞ

メールアドレスが公開されることはありません。