スマートフォン最適化サイトを認識させるための推奨事項(Google)

5か月ほど前の話になりますが、Googleがスマートフォン最適化サイトを認識させるための推奨事項を発表しました。スマートフォン向けサイトを考えるうえで、非常に重要な話ですので、改めて概要をまとめたいと思いますhttps://developers.google.com/webmasters/smartphone-sites/details

ここでは、3つの方法が触れられています。すなわち、
1.レスポンシブウェブデザイン(Responsive web design)
デスクトップとスマートフォンで同じURL・同じHTML(Googleの推奨)

2. 動的な配信(ダイナミックサービング)
デスクトップとスマートフォンで同じURL・異なるHTML

3.デスクトップサイトとスマートフォンサイトの別個運用です
デスクトップとスマートフォンで異なるURL・異なるHTML

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

Googleはこの方法を推奨しています。

すべてのデバイスに対し同じURLで、同じHTMLコードを返しますが、CSSメディアクエリによって各デバイスのサイズに合わせて適切な描画をします。
例えば、「NHKスタジオパーク」のサイトがレスポンシブウェブデザインを採用しています。ブラウザのサイズを調整すると、それに応じてコンテンツの配置が変わります
http://www.nhk.or.jp/studiopark/

2. 動的な配信

URLは同じですが、User-Agentに応じてデスクトップとスマートフォンで別々のHTML(及びCSS)を返します。
この方法を使う場合、モバイル向けコンテンツがあることをGoogleのクローラーが発見出来るよう、Vary HTTPヘッダー(※)というものを使うなどします。

※Vary HTTPヘッダ
http://sonic64.com/2004-02-06.html

3
.デスクトップサイトとスマートフォンサイトの別個運用

デスクトップ向けサイトとスマートフォン向けサイトを別個のURLにします。
例えばデスクトップ向けが www.example.comで、スマートフォン向けがm.example.comとなります。

この場合、Googleが両者の関連性を把握するためにアノテーションを実装し、伝える必要があります。デスクトップ向けページからは、rel=”alternate” で対応するモバイル向けページを指し示します。こうすることでモバイル向けページがあることを伝えられます。モバイルページからは、rel=”canonical” で対応するデスクトップページを指し示します。