2012.07.10SEO記事一覧

図解でわかる、デスクトップPC・スマートフォン・フィーチャーフォンの三つ巴ページ切り替え設定

  • このエントリーをはてなブックマークに追加

raptop-smartphone-featurephone
 

この記事をご覧いただいている皆様へ。

このページは、SEO情報ブログ「ディーエムソリューションズの社員が作った、【SEOまとめ】」にて公開されていた記事であり、2014年12月にデジタルマーケティング研究所へ統合されました。

blog-news

先日、Googleからスマートフォン向けページの構築に際してはレスポンシブウェブデザインを推奨する旨が発表されました。
Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法(Googleウェブマスター向け公式ブログ)

うーむ、相変わらずわかりづらい。それに、スマートフォン向けのページだけじゃなくてフィーチャーフォン(&ガラケー)向けページもある場合はどうしたらいいの?頭がスポンジ!と思った方は私だけじゃないはず。

reponsive-web-design

そこで今日はモバイル端末用ページ設定の最適化をテーマに、できるかぎりわかりやすく解説したいと思います。
 

【予備知識篇】Googleがサポートしている設定は3つある

モバイル用ページの設定に関して、Googleがサポートしているものは3つ。具体的な設定方法に入る前にそれぞれの意味合いを確認しておきましょう。

(1)同じURL、同じHTML(レスポンシブ・ウェブデザイン)

あー、レスポンシブ・ウェブデザインなんていきなり難しそうな言葉が出てきたな・・・というあなた。大丈夫です、私もそうでした。図解します。

raptop-smartphone-featurephone01

意外とシンプルでしょ?CSS3(最新のスタイルシート規格)でサポートされているメディアクエリという記述方法を使って、同じURLでも違うコンテンツを見せられるようにするものです。

Googleはレスポンシブ・ウェブデザインを推奨しています。でもすでに出来上がってしまったデスクトップPC向けサイトにレスポンシブ・ウェブデザインを適用するのは簡単ではなさそうですね!(HTMLを見直す必要があるため)

(2)同じURL、異なるHTML

普段静的なHTMLでサイトを構築している方には直感的にわかりにくい概念ですね。図解します。

raptop-smartphone-featurephone02

はい。意外とシンプルでしょ?
でも一般的なサイトの場合サイト構築段階でないと実装が困難です。

ちなみにWordPressで有名なWPtouch(自動的にスマフォ向けインターフェイスを作ってくれる)やKtai Style(自動的にガラケー向けインターフェイスを作ってくれる)などのプラグインを追加すると必然的に「同じURL、異なるHTML」の状態になります。

(3)異なるURL、異なるHTML

これは比較的わかりやすいのでは無いでしょうか。

raptop-smartphone-featurephone03

スマートフォン用ページやフィーチャーフォン(&ガラケー)向けページを後付けで制作する場合に採用される、メジャーな方法です。しかし手軽さの反面検索エンジンのインデックス上の問題を内包しており、Google一押しの設定ではありません。
ただし、後述するリダイレクトと<link>タグの設定により検索エンジンのインデックスを助けることができますのでご安心を。

(4)ここまでのまとめ

それぞれの特長をまとめると以下の通り。

設定 Google推奨度 構築難易度
同じURL、同じHTML
同じURL、異なるHTML
URLもHTMLも違う

(5)設定用UA(ユーザーエージェント)一覧

さて、それでは具体的な設定内容の前に・・・この後「ガラケー用UA」とか「スマフォ向けUA」などという言葉が頻出することになりますので、それらが何を示しているのかもここで紹介してしまいます。

ガラケー用基本UA一覧

DoCoMo

UP.Browser

Vodafone

SoftBank

DDIPOKET

PDXGW

WILLCOM

以下は各種携帯用検索エンジンクローラー。上2つを設定しておけば基本OKです。

Y!J-SRD

Y!J-MBS

ichiro/mobile

MSNBOT-MOBILE

symphonybot

RFCrawler-Mobile

moba-crawler

スマフォ用基本UA一覧

iPhone

iPod

Android かつ Mobile

BlackBerry

Windows Phone

はい。ここで「どこにも『Googlebot-Mobile』が入ってないけど、いいの!?」とお感じになったあなたは鋭い。そうなんです。これこそがこの3端末切り分け設定をややこしくしている張本人でして、Googlebot-Mobileに関してはスマフォ用ページとガラケー用ページ両方を見てもらう必要があるのです。
救いは現状(2012年7月時点)ではスマートフォン用のGooglebot-Mobileが必ずiPhoneのUAを合わせてもってくれていること。とりあえずこの段階ではその点だけ抑えておいてください。

