👌

レスポンシブ対応しているのに、モバイルユーザビリティテストでエラーが出る問題を解決した👌

1 min read

昨今では、スマホの流入が多いため、重要になりつつあるモバイルユーザビリティ。
サイトが適切にモバイル対応できていないと、googleクローラーにネガティブな影響を与えてしまう。
そのテストで出たエラーに解決に、少し時間がかかり、日本語の記事もなかったため、備忘録です。

お初投稿なので、お手柔かにお願い致します。

問題の発端

先日、google serach consoleで、急にモバイルユーザビリティに関するエラーが吐き出されるようになった。

それが以下の3点。

  • テキストが小さすぎて読めません。
  • クリック可能な要素同士が近すぎます。
  • コンテンツの幅が画面の幅を超えています。

加えて以下プレビューは以下。


(黒く塗りつぶしてあるとこにコンテンツが表示されています)

あれ? 検証ツールでは、全デバイス対応しているのに。。。

しかも厄介なのが、構造が同じページだと、モバイルフレンドリーだと表示されること。

整理すると、

  • 全デバイス対応でその時の横幅も完璧なのに、テストだと左半分にしか表示されない。
  • 左半分にしか表示されないのに、「コンテンツの幅が画面の幅を超えています。」と出る。
  • しかし、構造が一緒のページだと、モバイルフレンドリーでエラーもない。

解決と経緯

最初は、widthがやっぱダメなのか?と見直してみたりしました。
それでもダメで、調べていく内に、クローラーが誤認識しているみたいな記事もあり、google側の問題かなぁなんて思ったり、、、
けど、それらの記事も少しケースが違い、振り出しに。

初心に戻って、問題を整理しました。

  • ページの構造が一緒(正確にいうと、同じコンポーネント使っている)のもの同士でエラーの有無が変わるということは、今のところ大きなコード問題ではない。
  • つまり、コンテンツ内容がいけないのかもしれない。
  • コンテンツで差分ってどこだろう。

...... あ!

見つけました。コンテンツ内容の差分。
画像が挿入されているかいないか。

そして、モバイルフレンドリーテストのプレビューで画像を見てみると、あ!
読み込まれていない!画像はクロールされてないので、確かに、、

画像のスタイルを見てみると、

img {
 max-width: 100%;
}

おお、100%。

画像がないけど、100%ってついてるから、なんか噛み合ってないのかな?
なんて思いつつ、調べると、

https://support.nitropack.io/hc/en-us/articles/360062912633-Problems-With-Google-s-Mobile-Friendly-Test

この記事に出会いました。

記事どおりに、

html, body {
overflow-x: hidden;
}

を追加する。

すると、

全体に表示されて、エラーも出ず、モバイルフレンドリーになりました。

ちょっと無理矢理感あるけど、とりあえず余計な余白をCSSで隠すようにしたらうまくいきました。

学習段階では、品質とかなかなか気にできないところだったので、こういう小さなことも時間かかっても着実に吸収していこうと思います。

Discussion

ログインするとコメントできます