モバイルSEO 設定を検索エンジンに伝える レスポンシブウェブデザイン

レスポンシブ ウェブ デザイン（RWD）は、サーバーからどのデバイスに対しても常に同じ HTML コードを配信し、CSS を使用して各デバイスでのページのレンダリングを変える設定です。

Googlebotがページとそのアセット（CSS、JavaScript、画像）をクロールできれば、Google のアルゴリズムがレスポンシブデザイン設定であると自動的に検出します。
レスポンシブ デザインは、画面サイズに合わせて調整する同一のコードがすべてのデバイスに配信されます。

meta name="viewport" タグを使用すると、コンテンツをどう調整すべきかをブラウザに伝えることができます。
詳細は「Web Fundamentals」を参考にしてください。


ページがすべてのデバイスに対応していることをブラウザに知らせるには、ドキュメントのヘッダーに次のメタタグを追加します。

meta viewportタグは、ページのサイズや縮尺を、デバイスの幅に合わせてどのように調整すべきかをブラウザに伝えるために使用します。
meta viewport要素を指定しない場合は、モバイル ブラウザのデフォルトであるパソコン画面の幅でページがレンダリングされます。
その後モバイルブラウザが、フォントを大きくして画面に合う縮尺に変える、コンテンツの一部のみが画面に収まるように表示する等の調整を試みます。
この調整により、フォントサイズの統一が消失したり、コンテンツを操作するためにダブルタップやピンチで拡大する必要が生じる場合があります。
Googleは、モバイル端末でこの操作を必要とするページを、モバイルフレンドリーと見做しません。

左側が meta viewportを指定していないページ。
モバイル ブラウザがパソコン画面の幅を想定してページをレンダリングしているため、細かすぎてコンテンツを読み取ることができません。
右側は、同じページにmeta viewport指定したページ。
デバイスの幅に合っているため、モバイル ブラウザ側でページの縮尺を変える必要がなく、コンテンツが読みやすい大きさで表示されます。

レスポンシブな画像には、<picture>要素を含めます。


一般に、Google Chrome や Apple Mobile Safari などのブラウザでサイトが表示されれば、サイトは Googleアルゴリズムで検出されています。


レスポンシブデザインにする理由

• URLが1つなので、ユーザーがコンテンツを簡単に共有やリンクができます。
• 対応するパソコン用ページやモバイル用ページが存在することをGoogleアルゴリズムに伝える必要がなく、ページへのインデックスプロパティの割り当てが正確に行われます。
• 同じコンテンツのページを維持管理する手間が省けます。
• モバイルサイトのよくあるミスを抑えることができます。
• ユーザーのデバイスに最適ページへリダイレクトする必要がないため、読み込み時間を短縮できます。また、ユーザー エージェントに基づくリダイレクトは、エラーが発生しやすいため、ユーザーの利便性を失う可能性があります（詳細は、ユーザー エージェントを正しく検出するを参照してください）。
• Googlebotがサイトをクロールするために必要なリソースを節約できます。同じコンテンツのページが複数存在すると、別々のGooglebotがすべてのバージョンを複数回クロールする必要があります。レスポンシブ ウェブ デザインの場合は、一つのGooglebotがページをクロールだけです。クロールの効率が上がると、サイト内で多くのコンテンツがインデックス登録され、適切なタイミングで更新されます。

レスポンシブウェブデザインに関する詳細は、ウェブマスター セントラルのブログ、Web Fundamentalsを参考にしてください。

以下の点にご注意ください。
robots.txt などの方法で、Googlebotのクロールをブロックしないでください。
Googlebotが外部ファイルにアクセスできることで、そのサイトの設定がレスポンシブウェブデザインであることがアルゴリズムによって検出され、適切に処理されます。
よくあるミスが発生しないようにしてください。

JavaScript
モバイルフレンドリーサイトを作成する場合、JavaScript をどのように使い、各種デバイスでサイトのレンダリングと動作を変更するか検討する事です。

