モバイル用ページを別URLで管理する正しい方法

SEOならSEOパック
ご利用実績9446件 (2017/10/24現在)
2016年08月18日 2016年08月30日

モバイル用ページを別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用/モバイル用ページを選択させることも可能です。

振り分けを行うには、以上3つの方法が主に考えられます。設置した後は実際にスマホでもアクセスしてみて動作確認をして管理しましょう。

アノテーションによる関連付けを設定する

次に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/">

アノテーションについては下記の記事も参考にしてみてください。

2 つの URL の関係を タグと rel=”canonical” および rel=”alternate” 要素で伝えます。

モバイル用ページを別URLで管理する方法まとめ

このように、PC用/モバイル用を別URLで管理すると手間もかかりますし、更新もそれぞれ作業が発生するため大変になります。
そのため、モバイル対応はレスポンシブデザインを導入することをおすすめしますが、どうしてもサイトの運営上、難しい場合もあるかと思います。

別URLでサイトを管理する場合は、アノテーションの正しいタグの設置デバイスの振り分け動作確認を行いましょう。

SEO内部対策 トップに戻る
「スマホのSEO対策お役立ち記事」MFIの今と、対応方法について
SEO解析ツール「fukuro」
無料コンテンツ対策支援窓口
SEO Packキャンペーン

公式SNS

Twitter

facebook

キーワードの変動情報を中心に
SEO情報を配信中。