レスポンシブ対応しているのに、モバイルユーザビリティテストでエラーが出る問題を解消する👌
昨今では、スマホの流入が多いため、重要になりつつあるモバイルユーザビリティ。
サイトが適切にモバイル対応できていないと、googleクローラーにネガティブな影響を与えてしまう。
そのテストで出たエラーに解決に、少し時間がかかり、日本語の記事もなかったため、備忘録です。
お初投稿なので、お手柔かにお願い致します。
問題の発端
先日、google serach consoleで、急にモバイルユーザビリティに関するエラーが吐き出されるようになった。
それが以下の3点。
- テキストが小さすぎて読めません。
- クリック可能な要素同士が近すぎます。
- コンテンツの幅が画面の幅を超えています。
加えて以下プレビューは以下。
(黒く塗りつぶしてあるとこにコンテンツが表示されています)
あれ？ 検証ツールでは、全デバイス対応しているのに。。。
しかも厄介なのが、構造が同じページだと、モバイルフレンドリーだと表示されること。
整理すると、
- 全デバイス対応でその時の横幅も完璧なのに、テストだと左半分にしか表示されない。
- 左半分にしか表示されないのに、「コンテンツの幅が画面の幅を超えています。」と出る。
- しかし、構造が一緒のページだと、モバイルフレンドリーでエラーもない。
解決と経緯
最初は、widthがやっぱダメなのか？と見直してみたりしました。
それでもダメで、調べていく内に、クローラーが誤認識しているみたいな記事もあり、google側の問題かなぁなんて思ったり、、、
けど、それらの記事も少しケースが違い、振り出しに。
初心に戻って、問題を整理しました。
- ページの構造が一緒(正確にいうと、同じコンポーネント使っている)のもの同士でエラーの有無が変わるということは、今のところ大きなコード問題ではない。
- つまり、コンテンツ内容がいけないのかもしれない。
- コンテンツで差分ってどこだろう。
...... あ！
見つけました。コンテンツ内容の差分。
画像が挿入されているかいないか。
そして、モバイルフレンドリーテストのプレビューで画像を見てみると、あ！
読み込まれていない！画像はクロールされてないので、確かに、、
画像のスタイルを見てみると、
img {
max-width: 100%;
}
おお、100%。
画像がないけど、100%ってついてるから、なんか噛み合ってないのかな？
なんて思いつつ、調べると、
この記事に出会いました。
記事どおりに、
html, body {
overflow-x: hidden;
}
を追加する。
すると、
全体に表示されて、エラーも出ず、モバイルフレンドリーになりました。
ちょっと無理矢理感あるけど、とりあえず余計な余白をCSSで隠すようにしたらうまくいきました。
Discussion