レスポンシブ ウェブ デザイン

レスポンシブ ウェブ デザイン(RWD)は、サーバーからどのデバイスに対しても常に同じ 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 ではモバイル フレンドリーとは見なさないこともあります。

左側が meta viewport を指定していないページです。モバイル ブラウザがパソコン画面の幅を想定し、画面に収まるようにページを縮小しているため、コンテンツが読み取りにくくなっています。右側は、同じページにデバイスの幅に合わせた meta viewport を指定した場合です。モバイル ブラウザがページを縮小する必要がなく、コンテンツが読みやすくなっています。

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

一般に、Google Chrome や Apple Mobile Safari などの最新のブラウザで表示されるサイトは、Google のアルゴリズムでも正常に扱われます。

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

レスポンシブ ウェブ デザインをおすすめする理由は以下のとおりです。

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

レスポンシブ ウェブ デザインにご関心があれば、まずウェブマスター セントラルのブログ投稿をご覧になり、ウェブの基礎についてのサイトをご確認ください。

JavaScript

モバイル フレンドリー サイトを作成するにあたって慎重に検討すべきこととは、JavaScript をどのように使って各種デバイスでのサイトのレンダリングと動作を変更するかです。JavaScript の一般的な用途には、ページに表示する広告や画像の解像度の決定などがあります。

ここでは、JavaScript のさまざまな実装方法と、その方法が Google がおすすめするレスポンシブ ウェブ デザインの利用にどう関連するかについて説明します。

一般的な設定

モバイル フレンドリー サイトで JavaScript を実装する一般的な方法は次の 3 つです。

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

次に、上記の各設定方法について詳しく説明します。

すべてのデバイスに同じ JavaScript を配信

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

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

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

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 ファイルをクロールするためのシグナルでもあります。