初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

HTML 「.htaccessファイル」を使った自動振り分け

PC用とスマフォ用のサイトをそれぞれ作成したときに、
ユーザーを各デバイス用のサイトに誘導出来るように
したものが「.htaccessファイル」です。

これはユーザーエージェントを読み取りPCで見た場合にはPC用サイト、
スマフォで見た場合にはスマフォ用サイトに自動で切り分けてもらえます。

.htaccessファイル」はトップページと同じディレクトリに
置きます。

Macではファイルの頭に.を付けると不可視ファイルになってしまい
トラブルになります。
ですので、まず「htaccess.txt」などを作成しサーバにアップした後に
改めて「.htaccessファイル」にリネームしたほうがトラブルがなくなります。

.htaccessファイル」の中身です。

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

Header set Vary User-Agent
</IfModule>

下記をスマートフォンサイト用データの「index.htmlファイル」のhead内に貼り付ける

<link rel="canonical" href="http://○○○○○.com/pc/">

下記をPCサイト用データの「index.htmlファイル」のhead内に貼り付ける

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://○○○○○.com/pc/sp/">

上記の記述がPCサイトとスマフォ用サイトの関係性が
ミラーサイトではないことをGooglebotに提示する記述になります。
この記述がないとミラーサイトと判断されますので要注意です。


最後にスマフォ用サイトでPC用サイトを閲覧したい場合には下記を記述します。
この記述以外でPC用サイトのURLでページに遷移しても「.htaccessファイル」
の切り分けでスマフォ用サイトに戻されてしまいます。

<a href="http://○○○○○/book/?mode=pc">PC版を表示</a>
topへ戻る