本記事では、私が実際に本ブログで発生したGoogle Search Consoleのエラー「コンテンツの幅が画面の幅を超えています」を解決した方法を解説しています。
この記事を読むことで、Google Search Consoleのエラー「コンテンツの幅が画面の幅を超えています」がなぜ発生ているのかを理解することができ、解決への手助けになればと思います。
「コンテンツの幅が画面の幅を超えています」のエラー発生状況
8月18日の朝、Googleからメールが届いていました。

上記のメール文面にある通り、「コンテンツの幅が画面の幅を超えています」以外にもエラーメッセージがあります。
・「クリック可能な要素同士が近すぎます」
・「テキストが小さすぎて読めません」
・「コンテンツの幅が画面の幅を超えています」
他の記事を参考にすると、この3つはセット的な感じで表示されているようです。
従って、ひとつ解決すれば、他の2つも解決するということです。
この中で一番分かりやすいと思われる、「コンテンツの幅が画面の幅を超えている」に着眼して対処していきたいと思います。
では、早速、Google consoleにログインし、状況を確認していきましょう。
該当URLの確認
まずは、Google Consoleにログインします。
モバイルユーザビリティをクリック

次に、エラー文をクリックします。

すると、該当URLが表示されます。

幸いにも、3つのエラー分とも対象となっている記事は1つで同じ記事でした。
該当となる記事はこちらです。

しかし、エラー該当記事は、なんと4月の記事!今は8月…。
昨日書いた記事なら分かるけれども…。
なんで、4ヶ月前の記事で急に…?
その理由と原因は、後ほど判明いたします。
モバイル・フレンドリー・テストにて確認
さらなる、エラー原因の追求のため、モバイル・フレンドリー・テストにて確認します。
モバイル・フレンドリー・テストのページはこちら

こちらにて、該当するURLを入力します。
すると、モバイル・フレンドリー・テストの結果が出ます。


エラーなかった。あぁ、よかった、よかった。褒められちゃったよ。
ってならない!ならない!
仕方ないので、該当ページを吟味していきます。
表示を確認
まずは、パソコンで該当URLの表示確認。

問題なし!
次に、自分の携帯で該当記事の表示確認。

問題なし!
次に、Google Chromeの検証(右クリック)でそれぞれの携帯/タブレットでの表示確認


問題なし!
困りました。見た目には全く問題がありません。
本当にエラーは、Googleのエラーだったのか…?
もう一度考えてみました。
名探偵もふぃの推理タイム
これまでの検証で、気になる問題点は見つけられませんでした。
もう一度、エラーを振り返ってみましょう。

なぜ4ヶ月前の記事だけなのか…?
他の記事と違うところは何か…?
最近、何か変更したか?(プラグイン更新など)
原因はプラグイン更新によって、不備な点が公になった。
自分の書いた記事をよく比較してみると、エラー該当記事ではプラグイン「Table press」を利用した、表を埋め込んでおります。

まず、プラグインの『Table Press』を更新しました。
そして、WordPress 5.6の更新という大型アップデートもありました。
しかし、それだけではエラーは起こるはずがありません。
その結果、私の記載するコードの不備が露呈し、エラーの発生となりました。
エラーコードの発見
該当記事には、テーブルが2つあります。
その1つ目の編集画面がこちらです。

列が3つあるので、列幅を40%, 30%, 30%と分けて振っています。
それでは、もう一つの表はどうかというと、こちらになります。

お分かりでしょうか?列幅を指定していませんよね?
結果
列幅を指定したことにより、Google Search Consoleからのエラーはなくなりました。
何もエラーがなく、コンピューターがエラーを出すとは考えにくいです。
何かしら見えないところでエラーが発生している可能性があります。
ひとつひとつ検証していくことが、エラー解消の道筋になると思います。
参考記事




コメント