【スマホ対応】ウェブサイトがスマホ対応できているかチェック！Googleモバイルフレンドリーテスト

近年インターネットが普及し、それに伴いスマートフォンが広く流通し、今では誰でも手軽にどこでもスマートフォンでインターネットを利用しています。

Googleなどの検索エンジンは時代の流れに合わせて、よりユーザーが使いやすくなるように、検索エンジンの改良を日々繰り返しています。

スマホ対応が必須となった今だからこそ、自分のウェブサイトがGoogleから見てモバイルフレンドリーかどうかをチェックする方法をご紹介します。

スマホ対応が必要な理由

Googleは2018年3月27日にスマホサイトを元に検索結果の順位を決定とする「モバイルファーストインデックス」の開始を発表しました。

つまりこれからはパソコンサイトよりもスマホサイトが検索結果の順位を決定するということになるため、必然的にスマホサイトをより良いサイトにする必要があります。

モバイルフレンドリーかどうかチェックする

私のウェブサイトでチェックしてみた結果がこちらになります。
問題がなければ、「このページはモバイルフレンドリーです」という表示が出るようです。
右側には自分のウェブサイトのスマホ表示の際のプレビューが表示されます。

よく使っているサジェストツールのウェブサイトでチェックさせていただいたのですが、
モバイルフレンドリーではない場合、「このページはモバイルフレンドリーではありません」と赤文字で表示されるようです。

赤枠で囲っている部分が、具体的な問題とGoogleが認識されている内容になります。ここでは以下の問題の記載があります。

• テキストが小さすぎて読めません
• クリック可能な要素が近すぎます
• ビューポートが設定されていません

スマホ対応の具体的な方法

JavaScript、CSS、画像のファイルのブロック

JavaScrip、CSS、画像ファイルへのGooglebotのアクセスを拒否しているような設定がある際に、問題として表示されます。

Googlebot＝一般ユーザーと考えて、一般ユーザーに表示するものは全てクロールできるように設定する必要があります。

再生できないコンテンツ

Flashなどをウェブサイトに利用している場合に表示されます。

HTML5のタグで動画やアニメーションで作り直すと解決します。

リダイレクトの誤り

パソコン用サイトとスマホ用サイトでURLが異なる場合は、スマホでパソコン用サイトを訪れた際に、スマホ用サイトに正しくリダイレクトする必要があります。

そのためリダイレクト先が不適切な場合に表示されるようです。

モバイルのみの404エラー

パソコンで URL にアクセスすると問題なくコンテンツが表示されるのに、モバイルデバイスでアクセスするとエラーになるサイトの場合に表示されます。

インタースティシャルの回避

スマホは画面領域が狭いため、画面幅いっぱいのアプリダウンロードやメルマガ登録といった広告表示は避けた方が無難です。

不適切な相互リンク

スマホページにパソコンページへのリンクを設定するようなケースを指しているようです。

相互リンク自体は問題ないのですが、そのリンク先が不適切な場合表示されます。

表示速度の遅いモバイルページ

スマホページの表示速度が特別に遅い場合に表示されます。

具体的な時間は記載がありませんが、PageSpeed Insightでチェックして問題がないかチェックする方が良いでしょう。

ビューポートを正しく設定する

スマートフォンも様々なデバイスがありますが、サイト内にビューポートメタタグを挿入して画面サイズに合わせてウェブサイトに表示をさせることが推奨されています。

よくある間違いとしては、固定幅のビューポートを設定しているや最小のビューポートで広い幅を指定して、それより小さいスマホでは水平方向のスクロールが必要になるなどが挙げられています。

小さなフォントサイズ

読みやすいカラム幅にするには、1 行あたりの文字数を 70～80 文字（英単語で約 8～10 語）にするのが理想とされています。

近すぎるタップ要素

ボタンやリンクなどのタップ要素が互いに近すぎて、モバイル ユーザーが目的の要素をタップしようとすると隣の要素に指が触れてしまうような設定は避けてください。

もっと自分ウェブサイトを改善するには？

Google Search Consoleで自分のウェブサイトをチェックするのが一番簡単にチェックできます。
何か問題があるページは一覧としてエクスポートできるため、網羅的に対応を進めることができます。

参考サイト

モバイルフレンドリーテスト
Google検索デベロッパーガイド