モバイルユーザビリティ コンテンツの幅が画面の幅を超えています

2022.07.18 2021.09.05

Google Search Consolのモバイルユーザビリティで「コンテンツの幅が画面の幅を超えています」というエラーが出る場合があります。

ここでは、主な原因と解消方法について解説します。

主な原因：コンテンツがカラム幅より大きい

「コンテンツの幅が画面の幅を超えています」のエラーは、ブログのカラム幅（画面の幅）よりも画像や表、動画などのコンテンツの幅の方が大きい時に生じるエラーです。

パソコンでエラーがでているページを閲覧してみると、コンテンツが横にはみ出していませんか？

多くのテーマでは、カラム幅以上のコンテンツを投稿しても、自動で幅を調整してくれます。

しかし、CSSで表示形式を変更している場合などは、このようなエラーが生じることがあります。

また、スマホやタブレットで同ページを閲覧してみるとエラーが発見できる場合があります。

エラー解消方法：何もせず「修正を検証」で解決するかも

多くの場合は、画像などのコンテンツを適切に調整することで解決します。

しかし、実際には問題がなにもないパターンがあります。Googleの機械の誤認でエラーメッセージが送られてくることがあるのです。

該当ページを確認して、画像などのコンテンツのはみ出しがない場合、そのまま「修正と検証」を試してみてください。

「修正と検証」の結果は、だいたい1〜2日後にGoogleから検証結果が届きます。

これでも解決しない場合は、「モバイルフレンドリーテスト」を試してみましょう。

まとめ

「コンテンツの幅が画面の幅を超えています」のエラーに対しては、画像などのコンテンツがカラムの幅を超えていることが原因として多いですが、意外になにもせずに解決する場合もあります。

エラーが出た場合は、焦らず落ち着いて解消方法を試してみましょう。

2020.02.28 2020.02.18

Google Search Consoleのモバイルユーザビリティのエラーとは

Google Search Consoleのモバイルユーザビリティのエラーが出ていました。

モバイルユーザビリティとは、サイトをスマホで見た時に、閲覧者が見やすいかどうか、使いやすいかどうかをGoogleの基準に則って教えてくれるサービスです。

今回出たエラーがどんなエラーだったかというと

エラー テキストが小さすぎて読めません
エラー クリック可能な要素同士が近すぎます
エラー コンテンツの幅が画面の幅を超えています

の3つが出ていました。

「エラー コンテンツの幅が画面の幅を超えています」の原因

該当ページはtableタグを使って表示しています。

Google Search Console

Use Search Console to monitor Google Search results data for your properties.

スマホの見た目をチェックできる「モバイルフレンドリーテストのページ」でレンダリングテストしてみると、表の横幅が大きすぎて、それをスマホの画面に収めるために、文字や画像が縮小されてしまっていました。

URLの文字列が折り返されなかったので、テーブルが画面からはみ出すほど横に伸びたのが原因です。
なので、テーブルの中身を強制的に折り返し、tableも大きくなりすぎないようにcss設定にしました。

table {
max-width : 100%;
table-layout : fixed;
}
table tr,td {
overflow-wrap: break-word;
word-wrap: break-word;
}

table-layout : fixed;

で整えるかは、好みの問題かもしれません。

URLは単語の途中で折り返しても問題ないです。
そもそも訪問者に読ませる目的ではなくコピペ出来るように載せているので、画面からはみ出してコピペできない事態を避けるために折り返してでもセルに収まるようにしました。

折り返しのcssもググった方が自分で考えるより早いので、検索したところこちらのサイトに分かりやすく書かれていました。

【CSS】 テキストを折り返す方法！自動で改行・レスポンシブにも対応

「テキストが中途半端なところで折り返される」 「英語や文字がはみ出てしまう」 こんな悩みを持ったことはありませんか？ 小さなことですが、サイトの印象に関わる深刻な悩みの一つです。 例えば、見出しに英語が含まれていて、それ ...

こちらのサイトではテーブル幅をpxで指定してましたが、px固定するとテーマを変えた時に困るとイケないので、max-widthを100%にしてやってみたのが上記のコードです。

その結果、上手く画面に収まってくれたので、これでいきます。

「エラー テキストが小さすぎて読めません」の原因

横に伸びすぎたテーブルを画面におさめるために縮小表示のようになってしまったのが原因でした。

今回はテーブルをページの横幅以内に入るように文章を折り返し設定にしたので、このエラーも同時になくなりました。

エラー クリック可能な要素同士が近すぎますの原因

このエラーも画面の文字が小さすぎたので、リンクのテキストも小さくなり、タップするリンクが近づきすぎたのが原因でした。

テーブル内の文字列を折り返して、縮小表示のようにならなくなったので、テキストの大きさが戻ってエラーもなくなりました。