Googleのテキストが小さすぎ・要素同士が近すぎ問題の対策方法

Google Search Console から「モバイルユーザビリティで問題が検出されました」というメールが送られてきました。

その内容は「テキストが小さすぎて読めません」と「クリック可能な要素同士が近すぎます」というものでした。

今回は、こうした内容のメールが送られてきたときの対策方法です。

実際に送られてきたメールの一部分が次の画像になります。

「モバイルユーザビリティの問題を解決する」というリンクから、Google Search Consoleにアクセスすると、たしかにエラーになっていました。

今回は「該当ページ」は1つのみでした。「該当ページ」が複数ある場合と、1つしかない場合では、対策も変わってきます。

問題の「該当ページ」が複数ある場合の基本的な対策

「該当ページ」が複数ある場合は、複数のページで共通している部分に問題がある可能性が高いです。

デザイン面であれば、

これらに問題がないか検証しましょう。

様々な画面サイズで最適化されるレスポンシブなデザインの場合は、ブラウザをリサイズして、どの画面サイズでも問題なく表示されるかも検証してみてください。

コード面であれば、<meta name="viewport" content="…" /> の設定が適切かどうか検証してみてください。

「該当ページ」が1つしかない場合は、該当ページのコンテンツの作り方 (文章の書き方) に問題がある可能性があります。

例えば「あれとこれ」のような文章とリンク設定や、「大きな声では言えませんが」のような他の部分よりも文章を小さく表示するといった、特定の書き方によって問題が発生することが考えられます。

「該当ページ」が複数ある場合、1つしかない場合のいずれにしても、まずは Google Search Console が提供する「モバイルフレンドリーテスト」を試してみましょう。

試した結果よく分からない場合は、問題が発生していないページにも試して、比較するといいかもしれません。

今回の「該当ページ」に試した結果、次のように表示されました。

Google Search Console の「モバイルユーザビリティ」と「モバイルフレンドリーテスト」で矛盾する結果がでました。これは、レアなケースではあると思うのですが、何度か経験しています。

こういった場合は、特に何も対策を施すことなく「修正を検証」と書かれたリンクをクリックして、様子をみましょう。

検証が開始されると、メールが送られてきます。

検証が終了すると、同じようにメールでお知らせしてくれます。今までの経験からすると、何もなかったかのように問題が解消されるはずです。

問題が解消されなかったり、何度も同じ問題が検出されるようであれば、「問題の『該当ページ』が複数ある場合の基本的な対策」や「問題の『該当ページ』が1つしかない場合の基本的な対策」を施しましょう。

予想通り、何も対策を施さなかったにも関わらず、問題は解消されました。

Googleさん、宜しくお願いします。