PC用サイトとスマートフォン用サイト振り分け

.htaccess

PC用サイトとスマートフォン用サイトを別で作る場合、.htaccessというファイルを使うことにより振り分けを実現する。

PC用サイトとスマートフォン用サイト振り分けの留意点

PC用サイトとスマートフォン用サイト振り分けは、google非推奨ではあるものの、需要はある。この際、googleに正しく情報を伝えないと評価が下がってしまう。これを予防するため、正しい方法を学ぶ必要がある。

.htaccessの記述

.htaccessというファイルを生成し、下記を書き込む。Macではファイル名の先頭に.を付けると不可視ファイルになってしまう。そこで、一旦通常のテキストファイルで生成し、サーバアップ後にファイル名を変更する。アップする位置はPC用サイトのindex.htmlと同じ場所となる。

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

Header set Vary User-Agent
</IfModule>

/xxxxx/xxxxx/sp/はスマートフォン用サイトを設置する場所。

PC用サイトのindex.htmlへの記述

headの最上位に下記を記述する。

<link rel="alternate" media="only screen and (max-width: 640px)"
 href="/xxxxx/xxxxx/sp/" >

スマートフォン用サイトのindex.htmlの記述

スマートフォン用サイトのindex.htmlのheadの最上位に記述する。

<link rel="canonical" href="xxxxx/xxxxx/ >

/xxxxx/xxxxx/はPCサイトの設置位置。

リンクの記述　注意点

リンクの記述はPC用サイトを指定すればよい。ただし、その際ファイル名(index.html)を記述せず、フォルダまでの記述とする必要がある。

<!--OK-->
<a href="xxx/yyy/">PC用とスマートフォン用を自動で振り分けます</a>

<!--NG-->
<a href="xxx/yyy/index.html">PC用とスマートフォン用を自動で振り分けます</a>

スマートフォン用サイトの設置方法

スマートフォン用サイトはPCサイトの下層フォルダとして設置する。この際、imgなどのフォルダも別で準備する点に注意。同じ素材であっても別に準備し、それぞれのindex.htmlの下層フォルダへ配置する。

スマートフォンでPC用サイトを見る

スマートフォンでPC用サイトを見ようとしても、.htaccessの働きにより閲覧することが出来ない。これを解消するため、a href=のアドレスの末尾に?mode=pcを書き加える。

感想

.htaccessの中身の記述は、こまめに更新されている。このため、古い.htaccessのまま放置されたサイトが多数存在している。このようなサイトがChromeのクローラーに取得された場合、不要な重複データとみなされ検索ランクが下がるという。
開発者はこのような情報に対し常に注意を向け、クライアントのサイトランクを維持できるよう注意する必要がある。