canonical属性とalternate属性を使ってスマホサイトの存在を適切に伝える方法

ウェブサイトを運営していて、デスクトップ用サイトURLとスマホ用サイトURLを分けている場合あります。この場合、きちんと検索エンジン向けに設定を行わないとスマホ用サイトの存在を認識してくれないケースがあります。それは主に、URLをデスクトップとスマホで分けて運用しているページの場合が多いです。

このような場合は、デスクトップ用URLとスマホ用URLの双方を検索クローラーに伝える必要があります。

今回は、canonical属性とalternate属性を使ってスマホページの存在を検索エンジン向けに伝える方法を紹介します。

目次

1. canonicalとは
2. alternateとは
3. Googleがサポートするデスクトップ用サイトとスマホ用サイトの最適化方法は3種類ある
4. URLを分けている場合の対策方法
5. レスポンシブデザインの実装を検討しよう
6. よくある質問とその回答

canonicalとは

canonicalとは、「URLの正規化」を目的に使われる属性です。
これを用いることで、似た・同じ内容のページを一本化（正規化）することができ、検索エンジンからの評価が分散しなくなるという特長があります。

URLの正規化を行わないと、パンダアップデートのような質を重視するスパム対策に引っかかり、ページの評価を下げてしまう可能性があり、損失回避の観点からとても重要視されています。

<link rel="canonical" href="http://~~~~~~~~">

上記のように一本化させる先のページを指定することでcanonicalは行われます。

canonicalとは？URLの正規化でSEOのマイナス評価を避けよう

URLの正規化で非常に重要な役割を果たすのが、canonicalです。URLの正規化を行わないとリンクポピュラリティの分散を招き、SEO対策としてはマイナスです。設定を間違えると検索結果から削除されてしまうなど、慎重な対応が必要なものでもあります。正しく使うことでリンクポピュラリティの分散も防ぐことができるので、必ず対応しておくべきものでもあります。今回は、canonicalの正しい使い方を紹介します。

alternateとは

alternateとは、英語で「代替物」という意味を持っています。
現在のページの代替ページが存在している時に用いられ、主に、（URLは違うものの）内容が同じスマホページ、多言語版のページなどを指定して使われることが多いです。
これを指定することで、「検索エンジンが内容が同じなのにURLが違う＝マイナス評価」ということを防ぐ意味があります。

Googleがサポートするデスクトップ用サイトとスマホ用サイトの最適化方法は3種類ある

Googleがサポートするデスクトップ用サイトとスマホ用サイトの最適化方法は3種類あります。

1. レスポンシブデザイン
2. 動的配信（UA別にHTML分けたりCSS分けたり）
3. URLをわける

この3つの方法をGoogleはサポートしているのですが、レスポンシブデザインはURLがデスクトップ用サイトとスマホ用サイトで変わらないので、現時点で特に何かする必要は(2015/5/15)はありません。

動的配信に関しては、Googlebotに適切なコンテンツが存在することを伝えてあげる必要があるので、Vary HTTP ヘッダーを使いましょう。

※参考：動的な配信 - ウェブマスター向けモバイルガイド

今回は、URLを分けた場合について解説します。

URLを分けている場合の対策方法

URLを分けている場合というのは具体的には以下のようなURLの場合です。

-デスクトップ用URL：http://www.hogehoge.com/
-スマホ用URL：http://sp.hogehoge.com/

UA（ユーザーエージェント）でURLを出し分けると上記のような実装が可能です。
こういった場合、それぞれを適切に設定することで正しくgooglebotに認識してもらうことができます。適切な設定をしていない場合、スマホ用サイトのインデックスが遅れたり、重複ページと認識されることもあります。

手順1.alternate属性を使う

alternate属性というのは、googlebotにスマホ用サイトの存在を知らせるためのものなります。クローラーがデスクトップ用サイトを訪れたとき、このalternateが設定されていると、スマホ用サイトの存在を知ることができます。

alternate属性はデスクトップ用サイトの該当ページのソースコードの中に、

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://sp.hogehoge.com/" />

と、記述します。

手順2.canonical属性を使う

そして、上記で指定したスマホ用ページのソースコードの中に、

<link rel="canonical" href="http://www.hogehoge.com/" />

と記述します。
これは、「このスマホ用ページはデスクトップページのスマホページです。」とgooglebotに伝えることになります。

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

デスクトップ用トップページとスマホ用トップページ、デスクトップ用記事ページとスマホ用記事ページなど、それぞれをUA別にリダイレクト設定しましょう。
デスクトップ用ページだけあって、スマホ用ページを持っていないURLの場合は、リダイレクトするページがないわけですからしないほうがいいです。

全てをトップページにリダイレクトするなどの対処法は、「間違ったリダイレクト」として、Googleはランキングでマイナス影響を与えると明言しています。

画像引用：間違ったリダイレクト – ウェブマスター向けモバイルガイド

レスポンシブデザインの実装を検討しよう

上記色々と設定方法を解説しましたが、リダイレクトやcanonicalなどはミスをすると全く検索結果に表示されなくなることもあるなど、リスクもある方法です。
こういったミスを減らすためにも、Googleはレスポンシブデザインを推奨しています。

ケーススタディ

Q.デスクトップ用サイトにはあるが、スマホ用サイトには無いページがあります。この場合のalternate属性はどうしたらいいか？

A.alternate属性は、canonicalと1対1の構成で使うため、スマホページがない場合は無理して使う必要はありません。

canonical属性とalternate属性を正しく設定しよう

今回はスマホ用ページとデスクトップ用ページでURLが分かれている場合の対処法について紹介しました。スマホサイトへのアクセスを集めるためにも、canonical属性とalternate属性を正しく設定をしましょう。

やってはいけないSEO対策とは

スパム認定に注意！今はやってはいけないSEO対策一覧

Web集客施策の一つでもあるSEO対策ですが、過度なSEO対策によりスパム認定されてしまうケースが後を絶ちません。今回は、今は絶対にやってはいけないSEO対策を紹介します。スパムにあてはまる行為をしていないかを見直すきっかけにしてください。