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