スマホサイトを制作したらやっておくべき設定と注意

PC・スマートフォンの両方のWebサイトを運営されている方は必見です。

中身は同じでも違うURLを使用している場合、検索エンジンに重複コンテンツ(同じ内容のページが複数あり偽装されていると思われるケース)とみなされてしまうことがあります。
これが検索結果の順位に影響する可能性もあるので、未然に防ぐためにも以下に挙げる項目にしたがって適切に処理しておくのがおすすめです。

1 PC用Webページで設定すること
2 スマートフォン用Webページで設定すること
3 ついでにやっておきたい適切なリダイレクト設定
4 リダイレクト設定パターン1　headタグ内を編集
5 リダイレクト設定パターン2　.htaccessを編集

PC用Webページで設定すること

検索エンジンにモバイルサイトを認識してもらうため、PC用Webページのheadタグ内に以下のように記述します。

<head>
<link rel="canonical" href="PC用WebページのURL">
<link rel="alternate" media="handheld" href="スマートフォン用WebページのURL">
</head>

※「スマートフォン用WebページのURL」と「PC用WebページのURL」の箇所は任意に書き換えてください。

2行目の「rel="alternate"」タグは、このPC用Webページにはスマートフォン用も存在しているという情報をGoogleに伝えるものです。3行目の「rel="canonical"」タグでは、「このページはこのURLです」という宣言をしています。

スマートフォン用Webページで設定すること

次に、スマートフォン用Webページのheadタグ内に以下の記述をしてください。

<head>
<link rel="canonical" href="PC用WebページのURL">
</head>

※「PC用WebページのURL」の箇所は任意に書き換えてください。

PC用Webページでも設定した「rel="canonical"」タグを設定します。この設定によって、「スマートフォン用WebページのURLではなく、PC用のWebページのURLとして認識してください」という宣言をしています。

同じ内容のページがPC・スマートフォンそれぞれある場合、そのページ毎にここまで挙げた設定を施すことで重複コンテンツを防ぐことができます。

ついでにやっておきたい適切なリダイレクト設定

たとえば、以下のようなケースがあったとします。

PCからスマートフォン用Webサイトにアクセスした
　→PC用Webサイトへ自動的に移動させたい

スマートフォンからPC用Webサイトにアクセスした
　→スマートフォン用Webサイトへ自動的に移動させたい

こういった場合、リダイレクトという設定が必要になります。リダイレクト設定をする場合、そのページ毎に対応したページへリダイレクト処理をすることが求められます。

具体的な例を挙げると、スマートフォンからアクセスしたPC用Webページが、それに対応したスマートフォン用Webページに移動せず、たとえばどのページへアクセスしてもすべてスマートフォン用Webサイトのトップページへリダイレクトしている場合があります。こうならないように、そのページに見合った適切なページへリダイレクトするようにしましょう。

リダイレクト設定パターン1　headタグ内を編集

<head>
<script type="text/javascript" language="JavaScript">
if(document.referrer.indexOf(document.location.hostname)==-1){ if (navigator.userAgent.indexOf('iPhone') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) {location.href = 'スマートフォン用WebページのURL ';}}
</script>
</head>

※「スマートフォン用WebページのURL」の箇所は任意に書き換えてください。

そのページから移動先へのURLを設定します。注意したいのは、スマートフォンからPC用Webページにアクセスした際に、この設定ですべてのページに対してスマートフォン用Webサイトのトップページへ移動するように設定しないようにしてください。

もし、アクセスしたスマートフォン用Webページが存在しない場合は、そのままPC用Webページを表示させましょう。

リダイレクト設定パターン2　.htaccessを編集

もし、PC用Webページ・スマートフォン用Webページ双方が欠けることなく存在していて、尚且つファイル名が同じ場合は「.htaccess」を使って以下の設定が可能です。「.htaccess」内に以下の記述をしてください。

RewriteEngine on

# PCからスマホへリダイレクト
RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPad|Android)
RewriteRule ^(.*)$ sp/$1 [R]
RewriteBase /

# スマホからPCへリダイレクト ※PCの場合、両方見られるようにする場合は下記4行は不要
RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPhone|iPad|Android)
RewriteRule ^sp/(.*)$ $1 [R]
RewriteBase /

この設定は、PC用Webページがあってスマートフォン用Webページがない、といったケースが1ページでもある場合、この設定はおすすめできません。その場合は、パターン1でご説明した方法でページ毎に設定しましょう。

注意　robots.txtでブロックしない

こちらは通常行わない設定ですので、身に覚えのない場合は気にしなくても問題ありません。

robots.txtというクローラーを制御するファイルを作成するケースがあります。
検索結果の順位の参考にするために、クローラーと呼ばれる検索エンジンのロボットが定期的にWebサイトを訪問してページ内の情報を読み取ります。robots.txtは、クロールして欲しくない部分を指定できるため、検索結果に反映したくないページが存在するならばrobots.txtでクローラーのアクセスを拒否することができます。

スマートフォン用のWebサイトを開設された際に、PC用のWebサイトと混同させないためにこのページへクローラーのアクセスを拒否してしまう方もいるかもしれません。
しかし、スマートフォン用のクローラーも存在しているので、クロールできなくなるとブロックエラーとして返ってきてしまいます。そのため、基本的にスマートフォン用Webサイトに対してブロックはかけないようにしましょう。

また、スマートフォン用Webサイトが公開されたら、モバイルフレンドリーテストを実行してみてください。

mobile-friendly1