.htaccessを使ったレスポンシブ対応

今回は.htaccessファイルというものを使って、アクセスされたデバイスによって、見せるindex.htmlを切り替える、.htaccess手法をやっていきましょう。

自己流の理解が入っているので、何か問題や間違いがあればご指摘お受けしますのでお気軽にどうぞ。

今回はPCサイトのindex.htmlには、

と、タイトルの下辺りに記述します。

これは、767px以下の画面幅の端末からのアクセス時、href先（スマホ用のindex.html）が代替物としてあるのでよろしくね。と検索エンジンに対して明示します。

一方で、SPサイトのindex.htmlには、

と、タイトルの下辺りに記述します。

href先（つまりPCサイトのindex.html）がカノニカル（コピーじゃない方）がちゃんとあるよと検索エンジンに対して明示してあげています。

つまり、PCのindex.htmlから、代替物としてのSPページがあることを明示。

SPのindex.htmlから、代替物ではないほうのPCページがあることを明示。

という流れで、検索エンジンに対して重複ファイルとみなされないように設定をしています。さて、これだけでは、端末によってPCページにいかせたり、SPページにいかせたりはまだ出来ないので、いよいよ、.htaccessを作ってそれらを行っていきましょう。

.htaccessファイルを作る

.htaccessファイルを作り、PCのindex.htmlと同じトップの階層に配置します。

.htaccessに以下のコードを記述します。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ http://○○_pc/○○_sp/ [R,L]

Header set Vary User-Agent
</IfModule>

これにより、iPhone,Android等からアクセスされた場合に、スマホ用のindex.htmlに飛ばす事ができます。RewriteRuleは絶対パスでも相対パスでも大丈夫だそうです。今回は絶対パスを想定して記載しています。個人的にわかりやすいので。

参考になったサイト

こちらを参考にしました。.htaccessファイル内の解説も行っていますので、詳しく中身を知りたい方は是非。

allabout.co.jp