モバイル用ページを別URLで管理する正しい方法
SEO対策を進める中で、スマートフォン対応はもはや必須と言っても良いほど重要な対策のひとつとなりました。
2023年10月に完全に移行が完了した「モバイルファーストインデックス」という仕組みによりスマホの最適化がSEOのコンテンツマーケティングに欠かせない施策となっています。
サイトの運用上、モバイル用とPC用のページファイル（URL）が同一の「レスポンシブデザイン」が管理・運用面で見ても簡単でGoogleにも推奨されていますが、
モバイル用のページを以前からパソコン用ページとは別で既に用意していて、今後もモバイルサイトで運用していく予定の方も多いかと思います。
この管理方法で注意したいポイントは、そのモバイル用に作成したページが正しくモバイル版と認識されているのかどうかはもちろん、パソコン版ページとモバイル（スマホ）版のページが存在することを検索エンジンに正しく認識してもらわなければ、全く同じコンテンツがホームページ内に存在する重複ページと認識されてしまい、せっかくの評価を落としてしまう可能性があるという点です。
では、今回はパソコン向けurlとモバイル向けurlを別々の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が重複ではないことを検索エンジンに伝えるために、相互に関連付けを行う必要があります。
SEOで言うところのアノテーションというのは、Googleなどの検索エンジンにサイト構造を正しく伝える為に設定するものですが、
例えば英語のサイトと日本語のサイトというように多言語サイトの場合にはユーザーが使用する言語のサイトが表示されるようにhreflangを設定します。
同様に、モバイル表示用URLとパソコン表示用URLというように、デバイス毎に異なるURLが存在する場合にもアノテーションの設定が必要となります。
アノテーションを適切に設定する事で、サイト構造を正しく伝える事ができ、検索エンジンはコンテンツを正しくインデックスし、重複コンテンツや多言語サイトの判定を適切に理解する事ができます。
ページの内容が同じく、それぞれのデバイス用に別のURLが存在する場合、正しく検索エンジンに伝えなければ、サイト内に重複コンテンツが存在すると認識されてしまいます。
重複コンテンツの考えられる問題については下記の記事を参考にしてください。
rel=canonical属性を使用する方法
PCサイトのページとモバイルサイトのページを関連付けるには、まずはじめに、モバイルページのヘッダーに該当するPCサイトのページを指定して記述します。
※必ず該当するページURL(正規url)を指定してください。
<link rel="canonical" href="http://example.com">
上記はモバイルページに記述するcanonicalの内容です。
関連するPC用ページのURLは「http://example.com」である事を指示しています。
alternateタグ（link rel=”alternate”）を設置する
canonicalを設置したら、次は、Googleなどの検索エンジンにモバイルページが存在することを伝えるために、モバイルページへの関連付けを行う必要があります。
これによって検索エンジンがモバイルページの存在を理解することができ、正しく評価することができます。
記述方法はPCページのヘッダーに下記のように、メディアクエリを指定して、モバイルページのURLを指定します。
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://example.com/sp/">
alternateタグは、上述したとおりモバイルページの存在をGoogleなどの検索エンジンに伝えるためのタグですが、
関連するモバイルページのURLは「http://example.com/sp/」である事を指示しています。
また、「メディアクエリ」というのは、条件を満たした場合のメディアに合わせてレイアウトなどを調整する機能となりますが、
ここでは最大640pxまでのメディアというのがモバイルを指定しており、そのモバイルの場合に「http://example.com/sp/」を表示するといった指示の内容となります。
＼無料診断の活用で課題を明確に／
外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。
モバイル用ページを別URLで管理する方法まとめ
このように、PC用/モバイル用を別URLで管理すると手間もかかりますし、更新もそれぞれ作業が発生するため大変になります。
そのため、モバイル対応はレスポンシブデザインを導入することをおすすめしますが、どうしてもサイトの運営上、難しい場合もあるかと思います。
別URLでサイトを管理する場合は、アノテーションの正しいタグの設置とデバイスの振り分け動作確認を行いましょう。
