モバイル用ページを別URLで管理する正しい方法
SEO対策の中で、スマホ対応はもはや必須と言っても良いほど重要な対策のひとつですが、モバイル用のページを以前からPC用ページとは別で既に用意していて、今後もそれで運用していく予定の方も多いかと思います。
この管理方法で注意したい所は、そのモバイル用に作成したページが正しくモバイル対応と認識されているのかどうかはもちろん、PC用とモバイル（スマホ）用のページが存在することを検索エンジンに正しく認識してもらわなければ、全く同じコンテンツがサイト内に存在すると認識されてしまい、せっかくの評価を落としてしまう可能性があるという点です。
では、今回はPC用ページとモバイル用ページを別々のURL（ディレクトリやサブドメイン）で管理する場合の正しい方法をご紹介したいと思います。
スマホ対応しているかどうかのテストは下記のページでチェックすることができます。
→モバイル フレンドリー テスト
目次
デバイスによる振り分け
レスポンシブデザインのように、アクセスしてくるPCやスマホなどデバイスの「横幅」を取得して、自動でcssを振り分けてページのレイアウトを変える方法ではなく、訪問してきた「デバイス」によってPC用/モバイル用のページに振り分けて管理する場合、まずhtaccessやphpなどでデバイスを振り分ける必要があります。
下記URLの場合としてそれぞれの記述方法をご説明します。
- http://example.com（PC用ページ）
- http://example.com/sp/（モバイル用ページ）
まずは、自分の管理しやすい方法で振り分けを設定しましょう。
htaccessで振り分ける
htaccessで振り分ける場合、htaccessファイルに下記のようなタグを記述をして、デバイスを振り分けます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile) [NC]
RewriteRule ^(.*)$ /sp/$1 [R,L]
</IfModule>
この場合、スマホでhttp://example.com/test/へアクセスすると、http://example.com/sp/test/へリダイレクトされます。
htaccessで振り分ける方法だと記述が一箇所で済むので、一括でPCとモバイルを振り分けることができるという点がメリットと言えます。
※ファイル名や階層など合わせる必要があります。
phpで振り分ける
phpの場合は、振り分けたいページに下記のタグを記述します。
一部のページにだけモバイル対応したい場合などに便利でしょう。
PC用のページに記述します。
<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if((strpos($ua,'iPhone')!==false)||(strpos($ua,'Android')!==false)) {
header("Location:/sp/");
exit();
}
?>
phpでの振り分けは対応するページごとに設置する必要があります。
ということは、全てのページに記述しないといけないため、ページ数が多いサイトや、全てのページをモバイル対応にしたいサイトには不向きかもしれません。
JavaScriptで振り分ける
こちらもphpと同じく、振り分けしたいページに下記のタグを記述します。
<script type="text/javascript">
var ua = navigator.userAgent;
if (ua.indexOf('iPhone') > 0 || (ua.indexOf('Android') > 0) && (ua.indexOf('Mobile') > 0)) {
location.href = './sp/';
}
</script>
この方法は、ユーザーがJavaScriptを無効にしている場合だと正常に動作しません。
また、記述によってはユーザーにPC用/モバイル用ページを選択させることも可能です。
アノテーションによる関連付けを設定する
次にPC用ページとモバイル用ページのURLが重複ではないことを検索エンジンに伝えるために、相互に関連付けを行う必要があります。
ページの内容が同じく、それぞれのデバイス用に別のURLが存在する場合、正しく検索エンジンに伝えなければ、サイト内に重複コンテンツが存在すると認識されてしまいます。
重複コンテンツの考えられる問題については下記の記事を参考にしてください。
canonicalタグを設置する
PC用ページとモバイル用ページを関連付けるには、まずモバイルページのヘッダーに、該当するPCページを指定して記述します。
※必ず該当するページURLを指定してください。
<link rel="canonical" href="http://example.com">
alternateタグを設置する
canonicalを設置したら、次に検索エンジンにモバイルページが存在することを伝えるためにモバイルページへの関連付けを行う必要があります。
これによって検索エンジンがモバイルページの存在を理解することができ、正しく評価することができます。
記述方法はPCページのヘッダーに下記のように、メディアクエリを指定して、モバイルページのURLを指定します。
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://example.com/sp/">
モバイル用ページを別URLで管理する方法まとめ
このように、PC用/モバイル用を別URLで管理すると手間もかかりますし、更新もそれぞれ作業が発生するため大変になります。
そのため、モバイル対応はレスポンシブデザインを導入することをおすすめしますが、どうしてもサイトの運営上、難しい場合もあるかと思います。
別URLでサイトを管理する場合は、アノテーションの正しいタグの設置とデバイスの振り分け動作確認を行いましょう。
