スマホサイトを制作に伴う設定と注意点!

すまいるネット 週刊SEOコラム Vol.51

モバイルファーストインデックスの更新が続々と行われておりますので、

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

ホームページの中身は同じでも違うURLを使用している場合、

Google検索に重複コンテンツ

(同じ内容のページが複数あり偽装されていると思われるケース)

とみなされてしまうことがあります。

これが検索結果の順位に影響する可能性もあるので、

未然に防ぐためにも以下に挙げる項目にしたがって

適切に処理しておくのがオススメです!

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

Googleにモバイルサイトを認識してもらうため、

PC用Webページのheadタグ内に以下のように記述します。

<head>
<link rel="alternate" media="handheld" href="スマートフォン用WebページのURL">
<link rel="canonical" href="PC用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サイトの

トップページへリダイレクトしている場合があります。

こうならないように、そのページに見合った適切なページへ

リダイレクトするようにしましょう。

リダイレクト設定 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ページを表示させましょう。

また、スマートフォン用Webサイトが公開されたら、

モバイルフレンドリーテストを実行してみてください。

モバイル フレンドリー テスト

これは、モバイルに対応したWebサイトであるかチェックしてくれるツールです。
スマートフォン用WebサイトのURLをテキストボックスに入力し、

「分析」ボタンをクリックしてしばらく待つと分析結果が表示されます。

ぜひチェックしてみてください。