
- 現役Webマーケター
(元Webディレクター) - 東証一部上場の不動産系企業で勤務
- 最高収益:月間30万円
近年インターネットが普及し、それに伴いスマートフォンが広く流通し、今では誰でも手軽にどこでもスマートフォンでインターネットを利用しています。
Googleなどの検索エンジンは時代の流れに合わせて、よりユーザーが使いやすくなるように、検索エンジンの改良を日々繰り返しています。
スマホ対応が必須となった今だからこそ、自分のウェブサイトがGoogleから見てモバイルフレンドリーかどうかをチェックする方法をご紹介します。
Googleは2018年3月27日にスマホサイトを元に検索結果の順位を決定とする「モバイルファーストインデックス」の開始を発表しました。
つまりこれからはパソコンサイトよりもスマホサイトが検索結果の順位を決定するということになるため、必然的にスマホサイトをより良いサイトにする必要があります。
私のウェブサイトでチェックしてみた結果がこちらになります。
問題がなければ、「このページはモバイルフレンドリーです」という表示が出るようです。
右側には自分のウェブサイトのスマホ表示の際のプレビューが表示されます。
よく使っているサジェストツールのウェブサイトでチェックさせていただいたのですが、
モバイルフレンドリーではない場合、「このページはモバイルフレンドリーではありません」と赤文字で表示されるようです。
赤枠で囲っている部分が、具体的な問題とGoogleが認識されている内容になります。ここでは以下の問題の記載があります。
JavaScrip、CSS、画像ファイルへのGooglebotのアクセスを拒否しているような設定がある際に、問題として表示されます。
Googlebot=一般ユーザーと考えて、一般ユーザーに表示するものは全てクロールできるように設定する必要があります。
Flashなどをウェブサイトに利用している場合に表示されます。
HTML5のタグで動画やアニメーションで作り直すと解決します。
パソコン用サイトとスマホ用サイトでURLが異なる場合は、スマホでパソコン用サイトを訪れた際に、スマホ用サイトに正しくリダイレクトする必要があります。
そのためリダイレクト先が不適切な場合に表示されるようです。
パソコンで URL にアクセスすると問題なくコンテンツが表示されるのに、モバイルデバイスでアクセスするとエラーになるサイトの場合に表示されます。
スマホは画面領域が狭いため、画面幅いっぱいのアプリダウンロードやメルマガ登録といった広告表示は避けた方が無難です。
スマホページにパソコンページへのリンクを設定するようなケースを指しているようです。
相互リンク自体は問題ないのですが、そのリンク先が不適切な場合表示されます。
スマホページの表示速度が特別に遅い場合に表示されます。
具体的な時間は記載がありませんが、PageSpeed Insightでチェックして問題がないかチェックする方が良いでしょう。
スマートフォンも様々なデバイスがありますが、サイト内にビューポートメタタグを挿入して画面サイズに合わせてウェブサイトに表示をさせることが推奨されています。
よくある間違いとしては、固定幅のビューポートを設定しているや最小のビューポートで広い幅を指定して、それより小さいスマホでは水平方向のスクロールが必要になるなどが挙げられています。
読みやすいカラム幅にするには、1 行あたりの文字数を 70~80 文字(英単語で約 8~10 語)にするのが理想とされています。
ボタンやリンクなどのタップ要素が互いに近すぎて、モバイル ユーザーが目的の要素をタップしようとすると隣の要素に指が触れてしまうような設定は避けてください。
Google Search Consoleで自分のウェブサイトをチェックするのが一番簡単にチェックできます。
何か問題があるページは一覧としてエクスポートできるため、網羅的に対応を進めることができます。
https://nuko-blog.net/pagespeed-insight/
https://nuko-blog.net/google-analytics-point/