サーチコンソールから自分のブログで「モバイル ユーザビリティの問題が検出されました」ってメールが来てる。。
・テキストが小さすぎて読めません
・クリック可能な要素同士が近すぎます
って言われても、どうすればいいのかな?
こんな悩みの解決に参考となる記事です。
・エラー内容の確認
・問題が検出されたページの調べ方
・モバイルユーザビリティの問題があるか確認する方法
・タグページで問題が検出された場合の対処方法(今回はほぼ何もしなくてもOKでした)
先日、当ブログのタグページでモバイルユーザビリティの問題が検出されました。
そのときの対処方法を紹介します。
結論、ほぼ何もしなくても解決しました。タグページの場合は、何もしなくてもOKかもしれません。
エラーを修正すると、サイト評価が良くなりますので、ぜひ試してみて下さい。
エラー検出時は、ワードプレステーマ「JIN」を使用していました。
そのため、JINのタグページでのみ、今回の対処が有効かもしれません。
エラー内容の確認
まず、モバイルユーザビリティは、スマートフォンやタブレットなどの小さな画面の機器で、見やすく使いやすいかどうかを意味しています。
その中で、今回検出されたエラーがどんなことを示しているか見ていきましょう。
エラー①:テキストが小さすぎて読めません
ユーザーが読みやすいように、フォントサイズを適切に修正してねって意味ですね。
サーチコンソールのヘルプでは、以下のようにエラー内容を説明しています。
このレポートには、フォントサイズが小さすぎて文字が読めず、モバイル ユーザーがピンチ操作をして拡大しなければならないページが示されます。ウェブページのビューポートを指定した後にフォントサイズを設定して、ビューポート内で適切にスケーリングします。フォントサイズに関するベストプラクティスについて詳しくは、読みやすいフォントサイズを使用する方法についての記事をご覧ください。
引用元:モバイル ユーザビリティ レポート-Seach Console ヘルプ
Googleが推奨するフォントサイズは16pxです。最小でも12pxとされています。
この大きさになっているか確認しましょう。
エラー②:クリック可能な要素同士が近すぎます
ボタンやリンクなどの間隔を適切に広げて、ユーザーがタップしやすくしてねって意味ですね。
サーチコンソールのヘルプでは、以下のようにエラー内容を説明しています。
このレポートには、ボタンやナビゲーション リンクなどのタップ要素同士が近すぎるために、モバイル ユーザーが隣接する要素をタップせずに指を使って目的の要素をタップすることが容易にできないサイトの URL が示されます。これらのエラーを修正するには、ボタンやナビゲーション リンクのサイズやスペースをモバイル ユーザーに適するように正しく設定します。詳しくは、タップ ターゲットのサイズを適切に調整するをご覧ください。
引用元:モバイル ユーザビリティ レポート-Seach Console ヘルプ
タップするターゲットは、上下左右で8px以上の間隔を空けることが推奨されています。
間隔が空いているか確認しましょう。
それでは、エラー内容がわかったので、次に進みます。
問題が検出されたページを調べる
まず、問題がどこで検出されたのかを調べましょう。
Google Search Console のモバイルユーザビリティ画面が開かれます。
これで、どのページに問題があったかがわかりますので、クリックして該当ページを確認します。
今回はエラー2つとも同じページで検出されました。
問題が検出されたのは、「ノートPC」のタグページでした。
タグページとは、タグ付けされた記事を集めたページです。
当初、有料ワードプレステーマ「JIN」を使っていたのですが、タグページはデフォルトでカスタマイズもしていませんでした。
スマホで確認しましたが、問題があるのか疑問な状態でした。
モバイルユーザビリティの問題があるか確認する
本当に問題があるのか確認するために、Googleのモバイルフレンドリーテストで試してみました。
モバイルフレンドリーテストは、Google Search Consoleのツールです。
モバイルデバイスでのページの使いやすさを評価してくれます。
今回のテスト結果はモバイルフレンドリーとなっており、問題がないようでした。
タグページで問題が検出された場合の対処(今回)
自分で確認しても問題なさそうで、モバイルフレンドリーテストで問題なしという結果。
ということで、対処のしようがなくなったため、修正していませんが、各エラーの[修正を検証]をクリック。
クリックすると、検証中になったことをお知らせするメールがエラー項目ごとに送られてきます。
1日ほど待つと、なんと修正完了のメールが届きました。
以上で、今回のエラーは解決です。
問題がなさそうならほぼ何もしなくてOK
確認して大丈夫そうなら、[修正を検証]をクリックするだけで、解決する場合があるとわかりました。
サーチコンソールの誤検知でしょうかね?
エラーを修正すると、サイトの評価が良くなります。
理由がわからず困ってしまった場合は、何もせずに、[修正を検証]をクリックするのもありですね。