※本記事は、2016年4月6日に公開された記事をマケスト提供により一部再編集を行っております。

突然ですが、canonical属性タグと聞いて、効果と使い方を正しく答えられますか?
URLの正規化で非常に重要な役割を果たすのが、canonicalです。

URLの正規化を行わないとリンクポピュラリティの分散を招き、SEO対策的にはNGです。設定を間違えると検索結果から削除されてしまうなど、慎重な対応が必要なものでもあります。

しかし、正しく使うことでリンクポピュラリティの分散も防ぐことができますので、必ず対応しておくべきものでもあります。

今回は、canonicalの正しい使い方をご紹介します。

目次

  1. canonicalとは
    1. なぜURLの正規化が必要か
      1. どれをインデックスに登録するか判断できない
      2. リンクポピュラリティが分散する
  2. canonicalの正しい使い方
    1. canonicalの記述方法
      1. head要素の中で使う。body要素の中は無視される
      2. なるべくソース上部で記述する
    2. canonicalを使ったほうがいいケース
      1. ECサイトなどで類似した商品のページが複数出来るケース
      2. スマホサイトと、ウェブサイトの内容が同じにも関わらずURLが違うケース
      3. ABテストなどでテスト箇所以外が同じページが存在するケース
      4. AMPを実装したケース
    3. 使うべきか判断に迷ったら
  3. canonicalに関するよくある間違い
    1. 間違いその1:ページネーションの1ページ目をcanonicalのリンク先とする
    2. 間違いその2:絶対URLのつもりで相対URLで記述してしまう
    3. 間違いその3:canonical を意図しない形で指定している、または2つ以上指定する
    4. 間違いその4:カテゴリページまたはランディングページで特集記事へのcanonicalリンクを指定する
    5. 間違いその5:body要素内にcanonicalを入れる
    6. 間違いその6:canonicalは必ず処理されるわけではない
  4. canonicalに関するよくある質問と回答
    1. Q1.canonicalは同一ページに複数回使ってもいいのでしょうか?
    2. Q2.一覧ページの2ページ目以降にはcanonicalを入れたほうがいいのでしょうか?
    3. Q3.canonicalは違うドメインでも有効なのでしょうか?
  5. canonicalによるURLの正規化はあくまでも対応策でしかない

1. canonicalとは

canonicalとは、正式なURL検索エンジン側に伝えるURLの正規化を目的としたものです。link要素の中で使われる属性値で、head要素の中で使います。
canonicalを設定すると、複数の重複ページが存在している場合に、検索エンジンに優先させるべきページを伝えることでそれ以外のページは重複ページであることを伝える事ができます。

2009年に大手検索エンジンサイト(Google、Yahoo、MSN)がサポートした機能です。

1.1 なぜURLの正規化が必要か

1.どれをインデックスに登録するか判断できない

重複ページが複数ある場合、何も設定していないと検索エンジンはそれらを全てクローリングしてインデキシングしようとします。
しかし、インデキシングの際に、重複ページは別ページとして認識されているため、独自性の無い質の低いコンテンツと判断されてしまいます。
本来はインデックスさせたいページを除外されたり、除外してもいいページを残してしまうということが起こります。

2.リンクポピュラリティが分散する

重複ページは何も設定しないと、別ページとして認識されることは前述した通りですが、外部から張られたリンクなどによる評価なども分散してしまいます。

2. canonicalの正しい使い方

設定しなければ損をしてしまうcanonicalの正しい使い方とはどんなものでしょう。

2.1 canonicalの記述方法

1.head要素の中で使う。body要素の中は無視される。

canonicalはhead要素の中で使います。body要素の中で使っても、Googleは無視して処理してくれないので注意してください。

<head>
<link rel="canonical" href="http://example.com/">
</head>

上記のようにインデックスに登録させたいほうのURLを記述します。
こうすると、検索結果に表示されるページはcanonicalで指定しているhttp://example.comになります。

2.なるべくソース上部で記述する

HTML構造をクローラーが解析する際に、なるべくソースの上部にcanonicalを配置することで、早い段階でクローラーがcanonicalを読んで処理してくれます。
確実に処理されるように、ソース上部に記述するようにしましょう。

2.2 canonicalを使ったほうがいいケース

設定方法は理解いただけましたでしょうか。
次に、canonicalを使ったほうが良いケースをいくつか挙げてみましょう。

1.ECサイトなどで類似した商品のページが複数出来るケース