JavaScriptの一般的な用途には、ページに表示する広告や画像の解像度の決定などがあります。
JavaScript のさまざまな実装方法と、それらの方法がレスポンシブウェブデザインの使用にどう関連するかの解説です。

一般的な設定
モバイルフレンドリーサイトでJavaScriptの一般的な方法は3つです。

• すべてのデバイスに同じ JavaScript を配信：同じ HTML、CSS、JavaScriptのコンテンツを配信します。JavaScriptがデバイスで実行されたときに、サイトのレンダリングや動作が変更されます。ウェブサイトにJavaScriptが必要な場合、Googleはこの方法を推奨しています。
• JavaScript とサーバー側でのデバイス検出：ウェブサイトは JavaScript とサーバー側でのデバイス機能の検出を両方使って、デバイスごとに異なるコンテンツを配信します。
• JavaScript の動的配信：すべてのデバイスに同じ HTML が配信されますが、JavaScript はデバイスのユーザーエージェントで異なるJavaScriptコードを動的に配信するURLから配信されます。

すべてのデバイスに同じ JavaScript を配信
URLはすべてのデバイスに同じコンテンツ（HTML、CSS、JavaScript、画像）を配信します。
デバイスでJavaScriptが実行された場合のみ、サイトのレンダリングや動作を変更します。
これは、CSSメディアクエリを使用したレスポンシブウェブデザインの動作に似ています。

例
ページで、すべてのデバイスに同じ HTML が配信され、その HTML に含まれている <script> 要素が、JavaScriptを配信する外部URLをリクエストするとします。
このJavaScriptのURLをリクエストするデバイスはすべて同じコードを取得します。
このコードが実行されたときに、JavaScriptはデバイスを検出し、ページのレンダリングなどを変更することを決定します。
つまり、パソコン向けの画像や広告コードではなく、スマートフォン向けの画像や広告コードが組み込まれることになります。

レスポンシブウェブデザインと非常に密接な関連があり、Googleアルゴリズムはこの設定を自動的に検出します。
ページやアセットのURLがコンテンツを動的に配信しないため、Vary HTTP ヘッダーは必要ありません。
このようなメリットがあることから、ウェブサイトでJavaScriptを使う必要がある場合はこの設定をグーグルは推奨しています。


JavaScript とサーバー側でのデバイス検出
サーバーがクライアント上のJavaScriptと連携してデバイスの機能を検出し、配信するコンテンツを変更します。

例
サイトで、デバイスがPCとスマートフォンのいずれかに基づいて、コンテンツのレンダリングを変更するとします。
この場合、画面のサイズを検出するJavaScriptをウェブサイトに組み込みます。
検出した画面サイズはサーバーに送信され、デバイスに送信するコードをサーバーが更新または変更します。
一般に、JavaScriptは検出したデバイス機能をCookieに保存し、サーバーはそれ以降の同じデバイスからのアクセス時にCookieを読み取ります。

サーバーがユーザーエージェントごとに異なるHTMLを返すので、この方法は動的な配信設定の一種と見なされます。
詳細は 動的な配信 - ウェブマスター向けモバイルガイドに記載されています。
簡単に言うと、ユーザーエージェントごとに異なるHTMLコンテンツを配信するURLが必要な場合は、ウェブサイトに「Vary: User-agent」HTTPレスポンスヘッダーを含めます。


JavaScript の動的配信
すべてのデバイスに同じHTMLが配信され、そのHTMLに、リクエスト側のユーザーエージェントに応じて異なるコンテンツを用意できる外部JavaScriptファイルを含む <script> 要素が含まれます。
JavaScript コードは動的に配信されます。
この場合、JavaScript ファイルは「Vary: User-agent」HTTP ヘッダーと一緒に配信することをグーグルは推奨しています。
これは、キャッシュや Googlebot に対し、JavaScript がユーザー エージェントごとに異なる可能性があることを知らせるものです。
また、Googlebot がJavaScript ファイルをクロールするためのシグナルです。