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

公開日:2017.04.26

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

対象サイト

本設定が必要なサイトは、スマートフォン向けページやフィーチャーフォン(ガラケー)向けページを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でサイトを運営する場合は本ページの設定を正しく行い、検索エンジンに正しくコンテンツを理解してもらえるようにしましょう。

執筆者情報

J-Grip Marketing編集部

Web集客・制作分野におけるブランディング・コンサルティング・マーケティングのプロフェッショナル。効果的でありながらWeb集客の本質に関する情報を、専門的にかつ分かりやすく紹介いたします。

プロモーション、広告、制作、PRなら、
J・Gripマーケティング
ご依頼ください。

新技術や新手法が次々と現れる中で、常に最新かつ効果的なマーケティングソリューションを提供するために、弊社ではクリエイティブ制作、システム開発、分析専門担当、WEBプロモーション運用専門担当、企画担当などクライアントニーズの全てに応えることのできる体制を整えています。

おすすめ記事

関連記事