【最適化篇】それぞれの設定方法

それでは早速個別の最適化方法について見て行きましょう。

同じURL、同じHTML(レスポンシブ・ウェブデザイン)の場合の設定

まずは同じURL、同じHTML(レスポンシブ・ウェブデザイン)のケース。

長所
リダイレクトや<link>タグの設定など特別な設定は必要なし!
短所
場合によっては処理が重くなる
ガラケーには基本的にCSSが適用できないからそもそも使えない

メリットはなんといってもスマフォ絡みの設定では特に気を付けることがないこと。

しいてあげるとすれば、メディアクエリにはGoogleが推奨している以下の記述を使いましょう、ということでしょうか。

@media only screen and (max-width: 640px) {…}

一方デメリットのひとつめですが、スマフォ端末で表示した時に処理が重くなる(CSSで非表示にしても元のHTMLのコード全てをスマフォブラウザが解釈しようとするため)のはこの形式の宿命。諦めましょう。

それよりもなんと、このレスポンシブ・ウェブデザインガラケーには使えない(ガラケーにはCSSに対応していないものが多いから)のです。
というわけでもし3端末対応のサイトを作るとしたら以下のような構成になるでしょうか。

raptop-smartphone-featurephone04

いくつかポイントがあります。

Mobile Link Discovery
デスクトップ用ページにはガラケー向けページを発見してもらうための<link>タグを置く。
<link media=”handheld” rel=”alternate” href=”対応するガラケー用ページのURL”>
canonical
ガラケー用ページが重複扱いされないようにデスクトップ向けページに対する<link>タグを置く。
<link rel=”canonical” href=”対応するデスクトップPC用ページのURL”>
302リダイレクト
転送方法に関しては301でも302でもどちらでもOK、とされています。Docomo端末で「ページが移動しました」と表示される問題がありますので私は302をおすすめしています。
ガラケー用ページからデスクトップPCへの戻しリダイレクトを設定しない
これ、結構やってしまっている方も多いのでは。実はGoogleは推奨していません。デスクトップ端末からガラケー用ページにアクセスがあってもそのまま表示させましょう。ユーザービリティの問題は「PC用ページはこちら」などのサイト内リンクで対応。
ガラケー用のURLにスマートフォン端末でアクセスがあった場合のみ、本体であるhttp://example.com/にリダイレクト(ここは302でも301でもOK)を返すようにします。
Googlebot-MobileかつiPhoneであるUAがガラケー用ページを見ないようにする
ガラケー用ページへのリダイレクト設定には「iPhoneでは無い」という条件が必要です。

個人的には最後が結構重要かなと思っています。この3端末コンテンツ切り替え問題をややこしくしているのが、モバイル用クローラー(Googlebot-Mobile)にはガラケーページもスマフォページも見てもらう必要があるというところです。
ですのでもしGooglebot-Mobileを全てガラケー用ページに転送するように設定してしまうとGooglebot-Mobileはスマフォ用ページを認識してくれない、という問題が!ので、Googlebot-Mobileが「iPhone」を偽装してきたときは元のURLにアクセスがあったときは元のURLに転送してレスポンシブ・デザインで構築されたスマフォ用インターフェイスを見てもらおう、という作戦です。

以上です、あーややこしい。

同じURL、異なるHTMLの場合の設定

続いて同じURL、異なるHTMLの場合の設定。

長所
このケースでは特にリダイレクトや<link>タグの設定は必要ありません。
短所
レスポンシブ・ウェブデザイン同様、出力HTML切り替え時のUA設定には注意を払う必要がある。
Vary HTTPヘッダーを設定することがGoogleによって推奨されている

上記同様UAの問題があります。それぞれに見せるページの条件は以下の通り。今回もちょっと複雑ですよ。

raptop-smartphone-featurephone05

注意すべきはやはりGooglebot-Mobileがユーザーと同じコンテンツを見るようにすること。
スマフォ用のGooglebot-Mobileは必ずユーザーエージェント「iPhone」を同時に持っているということが頭に入っていれば、パズルは解けるはずです。

問題は2点目。「Vary HTTPヘッダーって何?」とお感じになった方も多いのでは。何を隠そう、私がそうでした。当社エンジニアに確認しましたところ簡単に言うと「このページ(URL)はユーザーエージェントによって出力するHTMLを変えていますよ、とロボットに伝えられるサーバー側の設定です」とのこと。なるほど!

