2020/04/06にGoogle Search Consoleから「モバイル ユーザビリティ」の問題「コンテンツの幅が画面の幅を超えています」の通知が来ました。
対応しないとGoogleさんに評価を下げられそうだったので、確認・修正してみたので、その経緯をご紹介します。
こんな方におすすめ
- WordPressでブログを運営している方
目次
Google Search Consoleからのエラーメッセージ
改めてご紹介しますが、今回はSearch Consoleから次のようなエラーメールが届きました。
気になったので、エラーを早速みてみます。
どこかわかんないよ！って思ったら、下部に例として該当ページが掲載されていました。
実際にスマホで当該画面を確認してみると。確かに表のコンテンツが画面の横幅を大きくはみ出していて、横にスクロールしないと見れません。
「コンテンツの幅が画面の幅を超えています」を修正してみた
何故？と思って該当箇所をhtmlを観るとwidthが固定されている部分がありました。1164pxであったり、582pxであったり。
Webコンテンツで表コンテンツの幅を指定するときはサイズを"320 px 以下"に抑えるか、%で指定しないとはみ出ます。指定するのがめんどうなのでwidthをごそっと消しました。
結果、横スクロールしないでも１画面に収まるようになりました。
わかりにくいのでBefore-Afterを載せるとこんな感じです。
何のプラグインを使っているか忘れちゃったのですが(;´･ω･)テーブルのサイズをGUIでコントロールすると、勝手にpx指定が入っちゃうんですよね。
テキストエディタで直すのがめんどうなので、そういう仕様やめてもらいたい。。
Search Consoleさんにエラー解消を報告するべく「修正を検証」を押下したら、保留中になりました。
無事エラーが解決出来ていたら、ご報告します！
★04/07追記
翌日には合格の通知が来ました！
まとめ
Search Consoleさんからエラー通知で内容を確認しましたが、見た目が崩れているコンテンツが見つかって良かったです。
ブログ運営されている皆さんも、Search Consoleからの通知は無視せずに確認しましょう！
エラー原因は人それぞれだと思いますが、該当コンテンツをスマホで観ればエラー箇所が特定できるので、原因も特定しやすいです。なので、先ずはスマホで該当コンテンツを観るのが大事だと思います。
といったところで、今回はここまでです。
ご閲覧ありがとうございました。
ではでは(^^)/
