こんにちは、遊佐です。
ブログをやっている方でグーグルサーチコンソールを導入している方は多いと思いますが、ある日突然「モバイルユーザビリティの問題が新たに検出されました」というエラー通知がきたことはありませんか？
通知サインが入り、何かな？と思って見てみたら、エラーレポートが数件入ってるなんてこともあると思います。
今回はそういったエラーへの対処方法について書いていきます。
特に難しいことはなく、対処通りにやれば簡単に済みますよ。
【簡単対処】グーグルサーチコンソールでモバイルユーザビリティエラーが出たら？
モバイルユーザビリティとは？
モバイルユーザビリティとは、スマホで閲覧したウェブサイトが見やすくて使いやすいかということです。
そしてモバイルユーザビリティにエラーが出ているということは、ユーザーにとって使いにくいサイトになってますよ〜とGoogleが警告しているということ。
現在ウェブサイトの閲覧にはスマホを使う人が多いため、Googleはスマホ閲覧における使用性を重視しています。
ユーザビリティに問題があるということはSEO的に問題があるといういうことなので、検索結果の掲載順位にも影響を及ぼしてきます。
一刻も早く修正しなければいけないと焦ってしまいますが、一旦落ち着いてください。
というのも、このエラーには放置して問題しのパターンと、そうでないパターンの2つあるんです。
なのでまずはエラーの内容を落ち着いて確認した後に、対処方法を決めていきます。
エラーの原因は？
放置してもいいエラー
結論から言うと、モバイルフレンドリーテストを試して問題がなかった場合です。
モバイル フレンドリー テスト - Google Search Console
モバイルフレンドリーテストは該当ページがモバイル端末での使用に問題がないかタイムリーに検証してしてくれる機能です。
問題がなければ、「このページはモバイルフレンドリーです」と緑文字で表示されますので、ユーザビリティレポートのページに戻ってください。
そして各エラーの詳細ページに行き、「修正を検証」ボタンを押して返事を待ちましょう。
すると1〜2日で修正されましたとの返事がきます。
「何故問題がないのに、エラーが発生しているとの通知が入るの？」と疑問に思う人もいると思います。
これは定期的にクロールにやってくるGoogle botがページの読み込みに失敗しているからです。
クロールの際に、何らかの原因でたまたまCSSの読み込みが適切にされなかった場合、エラーが発生してしまいます。
なのでbotのクロールとは違って、シンプルに現時点での検証をしてくれるモバイルフレンドリーテストに問題がなければ、基本的には放置でOKです。（修正を検証ボタンを押すのは忘れないで）
今回の件とは別ですが、このクロールに対しては適切に対策をしておかないと、記事がインデックスされないという問題を引き起こしますので、ご注意ください。
放置したらダメなエラー
問題はモバイルフレンドリーテストで本当にエラーが発生していた時です。
発生するエラーで特に多いのが次の3つ。
- テキストが小さすぎて読めません
- コンテンツの幅が画面の幅を超えています
- クリック可能な要素同士が近すぎます
これらのエラーはメディアクエリでのCSS設定が不適切であるため起こっています。
おそらく直近にブログデザインをカスタマイズしていると思われるので、エラー箇所をそれぞれ修正していきましょう。
エラーを修正する
テキストが小さすぎて読めません
文字が小さくて読みにくいというエラーです。
フォントサイズを12px以上に設定しましょう。
これを下回ると、実際にスマホ画面で文字が見にくいと感じ、エラーが出る可能性があります。
僕のブログも最小フォントサイズは12pxです。
コンテンツの幅が画面の幅を超えています
要素がスマホ画面幅からはみ出しており、横スクロールできてしまう状態です。
widthプロパティに絶対値を指定しているはずなので、相対値に変更しましょう。
例
width: 1200px; → width:100％;
これでもまだはみ出すようでしたら、要素にpaddingやborderの指定をしている可能性があります。
widthは要素中身の幅を指定するので、paddingやborderは含まれません。
そのため100％指定した要素のさらに外側に領域をとっていることになり、画面幅を超えてしまいます。
その際は以下のコードを追加してください。
box-sizing: border-box;
これはpaddingやborderを要素幅に含めることができるプロパティです。
先ほどの例でしたら、width100％の中にpaddingとborderが含められるということです。
クリック可能な要素同士が近すぎます
テキストリンクやボタンリンクなどの間に十分な間隔がないことで、誤クリックが起こりやすくなっているために出るエラー。
リンク間に8px以上の間隔を設定しましょう。
エラー箇所の見つけ方
グーグルサーチコンソールは問題検出をしてくれるものの、問題箇所までは教えてくれません。
なのでエラー項目に沿って自分で見つける必要があります。
めんどくさいですが、実際にスマホ画面で見てみると結構すぐに分かります。
エラー箇所を発見できたらディベロッパーツールを開き、プロパティに指定されている値をチェックしていきます。
テキストが小さすぎて読めません
文字が小さくて明らかに見にくい箇所はありませんか？
もし少しでもそう思われたら、そこの箇所のフォントサイズをチェックしてみてください。
コンテンツの幅が画面の幅を超えています
横にスクロールできるところをシンプルに探す。
もしあれば、その要素幅の指定が画面幅を超えていますので、該当要素のwidthをチェックしてみてください。
クリック可能な要素同士が近すぎます
リンク要素、特に自分で追加したものをチェックしていき、タップしにくそうな場所があったらそこが問題箇所である可能性が高いです。
「タップしにくそう」とは、押したいリンク要素があるのに、すぐそばに別のリンクがあるため、誤ってそっちのリンクを押してしまいそうになることです。
ブログテーマを使っている場合はデザイナーがきちんと設定してくれているので基本的に問題はないのですが、カスタマイズ、特に自分でオリジナル要素を追加していたら、CSS設定が不適切になっている場合があります
まとめ
- エラー通知がきたら、まずはモバイルフレンドリーテストを実施してみる。
- 問題なければ検証ボタンを押して結果を待つ。
- 問題があればエラー内容に沿って修正していく。
モバイルユーザビリティのエラーはSEO的にマズいというのはもちろんなのですが、何より問題なのは自分のサイトを見にきてくれたユーザーに不便な思いをさせているということです。
見にくい、使いにくいサイトはユーザーの離脱を招きますので、ユーザーの立場になってサイトを見つめ直すことが大事だと思います。
【こちらもオススメ】
