本記事では、私が実際に本ブログで発生したGoogle Search Consoleのエラー「コンテンツの幅が画面の幅を超えています」を解決した方法を解説しています。
この記事を読むことで、Google Search Consoleのエラー「コンテンツの幅が画面の幅を超えています」がなぜ発生ているのかを理解することができ、解決への手助けになればと思います。
「コンテンツの幅が画面の幅を超えています」のエラー発生状況
8月18日の朝、Googleからメールが届いていました。
上記のメール文面にある通り、「コンテンツの幅が画面の幅を超えています」以外にもエラーメッセージがあります。
・「クリック可能な要素同士が近すぎます」
・「テキストが小さすぎて読めません」
・「コンテンツの幅が画面の幅を超えています」
他の記事を参考にすると、この3つはセット的な感じで表示されているようです。
従って、ひとつ解決すれば、他の2つも解決するということです。
この中で一番分かりやすいと思われる、「コンテンツの幅が画面の幅を超えている」に着眼して対処していきたいと思います。
では、早速、Google consoleにログインし、状況を確認していきましょう。
該当URLの確認
まずは、Google Consoleにログインします。
モバイルユーザビリティをクリック
次に、エラー文をクリックします。
すると、該当URLが表示されます。
幸いにも、3つのエラー分とも対象となっている記事は１つで同じ記事でした。
該当となる記事はこちらです。
しかし、エラー該当記事は、なんと4月の記事！今は８月…。
昨日書いた記事なら分かるけれども…。
なんで、４ヶ月前の記事で急に…？
その理由と原因は、後ほど判明いたします。
モバイル・フレンドリー・テストにて確認
さらなる、エラー原因の追求のため、モバイル・フレンドリー・テストにて確認します。
モバイル・フレンドリー・テストのページはこちら
こちらにて、該当するURLを入力します。
すると、モバイル・フレンドリー・テストの結果が出ます。
エラーなかった。あぁ、よかった、よかった。褒められちゃったよ。
ってならない！ならない！
仕方ないので、該当ページを吟味していきます。
表示を確認
まずは、パソコンで該当URLの表示確認。
問題なし！
次に、自分の携帯で該当記事の表示確認。
問題なし！
次に、Google Chromeの検証（右クリック）でそれぞれの携帯／タブレットでの表示確認
問題なし！
困りました。見た目には全く問題がありません。
本当にエラーは、Googleのエラーだったのか…？
もう一度考えてみました。
名探偵もふぃの推理タイム
これまでの検証で、気になる問題点は見つけられませんでした。
もう一度、エラーを振り返ってみましょう。
なぜ４ヶ月前の記事だけなのか…？
他の記事と違うところは何か…？
最近、何か変更したか？（プラグイン更新など）
原因はプラグイン更新によって、不備な点が公になった。
自分の書いた記事をよく比較してみると、エラー該当記事ではプラグイン「Table press」を利用した、表を埋め込んでおります。
まず、プラグインの『Table Press』を更新しました。
そして、WordPress 5.6の更新という大型アップデートもありました。
しかし、それだけではエラーは起こるはずがありません。
その結果、私の記載するコードの不備が露呈し、エラーの発生となりました。
エラーコードの発見
該当記事には、テーブルが２つあります。
その１つ目の編集画面がこちらです。
列が３つあるので、列幅を40%, 30%, 30%と分けて振っています。
それでは、もう一つの表はどうかというと、こちらになります。
お分かりでしょうか？列幅を指定していませんよね？
結果
列幅を指定したことにより、Google Search Consoleからのエラーはなくなりました。
何もエラーがなく、コンピューターがエラーを出すとは考えにくいです。
何かしら見えないところでエラーが発生している可能性があります。
ひとつひとつ検証していくことが、エラー解消の道筋になると思います。
参考記事
コメント