Google Search Consoleの代表的なエラー

お客様とSearch Consoleを共有していると、よくご質問がある項目について説明します。

よく通知が来るエラー

Search Consoleから、「サイト https://example.comで「モバイルユーザビリティ」の問題が新たに検出されました」という件名でメールが届いたことはないでしょうか。Googleがサイト巡回時に、サイトは正しく表示されているか、モバイルフレンドリーか判断して、問題があればこのようなメールが送られます。

内容は以下のようなものです。

赤い枠で囲った部分にエラーの内容が書かれています。

今回取り上げた３つのエラー

・コンテンツの幅が画面の幅を超えています
・テキストが小さすぎて読めません
・クリック可能な要素同士が近すぎます

こちらに関しては、擬似的にスマートフォンでアクセスした状態を作り検証していると考えています。
WordPressで構築したレスポンシブ（スマートフォン対応）サイトでよく起こるエラーです。
何らかの影響でサーバのレスポンスが悪かったときに起こるエラーではないかなと思っています。パソコンとスマートフォンで同じものを表示させていますが、スマートフォンで表示する場合は、スマートフォン用のレイアウト設定が適用されます。これを記述しているのがCSSというファイルなのですが、このCSSがうまく読み込まれず、表示に関するエラーが検知されてしまったのではないでしょうか。

もう一つ、Googleのクローラーやエラー判定の仕組みが変化した、ということも考えられます。
常に進化し続けているので、突然仕様が変更する場合があります。

エラーの対応方法

本当にエラーの内容が正しいのか、まず検証する必要があります。

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

上記３つのエラーはモバイルの表示に関してなので、モバイルフレンドリー過確認してみましょう。

モバイルフレンドリーテスト
https://search.google.com/test/mobile-friendly?hl=ja

正しく認識されている場合は、「このページはモバイルフレンドリーです」と表示され、スマートフォンで表示したときのキャプチャも合わせて表示されます。

スマートフォンで表示してみる

一見正しく表示されているようですが、スマートフォンで見た場合と少し違います。
スマートフォンで表示した場合、思いやりで感動をつくる。の文字の背景に画像が表示されているのですが、モバイルフレンドリーテストでは表示されていません。これを見ると、実際の表示とは異なる解釈で評価されている、というのがわかるでしょうか。

このように、解釈の違いでエラー判定される場合もあるので、スマートフォンで実際に確認する必要があります。

修正・変更を行っていないのに、３つのエラー通知が来た場合は

・モバイルフレンドリーテストを実行する
・実機での検証を行う

この2点の検証を行ってから、エラーの対応を行います。対応後、再度Search Consoleで再検証の申請を行いましょう。