【Googleに嫌われる?】モバイルユーザビリティエラーの内容・対処法!

スマホ

『モバイルユーザビリティの問題が新たに検出されました』

グーグルサーチコンソールから突然の通知…受け取ってびっくりされた方も多いのではないでしょうか?

モバイルユーザビリティとは、スマホユーザーにとってサイトが使い勝手の良いものかGoogleが判断する基準です。

Googleもモバイルファーストという考え方を実際に提唱しており、結論から言うとモバイルユーザビリティにエラーが出ているのはGoogleから嫌われる1つの原因にもなりえます。

もしあなたがアクセスしたウェブサイトが使いにくい場合、すぐ離脱したくなりませんか?

モバイル(スマホ)でGoogleなどで検索エンジンを利用する方がほとんどである現在、SEO観点からもモバイルユーザビリティは常に完璧にしておくということは必須ですね。

今回はGoogle Search Consoleで表示されるモバイルユーザビリティのエラー内容と改善方法まで解説します。

もしあなたがモバイルユーザビリティの問題を抱えているなら、迅速に正しく対処して置くことをお勧め致します!

目次

モバイルユーザビリティエラーが出るとマズい理由

ハンドマイクで叫んでいる女性

モバイルユーザビリティにエラーが出るとどうしてマズいのか?詳しく見ていきましょう。

①Googleから嫌われる

Googleはモバイルファーストという考え方を提唱しています。

したがってモバイルユーザビリティにエラーが出る = Googleからの評価が良くないということ。

Googleからイエローカードを受けていると言っても過言ではありません!

放っておくと検索上位表示されているページもそのうち落ちてしまうでしょう。

できるだけ早く原因をみつけて改善し、Googleへ修正を報告しましょう!

②ユーザーにも嫌われる

Googleから嫌われるのも大きいですが、アクセスしたユーザーに嫌われてしまうと目も当てられません。

もし僕がスマホで検索したときに、誤タップしてしまったり、文字が小さすぎると、イライラして離脱したくなります。(と言うか離脱します。)

もしモバイルユーザビリティのエラーが出ていないとしても、普段から自分のウェブサイトをスマホから確認するようにしておきましょう!

僕のウェブサイトの場合、モバイルからのアクセスは9割近くに昇り、みなさんも近い数字になるはずです。

そうなればモバイル画面の見易さやデザインを疎かにしてはいけませんよね!

モバイルユーザビリティ・4つのエラー改善方法!

ここからはモバイルユーザビリティのエラーの内容と対処法についてです。

グーグルサーチコンソールから通知される『モバイルユーザビリティに関する』4つのエラーは以下です。

  1. クリック可能な要素が近すぎます
  2. テキストが小さすぎて読めません
  3. コンテンツの幅が画面の幅を超えています
  4. ビューポートが設定されていません

1つだけ来る時もあるし、全部一気に来ることもあります笑( 恐ろしや… )

僕の場合は①と②がダブルで通知されましたが、その時どうやって処理したか体験談として記事にしておりますのでどうぞ参考にしてください。

ではこの4つのエラーの内容と対処法を詳しく見ていきましょう!

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

クリック可能な要素同士が近すぎますのエラー画面

このエラーが出たスマホ画面では、クリック(またはタップ)できるボタンやリンク同士が近すぎるため「誤クリック」や「誤タップ」を招く可能性があると指摘されています。

大人の指の腹が平均10mmと言われていて、さらにAndroidのガイドラインでは7mm以上を推奨しています。

これを踏まえての対処法は、「ボタン同士の間隔を10mm以上空ける」ことです。

僕もこのエラーが出たことがありますが、SNSのシェアボタンがパツパツに並んでいたので修正をかけたところエラーは解消されました。

シェアボタンの修正

エラーが出ていなくとも誤タップを招くボタンがないか ” じっくり “ 確認しましょう。

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

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

スマホの画面の文字が小さすぎるよと言う問題通知で、対処法は簡単!

文字を大きくしてやればエラーは解消されます。

