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

SEOならSEOパック
2016年08月18日 2020年12月09日

モバイル用ページを別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/">

\無料診断の活用で課題を明確に/

外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。

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

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

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

SEOパーソナル診断
SEO内部対策 トップに戻る

SEOツール無料トライアル

プロも個人も、高機能なSEOツールを体験ください。

コンテンツ分析や内部SEO対策、競合分析ができるSEOツールが7日間体験可能!

seodoor by SEO Pack

登録申し込み後自動でログインされます。アカウント情報はご登録のメールアドレスへ自動送信されておりますのでご確認ください。

SEO Packキャンペーン
内部修正サービス

公式SNS

Twitter

facebook