このページでは、ウェブマスターがモバイルサイトの設計で陥りがちな誤りについて説明します。
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 標準タグを使用して動画やアニメーションを掲載することをおすすめします。
Flash やその他のマルチメディア プレーヤーを使用してレンダリングされるアニメーション コンテンツがある場合は、すべてのウェブブラウザで動作する 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 バナーや画像を使い、アプリストアでの適切なダウンロード ページへのリンクを設定します。
Android アプリをご利用の場合は、App Indexing の実装をおすすめします。インデックスに登録したアプリ内のコンテンツが特定の検索クエリに関連していると、検索結果にインストール ボタンが表示されるため、ユーザーはアプリをダウンロードして、アプリ内の特定のページに直接アクセスできます。
不適切な相互リンク
ウェブサイトでモバイル向けのページが別途ある場合、パソコン向けのページへのリンクを設けたり、逆にパソコン向けのページにモバイル向けのページへのリンクを設定したりすることがよくあります。このときによくある誤りは、無関係のページにリンクを設定してしまうことです。たとえば、モバイル向けのページからパソコンサイトのホームページにリンクを設定するようなケースです。
おすすめの対処法:
- リンクを確認して、対応する正しいページがリンク先となるようにします。
表示速度の遅いモバイルページ
モバイルサイトが速やかに読み込まれるようにすることが非常に重要です。コンテンツが表示されるまでに長い時間がかかると、ユーザーの不満が増すおそれがあります。
おすすめの対処法:
Google PageSpeed Insights を使用し、特に [速度] の欄を調べて、ページの表示速度が遅い原因となる問題を探します。[修正が必要] と表示された問題について解決を試みます。
詳細については以下をご覧ください。
ビューポートを正しく設定する
サイトにアクセスするユーザーは、画面サイズの異なるさまざまなデバイスを使用しているので、サイトのページにビューポート メタタグを使用してビューポートを指定する必要があります。このタグは、デバイスに合わせてページのサイズとスケーリングを調整する方法をブラウザに指示します。その際、次の 2 つの誤りがよく問題になります。
- 固定幅のビューポートを使用している。さまざまなデバイスのサイズに対してページを拡大縮小できなくなります（多くのデバイスで問題になります）。詳細
- 最小のビューポートとして、現実に合わない広い幅を想定している。それより小さいデバイスではコンテンツを読むのに水平方向のスクロールが必要になります。この問題は、ページの CSS 宣言で絶対値を使用している場合や、ページの画像がブラウザの特定の幅（980 ピクセルなど）で最適に表示されるように設計されている場合に発生します。この誤りを修正するには、ページの CSS 要素の幅と位置に相対値を使用し、画像も同様に拡大縮小できるようにします。詳細
小さなフォントサイズ
フォントサイズを小さくしすぎてモバイル デバイスで読みにくくなり、ユーザーが読むのに「ピンチして拡大」が必要になるような設定は避けます。ウェブページのビューポートを指定した後に、フォントサイズを設定してビューポート内で適切に拡大縮小されるようにします。フォントサイズに関するおすすめの方法について詳しくは、読みやすいフォントサイズを使用するをご覧ください。
近すぎるタップ要素
ボタンやリンクなどのタップ要素同士が近すぎて、モバイル ユーザーが指で隣の要素に触れずに目的の要素をタップすることが難しいような設定は避けます。このような誤りを修正するには、ボタンやナビゲーション リンクのサイズや間隔をモバイル ユーザーに合わせて適切に設定するようにします。詳しくは、タップ ターゲットのサイズを適切に調整するをご覧ください。