このエラーが出るのは10px以下のテキストがあるページです。

この文字を消すか、「フォントサイズ = 11px以上に設定しましょう。

フォントサイズに限らず、自分のウェブページをスマホで確認して「見にくい」「文字が小さい」と感じるところは随時修正をかけていきましょう!

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

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

スマホでコンテンツを見ている時に上下のスクロールではなく、左右にスクロールをしなければ見られない画像やグラフがある場合に表示されるエラーです。

このエラーの対処法としては、モバイル画面の横幅サイズを750px以下で作ることですが、レスポンシブWebデザインのテーマを選んでいればこのエラーが出ることはほぼありません。

レスポンシブとはスマートフォンやタブレットなど様々な端末に表示を最適化させる手法で、大きな画像やグラフを作成して投稿してもスマホで見る時に画面のサイズに合わせて表示してくれます。

現在は無料テーマでもスマホに対応してレスポンシブ表示してくれるテーマが多くなっており、WordPressのデフォルトテーマである「twenty」シリーズも例外ではありません。

有料サイトを選んでいる方ならこのエラーが出る人はほとんどいないのではないでしょうか?

ビューポートが設定されていません

ビューポート設定がされていません

ビューポート(viewport)設定とは、閲覧に使用する端末によってどんな見せ方をするか?という設定です。

ビューポートの設定をしていないとPC画面で見るものをスマホの画面に全て押し込んで表示するので、「テキストが小さい」や「クリックできる要素同士〜」などのエラーを併発することがあります。

この「ビューポートが設定されていません」の対処法は簡単!

headタグ内に赤文字を挿入してください。

<head>
  <meta name=”viewport” content=”width=device-width, initial-scale=1″>
</head>

しかしながら「ビューポートが設定されていません」も③のエラーと同じく、スマホ対応のテーマを選んでいればエラーが出る人は少ないのではないでしょうか?

もしこのエラーが出てしまった時はviewportが正確でない可能性もあります。一度headタグ内を見直してみてくださいね!

モバイルユーザビリティエラー修正後のお話

いっちゃダメ

これまでモバイルユーザビリティエラーの内容と対処法をお伝えしてきましたが、修正後にしなければならないことが実はまだあります。

  1. 修正を検証
  2. Google Search Consoleでインデックスを再送信する

これをしないと宿題をやったのに家に忘れてきた状態と同じですので忘れず実践してくださいね!

①修正を検証

モバイルユーザビリティエラーの改善ができたらまず『修正を検証』を行います。

修正が完了がしている項目を選択修正を検証をクリックする。

エラー修正

⬇︎

「修正を検証」→「詳細を表示」に変わると今Google検証している最中ということです。

エラーが解消されればまた合格通知が来ますし、もし問題が解決しない場合は以下のようなメッセージがきます。

検証プロセス

また見直して修正していくしか方法はありません。

放置だけは絶対にしないようにしましょう!

Google Search Consoleでインデックスを再送信

修正を検証後、Googleのクローラーに認識してもらえるようにインデックスを再送信します。

STEP 1

Google Search Consoleを開き、修正が完了したURLを入力

グーグルサーチコンソール画面
STEP 2

インデックス登録をリクエストを選択

インデックス

⬇︎

インデックス4

これで再インデックスは完了しました。結果を待ちましょう!

内容によって検証が翌日に終わることもあれば1週間かかる場合もあります。
毎日グーグルサーチコンソールからのメッセージがきていないか確認しましょうね!

まとめ

モバイルユーザビリティのエラーについて書いてきましたがいかがでしたか?

スマホで検索エンジンを利用する方がほとんどである現在、モバイルユーザビリティは完璧にしておくという意識は不可欠です。

  • 記事投稿後は必ずスマホでチェックする
  • もし問題通知が来たら迅速に処置を施してから修正案を提出する

モバイルファーストを掲げるGoogleの元でブログ運営をするのならば心がけておきましょう。

[reuse id=”759″]

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次