モバイルユーザビリティーのエラーが出ました

こんにちは、ゆんつです。

この前Google Search Consoleのモバイルユーザビリティーという項目を見ていたらこんなエラーメッセージに出ていました。

1つは「クリック可能な要素が近すぎます」

もう1つは「コンテンツの幅が画面の幅を超えています」

というものです。

初めて検出されたのは2018年7月30日のようです。

その後一時期検出されていなかったようですが、最近になって再び検出されるようになったみたいです。

普段モバイルユーザビリティーの項目は見ていないので、ブログにこんなエラーが出ていることを初めて知りました。

一体何これは何だろう？

原因

調べてみると以下のようなことがわかりました。

クリック可能な要素が近すぎます

ボタンやリンクなどタップをすることが出来る要素の位置同士が近く、モバイルユーザーが誤ってタップしてしまうような要素の配置をしている場合に出るエラーのようです。

コンテンツの幅が画面の幅を超えています

画像や表がモバイルの画面からはみ出す場合に出るエラーのようです。

原因を追究する

僕のブログでエラーになっているのは以下の5つのURLです。

「クリック可能な要素が近すぎます」「コンテンツの幅が画面の幅を超えています」という2つのエラーは同じページで発生していることがわかります。

ためしに一番上にあるURLをクリックしてみるとライブページをテストという項目があるのでクリックしてみます。

ページの分析が始まりました。

結果は・・・

「このページはモバイルフレンドリーです」

えっ？

どういうこと？

モバイルフレンドリーなの？

でもグーグルでのこのページの検索結果を見てみるときっちり「ページがモバイルフレンドリーではありません」と書かれています。

うーん何でだ？

とりあえずエラーになっている5つのURLを全てテストしてみましたが、結果は3つがユーザーフレンドリーで2つがユーザーフレンドリーでは無いページでした。

改善する

とりあえずユーザーフレンドリーテストに合格しているページは置いておいて、ユーザーフレンドリーではないと判定されたページを調査してみます。

自分のモバイル環境からページを視認してみましたが特におかしいところは見当たりません。

タップしづらいとも感じないし、画像や表もちゃんとメイン画面の幅に収まっています。

うーん、さっぱり理由がわからん。

唯一引っ掛かる点はユーザーフレンドリーテストに合格する3つのページには表が無く、不合格になるページにはTinyMCE Advancedというプラグインで作成した大き目の表があるということです。

ひょっとしたらこれが原因なのでしょうか？

他に解決策が思い浮かばないのでとりあえずこの表をいじってみたいと思います。

表のプロパティを開くと幅という部分に数値が入っています。

ここに数値が入っていると画面から表がはみ出して見える場合があるそうなのでここを空白にします。

OKをクリックし、他の部分は何も変更しないでページを更新します。

ページの見た目は更新前も更新後も全く変わりません。

ただ「表のプロパティ」の幅の欄に数値が入っていたのを空白にしただけです。

そしてSearch Consoleの画面で今修正したページを再テストします。

このページはモバイルフレンドリーです！！

やったー！！

治ったぞー。

もう1つのURLも同じようにすることでユーザーフレンドリーなページになりました。

よかったよかった。

というわけで僕のユーザーフレンドリーじゃなかったページは表のプロパティの幅の欄を空白にすることでフレンドリーになりました。

ユーザーフレンドリーになったはいいが・・・

5つの記事にあったエラーのうち3つは何も改善しなくてもテストではユーザーフレンドリーで、残りの2つは表のプロパティの幅の欄を空欄にすることによりユーザーフレンドリーとなりました。

なったはいいのですが、問題は検索結果の画面に出ている「ページがモバイルフレンドリーではありません」というメッセージです。

テストに受かっているのだからこのメッセージは消えてほしいです。

修正が完了したので「修正を検証」というボタンがあるので押してみます。

この検証結果がOKなら「ページがモバイルフレンドリーではありません」というメッセージが消えてくれるかもしれません。

検証が始まりました。

エラーが出ました。

再度このページをユーザーフレンドリーのテストにかけてみますが、やはり結果は合格です。

もう！訳がわからん！！

色々と調べてみるとモバイルフレンドリーテストにさえ合格していれば大きな問題はなく、放っておいたらメッセージが消える場合もあるようなのでエラーになっている5つのURLを再度クロールしてもらえるようにFetch as Googleして放置しておきます。

変化があったらまた追記しますのでしばらくお待ちください。

追記

5つのURLがグーグルの検索ページで「ページがモバイルフレンドリーではありません」とされ、できる限りの対策をして半年経過した2019年2月現在。

久しぶりに確認してみたところ該当のURLからは「ページがモバイルフレンドリーではありません」というメッセージは消えていました！

というわけであくまでも僕の体験になりますが、モバイルユーザビリティーのエラーが出たら

上記の2点を行い、しばらく放っておいたら消えるかもしれません。

何かの参考になれば幸いです。

それでは、またー。