[対象: 中〜上級]
Googleは、フィーチャーフォン向けのモバイルサイトに対する推奨構成を公開しました。
Building Smartphone-Optimized Websites – Webmasters — Google Developers
スマートフォン向けのモバイルサイトの推奨構成を1ヶ月前に公開しましたが、このなかには従来型の携帯電話であるフィーチャーフォン、日本で俗にいうガラケーについては触れていませんでした。
そこでフィーチャーフォン用の推奨要件をドキュメントに新たに追加した形になります。
モバイルサイトの構成に際してはレスポンシブ・ウェブデザインをGoogleは推奨しています。
しかしフィーチャーフォンはCSSメディアクエリをサポートしていません。
したがってGoogleがサポートする3つ構成のうちのレスポンシブ・ウェブデザイン以外の方法を採用する必要が出てきます。
レスポンシブ・ウェブデザイン以外の2つの構成とはすなわち次の2つです。
- 動的な配信 (Dynamic serving)
- モバイル向け別URL (Separate mobile URLs)
デスクトップ向けとスマホ向けに加えてフィーチャーフォン向けのサイトも運用する際に上の2つの構成がどのようになるかをこれから解説します。
スマートフォン向けサイトの3つの推奨構成を理解していない人は読み進める前に下の解説を先に読んでおいてください。
『スマートフォン向けサイトにはレスポンシブ・ウェブデザインを推奨、Googleが公開したスマホサイトの最適化 at #SMX Advanced Seattle 2012』
動的な配信
「動的な配信」では、デスクトップとモバイルで同じURLを使用しますが提供するHTMLは別になります。
フィーチャーフォン用サイトを提供する場合であっても設定はスマホ向けの要件と変わりません。
忘れてならない点は、スマホサイトの構成のときと同じように“Vary: User-Agent”をHTTPヘッダーに含めることです。
また振り分けの設定にミスがないようにすることにも気を付けてください。
別々のURL
デスクトップ向けページとモバイル向けページのURLを分ける構成です。
3つのパターンが考えられます。
共通して重要なことは「アノテーション」を利用する点です。
1. それぞれが専用のURLを持つ
1つめはデスクトップとスマホ、フィーチャーフォンそれぞれに独自のURLを割り当てるパターンです。
次のようなURL構成になっていたとします。
- デスクトップ — http://www.example.com/page-1
- スマートフォン — http://m.example.com/page-1
- フィーチャーフォン — http://phone.example.com/page-1
ページを表示する端末に応じてURLは異なりますがページの内容自体は等しくなります。
それぞれの関係性をGoogleのアルゴリズムに理解させるためにアノテーションと呼ぶHTML要素をheadセクションに追加します。
デスクトップ向けページの「www.example.com/page-1」のheadセクションには次のアノテーションを記述します。
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
<link rel="alternate" media="handheld" href="http://phone.example.com/page-1" />
スマホ向けページを示すrel=”alternate”とフィーチャーフォン向けページを示すrel=”alternate”の2つを書くわけですね。
スマートフォン向けページの「m.example.com/page-1」のheadセクションには次のアノテーションを記述します。
<link rel="canonical" href="http://www.example.com/page-1" />rel=”canonical”でデスクトップ向けページに正規化しています。
フィーチャーフォン向けページの「phone.example.com/page-1」のheadセクションには次のアノテーションを記述します。
<link rel="canonical" href="http://www.example.com/page-1" />スマホ向けページと同様に、rel=”canonical”でデスクトップ向けページに正規化しています。
rel=”alternateであってもrel=”canonical”であってもアノテーションのリンク先URLは対応するページを指定します。
間違ってすべてをトップページに向けたりにしてください。
かつアノテーションは全部のページに（適切なリンク先URLで！）記述します。
ドキュメントでは、アノテーションは“recommend”（推奨）となっているので必須ではないようですが特殊な事情がない限りは実装しておいたほうがいいでしょう。
2. デスクトップ向けURLとスマートフォン/フィーチャーフォンを合わせたモバイル向けURLページを持つ
2つめのパターンはスマートフォンとフィーチャーフォンに同じURLでコンテンツを提供する場合です。
つまりデスクトップ向けページとモバイル向けページの2つのURLが存在します。
スマートフォンとフィーチャーフォンを（少なくともURL上は）ひとまとめにしているイメージですね。
次のようなURL構成になっていたとします。
- デスクトップ — http://www.example.com/page-1
- モバイル（スマートフォン&フィーチャーフォン） — http://m.example.com/page-1
デスクトップ向けページの「www.example.com/page-1」のheadセクションには次のアノテーションを記述します。
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
<link rel="alternate" media="handheld" href="http://m.example.com/page-1" />
スマホ向けページを示すrel=”alternate”とフィーチャーフォン向けページを示すrel=”alternate”の2つを書きます。
リンク先URLは同じです。
モバイル向けページの「m.example.com/page-1」のheadセクションには次のアノテーションを記述します。
<link rel="canonical" href="http://www.example.com/page-1" />1つ前のパターンと同じで、デスクトップ向けURLに正規化しています。
3. フィーチャーフォン向けのURLを持つ
3つめのパターンは、デスクトップとスマートフォンには同じURLでコンテンツを提供し、フィーチャーフォン向けには専用のURLを用意する構成です。
デスクトップ&スマホ向けには、レスポンシブ・ウェブデザインか動的配信を利用できます。
次のようなURL構成になっていたとします。
- デスクトップ&スマートフォン — http://www.example.com/page-1
- モバイル — http://m.example.com/page-1
デスクトップ&スマホ向けページの「www.example.com/page-1」のheadセクションには次のアノテーションを記述します。
<link rel="alternate" media="handheld" href="http://m.example.com/page-1" />
対応するフィーチャーフォン向けページがあることを伝えるためです。
フィーチャーフォン向けページの「m.example.com/page-1」のheadセクションには次のアノテーションを記述します。
<link rel="canonical" href="http://www.example.com/page-1" />デスクトップ（&スマホ）向けページに正規化するためです。
Vary HTTP ヘッダー
上で説明した別URLの構成を採用してモバイルユーザーをモバイルページに自動でリダイレクトする場合は、3つのパターンのどれであっても「HTTP Vary: User-Agent」ヘッダーを返すようにします。
Vary HTTPヘッダーによって、Googlebotやキャッシュサーバーにユーザーエージェント (UA)に応じて異なるコンテンツを返すことがあると伝えることができGooglebot-Mobileがクロールする合図になります。
【UPDATE】別URLの場合はrel=”canonical”とrel=”alternate”でデスクトップURLとモバイルURLの関係性を伝えているため Vary HTTP ヘッダーは必須ではありません。必須ではありませんが、UAによって自動的にリダイレクトする場合は実装することをGoogleは推奨しています（Googleの人に確認済み）。
以上が、デスクトップとスマートフォン、フィーチャーフォンの3タイプの端末に向けたページを提供する際のGoogleの推奨構成です。
分かりやすいように噛み砕きながら説明したつもりですが理解できたでしょうか？
デスクトップとスマートフォンの2つに対しての構成だけでもややこしく感じた人には混乱にさらに拍車がかかってしまっているかもしれませんね。
ポイントは次の2つです。
- アノテーション
- HTTP Vary: User-Agent ヘッダー
URLが異なっていても互いに関連したページであることを伝えるためにアノテーションの力を借ります。
Vary HTTPヘッダーはUAに応じて自動でリダイレクトする場合に必要です。
リダイレクトの構成ではGooglebotとGooglebot-Mobileの振り分けに間違いがないように確実に設定することが大前提になります。
関わっているのが自分のサイトだけであれば該当する箇所だけをさしあたり理解しておけばいいでしょう。
お客さんのサイトなどさまざまな構成のサイトの面倒を見る場合は、原文の英語のドキュメントも読んでおきたいところです。
とはいっても、本来ならばGoogleが早急に日本語化すべきですよね。
こういうところは日本のGoogleスタッフに頑張ってほしいところです。
日本語化が自分たちの管轄でないならせめて働きかけだけでもしてくれていればと期待します。
【UPDATE】
日本版Googleウェブマスター向け公式ヘルプフォーラムでドキュメントの日本語訳が公開されました。
サイト作成に直接携わることがない、ある意味無責任な僕の考えを最後に書いて終わりにします。
- スマホ向けサイトを提供するならレスポンシブ・ウェブデザインを採用する。
- フィーチャーフォン向けページは作らない（ガラケーは切り捨てる）。
Googleのことを最優先で考えるともっともシンプルなこれが結論になっちゃいますよね。
ゼロからスタートする場合は特にです。