以下はVary HTTPヘッダーのサンプルで、アユダンテさんのブログからの引用です。

GET /page-1 HTTP/1.1

Host: www.example.com

(…残りのHTTPリクエストヘッダー…)

HTTP/1.1 200 OK

Content-Type: text/html

Vary: User-Agent

Content-Length: 5710

(…残りのHTTPレスポンスヘッダー…)

ちなみにPHPを使用している場合は「header(“Vary: User-Agent”);」を追記して上げればOK。
WordPressで「WPtouch」や「Ktai Style」を使用している場合はfunctions.phpを使ってあげると設定できるようですね。
参考:WordPressのレスポンスヘッダーにVary HTTP ヘッダーを追加する(Simple Colors)

ただ個人的にはUAによる振り分けきちんとさえやっておけばVary HTTPヘッダーを設定せずともGoogleがおかしな挙動を示すことは少ないように感じています。

URLもHTMLも違う場合の設定

とうとう最後、URLもHTMLも違う場合の設定です!

長所
制作は楽。モバイル用ページを後付けする場合でも構築しやすい。
短所
設定は大変

では、例によって図解で説明。

raptop-smartphone-featurephone06

うーむ、複雑ですね。ポイントをかいつまんでお伝えします。

Mobile Link Discovery
デスクトップ用ページにはガラケー向けページを発見してもらうための<link>タグを置く。
<link rel=”alternate” media=”handheld” href=”対応するガラケー用ページのURL”>
media=640px)>
デスクトップ用ページにはスマフォ向けページを発見してもらうための<link>タグも置く。
640px)” href=”対応するスマフォ用ページのURL”>
canonical
重複扱いされないようにガラケー用ページとスマフォ用ページ両方にデスクトップ向けページに対する<link>タグを置く。
参考:Google推奨のスマホとフィーチャーフォンに最適化したサイトの作り方(海外SEO情報ブログ)
<link rel=”canonical” href=”対応するデスクトップPC用ページのURL”>
302リダイレクト
例のごとく301でもSEO上はOKだがDocomo端末で「ページが移動しました」と表示される問題がありますのでここでは302を
両モバイル向けページからデスクトップPCへの戻しリダイレクトを設定しない
Googlebot(モバイルじゃない方)はどのページにもアクセスできるようにしましょう。
両モバイル用ページはお互いの担当じゃないモバイルUAでのアクセスを渡し合う
スマフォ用ページとガラケー用ページ同士では相互にリダイレクトを設定しましょう。ここでもGooglebot-Mobileの処理に気をつけて!

なおいずれのサイト仕様の場合でもリダイレクトや<link>はページ間一対一で行うこと。全部TOPページに向けてcanonicalしたり、TOPページだけリダイレクトを設定したり、といった状態は絶対にNG。ご注意ください。
そのため別URLでモバイル端末用のページを用意する場合はURL構造をできる限りPCサイトに準拠させた方が良い、ということも付け加えておきます。

まとめとポイント

いかがでしたか?デスクトップPC-スマフォ間の設定だけでも大変なのに、そこにフィーチャーフォン(&ガラケー)用ページが絡むとこんなにもややこしくなってしまうんですね。

ただ、いずれの設定にも共通して重要なのは「ユーザーにもGoogleにも同じページをみせること。」これにつきます。もし設定に悩んだら、この基本に立ち返ってこのパズルを考えてみてください。きっと答えが見えてくるはずです。
ただそうはいってもこうした設定はサイトの構造によってケースバイケース。最後にもしも頭がパンクしそうになってしまった時の対処法をお伝えしましょう。それは・・・

人に聞く

はい。私はこれで解決しました。
というわけで、今回のエントリーにあたって残業中にもかかわらず相談にのってくださったモバイルSEOの勧めの木村さん(@mkimu04)に心より御礼申し上げます。

 

  • このエントリーをはてなブックマークに追加
The following two tabs change content below.
片川 創太

片川 創太

2014年12月までディーエムソリューションズ株式会社SEO対策チームに所属。「SEOは実装」を信条に、コミュニケーションを重視するスタイルで数多くのサイトのコンサルティングを手がける。内部施策に関して造詣が深く、「SEOまとめ」というtwitterアカウントを通じて日々情報発信を続けている。 Twitter: SEOまとめ