サーチコンソール「モバイルユーザービリティの問題」とは？メール受信後の対処方法を解説

2024年2月27日

こんにちは、SEO分析ツール「アナトミー」開発チームの宇都宮です。

Google では、インデックス登録とランキングで、モバイルコンテンツを優先的に使用するモバイルファーストインデックスを導入しており、モバイルコンテンツの重要度が高まってきています。

サーチコンソールでは、モバイル端末でサイトを表示した際に表示上の問題があると、”「モバイルユーザビリティ」の問題が新たに検出されました。” というエラーメッセージが送られてきます。

当記事では、どのようなケースでエラーメッセージが送られてくるのか、また、エラーへの対処方法を解説します。

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

モバイルユーザビリティは、モバイル端末における、ユーザビリティ（Usability）の事を指します。つまり、スマートフォンやタブレットといった端末で、Webサイトを表示した際の「使いやすさ」「使い勝手」を意味します。

サーチコンソールでは、このモバイルユーザビリティに問題が無いか、チェックしレポーティングする機能があります。

モバイルユーザビリティのレポートを確認するためには、サーチコンソールにサイトを登録する必要があります。登録方法はこちらの記事が参考になります。

関連記事：Googleサーチコンソールの登録方法と使い方

関連ツール：モバイル画面のデザインを簡単に確認する【アナトミー】

サーチコンソールのモバイルユーザビリティの確認方法

サーチコンソールにログインし、以下の手順でレポート画面を表示することができます。

① 対象のプロパティを選択

② メニューから「モバイルユーザビリティ」を選択

レポート画面では下記スクリーンショットの様に、モバイルユーザビリティに問題（エラー）があるページの件数、問題が無いページの件数を確認することができます。また、エラーメッセージをクリックすると、エラーが発生しているページを確認することができます。

エラー内容毎に詳細なレポート画面を確認することもできます。エラーの型をクリックすると遷移することができます。この画面ではエラーの初検出日、ステータスを確認できます。詳細リンクをクリックすると、サーチコンソールの公式ヘルプページに遷移し、より詳しいエラーの内容を確認することができます。

ページ下部には、実際にこのエラーが発生しているページのURLを一覧で確認することができます。また、最後にGoogleのクローラーがページをクロールした日も確認できるので、いつ問題が顕在化したのかも確認することができます。

モバイルユーザビリティに問題が発生した場合は、サーチコンソールに登録したアカウントのメールアドレスに、下記の様な通知メールが届きます。サーチコンソールにサイトを登録しておくことで、ユーザビリティの問題にも早期に気づくことができます。

サーチコンソールのモバイルユーザビリティのエラーと解決方法

ここからは、実際に発生するエラーの内容と解決方法を解説します。また、Google公式のヘルプサイトには各エラーの説明と対処方法が記載されています。

Search Consoleヘルプ　モバイルユーザビリティレポート
https://support.google.com/webmasters/answer/9063469?hl=ja

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

ページに viewport の記載が無い場合に発生するエラーです。viewportとはWebページの表示領域を指します。viewportを正しく指定すると、画面サイズに応じたレイアウトの最適化ができるようになります。

viewport の記述方法はこちらでまとめています。参考にしながらページに追加してみましょう。

関連記事：レスポンシブ対応するためのCSSの書き方

ビューポートが「端末の幅」に収まるよう設定されていません

このエラーは、前述の vierport が、固定幅で定義されており、モバイル端末の幅を超える場合に発生します。固定幅ではなく、表示しているデバイスの画面サイズに合わせて表示領域を決定する「device-width」など、レスポンシブデザインとして最適なviewportを使用しましょう。

コンテンツの幅が画面の幅を超えています

ページ上のテキストや画像といったコンテンツが、モバイル端末の画面幅を超えるサイズで表示されている場合に、このエラーが発生します。ブラウザ上では、横スクロールが発生する状態になります。例えば、ページのCSSで画像の幅を固定で指定（980pxなど）指定している場合に発生することがあります。このエラーに対処するには、ページのコンテンツが画面幅に収まる様、CSSを修正する必要があります。一般的には、固定の数値ではなく、画面幅の割合で値を指定するといった対処をとります。

テキストが小さすぎて読めません

フォントサイズが小さすぎて文字が読めない場合に発生するエラーです。対策としては、viewport を適切に指定した上で、CSSを調整しフォントサイズを大きくする必要があります。適切なviewport、サイズを検討する上では、Google公式の開発者サイトの情報も参考になるでしょう。

レスポンシブウェブデザインの基本
https://web.dev/responsive-web-design-basics/

クリックできる要素同士が近すぎます

ページ内のボタンやリンクなど、ユーザーがタップできる要素同士の間隔が近すぎる場合に発生するエラーです。特にモバイル端末では、指を使って操作するため、押しにくいボタンやリンクはモバイルユーザビリティとしては問題です。エラーを解消するためには、ボタンやリンクのサイズや、要素の間隔を広げるといった表示上の調整が必要です。