ネットショップなどの場合、色違いの商品やサイズ違いの商品などが存在するケースがあります。
こうした商品それぞれにページURLを持たせている場合、重複ページとして認識される可能性があり、canonicalの使用を推奨しています。

例えば、下記のスマホケース販売サイトの場合、商品Aと商品Bと商品Cの違いは色だけでサイズも対応機種も同じです。

canonical事例

URLの構成は、

・http://www.example.com/caseA.html
・http://www.example.com/caseB.html
・http://www.example.com/caseC.html

です。

ケースの画像しか違わないため、重複ページとして認識されてしまいそうです。
こうした場合は、正規化したいURL(優先させたいURL)を決めて、それ以外のページにcanonicalを設置します。

今回は、商品Aを優先させましょう。商品Bと商品Cのページには下記のように設定します。

canonical正規化

こうすると、検索エンジン側は重複ページを正規化したいページのコピーであると認識してくれるため、質が低いと判断されペナルティを受けることを避ける事ができます。

2.スマホサイトと、ウェブサイトの内容が同じにも関わらずURLが違うケース

スマホサイトを運営していて、ウェブサイトと内容が同じにも関わらず別URLで運営をしている場合、canonicalの設定を正しく行う必要があります。
下記のようなケースです。

・http://www.example.com/ (ウェブサイトのURL)
・http://sp.example.com/ (スマホサイトのURL)

上記URLは別URLにも関わらず、内容が同じです。
こういう場合、UA(ユーザーエージェント)でユーザーがスマホ端末でウェブサイトにアクセスした際に、自動でスマホサイトリダイレクトしてあげるなどの必要があります。

その上で、クローラーにそれぞれの存在を伝えるために、ウェブサイトとスマホサイトをアノテーションというもので関連付けてあげる必要があります。

アノテーションとは関連付けるという意味です。
今回で言えば、「ウェブサイトには、このページスマホサイトURLはこれ!」と示し、「スマホサイトには、このページのウェブサイトURLはこれ!」と示すことです。

alternate

具体的なアノテーションのやり方は以下になります。

ウェブサイトURLの対応

http://www.example.com/ (ウェブサイトのURL)には以下のように記述します。

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

これで、スマホサイトURLの存在を示しています。

スマホサイトURLの対応

次は、スマホサイトURLにもウェブサイトURLの記述をしてあげる必要があります。

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

ここでcanonicalが出てきました。このように使います。
もっと細かい手順に関しては、alternate属性とcanonical属性を正しく使ってスマホサイトの存在を伝えようを参考にしてください。

3.ABテストなどでテスト箇所以外が同じページが存在するケース

ABテストなどを行っていて、テスト箇所以外が同じなのにURLが違う場合は重複ページと判断される可能性があります。
その場合は、canonicalで一方に指定しておいたほうがいいでしょう。

4.AMPを実装したケース

AMPを実装すると、AMP用のHTMLが必要となります。AMP用のページと非AMPページで内容が重複してしまいますので、その際にcanonicalを使う必要があります。

非AMPページ

<link rel="amphtml" href="https://www.example.com/url/to/amp-version.html" />

AMPページ

<link rel="canonical" href="https://www.example.com/url/to/regular-html-version.html" />

参考:AMP ページの Google 検索ガイドライン - Search Console ヘルプ

2.3 使うべきか判断に迷ったら

canonicalを使うべきか判断に迷ったときのためにGoogleが公式で以下の見分け方を掲載していますので参考にしましょう。

有益な rel=canonical 指定を行うには:

・重複ページの本文コンテンツのほとんどが canonical ページにもあることを確認する。
・rel=canonical の指定は1ページで1つとし、かつページ タグ内で指定する。
・rel=canonical のリンク先が、有効なコンテンツが含まれている URL であること(404 やソフト 404 ではないこと)を確かめる。
・特集記事が検索結果に表示させたい URL と見なされてしまうため、ランディング ページまたはカテゴリ ページで特集記事への rel=canonical リンクを指定することは避ける。

rel=canonical 属性に関する 5 つのよくある間違い

3. canonicalに関するよくある間違った認識

canonicalの使い方でよくある間違いをGoogle公開しているので、ご紹介します。

3.1 間違いその1:ページネーションの1ページ目をrel=canonicalのリンク先とする

下記のようなURL構成のページがあるとします。

・example.com/article?story=cupcake-news&page=1
・example.com/article?story=cupcake-news&page=2
・以降同様

