htaccessでデバイス判定をして、PC専用 / スマホ専用サイトにリダイレクトさせる方法

CSSのメディアクエリを使ってWEBサイトをレスポンシブ対応させるのが主流だと思いますが、モバイルファースト・デザイン重視になっている昨今、PCとスマホで読み込むファイルを分ける需要も高まっていると思います。
PC・スマホを分けることで、無駄なファイルの読み込みを最小限に押さえて、スマホで見た時のページ表示速度を高めることもできます。

個人的にはAMP対応してデザインが崩れることが許せないので、デザインを崩さずにWEBサイトの読み込みデータ容量を下げるこの方法が、再びマイブームになっています。(笑)

準備

① WEBを構築する場所

今回のケースでは、PCサイト・スマホサイトを以下の場所に構築していきます。(※.htaccessを調整すれば、他の方法でも同じことができますが)

PCサイト
https://hogehoge.com/

スマホサイト
https://hogehoge.com/sp/

② meta要素のcanonical属性を記述する

PCサイト・スマホサイトそれぞれのヘッダーに、以下のように記述してください。

PCサイト <link rel="alternate" media="only screen and (max-width: 640px)" href="https://hogehoge.com/sp/" /> <link rel="alternate" media="handheld" href="https://hogehoge.com/sp/" />
スマホサイト <link rel="canonical" href="https://hogehoge.com/">

[パターンA] 双方向でリダイレクト(PC→SP・SP→PC)

.htaccessに以下のように記述してください。

.htaccess RewriteEngine on RewriteBase / RewriteCond %{REQUEST_URI} !/sp/ RewriteCond %{HTTP_USER_AGENT} (iPhone|iPad|Android.*Mobile|Windows.*Phone) [NC] RewriteCond %{QUERY_STRING} !mode=pc [NC] RewriteRule ^(.*)$ sp/$1 [R,L] RewriteCond %{REQUEST_URI} /sp/ RewriteCond %{QUERY_STRING} mode=pc [NC] RewriteRule ^sp/(.*)$ /$1 [R,L]

[パターンB] PCサイト→スマホサイトのみリダイレクトさせる場合

.htaccessに以下のように記述してください。

.htaccess RewriteEngine on RewriteBase / RewriteCond %{REQUEST_URI} !/sp/ RewriteCond %{HTTP_USER_AGENT} (iPhone|iPad|Android.*Mobile|Windows.*Phone) [NC] RewriteCond %{QUERY_STRING} !mode=pc [NC] RewriteRule ^(.*)$ sp/$1 [R,L]

補足

.htaccessファイルが見当たらないとき

WordPressでWEBサイトを構築している場合、[public_html]フォルダの一つ下の階層に[.htaccess]ファイルがあります。([wp-content][wp-includes]フォルダなどと同じ階層)
この際、FTPソフトで「不可視ファイルを表示」のような設定をする必要があります。

※AWSのS3を使って静的サイトを構築している場合は、.htaccessファイルがないので、別の方法が必要になります。

コメントを残す