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

Google Search Console Teamからサイトのモバイル ユーザビリティの問題の未修正部分についてという件名のメールが来た。

モバイル ユーザビリティでコンテンツの幅が画面の幅を超えていますという検証結果。
どうやらスマホなどで見ると画面おかしいよ。というメッセージらしい。

親切にどのページがおかしいかまでお知らせしてくれる。

確かに心当たりがある。
比較のため、表を作ったんだけど綺麗に並べようとしたら横にはみ出す。
基本的にPCで見て欲しいから、PCで見やすいように表を加工したのがこの問題につながったみたい。
↓見出しの枠より大きく表がはみ出しているでしょ。

縮めたら解決した。

モバイルフレンドリーテストでフレンドリーです。って出た。

幅を1000pixにするとはみ出るのでモバイルユーザビリティで問題が検出されてしまう。

↓こんなふうにフレンドリーではありませんと言う結果になりレンダリングされたページ（右）でも表示がおかしい。

スマホとかで見ていた人はこんなに見にくいページだったんですね。
いくらこっちが見て欲しい環境があったとしても今の時代多くの人はスマホで見ることを再認識した。
これからは意識するようにします。