SearchConsoleモバイルユーザビリティの問題を解決した方法

「モバイル ユーザビリティ」の問題が新たに検出されました
という問題を解決した方法を紹介します。

モバイル ユーザビリティの問題の内容

Search Console からメールが来ました。（かなり不安）

「モバイル ユーザビリティ」の問題が新たに検出されました

（ちょっとコワイ）

メールのリンク先で確認すると、エラーは2件ありました。

1.クリック可能な要素同士が近すぎます
2.コンテンツの幅が画面の幅を超えています

早く直してしまいましょう。

修正の注意点

Google がクロールした日を基準に、問題発生・メール送信されるようなので、既に対応済みの件が問題としてあがってくる場合があります。

現状の問題を見極めるために、「モバイル フレンドリー テスト」を実行して結果を確認します。

モバイル フレンドリー テスト – Google Search Console

修正の内容

修正項目
1.クリック可能な要素同士が近すぎます
2.コンテンツの幅が画面の幅を超えています

今回、要素同士の位置は対応済で、コンテンツの幅は未対応でした。

1番の要素同士の位置の問題は、広告と広告の間隔が狭かったので、後ろの広告を標示しないように変更済みでした。

2番のコンテンツの幅は、WordPressのCSSで、img タグをレスポンシブ対応に変更するために、下記のコードを追加しました。

img {
    max-width: 100%;
    height: auto;
}

修正後、「モバイル フレンドリー テスト」を実行して結果を確認します。

モバイル フレンドリー テスト – Google Search Console

「このページはモバイル フレンドリーです
このページは、モバイル端末での使い勝手に優れています」

こう表示されたので、検証を申請して合否の結果を待ちました。
保留から合格に変われったので、今回の修正は完了です。
（検証結果は早ければ翌日に出ます）

まとめ

エラーのお知らせは、ちょっと焦りますよね。
でも以下の手順で対応すれば大丈夫です。

• 「モバイル フレンドリー テスト」で状況を確認する
• 問題を修正する
• 「モバイル フレンドリー テスト」で修正の結果を確認する
• 検証を依頼する
• 検証結果を確認する

すぐに結果が出るので安心しました。