携帯から PC サイトへアクセスした際、携帯サイトへ転送する

携帯から PC サイトへアクセスがあった場合、携帯サイトへ転送してユーザーに携帯サイトを見せたい、という場合の設定等メモ。忘れないために…

.htaccess の内容
- 例 1
- 例 2
検索エンジンから来るユーザーに配慮
- 確認方法
参考サイト

.htaccess の内容

それぞれ、.htaccess　は https://wp.graphact.com/ 直下においているものとして 2 例。

例 1

携帯から https://wp.graphact.com/hoge/ にアクセスしたら https://wp.graphact.com/mobile/ に飛ばす場合。

RewriteEngine on

#user agent set
BrowserMatch ^DoCoMo CARRIER=docomo
BrowserMatch ^KDDI CARRIER=au_hdml
BrowserMatch ^UP.Browser CARRIER=au_wap
BrowserMatch Vodafone CARRIER=softbank
BrowserMatch J-PHONE CARRIER=softbank
BrowserMatch MOT- CARRIER=softbank
BrowserMatch SoftBank CARRIER=softbank
BrowserMatch WILLCOM CARRIER=willcom
BrowserMatch DDIPOCKET CARRIER=willcom
BrowserMatch PDXGW CARRIER=willcom

#mod_rewrite
RewriteCond %{ENV:CARRIER} ^(docomo|au_hdml|au_wap|softbank|willcom)$
RewriteRule ^hoge/$ http://wg.graphact.com/mobile/ [R=302,L]

例 2

携帯から https://wp.graphact.com/ にアクセスしたら https://wp.graphact.com/mobile/ に飛ばし、https://wp.graphact.com/foo/ にアクセスしたら https://wp.graphact.com/bar/ に飛ばす場合。

RewriteEngine on

#user agent set
BrowserMatch ^DoCoMo CARRIER=docomo
BrowserMatch ^KDDI CARRIER=au_hdml
BrowserMatch ^UP.Browser CARRIER=au_wap
BrowserMatch Vodafone CARRIER=softbank
BrowserMatch J-PHONE CARRIER=softbank
BrowserMatch MOT- CARRIER=softbank
BrowserMatch SoftBank CARRIER=softbank
BrowserMatch WILLCOM CARRIER=willcom
BrowserMatch DDIPOCKET CARRIER=willcom
BrowserMatch PDXGW CARRIER=willcom

#mod_rewrite
RewriteCond %{ENV:CARRIER} ^(docomo|au_hdml|au_wap|softbank|willcom)$
RewriteRule ^$ http://wg.graphact.com/mobile/ [R=302,L]
RewriteCond %{ENV:CARRIER} ^(docomo|au_hdml|au_wap|softbank|willcom)$
RewriteRule ^foo/$ http://wg.graphact.com/bar/ [R=302,L]

検索エンジンから来るユーザーに配慮

携帯で Google から検索してサイトを訪れた場合、表示されるのは「Google が PC サイトを調整して携帯向けにしたページ」ということがあります。この場合、.htaccess で転送の指定をしていても直接ページを開いてもらっていないため、携帯サイトに飛ばすことができません。

これを防ぐための方法を調べていたところ、Google のサポートページに以下のような内容がありました。

ウェブページを変換することを望まない場合は、ユーザーがトンランスコーダを経由してそのページを表示するときにそのユーザーを別のページにリダイレクトするように Google にリクエストしてください。リダイレクトをリクエストするには、ページの HTML ファイルのセクションに次の行を含めてください。

<link rel="alternate" media="handheld" href="alternate_page.htm" />

『携帯電話での表示用にウェブページが調整される仕組みを教えてください。 – ウェブマスターツールヘルプ』より引用

上記の内容どおり PC 向けページのヘッダ内に記述してみたところ、1 日ほどで Google が調整したページは表示されなくなり、無事携帯サイトが表示されるようになりました。

ちなみに Google が変換して表示するこの機能は、Google Wireless Transcoder と言うようです（参考：Google Wireless Transcoder 【グーグルの携帯電話用ページ変換】）。
Google Wireless Transcoder ページから、この変換でどのように表示されるか見ることができます。

確認方法

Google（モバイル）
上記 URL から検索をして、Firefox + FireMobileSimulator （ユーザーエージェントを変えられるアドオン）でモバイル表示をシミュレート。

勿論、携帯実機から検索してみて確認するのが一番ですが、何度も何度も確認しているときはとりあえずシミュレートで確認し、そこで OK であれば実機で確認、としています。

参考サイト

以下のサイトを参考にさせていただきました。ユーザーエージェントに関しては、時々最新の情報を確認しておいた方がいいかもしれません。