サーチコンソールでモバイル ユーザビリティ の問題が検出されちゃった！どうしよう…
この記事では、サーチコンソールで「クリック可能な要素同士が近すぎます」の問題が出た場合の解決方法をお伝えします。
問題の検出
サーチコンソールでこのような表示が出た場合、投稿した記事の修正が必要です。
Search Console で、貴サイトが モバイル ユーザビリティ の問題に影響を受けていることが検出されました。サイトから検出された問題は以下のとおりです。これらの問題をできる限り解決されることをおすすめします。問題を解決することで、サイトのエクスペリエンスや Google 検索結果での表示を最適化できます。
主な問題
・クリック可能な要素同士が近すぎます
サーチコンソールのエラー表示をクリックすると、問題が検出された投稿ページのURLを確認することができます。
私の場合は、ホテル紹介をした記事で旅行会社のリンクを貼ったページで問題が検出されました。
旅行会社のリンク先が横一列に並んでしまい、記事を読むユーザーのクリックの操作性が悪くなっています。
エラー記事の編集画面
WordPressの投稿記事の編集画面は、このようになっています。ブロックエディタの「カスタムHTML」のブロックにリンク先のURLをペーストしてある状態です。このままでは、ユーザーの表示画面で横並びになってしまいます。
「カスタムHTML」を連続して使用した際に、表示画面のクリック部分の間隔が近くなってしまったことが原因です。
修正方法
「カスタムHTML」が横並びにならないように修正する必要があります。そこで使うブロックが「縦積み」のブロックです。このブロックは写真などの表示を縦に並べたい時にも使うことができます。今回は、「縦積み」ブロックで、「カスタムHTML」のブロックが横並びになるのを防ぐ役割に使います。
使い方はこちら
１．「縦積み」のブロックを選択
２．表示されたブロックの中に「カスタムHTML」のブロックを配置し、表示したいURLをペーストする
３．さらに下のブロックの中に「カスタムHTML」のブロックを配置を繰り返す
手順１.「縦積み」のブロックを選択すると、横長のブロックと破線で囲われたブロックが表示されます。
手順２．上のブロックのプラスマークを選択すると、ブロックを選択することができます。今回は「カスタムHTML」をここに置きます。
手順３．さらに下のブロックに縦並びで置きたいブロックが選べるので、ここでも「カスタムHTML」を選択して、中にURLをペーストします。
編集が完成した画面が上の状態です。「縦積み」の大きなブロックの中に、「カスタムHTML」のブロックが収納されているのが分かるかと思います。
修正後のユーザー表示画面
編集画面の修正後に、ユーザー表示画面に移動すると、クリック部分が横並びから縦に並んだ状態になりました。これで、ユーザーが誤クリックするのを防ぐことができます。
サーチコンソール上で、問題が修正されると「修正完了の確認通知」を受け取りエラーを取り下げてもらえます。
以上が修正方法になります。
プラグインやCSSの編集も不要で、簡単に修正できるので、この方法を試してみてください！
コメント