サイトを運営していく上で、PCサイトとスマートフォンサイトの両方を対応してください、という案件があったりします。方法としては
➀ .htaccessを使って端末判別し、それぞれのページに飛ばす方法
➁ レスポンシブデザインでサイトを作成する方法
の2つが主なものとして挙げられますが、今回は➀の
.htaccessを使って端末判別し、それぞれのページに飛ばす方法
について紹介したいと思います！
.htaccessの記述内容
今回は見本として
PCからアクセスがあった時→https://ku-su.com/new/
スマートフォンからアクセスがあった時→https://ku-su.com/new/sp/
とします。そうした際には、.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 /
これを記述することで、スマートフォンからhttps://ku-su.com/new/にアクセスした際にhttps://ku-su.com/new/sp/に自動的に飛び、PCからhttps://ku-su.com/new/sp/にアクセスがあった際にはhttps://ku-su.com/new/に飛ばすようになります。詳しい解説は以下になります。
詳しい解説としては
3行目：URLに/sp/が含まれず、
4行目：スマートフォンからアクセスがあった場合、
5行目：URLにsp/が付いたページに飛ばす
ということになります。
続いて、
8行目：URLに/sp/が含まれてて、
9行目：スマートフォン以外の端末からアクセスがあった(＝PCからアクセスがあった)場合、
10行目：URLからsp/を外したページに飛ばす
ということになります。
ちなみにコーディング作業の確認でPCからスマートフォンサイトを確認したい場合は、上のコードの7～11行目を削除すれば実現可能となります。
URLを変更させずにスマートフォンサイトに飛ばす場合には
ちなみに、URLを変更せずにspファイル内のページに飛ばしたい場合には以下の見本のように.htaccessに記述します。
RewriteEngine on
RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^(.*)$ sp/$1 [L]
RewriteBase /
RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^sp/(.*)$ $1 [L]
RewriteBase /
上のように、5行目
RewriteRule ^(.*)$ sp/$1 [L]
と11行目
RewriteRule ^sp/(.*)$ $1 [L]
のように[L]と最後に記述してあげることで可能になります。
スマートフォンサイトを検索結果でヒットさせないようにするには
また、同じサイトのPCサイトとスマートフォンサイトがGoogleなどの検索エンジンで両方ヒットさせないようにするのもSEO対策として重要になってきます。その際には、スマートフォンサイトに以下のタグを<head>～</head>内に記述してあげます。
<meta name="robots" content="noindex">
このタグを記述することで検索エンジンからヒットされなくなるので、スマートフォン用ページを別に作成し、端末ごとにアクセスをわける場合には上のタグを記述することを忘れずにしましょう！
まとめ
以上が.htaccessによって端末判別してPCサイト・スマートフォンサイトにそれぞれ飛ばす方法になります！ページ数が少なかったり、PCサイトとスマートフォンサイトで内容に違いがある場合にはとても活用できる方法なので、是非とも活用しましょう！
