修正方法

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

Categories | ホームページ SEO

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

修正方法

 

SEOに良かれと、「Google Search Console」を利用してますが、

ここのところ急激に「モバイル ユーザビリティ」で修正しろとメッセージが。

「コンテンツの幅が画面の幅を超えています」

Googleが指摘してきたんだから、SEOに余り好ましくないんだろうと思い、

問題ありげな個所を修正しました。

 

Screenshot 2019 01 31 400x282 「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ 修正方法

 

とは言っても、どこをどう修正するか?

肝心なところは教えてくれないサーチコンソール。

取りあえず ライブテストをページ > モバイルフレンドリーテスト

をやってみる。

 

31 01 400x227 「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ 修正方法

モバイルフレンドリーテストの直リンクはこちら
 ↓
https://search.google.com/test/mobile-friendly

 

モバイルフレンドリーテストの結果は・・・

 

31 02 400x277 「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ 修正方法

 

はい?

「このページはモバイルフレンドリーです」ですって。

じゃ問題ないんですね。

しまい

 

いやいや、そんな訳ないしょ。

テストではフレンドリーだけど、

何かしらサーチコンソール君が気に入らないところがあるのかも?

で、ここからが本題です。

 

「コンテンツの幅が画面の幅を超えています」 でしょ。

指摘されていることを検証するすべとして、

ブラウザ「Firefox(ファイヤーフォックス)」を使いました。

問題ありげなページを表示させ、3つのキーを同時にプッシュ。

「Ctrl」+「Shift」+「M」

レスポンシブデザインモード に切り替わったと思います。

こんな感じに。

 

31 04 256x400 「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ 修正方法

 

初期状態の画面サイズは「320×480」です。

あくまでもですが、私的検証方法は、

レスポンシブデザインモード(初期状態サイズ)の一番下に注目しました。

 

31 05 256x400 「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ 修正方法

 

スクロールバーが表示されています。

つまり、画面からページがはみ出してると表示されます。

では、画面を横にしてみます。

ココのボタン↓

 

31 06 256x400 「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ 修正方法

31 07 300x218 「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ 修正方法

横のスクロールバーが消えました。

もうお分かりですね。

画面下にスクロールバーが出現したら、右にバーをスライドすると、

画面からはみ出しているところが一目瞭然。

 

31 08 280x400 「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ 修正方法

 

当サイトページの場合、

はみ出しているところを、スタイルシート(style.css)1ページだけの修正で、

100ページ程度のエラーは修正できました。

因みに修正箇所は、画像サイズをレスポンシブ用に、

pixから%に変更しました。

 

 

修正したことをモバイルユーザビリティで検証してもらう。

これ大事です。

 

検証の依頼は、

モバイルユーザビリティの「詳細」から、検証したい項目を選ぶ(クリック)。

 

31 10 400x164 「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ 修正方法

 

次のページで「修正を検証」のボタンをクリック。

31 09 300x148 「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ 修正方法

 

 

検証を開始したことが、ご丁寧にGメールで飛んできます。

31 11 400x286 「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ 修正方法

 

追伸 2019年2月4日

本日、Gメールから修正したことの検証結果が届きました。

 

31 12 400x294 「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ 修正方法

やはり、今回行った修正方法は正解だったようです。

119ページあったエラーが2ページまでに減りました。

 

31 13 400x286 「コンテンツの幅が画面の幅を超えています」モバイル ユーザビリティ 修正方法

 

残りのエラーも同じように検証し、修正していこうと思います。

以上

Comment(0) | Trackback(1)

TAGS: / / | 2019年1月31日 |