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