モバイルユーザビリティの問題発生
先日、このサイトにちょっとした問題が発生した。
アクセスのデータ分析を行う「Google Search Console(サーチコンソール)」というサービスを利用しているのだが、そこからこんなメールが届いた。
![問題発生](https://shikaolog.com/wp-content/uploads/2022/10/59ea9bfcbecad683c469c6c2a0b6d6f2-500x443.jpg)
どうやらサイトのモバイル表示に問題が発生したらしい。
それぞれ「クリック可能な要素が近すぎる」、「テキストが小さすぎる」、「コンテンツの幅が画面の幅を超えている」とのこと。
たしかにサーチコンソールにアクセスしてみると・・・
![サチコ画面](http://shikaolog.com/wp-content/uploads/2022/10/1a4ba79f4b711790ad862f9ac2f76fd2-800x289.jpg)
同じ文言が表示されている。
さてどこを修正しようか・・・
修正箇所が見つからない?
しかし・・・スマホで該当のページを何度も確認したが、特に修正すべき箇所が見つからなかった。
サーチコンソールはページ内のどこに問題があるか具体的には教えてくれないのだ。
試しにモバイルフレンドリーテストを行ってみると、
![テスト結果](http://shikaolog.com/wp-content/uploads/2022/10/b3f15427a92a751888027154be00fc0a-800x189.jpg)
問題はないらしい。
どういうことかとネットで調べていたが、どうもbotによるCSSの読み込み遅れなどによって誤検知してしまうことがあるとの事。
どうしても修正すべき箇所が見つからなかったので、特に何もせず「修正を検証」してみた。
![修正検証](http://shikaolog.com/wp-content/uploads/2022/10/616ea5b1dcd227475132151a1ea217cf-800x360.jpg)
すると翌日サーチコンソールからのメール到着。
![メール2](https://shikaolog.com/wp-content/uploads/2022/10/554ae21cb3aa616cdbd6d977c015983e-500x357.jpg)
修正が確認できたらしい。こちら側では何もしてないが。
サーチコンソールの画面を見ても、
![合格](http://shikaolog.com/wp-content/uploads/2022/10/3cfa9aa801263d128485a0458321844c-800x333.jpg)
合格の文字。
上の画像では「コンテンツの幅が〜」の部分だけに合格マークがついているが、「該当なし」になっている他の部分も修正完了扱いになっているようだ。
グラフ表示の部分でも検証後に赤いエラー表示が消えている。
![グラフ](http://shikaolog.com/wp-content/uploads/2022/10/1627f578ec068696ca781e5ba35843dc.jpg)
とりあえず問題は解決した。
サーチコンソール先生はけっこう誤検知が多いらしいので慌てずに対処したい。
コメント