こういう構成の場合、2ページ目(example.com/article?story=cupcake-news&page=2)のcanonical設定を1ページ目に向けているサイトがよくありますが、これはNGです。
canonicalは重複ページをまとめる意味がありますが、上記の場合1ページ目と2ページ目はページの中身が違うので重複ページではないからです。

こういった場合は、全てのコンテンツが載っているAllページを作成し、そちらにcanonicalを各ページから張るか、ページネーションに使う rel=prev/nextを使いましょう。

3.2 間違いその2:絶対URLのつもりで相対URLで記述してしまう

canonicalは相対URLでも絶対URLでも指定することができます。しかし、下記のような間違いをしてしまいがちです。

ダメな例:
良い例①:
良い例②:

http://やhttps://がついていない場合は、相対URLとして判断されます。よって、上記のダメな例は相対パスとして判断されます。
このページドメインexample.comですから、クローラーはダメな例で指定されたcanonicalを「http://exapmle.com/example.com/cupcake.html」として判断してしまいます。
これは、間違ったURLなので、検索エンジンは結果的に正しくcanonicalを処理することができません。

3.3 間違いその3:canonical を意図しない形で指定している、または2つ以上指定する

何かのページテンプレートを参考にページを作成している場合、ページテンプレートの中に元々設定されていたcanonicalのまま、使っているケースがあるようです。
このまま使ってしまうと、ページテンプレート製作者のページヘcanonicalが設定されてしまいます。
必ずページ作成前にテンプレートをチェックし、設定があれば削除するようにしましょう。

3.4 間違いその4:カテゴリページまたはランディングページで特集記事への canonicalリンクを指定する

ある記事ページの内容を、その上位のカテゴリーページがほとんど含んでいるため、カテゴリーページが記事ページヘのcanonical設定をしている場合があります。
この場合カテゴリーページインデックスに登録されなくなってしまいます。

カテゴリーページインデックスに登録したくない場合はそれでも問題ありませんが、どちらもインデックスに登録させたい場合は、

  • canonicalを設定しない
  • カテゴリーページに自身のページへのcanonicalを設定する

のどちらかで対応しましょう。

3.5 間違いその5:body要素内にcanonicalを入れる

rel=canonicalはhead要素の中に入れる必要があります。body要素の中に記述してもGoogleは無視してしまいます。

bodyにcanonicalを入れるダメな例

3.6 間違いその6:canonicalは必ず処理されるわけではない

canonicalはクローラーに対して発信するシグナルです。そのシグナルをクローラーが受け取ったからといって、どう処理するかは検索エンジン側に委ねられてしまうことを認識しておきましょう。

4. canonicalに関するよくある質問と回答

Yahoo知恵袋で閲覧数の多いcanonicalに関する質問があったので、それに対する私の回答も載せます。

4.1 Q1.canonicalは同一ページに複数回使ってもいいのでしょうか?

同一ページ内にcanonicalを設置した場合、クローラーはどのURLを正規URLとして判断していいか分からないため、記載されている全てのURLを無視します。
よって、canonical自体が無効化されますので、必ずcanonicalは1つのページの中で1回に留めて使ってください。

4.2 Q2.一覧ページの2ページ目以降にはcanonicalを入れたほうがいいのでしょうか?

一覧ページの2ページ目以降に1ページ目に向けてcanonicalを入れるかどうかという質問ですが、これは行わないほうがいいです。
3.1のよくある間違い①にも記載しましたが、似ていても中身が違うのでこれは重複ページではないからです。canonicalは重複したページに使うようにしましょう。

4.3 Q3.canonicalは違うドメインでも有効なのでしょうか?

違うドメインに向けたrel="canonical"は有効です。これはGoogleの長山氏も言及しています。

5.canonicalによるURLの正規化はあくまでも対応策でしかない

今までcanonicalの使い方を説明してきましたが、極力こういう対応をしないで済むようにサイト制作、サイト運営を心がけておくことが一番いいのは間違いありません。
一例ではありますが、スマホサイトを一から立ち上げるのであれば、ウェブサイトとスマホサイトURLを統一し、UAで振り分けておけば、canonicalとalternateを使ったアノテーションの必要もないわけです。

このように、事前に設計をしておけば避けられることも多分にあるということを忘れてはいけません。

まとめ

サイトを運営していると、重複ページはどうしても出てきてしまいます。

真っ当な運営をしているのにも関わらず、重複ページを放置していることでマイナスの評価を受けてしまってはとても勿体無いことです。しっかりと学んで、自分のサイトにも重複ページがないか、調べ対応しましょう。

SEO対策に取り組むなら、ツールを活用しよう![マケスト提供]