.htaccessを使ったサイトの自動振り分け

.htaccessはWebサーバー「Apache」を制御するための設定ファイルの一つです。特定フォルダにアクセスしたら、パスワードを要求するとか、別のページにリダイレクトするとかに利用します。フォルダ単位での設置・設定が可能で、設置されたフォルダとその下の階層にたいして適用されます。

利用するための条件

WebサーバーがApacheであること
.htaccessファイルの使用が許可されていること

レンタルサーバーでは許可されていない場合もあるので確認が必要です。

ここでは、アクセス者の端末に応じて自動でアクセス先を振り分け、スマートフォン利用者は自動的にスマートフォンサイトにアクセスできるようにします。これには上記条件の他に”mod=rewrite”モジュールが利用できることが必要です。

フォルダ構成

/site
index.html
.htaccess
/sp
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 ^$ /site/sp/ [R,L]

Header set Vary User-Agent
</IfModule>

スマフォサイトのindex.html

canonicalは重複ページが存在するときに、正規のページを検索エンジンに伝えることができます。

これをhead内に張り付けます

＜参考＞

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>SP用トップページ</title>
<link rel="canonical" href="http://○○○.webcrow.jp/site/">
</head>

<body>
<h1>SP用トップページ</h1>
<p><a href="http://○○○.webcrow.jp/site/?mode=pc">PCサイトへのリンク</a></p>
</body>
</html>

PCサイトのindex.html

alternateはPCとは別にスマホサイトが存在することを検索エンジンに伝えます。

これをhead内に張り付けます

＜参考＞

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>PC用トップページ</title>
<link rel="alternate" media="only screen and (max-width: 767px)" href="http://○○○.webcrow.jp/site/sp/">
</head>

<body>
<h1>PC用トップページ</h1>
</body>
</html>

スマホサイトに振り分けされた後でも、PCサイトに飛べるようにリンクを作成する場合は以下のように記述します。

<a href="http://○○○○○/site/?mode=pc">PC版を表示</a>

?mode=pcは、.htaccessの?mode=pcと合わせます。文字列であれば何でも可です。

developers.google.com