スマートフォン・フィーチャーフォン対応アノテーションの最適な設定について

近年のスマートフォンの爆発的な普及により、スマートフォン向けサイトを運営するケースが増えています。
しかし、SEO対策に注意したスマートフォン向けサイト、フィーチャーフォン向けサイトの構築を行わなければデバイス間で重複コンテンツとして判断され、スマートフォン向けページがPC向けページより上位に表示されてしまう可能性があります。
本ページではデバイス間における同一コンテンツを検索エンジンに正しく認識させるための設定をご紹介致します。

目次

1. 対象サイト
2. 設定方法
3. まとめ

対象サイト

本設定が必要なサイトは、スマートフォン向けページやフィーチャーフォン(ガラケー)向けページをPC向けページと異なるURLで運用しているサイトです。
Googleは全てのデバイスで単一のURLで運用し、同一HTMLをデバイス毎にCSSで表示内容を変更するレスポンシブ・ウェブデザインを推奨しておりますが、実装が困難な場合は本ページで紹介するアノテーションならびにHTTPヘッダー内の設定が必要となります。

設定方法

Google Developersのスマートフォンとフィーチャーフォンをサポートする方法によれば、各ページのheadタグにアノテーションを設置し、デバイス毎にユーザーエージェント等でリダイレクトを行う際はHTTPヘッダーへの設定が必要となります。
本ページではPC、スマートフォン、フィーチャーフォン向けページを以下のURLと仮定し、具体的な設定方法をご紹介致します。

■PC
http://www.example.com/
http://www.example.com/page1.html

■スマートフォン
http://s.example.com/
http://s.example.com/page1.html

■フィーチャーフォン
http://m.example.com/
http://m.example.com/page1.html

アノテーション

各ページのheadタグ内に以下のアノテーションを設置します。
具体的にはPC向けページにはスマートフォン、フィーチャーフォン向けページをrel=”alternate”で指定したアノテーションを設置します。
スマートフォン、フィーチャーフォン向けページにはPCページを指定したURL正規化タグを設置します。

■PC向けTopページ：http://www.example.com/
<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://s.example.com/” />
<link rel=”alternate” media=”handheld” href=”http://m.example.com/” />

■スマートフォン向けTopページ：http://s.example.com/
<link rel=”canonical” href=”http://www.example.com/” />

■フィーチャーフォン向けTopページ：http://m.example.com/
<link rel=”canonical” href=”http://www.example.com/” />

■PC向け下層ページ：http://www.example.com/page1.html
<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://s.example.com/page1.html” />
<link rel=”alternate” media=”handheld” href=”http://m.example.com/page1.html” />

■スマートフォン向け下層ページ：http://s.example.com/page1.html
<link rel=”canonical” href=”http://www.example.com/page1.html” />

■フィーチャーフォン向けTopページ：http://m.example.com/page1.html
<link rel=”canonical” href=”http://www.example.com/page1.html” />

Vary HTTP ヘッダー

異なるデバイスからアクセスがあった際にデバイスに応じたURLへリダイレクト処理を行う際、Vary HTTPヘッダーの設定をGoogleは推奨しています。
具体的にはリダイレクト時にHTTPレスポンスヘッダーにVary: User-Agentを送信する必要があります。

例：
GET /page-1 HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19
（…HTTP リクエスト ヘッダーの続き…）

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
（…HTTP レスポンス ヘッダーの続き…）

まとめ

近年におけるスマートフォンの普及率より、スマートフォンサイトを運用しているケースは増えておりますが、レスポンシブ・ウェブデザインで構築されているケースは未だ少なく、多くのサイトがデバイス毎に別URLで運用されております。
本ページで紹介したSEO対策を目的とした設定を完璧に行っているサイトは極めて稀で、多くのサイトで未設定・誤設定が生じており、検索順位に影響している可能性も考えられる事例が増えております。
デバイス毎に異なるURLでサイトを運営する場合は本ページの設定を正しく行い、検索エンジンに正しくコンテンツを理解してもらえるようにしましょう。