サーチコンソール「モバイルユーザビリティのエラー」を解決する方法を紹介
モバイルユーザビリティとは、モバイルユーザーにとって使いやすい、見やすいWEBサイトの状態になっていることを指す言葉です。
スマートフォンなどのモバイル端末で見た際に、感覚的に迷わず操作できて、ストレスを感じにくいモバイルサイトは、「モバイルユーザビリティが高いサイト」だと言えます。
本記事では、モバイルユーザビリティの重要性とエラーが出た際の解決方法を解説します。
この記事の目次
モバイルユーザビリティとは
冒頭でスマートフォンなどのモバイル端末で見たとき、感覚的に迷わず操作できて、ストレスを感じにくいモバイルサイトは、「モバイルユーザビリティが高いサイト」だと言えるとお伝えしました。
反対に、モバイル端末で見たときに「見づらい」「使いづらい」などと感じさせるサイトは「モバイルユーザビリティに課題があるサイト」であると言えます。
モバイルユーザビリティを改善することの意味
Googleが無料で提供しているWEBマスター向けツール「Googleサーチコンソール(Google Search Console)」には、検索における問題解決のためのさまざまなレポートが用意されています。その一つがモバイルユーザビリティに対してのGoogleの評価を確認できる「モバイルユーザビリティレポート」です。
登録されたサイトのモバイルユーザビリティに問題があるとGoogleが評価した場合、レポートにエラーが表示されます。このエラーが通知された場合、すみやかに修正をおこなってモバイルユーザビリティを改善しましょう。
現在ではWEBサイトの閲覧はPCよりもスマートフォンなどモバイル端末を使う人のほうが圧倒的に多くなっています。特にBtoCの場合、スマートフォンユーザーの比率が多く、モバイルユーザビリティに問題があるサイトは、機会損失が増えてしまうでしょう。
また、PCでの閲覧が多いと考えられるBtoBの場合でも、モバイルユーザビリティの改善は重要です。BtoBビジネスでもスマホユーザーが年々増えていることに加え、Googleが2018年3月より「モバイルファーストインデックス」を開始したためです。
モバイルファーストインデックスとは、検索結果に表示するためのページの評価や順位付けを、モバイルサイトの内容に基づいて決定するという方針です。現在ではPC用サイトの評価よりも、モバイルサイトの評価がGoogleの検索順位に大きく影響するようになっているのです。
モバイルユーザビリティの問題をそのままにしておいた場合、サイト全体に対するGoogleの評価が低くなり、モバイル検索結果での表示順位低下につながる可能性があります。つまり、モバイルユーザビリティの改善は、SEOにおいても重要な意味を持っているのです。
サーチコンソールでモバイルユーザビリティを確認する方法
サーチコンソールに登録しているサイトに問題等があった場合、サーチコンソールからエラーメッセージが通知されます。メッセージは、画面右上にあるベルのアイコンをクリックして表示されるメッセージパネルから確認できます。
※2020/6/16現在
モバイルユーザビリティの問題があった場合、
『サイト(https://~~) で「モバイル ユーザビリティ」の問題が新たに検出されました』
というメッセージが表示されます。
サーチコンソールのユーザー設定でメールによる通知を有効にしておけば(初期設定で有効になっています)、メールでも同様のメッセージ(New Mobile Usability issues detected for site https://~~)が届くはずです。
メッセージによるエラー通知を待たず、モバイルユーザビリティに問題がないかを確認する方法もあります。
サーチコンソールのメニュー「拡張」にある「モバイルユーザビリティ」をクリックするとモバイルユーザビリティレポート画面が表示されます。
モバイルユーザビリティに特に問題がない場合、この画面の一番上にある「エラー」の項目に「0|問題なし」と表示されます。
問題がある場合、たとえば「エラー1|2件の問題」のように表示されます。上記の例の場合、サイト内の1つのページに2件の問題点が認められるという意味です。この場合はエラー内容を確認し、修正をおこないましょう。
サーチコンソールのモバイルユーザビリティエラー例と解決方法
エラーの内容は、先ほどのモバイルユーザビリティレポートの画面の「詳細」に表示されています。どのようなエラー表示があるのかと各エラーの対処方法を確認していきましょう。
互換性のないプラグインを使用しています
モバイルブラウザで確認することのできないプラグインが使われている場合に表示されます。多くはFlashが使われているケースで見受けられます。動的処理をjavascriptで書き換えたり、動画であればHTML5/CSS3で動画を埋め込むなどして、モバイルにも対応した表示方法に変更することで改善できます。
ビューポートが設定されていません
headタグ内にmeta viewportタグを記述していない場合に表示されます。または、view portの記述が正しくない場合にも表示されます。meta viewport タグを適切に記述することで改善できます。
ビューポートが「端末の幅」に収まるよう設定されていません
meta viewportタグで、特定の端末に合わせた固定幅を設定している場合などに表示されます。レスポンシブデザインを導入し、ビューポートを適切に設定することで改善できます。
コンテンツの幅が画面の幅を超えています
画像やコンテンツ要素が、モバイル画面サイズを超えている場合に表示されます。CSSによる幅や位置の設定に絶対値ではなく相対値を使用し、問題なくスケーリングできるようにすることで改善できます。
解決法や詳しい解説はこちらの記事をご覧ください
「コンテンツの幅が画面の幅を超えています」ページエラーの原因と検証方法を解説
テキストが小さすぎて読めません
読むために画面をピンチ操作する必要があるような、小さすぎる文字がページ内にある場合に表示されます。フォントサイズの見直しをおこなうことで改善できます。サイズについて明確な基準は公表されていませんが、10px以下に指定した場合にこのエラーが表示されることが多いようです。
クリックできる要素同士が近すぎます
ボタンやテキストリンク、バナーなどタップできる要素同士が近すぎて、意図せず隣の要素をタップしてしまう懸念がある場合に表示されます。要素間のスペースを適切に設定することで改善できます。
サーチコンソールのモバイルユーザビリティエラー修正後の検証方法
エラー内容に対する修正をおこなったら、問題がなくなったかの検証を行いましょう。
検証は、モバイルユーザビリティレポート画面に表示されているエラーの中から、修正を行ったエラーをクリックし、「修正を検証」ボタンを押します。
ボタンを押すと初期検証が開始され、問題が見つかった場合には「検証プロセスを続行できません」とエラーが出て、再度修正を促すメッセージが表示されます。
初期検証で問題が見つからなかった場合、再クロールによる検証が開始されます。この検証には数日かかる場合があります。
検証で問題がなければ「合格」と表示され、モバイルユーザビリティレポートのエラー表示が0になります。
まとめ
モバイルユーザビリティの意味と改善の重要性、エラー内容の例や具体的な改善、検証などの対応方法についてご説明しました。
サーチコンソールでモバイルユーザビリティの問題が検出された場合は放置せず、なるべく早く問題を特定し、修正および検証を実施することをおすすめします。
サーチコンソールでモバイルユーザビリティの問題が検出された場合は放置せず、なるべく早く問題を特定し、修正および検証を実施することをおすすめします。
関連記事はこちら!
・モバイルフレンドリーとは?Googleの考えと対応方法を知り、SEOに活かそう!
・サイトのスマホ対応の重要性・SEOのためにやるべき施策とは?
・サーチコンソールでXMLサイトマップを送信する方法&サイトマップの作成方法
・サーチコンソールで指定できる分析期間は?分析別の最適な指定方法もご紹介
・今すぐホームページをスマホ対応に!スマホ対応させる具体的な4つの方法!
執筆者:山口ひかる
株式会社ヒトノテのディレクションを担当。自社オウンドメディア運営ノウハウを活用し、クライアントメディア向けのWEBコンテンツ制作や、WEBマーケティング全般の支援を行っています。
監修者:坪昌史
株式会社ヒトノテの代表取締役CEO。 エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。
おすすめの関連記事
─ 記事カテゴリから探す ─
WEBサイトの問題点・改善案を無料診断
人気記事ランキング
-
2024.05.30
キーワードマーケティングのやり方とは?SEOの効果が見込める手順を徹底解説
-
2024.05.27
SEOにおけるURL設計のベストプラクティス
-
2024.04.25
ページネーションのSEOにおけるベストプラクティス
-
2024.04.22
E-E-A-Tとは?Googleが評価するコンテンツの基準や対策を解説
-
2021.12.06
レスポンシブデザインの最適ブレイクポイントとは?メディアクエリの書き方も解説
-
2021.07.09
Webコンテンツにおける正しい引用の書き方をマスターしよう!
-
2021.12.22
【徹底比較】さくらのクラウドとAWSの特徴・機能・料金の違いを解説
-
2022.02.21
「note」のユーザー数や年齢層を徹底分析!【2022年版】
-
2022.07.05
WordPressで301リダイレクトを設定する方法とは?初心者でも可能