2014/04/11

リダイレクトだけじゃない!スマートフォンサイトを作ったら設定するべき3つのこと

スマートフォンサイトを作ったら設定する3つのこと

スマホサイトを作ったら設定したい3つのことをまとめました。

リダイレクトの設定は間違いなく行うはずですが、それにプラスしてcanonicalやalternateでURLを正規化することでそれぞれの関係をGoogleに理解させることが出来ます。せっかく作ったスマホサイトを最大限活用するために忘れずに設定しておきましょう。

目次

リダイレクト設定

スマホサイトを作ったらまず何はともあれリダイレクトの設定を行います。
リダイレクトにはいくつか方法がありますので、サーバーの仕様や案件に合わせて使い分けが可能です。

.htaccessでのリダイレクト

.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 /

似たようなことが2回記述されていますが、1つ目はURLに/sp/を含まず、ユーザーエージェントがスマホの場合、ファイル名の前にsp/を追加するという処理で、2つ目はURLに/sp/を含みスマホではない場合、URLからsp/を取り除くという処理です

つまり、スマホからのアクセスはスマホ用ページヘ、それ以外のアクセスはPCサイトへという処理です。

すべてトップページにリダイレクトさせる場合

もし、何らかの事情でPCサイトとスマホサイトのそれぞれのファイル名が異なる場合、前述のリダイレクト方法では正しくリダイレクトされません。その場合は、スマホからのアクセスをすべてトップページにリダイレクトさせるという書き方にした方がいいでしょう。

RewriteEngine on

RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^(.*)$ sp/ [R]
RewriteBase /

RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^sp/(.*)$ / [R]
RewriteBase /

ファイル名がPCサイトとスマホサイトで同じ場合、すべてトップページにリダイレクトさせる上記の方法は使用しないようにして下さい。
間違ったリダイレクトとなり、悪影響がある場合があります。

Google - スマートフォン サイトでよくあるミス

JavaScriptでのリダイレクト

JavaScriptを用いてリダイレクトを行う方法です。
こちらはスマートフォン用ページがある全てのページに記述する必要があります。

<script>
if ((navigator.userAgent.indexOf('iPhone') > 0 && 
navigator.userAgent.indexOf('iPad') == -1) ||
navigator.userAgent.indexOf('iPod') > 0 ||
navigator.userAgent.indexOf('Android') > 0) {
location.href = 'スマートフォンサイトのURL';
}
</script>

phpでのリダイレクト

phpを用いたリダイレクト方法です。
こちらもJavaScript同様、全てのページに記述します。

<?php
$ua=$_SERVER['HTTP_USER_AGENT'];
if((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false)) {
	header("Location:スマホサイトのファイル名(例:/sp/index.html)");
	exit();
}
?>

link rel="canonical"設定

こちらはスマートフォンサイトに行う設定です。基本的にスマートフォンサイトはPCサイトと同様の内容になっていると思います。ですので、重複コンテンツとして判断されるのを避けるため、canonical設定で『URLの正規化』を行います。


  

スマートフォン用のすべてのページにそれぞれ対応するPCサイトのURLを記述します。

link rel="alternate"設定

先ほどのcanonicalはスマートフォンサイトに行う設定でしたが、こちらのalternateはPCサイトに行う設定になります。このページにはスマートフォン用のページがありますと知らせることができます。


  

スマートフォン用のページがあるすべてのページにそれぞれのURLを記述します。

まとめ

存在するページ分記述しなければならず地味に大変な作業になりますが、非常に重要な設定にでもありますので、せっかく作ったスマホサイトを有効に活用するため設定するのをおすすめします。