Googleのウェブマスターツール上で、あるサイトに対し、「Fix mobile usability issues found on http://○○○/」というタイトルのメッセージが届きました。

[詳細]をクリックしてみると、英文なので内容がよくわかりません。

一方、同じタイトル、同じ内容で「Google Webmaster Tools Team」からメールでも届いていました。

メール本文を日本語に翻訳してみると、冒頭部分は以下のような内容でした。

【冒頭部分の抜粋】
Googleのシステムでは、あなたのサイトから○○ページをテストし、そのうちの○○％が重要なモバイルユーザビリティエラーがあることを見出した。これらの○○ページにエラーが厳しく、モバイルユーザーがWebサイトを体験することができますどのように影響します。これらのページは、Google検索によるモバイルフレンドリーとして表示されませんので、表示されるとスマートフォンユーザーのために、適切にランク付けされます。

この文章を読む限り、該当サイトがモバイルユーザビリティ上問題があること、またその問題がGoogle検索においてのランク付けにも影響を及ぼすというようなことが読み取れます。

さらに調べてみると、Googleの「ウェブマスター向け公式ブログ」の「検索ユーザーがモバイル フレンドリー ページを見つけやすくするために」という記事を見つけました。

ブログの記事によると、2014年11月19日より、モバイル版の検索結果において、モバイル検索ユーザーに最適化されているウェブサイトに対し、 [スマホ対応] というラベルを追加するということが記載されています。

[スマホ対応] というラベルというのは、スマホ等のモバイルで検索した際、モバイル向けに最適化されたサイトには、検索結果のスニペットの先頭に以下のような表示がされるそうです。

また、[スマホ対応] ラベルが適用されるには、以下のような条件を満たす必要があるそうです。

また、このモバイル フレンドリーという概念をランキング要素として今後使用することも実験中とのことです。

つまり、スマホなどのモバイル検索ユーザーにフレンドリーかどうかが、今後、検索結果の表示やランキングにも影響する可能性があるということです。

事の重要性がわかったところで、早速私の指摘を受けたサイトのモバイルユーザビリティの問題点を調べてみることにしました。

モバイルユーザビリティの問題点をウェブマスターツールを使って調べる

モバイルユーザビリティの問題点を修正するには、まず、どこに問題点があるのかを把握しなければなりません。

どのページがモバイルユーザビリティの問題点を指摘されたのか、ウェブマスターツール上で調べることにしました。

ウェブマスターツールで該当サイトを開き、左メニューの[検索トラフィック]→[モバイル ユーザビリティ]の順にクリックします。

すると、以下のように、ユーザビリティエラーの内容が表示されます。

私の場合は、「タップ要素同士が近すぎます」と「コンテンツのサイズがビューポートに対応していません」という2点を指摘されています。

各エラーの項目をクリックしてみると、エラーの対象となっているページが表示されます。

対象ページをクリックしてみると、以下の画面が表示され、いろいろな改善方法を提示してくれます。

その中の、PageSpeed Insightsツールの[公開中のバージョン…]ボタンをクリックしてみます。

すると、PageSpeed Insightsが対象ページの問題点を検出してくれます。

PageSpeed Insightsでは、その他にも表示速度が遅い場合の問題点などを検出してくれたりしますが、今回指摘を受けている問題点の改善に関しては、「ユーザーエクスペリエンス」に表示されている修正個所に着目したいと思います。

該当ページでは、以下のような修正個所が表示されました。

[詳細]をクリックしてみると、具体的な問題個所のHTMLコードが表示されますので、その箇所を修正すれば改善されることになります。

具体的な改善方法について、私が行った対策は⇒「モバイルユーザビリティエラーの原因はrobots.txtだった」を参照ください。