レスポンシブ ウェブ デザインは、サーバーからどのデバイスに対しても常に同じ HTML コードを配信しつつ、CSS を使用して各デバイスでのページのレンダリングを変更する設定方法です。すべての Googlebot ユーザー エージェントがページとそのアセット（CSS、JavaScript、画像）をクロールできる状態であれば、この設定は Google のアルゴリズムによって自動的に検出されます。
要約
meta name="viewport"タグを使用して、コンテンツの調整方法をブラウザに指示できます。- 詳細については、ウェブの基礎をご覧ください。
meta name="viewport" を使用する
ページがあらゆるデバイスに適応できることをブラウザに知らせるには、ドキュメントのヘッダーに次のようなメタタグを追加します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
meta viewport タグは、ページのサイズやスケーリングを、デバイスの幅に合わせてどう調整するかをブラウザに伝えます。meta viewport 要素を指定しない場合は、モバイル ブラウザでもデフォルトとして、パソコン画面の幅（デバイスによって異なりますが通常はおよそ 980 ピクセル）でページがレンダリングされます。その後モバイル ブラウザがフォントサイズを大きくし、画面に収まるようにコンテンツを縮小する、またはコンテンツの一部のみを表示する、といった調整を試みます。
この調整により、ユーザーにとってはフォントサイズの統一感が失われることがあります。また、コンテンツを表示して操作するためにダブルタップやピンチ操作によるズームが必要になることもあります。Google では、モバイル デバイスでこのような操作が必要になるページをモバイル フレンドリーとは見なさない場合があります。
レスポンシブな画像には、<picture> 要素を含めるようにしてください。
一般に、Google Chrome や Apple Mobile Safari などの最新のブラウザで表示されるサイトは、Google のアルゴリズムでも正常に扱われます。
レスポンシブ デザインにする理由
レスポンシブ ウェブ デザインをおすすめする理由は以下のとおりです。
- URL が 1 つなので、ユーザーによるコンテンツの共有やリンクが簡単になります。
- 対応するパソコン用ページまたはモバイル用ページが存在することを Google のアルゴリズムに伝える必要がなく、インデックス登録プロパティが正確にページに割り当てられます。
- 同じコンテンツのページをいくつも維持管理する手間が省けます。
- モバイルサイトでよくある誤りに陥る可能性を抑えることができます。
- ユーザーをデバイスごとに最適化したページにリダイレクトする必要がないため、読み込み時間を短縮できます。また、ユーザー エージェントに基づくリダイレクトはエラーが発生しやすいため、サイトのユーザー エクスペリエンスを損なうおそれがあります（詳細については、ユーザー エージェントの正確な検出をご覧ください）。
- Googlebot がサイトをクロールするために必要なリソースを節約できます。レスポンシブ ウェブ デザインでは、1 つの Googlebot ユーザー エージェントがページを一度クロールするだけで済みます。異なる Googlebot ユーザー エージェントが何度もクロールしてコンテンツのすべてのバージョンを取得する必要はありません。Google によるクロールの効率が上がることは、間接的には、サイトのコンテンツがより多くインデックスに登録され、適切な間隔で更新されることにつながります。
レスポンシブ ウェブ デザインに興味を持たれた場合は、まず Google 検索セントラルのブログ投稿と、ウェブの基礎のサイトをご覧ください。
JavaScript
モバイル フレンドリー サイトを作成するにあたって慎重に検討すべきこととは、JavaScript をどのように使って各種デバイスでのサイトのレンダリングと動作を変更するかです。JavaScript の一般的な用途には、ページに表示する広告や画像の解像度の決定などがあります。
ここでは、JavaScript のさまざまな設定方法と、Google がおすすめするレスポンシブ ウェブ デザインの利用にそれがどのように関連するかを説明します。
一般的な設定
モバイル フレンドリー サイトで JavaScript を実装する一般的な方法は次の 3 つです。
- JavaScript 適応: この設定では、すべてのデバイスに同じ HTML、CSS、JavaScript コンテンツを配信します。JavaScript がデバイスで実行されたときに、サイトのレンダリングや動作が変更されます。ウェブサイトに JavaScript が必要な場合は、この設定をおすすめします。
- 複合検出: この設定では、ウェブサイトが JavaScript とサーバー側の両方でデバイス機能を検出し、各デバイスに異なるコンテンツを配信します。
- JavaScript の動的配信: この設定では、すべてのデバイスに同じ HTML が配信されますが、JavaScript は、デバイスのユーザー エージェントに応じて異なる JavaScript コードを動的に配信する URL から配信されます。
次に、これらの各設定を詳しく説明します。
JavaScript 適応
この設定では、すべてのデバイスに同じコンテンツ（HTML、CSS、JavaScript、画像）を配信します。デバイスで JavaScript が実行されたときにのみ、サイトのレンダリングや動作が変更されます。これは、CSS メディアクエリを使用したレスポンス ウェブ デザインの動作に似ています。
たとえば、あるページですべてのデバイスに同じ HTML を配信し、その HTML に含まれる <script> 要素が、JavaScript を配信する外部 URL をリクエストするとします。この JavaScript の URL をリクエストするすべてのデバイスは同じコードを取得します。このコードが実行されると、JavaScript はデバイスを検出して、ページになんらかの変更を加えることを決定します。たとえば、パソコン向けの画像や広告コードの代わりにスマートフォン向けの画像や広告コードを組み込みます。
この設定はレスポンシブ ウェブ デザインと非常に密接な関連があり、Google のアルゴリズムはこの設定を自動的に検出できます。さらにこの設定では、ページやそのアセットの URL からコンテンツが動的に配信されることはないため、Vary HTTP ヘッダーは必要ありません。このような利点があるので、ウェブサイトで JavaScript を使う必要がある場合はこの設定をおすすめします。
複合検出
この設定では、サーバーがクライアント上の JavaScript と連携してデバイスの機能を検出し、配信されるコンテンツを変更します。
たとえば、あるサイトで、デバイスがパソコンかスマートフォンかに応じて、コンテンツのレンダリングを変更するとします。この場合、画面のサイズを検出する 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 がさまざまな Googlebot ユーザー エージェントで JavaScript ファイルをクロールするためのシグナルでもあります。