今回はPCサイトとスマホサイトを異なるURLで作成する際に必要になっていくる対応策についてまとめていきたいと思います。

PCサイトとスマホサイトで別々のURLで作成するとはどういうこと？
PCサイトのURL：http://www.tam-tam.co.jp/
スマホサイトのURL：http://www.tam-tam.co.jp/sp/

上記のように、同一コンテンツがPCサイトのURL・スマホサイトのURLの2つ存在する事になります。
このまま何も対処をしなければ、重複コンテンツとみなされペナルティを受ける可能性があります。

対処方法
alternate属性の設定（PCサイトに設定）
canonical属性の設定（SPサイトに設定）
リダイレクト設定をする
1. alternate属性の設定（PCサイトに設定）

まず、GooglebotがPCサイトを訪れた際に、同一コンテンツのスマホサイトが存在することを知らせる為、alternate属性をPCサイトに設定します

1
<a link rel="alternate" media="only screen and (max-width: 640px)" href="スマホサイトのURL" />
2. canonical属性の設定（スマホサイトに設定）

次に、Googlebotがスマホサイトを訪れた際に、
「"http://www.tam-tam.co.jp/sp/"を"http://www.tam-tam.co.jp/"に正規化して読み込んで下さい」
と伝える為、canonical属性をスマホサイトに設定します

1
<a link rel="canonical" href="PCサイトのURL" />
※PCサイトのURLを指定する際は、必ず対になるページのURLを記載してください

こうする事で、重複コンテンツ扱いになることを回避できます。

3. リダイレクト設定をする

リダイレクトの設定方法

.htaccessでのリダイレクト
JavaScriptでのリダイレクト
リダイレクトの種類

リダイレクトには、双方向リダイレクトと単方向リダイレクトがあります

双方向リダイレクトとは

スマホユーザーとPCユーザーが、PCサイトとスマホサイトにアクセスした場合にそれぞれリダイレクトさせる

単方向リダイレクトとは

PCサイトにアクセスしたスマホユーザーのみをスマホサイトにリダイレクトさせる

まとめ
今回は、URLの異なるPCサイトとスマホサイトが存在している場合のalternateとcanonicalの設定について記載してみました。
リダイレクトに関しては、状況に適した方法と種類を用いて設定する必要があります。

参考サイト↓↓
PCとスマホで別々のURLを用意しているページのcanonicalとalternateの設定
canonical属性とalternate属性を使ってモバイルの最適化をしよう