スマホサイトとPCサイトを.htaccessで振り分ける設定

条件

ルートフォルダの下にスマホ用のサイトとして/sp/フォルダを作り、スマートフォンからのアクセスは/sp/フォルダへリダイレクトさせる。
パソコンで/sp/フォルダ内のページにアクセスしてきた場合はPCのほうへリダイレクトさせる。
PC用のサイトのURLは、/で終わるタイプ。すなわちページごとにフォルダを作り、その中にindex.htmlがある。
ブログも併設されており、/blog/フォルダにブログのシステムがある。こちらはPC,スマホの振り分けは行わない。
PC用サイトとブログの画像は同じフォルダに入っている。

つまりファイル構成はこんな感じ
/example.com/
　index.html (PC用インデックス)
　/page1/index.html　（PC用ページ1）
　/page2/index.html　（PC用ページ2）
　　　・
　/img/　　　　　　（PC用およびブログ用画像フォルダ）
　/css/　　　　　　（PC用CSSフォルダ。ただし一部はスマホでも使う。）
　/blog/index.php　（ブログのインデックス）
　/sp/index.html　（スマホ用インデックス）
　/sp/page1/index.html　（スマホ用ページ1）
　/sp/page1/index.html　（スマホ用ページ2）
　　　　・
　　　　・
　　　　・
　/sp/img/　　　（スマホ専用画像フォルダ）
　/sp/css/　　　（スマホ専用CSSフォルダ）
とまあ、PC用のフォルダの一部はスマホ用もかねてますよというちょっとややこしい構成。
スマホ用のサイトの構造はPC用と同じつくりにしている。

振り分け方法

やりかたは次のサイトを参考にした。
http://html-five.jp/195/

基本パターン（双方向・ページ単位・リライトなし）
ルート直下のhtaccessに以下のように記述します。
RewriteEngine on

RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^(.*)$ sp/$1 [R]
RewriteBase /

RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^sp/(.*)$ $1 [R]
RewriteBase /

ただしこのままでは例外フォルダを処理できません。また、上記のまま記述した場合、Windowsからのアクセスもスマホ用のページに飛ばされることが分かったため以下の修正を行いました。

RewriteEngine on

RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|Android)
RewriteRule ^sp/(.*)$ $1 [R]
RewriteBase /

RewriteCond %{REQUEST_URI} !(/blog/|/img/|/css/|/sp/)
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|Android)
RewriteRule ^(.*)$ sp/$1 [R]
RewriteBase /

修正内容の解説

前半はほぼそのまま。画面の大きなiPadと、WindowsOSをまるごとspにリダイレクトさせる条件を無くしました。WindowsPhoneは、切り捨て。
/sp/フォルダへのアクセスで、
かつ、ユーザーエージェントがiPod,iPhone,Android以外の場合
sp/(.*)$ を　$1　にリライトせよ。
後半は修正条件を追加。（）内に|（パイプ）区切りで複数条件指定できるようなので例外フォルダをそこにまとめて指定しました。
/blog/,/img/,/css/,/sp/フォルダへのアクセスで、
ユーザーエージェントがiPod,iPhone,Androidの場合
^(.*)$　を　sp/$1　にリライトせよ。

さらにspサイトの各ページのmeta要素にcanonical属性を記述

今回の作業ではPCサイトとSPサイトのメインコンテンツは同じであるため、類似ページのペナルティを避ける必要がありました。
そこでPC用とスマホ用のページのヘッダーに、それぞれalternate,canonical属性を付与します。（詳細：https://developers.google.com/webmasters/mobile-sites/mobile-seo/other-devices/feature-phones?hl=ja）
PC用ページのヘッダーへの記述

そこでスマホ用のページのヘッダーに

を記述。

作業後記

スマホ対応はレスポンシブデザインがもっとも合理的でシンプルだ、というのが今回の作業の感想です。

レスポンシブデザインに一部異論があるのは承知しています。「PCでアクセスする人と、スマホでアクセスする人は目的が違うのだから、コンテンツも変えるべき。」というやつです。
ただ、完全にCMSを導入しているのならともかく、静的なサイトでは管理の手間が2倍あるいはそれ以上に増えます。
また、.htaccessによる振り分けにも課題があります。第一は、ユーザーエージェントはどんどん変化すること。スマホ分野ではFirefoxOSやTizenのように新しいOSは生まれてきますし、Windows10以降、WindowsPhoneがPC用と判別が付くのかどうか明確ではありません。PC用でもChoromeOSが出てきていますが、これがスマホサイズのデバイスに搭載される可能性はOではありませ。
また、PC用エージェントなら画面サイズは大きいと判断していいのか、あるいはAndroidでもPCサイトを表示できるほどの画面サイズがあるのに、まとめてスマホサイトに飛ばしていいのか、など。
ウェブサイトのインターフェイスは画面サイズに依存しているのに、htaccessでの振り分けはユーザーエージェントに依存しているため、そもそも目的と手段がかみ合っていないわけです。

PCとスマホのアクセス目的の相違については、トップページに情報を詰め込みすぎなければ良いのではないか、という判断もできるでしょう。あるいはトップページの分かりやすいところにアクセスマップのページへのリンクをおいておくとか。

他にもPHPやWordPressの関数で振り分ける方法もありますが、いずれもユーザーエージェントによる判別と思われるため、htaccessと同じ課題からは逃れられません。
レスポンシブデザインであれば、viewportでwidth=device-widthを指定してあげればCSS解像度の指定で表示できます。目的と判別手段が一致しているため例外を考慮する心配が少なくて済みます。

ウェブサイトの文脈による振り分けというのは新規性はありますが、やることは複雑になり、環境変化に弱くなります。安定したサイト運営にはレスポンシブデザインが最適だろうと思います。