“モバイル ユーザビリティ上の問題が検出されました” ←何が起きる？
ウェブマスターツール上に”モバイル ユーザビリティ上の問題が検出されました”という表示がされるようになりました。（スマートフォンでの閲覧に問題があるサイトのみ）
このページでは、モバイルユーザビリティ上の問題の影響範囲と対策方法を解説します。
影響範囲
今回のアップデートで影響があるのは
スマートフォン検索のみ
です。
PCやフィーチャーフォン（ガラケー）での検索結果には影響しません。
また、モバイル対応しているかどうかの評価は、ページ単位で行われます。
モバイル対応していないからといって、サイト全体の評価が下がるわけではありません。
対応が必要か不要か
影響範囲がスマートフォンだけなので、
スマートフォンで閲覧できないページへの対応は不要
です。具体的には、
- ・PC/スマホ/ガラケーでURLが異なっていて
- ・それぞれにリダイレクトが設定されている場合の
- ・PC用/ガラケー用のページ
などです。
この場合、リダイレクトが行われるため、実際のスマホユーザーがPC用/ガラケー用のページを閲覧することはありません。
しかし、ウェブマスターツール上は「モバイル ユーザビリティ上の問題が検出されました」と表示されることがあります。
こういったケースでは特に対応の必要はありません。
きちんとアノテーションが記述されていれば、PC用ページやガラケー用のページはそもそも検索結果に表示されないため、順位変動の影響を受けません。
リダイレクトが設定されているにも関わらず、PC/ガラケー用のページがスマホ検索結果に表示されている場合は、今回の件とは別の問題があります。
表示されるエラーと解消方法
スマートフォンで閲覧されるページ、スマホ検索で順位が下がると困るページはしっかりと対策をしておきましょう。
表示されるエラーと解消方法は以下を参考にしてください。
Flashが使用されています
Flashはadobe社が提供するwebコンテンツ作成ソフトです。
かつてのHP作成ではよく使われていましたが、ほとんどのスマートフォンでFlashの閲覧ができないこともあり、現在ではあまり使われなくなりました。
スマートフォンでの閲覧時はFlashの部分は空白になってしまうので、JavaScriptや静止画などに置き換える必要があります。
ビューポートが設定されていません
ビューポートは閲覧者のデバイスにあわせて、ページの縦横のサイズを変更するmetaタグです。
このエラーはページの<head>～</head>内にmeta name=”viewport”を記述してビューポートを設定することで解消できます。
具体的なタグの記述は以下のガイドラインを参照してください。
固定幅のビューポート
上記のビューポートが固定の値になっている場合に出るエラーです。
こちらも上記と同じ記述を行うことで解消できます。
コンテンツのサイズがビューポートに対応していません
スマートフォンでの閲覧時にコンテンツがはみ出す（横スクロールが必要になる）場合に出るエラーです。
コンテンツのサイズを固定値にしているとよく起こります。
横にはみ出している部分を探し、サイズの指定を外すことで解消できます。
画像がはみ出していることが多いので、まずは画像のサイズ指定を確認してみましょう。
フォントサイズが小です
スマートフォンサイトで文字が小さすぎる場合に表示されます。
フォントサイズを上げることで解消できますが、ビューポートが適用された後のサイズで評価されていることに注意してください。
具体的に何ピクセル以下が小さいと判定されるかの基準は公開されていませんが、Google PageSpeed Insightsでは16ピクセルが基準とされています。
タップ要素同士が近すぎます
リンクなどのタップできる要素同士の位置が近すぎると出るエラーです。
タップ要素の距離を10mm以上にすることで解消できます。
また、タップ要素のサイズを7mm以上にすることも推奨されています。
対応後の確認
修正が完了したらモバイル フレンドリー テストで確認しましょう。
「問題ありません。 このページはモバイル フレンドリーです。」と表示されたら成功です。
最後にウェブマスターツールのFetch as Googleからインデックスの送信も忘れずに行いましょう。
