ゆさん歩

自分が体験して良かったモノ、コトを紹介しています。

NEW POSTS!

簡単対処!グーグルサーチコンソールでモバイルユーザビリティエラーが出たら?

こんにちは、遊佐です。

ブログをやっている方の中で、グーグルサーチコンソールを導入している方は多いと思いますが、ある日突然モバイルユーザビリティのエラー通知がきたことはありませんか?

通知サインが入り、何かな?と思って見てみたら、エラーレポートが数件入ってるなんてこともあると思います。

今回はそういったエラーへの対処方法について書いていきます。

特に難しいことはなく、対処通りにやれば簡単に済みますよ。

 

簡単対処!グーグルサーチコンソールでモバイルユーザビリティエラーが出たら?

 

モバイルユーザビリティ

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

簡単にいうと、ウェブサイトをスマホで閲覧した際に、見やすくて使いやすいかということです。

現在ウェブサイトの閲覧にはスマホを使う人が多いため、Googleはスマホ閲覧における使用性を重視しています。

つまりモバイルユーザビリティにエラーが出ているということは、ユーザーにとって使いにくいサイトになってますよ〜とGoogleが警告しているんです。

ユーザビリティに問題があるということはSEO的に問題があるといういうことなので、検索結果の掲載順位にも影響を及ぼしてきます。

ここは一刻も早く修正しなければいけないと焦ってしまいますが、一旦落ち着きましょう。

というのも、このエラーには放置していいパターンとそうでないパターンがあるからです。

エラーの内容を落ち着いて確認していけば、適切に且つ簡単に対処できます。

エラーの原因は?

放置しても問題ないエラー

結論から言うと、モバイルフレンドリーテストを試して問題がなかった場合です。

モバイル フレンドリー テスト - 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的にマズいというのはもちろんなのですが、何より問題なのは自分のサイトを見にきてくれたユーザーに不便な思いをさせているということです。

見にくい、使いにくいサイトはユーザーの離脱を招きますので、ユーザーの立場になってサイトを見つめ直すことが大事だと思います。

PICK OUT

金沢に行こう

今や一大観光地となった石川県金沢市。

一度行くとまた行きたくなる魅力が金沢にはあります。

旅行といえばグルメは欠かせません。

皆さんが金沢に行かれる際の参考になるように、オススメのお店を紹介します。

HOT ENTRY

注目記事