このページでは、ウェブマスターがモバイルサイトの設計で陥りがちな誤りについて説明します。
JavaScript、CSS、画像のファイルのブロック
最適なレンダリングとインデックス登録を実現するため、ウェブサイトで使用している JavaScript ファイル、CSS ファイル、画像ファイルに Googlebot が確実にアクセスできるようにしてください。そうすることで、Googlebot がウェブサイトの表示を一般的なユーザーと同様に確認できるようになります。サイトの robots.txt ファイルでそれらのアセットのクロールを禁止すると、Google のアルゴリズムによるコンテンツのレンダリングとインデックス登録を直接的に妨げることになります。その結果、ランキングが下がる可能性があります。
おすすめの対処法:
Search Console の URL 検査ツールを使用して、サイトの JavaScript ファイル、CSS ファイル、画像ファイルを Googlebot がクロールできることを確認します。このツールでは、コンテンツが Googlebot にどのように認識され、レンダリングされるかを見ることができます。サイトのインデックス登録に関する、さまざまな問題を特定し、修正するためにも便利なツールです。
Search Console で robots.txt をテストして確認します。
モバイル フレンドリー テストでモバイルページをテストし、モバイル ユーザーが利用できるサイトとしてそのサイトが Google システムで検出されるかどうかを確かめます。
モバイルページ用に別の URL を使用している場合は、必ずモバイル用とパソコン用の両方の URL をテストして、リダイレクトが認識されクロール可能かどうかを確認します。
再生できないコンテンツ
動画やコンテンツの種類によってはモバイル デバイスで再生できないものがあります。たとえば、ライセンスの制約があるメディアの場合や、モバイル デバイスであまりサポートされていない Flash などのプレーヤーを必要とする場合などです。どのようなウェブサイトでも、再生できないコンテンツがページにあるとユーザーの不満が増すおそれがあります。
モバイル デバイスでサポートされていないコンテンツが含まれるページにユーザーがアクセスすると、下記のようなエラー メッセージが表示されます。
これではユーザーにとって快適なモバイルサイトとは言えません。
独自の動画プレーヤーの使用や、サポートされていない形式のコンテンツの配置はやめて、HTML5 標準タグで動画やアニメーションを提供することをおすすめします。
アニメーション コンテンツについては、すべてのウェブブラウザで動作する HTML5 アニメーションを使用してください。Google Web Designer を使うと、こうしたアニメーションを HTML5 で簡単に作成できます。
おすすめの対処法:
- アニメーションに HTML5 標準を使用して、すべてのユーザーが快適に利用できるようにします。
- すべてのデバイスで再生できる動画の埋め込みを使用します。
- 動画の文字起こしを利用できるようにすることをおすすめします。そうすれば、ユーザー補助技術を使用している人や、特殊な動画形式を再生できないブラウザを使用している人も、サイトを利用しやすくなります。
詳しくは、Google のウェブの基礎にある動画に関するおすすめの方法をご覧ください。
リダイレクトの誤り
モバイル用には別の URL を設定している場合は、パソコン用 URL にアクセスしたモバイル ユーザーを、対応するモバイル用 URL にリダイレクトすることをおすすめします。それ以外のページにリダイレクトする（たとえば、常にホームページにリダイレクトする）のは不適切です。
例:
- パソコン用サイトのサーバーが、モバイル ユーザーをモバイルサイトのホームページにリダイレクトするように構成されている。リクエストされた URL にかかわらず、たとえそれに対応するページがモバイルサイトに存在したとしても、一律でホームページにリダイレクトされてしまいます。
URL パラメータで動的に生成されるパソコン用サイトの URL が、対応するモバイル用 URL に正しく関連付けられていない。たとえば、パソコン用サイトで特定の日付の電車時刻表を検索しても、モバイルサイトではその検索結果ではなく、時刻表検索ページにリダイレクトされてしまうようなケースです。対応するモバイル用 URL がある場合は、リダイレクトを正しく構成して、ユーザーが目的のページにアクセスできるようにすることをおすすめします。
モバイル デバイスによってリダイレクトされる場合とされない場合がある。たとえば、Android ユーザーだけがモバイルサイトにリダイレクトされ、iPhone や Windows Phone のユーザーはリダイレクトされないようなケースです。
おすすめの対処法:
Search Console を利用します。サイトのいずれかのページでスマートフォン ユーザーがホームページにリダイレクトされることを Google が検出した場合、サイト確認済みのユーザーにはメッセージが届きます。
スマートフォン ユーザーがスマートフォン サイトの対応する URL にリダイレクトされるようにサーバーを設定します。
対応するスマートフォン用ページがサイトにない場合は、ユーザーをスマートフォン サイトのホームページにリダイレクトするのではなく、パソコン用ページをそのまま表示します。このような場合は間違った動作をするよりも何もしない方が無難です。
レスポンシブ ウェブデザインの利用をお試しください。パソコン ユーザーにもスマートフォン ユーザーにも同じコンテンツが提供されます。
モバイルのみの 404 エラー
パソコンで URL にアクセスすると問題なくコンテンツが表示されるのに、モバイル デバイスでアクセスするとエラーになるサイトがあります。
ユーザー エクスペリエンスを損なわないために、パソコン用ページにモバイル デバイスからアクセスしているユーザーに対しては、そのページに対応するモバイル用ページの URL が違う場合、ユーザーをその URL にリダイレクトして、404 ページやソフト 404 ページが表示されないようにします。また、モバイル フレンドリー ページ自体がエラーページでないことも確認してください。
おすすめの対処法:
Search Console を利用します。サイトの確認済みユーザーには、メッセージ センターに通知が届きます。
スマートフォン サイトが別の URL にある場合は、スマートフォン ユーザーがスマートフォン サイトの対応する URL にリダイレクトされるようにサーバーを設定します。
動的な配信を使用する場合は、ユーザー エージェントの検出が正しく構成されていることを確認します。
パソコン用ページに対応するスマートフォン用ページがサイトにない場合は、パソコン用ページをそのまま表示します。ユーザー エクスペリエンスとしては、エラーページが表示されるよりも、目的のコンテンツが表示されるほうがはるかに便利です。
可能であればレスポンシブ ウェブデザインを利用します。この設定により、ユーザーが利用するデバイスの種類にかかわらず、同じコンテンツを提供できます。
インタースティシャルの回避
多くのウェブサイトでは、ユーザーが閲覧しているページのコンテンツの一部または全部を覆うインタースティシャルやオーバーレイが使用されています。このようなインタースティシャルは、ウェブサイトのネイティブ アプリの宣伝やメーリング リストの登録フォーム、または広告としてモバイル デバイスでよく使用されますが、ユーザー エクスペリエンスを損なうおそれがあります。極端な例では、ユーザーがインタースティシャルを閉じてページのコンテンツを表示するのが非常に難しい場合もあります。モバイル デバイスの画面領域は限られているので、インタースティシャルはユーザー エクスペリエンスに悪影響を及ぼします。
アプリ ダウンロードのインタースティシャル
ウェブマスターが、モバイルサイトを訪れたユーザーに、自分が提供するネイティブ アプリを宣伝することはよくあります。こうしたことを不用意に行うと、インデックス登録に問題が生じたり、ユーザーのサイト利用の妨げとなったりすることがあります。
おすすめの対処法:
- ページのコンテンツを邪魔しないでアプリを宣伝するシンプルなバナーを配置します。このバナーは次のようにして実装できます。
- ブラウザでサポートされるバナー（Safari の場合はスマートアプリ バナー、Chrome の場合はネイティブ アプリバナー）を使用します。
- 一般的な小型広告と同様に HTML バナーや画像を使用し、アプリストアの適切なダウンロード ページへのリンクを設定します。
不適切な相互リンク
ウェブサイトのモバイル用ページを別の URL で設定している場合の慣行として、ページ内にパソコン用ページへのリンクを置いたり、逆にパソコン用ページにモバイル用ページに行けるリンクを用意したりすることがあります。この場合のよくある誤りは、無関係なページにリンクを設定してしまうことです。たとえば、モバイル用ページに、パソコンサイトのホームページへのリンクを設定するようなケースです。
おすすめの対処法:
- リンクを確認して、対応する正しいページがリンク先となるようにします。
表示速度の遅いモバイルページ
モバイルサイトは、速やかに読み込まれるようにすることが重要です。コンテンツが表示されるまでに長い時間がかかると、ユーザーの不満が増すおそれがあります。
おすすめの対処法:
Google PageSpeed Insights を使用し、特に「速度」の項目を調べて、ページの表示速度を低下させている問題を探します。「修正が必要」と表示されている問題の解決を試みてください。
関連ページ
ビューポートを正しく設定する
サイトにアクセスするユーザーは、画面サイズの異なるさまざまなデバイスを使用しているので、サイトのページにビューポート メタタグを使用してビューポートを指定する必要があります。このタグは、デバイスに合わせてページのサイズと拡大縮小を調整する方法をブラウザに指示します。その際、次の 2 つの誤りがよく見られます。
- 固定幅のビューポートを使用している。さまざまなデバイスのサイズに対してページを拡大縮小できなくなります（多くのデバイスで問題になります）。詳細
- 最小のビューポートとして、現実に合わない広い幅を想定している。それより小さいデバイスではコンテンツを読むのに水平方向のスクロールが必要になります。この問題は、ページの CSS 宣言で絶対値を使用している場合や、ページの画像がブラウザの特定の幅（980 ピクセルなど）で最適に表示されるように設計されている場合に発生します。この誤りを修正するには、ページの CSS 要素の幅と位置に相対値を使用し、画像も同様に拡大縮小できるようにします。詳細
小さなフォントサイズ
フォントサイズが小さすぎるとモバイル デバイスでは読みづらくなり、ピンチ操作でズームしないと読めない場合もあります。ウェブページのビューポートを指定した後、ビューポート内でフォントサイズが適切に拡大縮小されるように設定してください。フォントサイズに関するおすすめの方法について詳しくは、読みやすいフォントサイズを使用するをご覧ください。
近すぎるタップ要素
ボタンやリンクなどのタップ要素が互いに近すぎて、モバイル ユーザーが目的の要素をタップしようとすると隣の要素に指が触れてしまうような設定は避けてください。このような誤りを修正するには、ボタンやナビゲーション リンクのサイズや間隔をモバイル ユーザーに合わせて適切に設定するようにします。詳しくは、タップ ターゲットのサイズを適切に調整するをご覧ください。