Google Search Consoleエラー「コンテンツの幅が画面の幅を超えています」の解決法

ブログ

本記事では、私が実際に本ブログで発生した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からのエラーはなくなりました。

何もエラーがなく、コンピューターがエラーを出すとは考えにくいです。

何かしら見えないところでエラーが発生している可能性があります

ひとつひとつ検証していくことが、エラー解消の道筋になると思います。

参考記事

「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ 修正方法 | HCZ BLOG
「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ 修正方法 SEOに良かれと、「Google Search Console」を利用してますが、 ここのところ急激に「モバイル ユーザビリティ」で修正しろとメッセージが。 「コンテンツの幅が画面の幅を超えています」 Googleが指摘してきたんだから、問題...
「コンテンツの幅が画面の幅を超えています」が直らないのと格闘したお話
「別の業者さんに作ってもらったこのサイトがモバイルフレンドリーテストに通らないんですが、見ていただけますか?」というお仕事を請けたときのお話。見た感じ別に悪いとこなさそうやし、まぁすぐ解決するやろとたかをくくっていたのですが、まずどこが悪い
コンテンツの幅が画面の幅を超えています|原因と解決策
モバイルユーザビリティの問題:コンテンツの幅が画面の幅を超えていますブログ運営を行っていくと、Search Consoleからこのようなメールが届くことがあります。それほど大きな問題ではありませんが、Googleからこういったメールが届くと
モバイルユーザビリティエラーが増えていて、原因がわかりません - Search Console Community
モバイルユーザビリティの問題:コンテンツの幅が画面の幅を超えています
目次ケース1:モバイル用のスライドメニューSearch Console からのメール調査と修正解決ケース2:コード表示の折り返しSearch Console で問題が指摘されていた調査と修正解決ケース3:何も修正しなかっ ...
”コンテンツの幅が画面の幅を超えています”のモバイル ユーザビリティ修正方法
Google Search Console Teamからサイトのモバイル ユーザビリティの問題の未修正部分についてという件名のメールが来た。モバイル ユーザビリティでコンテンツの幅が画面の幅を超えていますという検証結果。どうやらスマホなどで

コメント