「モバイル ユーザビリティ」の問題が検出が出たときの対処法！

こんにちは！

ここにたどり着いたということはこのようなメールがきた方ですよね！

Search Console により、貴サイトに影響する「モバイル ユーザビリティ」関連の問題が 3 件検出されました。

え、問題！？って心臓がバクバクしますよね。
バクバクしました。。。

私が実際に行った修正方法を今回はメモとして残していきたいと思います。

でも誤検出も多いらしいです！
誤検出の時の対処法も一緒にご紹介します。

何かの参考になれば嬉しいです^^

モバイル ユーザビリティとは？

例で考えてみましょう。
おすすめのアニメを知りたいな〜と思った場合。検索すると思います。

たどり着いたサイトがモバイル対応ではなくPCのサイズだと拡大しないと見えないですよね。
読みづらいサイトは離脱率が高くなりますよね。

そのような対応がされていることがとても大事なのです。

私が検出されたモバイルユーザービリティの問題

私の場合は以下の問題が検出されました。

どういう問題なのか？とうことをまず理解することが大事です。
この３つを詳しく見てみます。

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

画像にするとこのような感じです。

画像がモバイル画面よりも幅が大きくなってしまっていますよね。
画像だけではなく、文字がはみ出してしまっていることもあります。
そう言う場合、ユーザーが右にスクロールしないといけない手間がありますよね。

モバイル対応されていないと非常に読みづらい！！！

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

これはリンクとリンクが近すぎる！ということです。

なぜ問題なのか。
間隔がないリンク同士はアクセスしたユーザーが誤クリックしてしまう可能性があるからです。
例えばこのような経験ありませんか？広告の近くにリンクがある場合。
ユーザーは広告をクリックしたいわけじゃないのに間違えてクリックしてしまう。
チガーーーーウ！！！ってイライラしますよね。

それではどれくらいの間隔が良いのか。

大人の指の腹のサイズが10mmとされているので、リンク同士の間隔は7mm以上空けることが望ましいとされています。
但し重要ではないリンクは7mm以下でも良い

引用：モバイル ユーザビリティの問題

ぜひ意識してみてください！

テキストが小さすぎて読めません

これはそのままで文字が小さすぎて読めない！ということですね。
Googleは16px以上のフォントサイズを推奨しています。

今一度確認してみてください！

解決方法

問題を修正したり、誤検出の場合はどのように申告するのかご紹介します。

まずはSearch Consoleにログインしてください。
メール内の「モバイル ユーザビリティの問題を解決する」をクリックしても良いです。

メールから飛んだ方は「モバイル ユーザビリティ」画面が表示されているかと思います。
表示されていない方は左側にある「モバイル ユーザビリティ」をクリックすると表示されます。

そうすると右側に問題が記載されていますよね！
クリックすると問題が検出されているURLが表示されているはずです。

※私は解決しまっているため、表示はされていませんm(_ _)m

どこのURLが対応必要なのか分かったと思います。
メモしておいてくださいね。

モバイルフレンドリーテストをやってみよう！

Google公式には「👉モバイルフレンドリーテスト」というのがあり、簡単に対応されているのかチェックすることができます。
ここで誤検出かも！？というのが分かります。

では先ほどメモしたURLで確認してみましょう^^
アクセスするとこのような画面が表示されますので、赤枠にテストしたURLを入力してください。

「URLをテスト」をクリックするとテスト中というポップアップが表示されます。
しばらく待ちます。。。

少し待つと結果が表示され、問題がないとこのような画面になります。
私の場合は全てこのようになりました。

もし問題が解決されていない場合は問題の内容が表示されますので、また修正を行ってください。

問題を解決！

全て「このページはモバイル フレンドリーです」となりましたら
先ほどのURLが表示されていた画面に戻ってください。

そこに「修正を検証」というボタンがありますのでそちらをクリックしてください。

メールがこのようにくるので、結果を待ちます！
私は数日かかりました！

修正が確認されるとまたメールがきますので、Search Consoleで確認してみましょう！
合格となっていますね！！やったーー！

これで完了です^^

まとめ

いかがでしたでしょうか？
以上が私が対応した内容になります。

問題がある！とメールが来るとなんだか焦ってしまいますが。。
誤検出もあるようなので冷静に対応することが大事です。

ありがとうございました･:*+.\(( °ω° ))/.:+