「canonical」とは、検索エンジンに正規のURLはどれなのかを伝えるもので、コンテンツ内容が重複するページが複数ある場合などに使用したりします。301リダイレクトに近い性質を持っているので、301リダイレクトが利用できないサーバーを使用していて、URLを正規化したいといったときにも利用する場合もあります。

canonicalの記述方法

「canonical」はhead要素内に記述します。重複しているページに正規ページのURLを指定してあげます。

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

「http://www.example.com/」の部分が正規URLを記述する箇所になります。
運用などをしていると、新たにページを作成する際にファイルをコピーして作成することがあります。そのときにコピー元のページにcanonicalが設定されていることに気が付かず、そのままファイルをアップロードしてページを公開してしまったりします。すると、本来なら検索結果に表示させたいページなのにcanonicalが設定されてしまっていることが原因でそちらを正規URLと判断され、新しいページが検索結果に表示されなくなってしまいます。なので、ちゃんとソース上で確認してから公開したほうが良いでしょう。

canonicalを設定する例

例えば、商品ページがあり、その商品が何種類かのカラーバリエーションを取り揃えていて、それぞれのページが存在する場合があるとします。カラー以外はすべて同じ内容のコンテンツであるとしたら、それは重複ページと見なされる可能性があるので、どれか1つに正規URLとして統一したほうが良いでしょう。そして、正規URLのページから各カラーのページへのリンクをつけて違うカラーもあるということを知らせるような対応をとってあげる。逆にそれぞれのカラーでユニークなコンテンツを少しでも持っているのであれば、URLの統一はする必要はないと思います。

a、b、c、dとカラーの違う商品ページが存在する場合
aの商品を正規URLに設定したとする
■bの商品ページ
<link rel="canonical" href="http://www.example.com/a.html" />
■cの商品ページ
<link rel="canonical" href="http://www.example.com/a.html" />
■dの商品ページ
<link rel="canonical" href="http://www.example.com/a.html" />

以上が、canonical属性に関する記述方法や設定方法となります。

おすすめの記事