「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ 修正方法
2019年1月31日
「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ
修正方法
SEOに良かれと、「Google Search Console」を利用してますが、
ここのところ急激に「モバイル ユーザビリティ」で修正しろとメッセージが。
「コンテンツの幅が画面の幅を超えています」
Googleが指摘してきたんだから、SEOに余り好ましくないんだろうと思い、
問題ありげな個所を修正しました。
とは言っても、どこをどう修正するか？
肝心なところは教えてくれないサーチコンソール。
取りあえず ライブテストをページ ＞ モバイルフレンドリーテスト
をやってみる。
モバイルフレンドリーテストの直リンクはこちら
↓
https://search.google.com/test/mobile-friendly
モバイルフレンドリーテストの結果は・・・
はい？
「このページはモバイルフレンドリーです」ですって。
じゃ問題ないんですね。
しまい
いやいや、そんな訳ないしょ。
テストではフレンドリーだけど、
何かしらサーチコンソール君が気に入らないところがあるのかも？
で、ここからが本題です。
「コンテンツの幅が画面の幅を超えています」 でしょ。
指摘されていることを検証するすべとして、
ブラウザ「Firefox（ファイヤーフォックス）」を使いました。
問題ありげなページを表示させ、3つのキーを同時にプッシュ。
「Ctrl」＋「Shift」＋「M」
レスポンシブデザインモード に切り替わったと思います。
こんな感じに。
初期状態の画面サイズは「320×480」です。
あくまでもですが、私的検証方法は、
レスポンシブデザインモード（初期状態サイズ）の一番下に注目しました。
スクロールバーが表示されています。
つまり、画面からページがはみ出してると表示されます。
では、画面を横にしてみます。
ココのボタン↓
↓
横のスクロールバーが消えました。
もうお分かりですね。
画面下にスクロールバーが出現したら、右にバーをスライドすると、
画面からはみ出しているところが一目瞭然。
当サイトページの場合、
はみ出しているところを、スタイルシート（style.css）1ページだけの修正で、
100ページ程度のエラーは修正できました。
因みに修正箇所は、画像サイズをレスポンシブ用に、
pixから％に変更しました。
修正したことをモバイルユーザビリティで検証してもらう。
これ大事です。
検証の依頼は、
モバイルユーザビリティの「詳細」から、検証したい項目を選ぶ（クリック）。
次のページで「修正を検証」のボタンをクリック。
検証を開始したことが、ご丁寧にGメールで飛んできます。
追伸 2019年2月4日
本日、Gメールから修正したことの検証結果が届きました。
やはり、今回行った修正方法は正解だったようです。
119ページあったエラーが2ページまでに減りました。
残りのエラーも同じように検証し、修正していこうと思います。
以上
