カノニカルタグとは
カノニカル(canonical)タグは、URL正規化タグとも呼ばれ重複URLの解消を目的としたタグです。
重複URL例としては次のようなものがあります。
- www.有り無し、index.html有り無し
- トラッキングなどの用途でパラメータを付ける場合
- URLは異なるもののページの内容が同じ
カノニカルタグを利用することで重複URLの中でどのURLが正規のものなのか、これらのURLが同じ内容であるかを検索に伝えることが可能になります。
カノニカルタグの書き方
カノニカルタグはheadタグ内に以下内容を記載します。
<link rel="canonical" href="ここに正規化先のURLを記載" />
記載例
<head>
<title>タイトル</title>
<meta name="description" content="ディスクリプション。" />
<link rel="canonical" href="http://www.example.com/page-1.html" />
<head>
尚、読み取りミスを避けるために、なるべくheadタグ内でも上部に設置します。
クロスドメインでの利用が可能
カノニカルタグは、サイト内だけでなくクロスドメイン(別ドメイン間)で利用することが可能です。
例えば、http://example.com/page-1.htmlをhttp://example.example.org/page-1.htmlに正規化したい場合は、次のように記載します。
<link rel="canonical" href="http://example.org/page-1.html">
検索結果への影響
他のURLへ正規化した場合、元のURLは検索結果に表示されなくなります。
したがって、元のURLには自然検索からの流入は見込めなくなります。
尚、Bingでもカノニカルタグをサポートされているため主要な検索エンジンでは表示されません。
カノニカルタグの5つの使い方
1.重複URL回避
最もポピュラーなカノニカルタグの使い方になります
a) www.有り無しなどの正規化の場合
冒頭でも紹介したwww.有り無し、index.html有り無しの統一に利用します。
例:www.有りをwww.無しに正規化する場合
http://www.example.com/をhttp://example.com/に正規化した場合は以下の記述になります。
<link rel="canonical" href="http://example.com/">
b) パラメータの正規化の場合
キャンペーンのトラッキング用に以下のようなパラメータを付加する場合があります。
http://www.example.com/?utm_source=wt&utm_medium=banner&utm_campaign=canonical
ですが、このパラメータ付きURLはインデックスしてしまうと重複URLとなってしまうために正規化を行う必要があります。
例:パラメータ付きURLをサイトトップに正規化する場合
http://www.example.com/?utm_source=wt&utm_medium=banner&utm_campaign=canonicalをhttp://www.example.com/に正規化した場合は、以下の記述になります。
<link rel="canonical" href="http://www.example.com/">
2.スマートフォンサイト
スマートフォンサイトを別ページに用意した場合、PCページにはrel=alternate、モバイルページにはrel=canonicalを設置する必要があります。
この設定は、PCページ、モバイルページの関係性をクローラーに伝えるために必要となります。
尚、モバイルページにカノニカルタグを設置することで、通常の検索結果には表示されなくなりますが、モバイル検索では表示されます。
例:PCページ、スマホページそれぞれのトップページにタグを設置する場合
PCページがhttp://www.example.com/、モバイルページがhttp://www.example.com/sp/の場合は以下のように、PCページ側にはモバイルページのURL、モバイルページにはPCページのURLがそれぞれ入ります。
PCページ側:
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.example.com/sp/">
3.AMP
AMPはスマートフォンと同様別URLで作成した場合は、AMPページにカノニカルタグを設置する必要があります。
例:PCページとAMPページにタグを設置する場合
PCページがhttp://www.example.com/hoge/、AMPページがhttp://www.example.com/hoge/amp/の場合は以下のように、PCページ側にはAMPページのURL、AMPページにはPCページのURLがそれぞれ入ります。
PCページ側
<link rel="amphtml" href="http://www.example.com/hoge/amp/">
AMPページ側
<link rel="canonical" href="http://www.example.com/hoge/">
4.ABテスト
ABテストを行う際にオリジナルページとページの要素を一部変更した検証用ページを作成します(ABテストツールによっては、1ページだけABテストを行えるツールもあります)。
ですが、この場合オリジナルページと検証用ページが重複コンテンツとなってしいます。この検証用ページをインデックスさせない為にカノニカルタグで正規化を行います。
例:トップページと/test/でABテストを行った場合
オリジナルページがhttp://www.example.com/、検証用ページがhttp://www.example.com/test/の場合は以下のように、検証用ページにカノニカルタグを設置して、オリジナルページのURLを記載します。
検証用ページ側に設置するタグ
<link rel="canonical" href="http://www.example.com/">
5.リダイレクトの代替
無料ブログなどは.htaccessが利用できないため、別ページや別ドメインへのリダイレクトが困難な場合があります。
その場合はリダイレクトの代わりとしてカノニカルタグを利用することができます。
例:サイト内の個別ページから個別ページに対して正規化する場合
移行先のURLがhttp://www.example.com/bbb/、移行元のURLがhttp://www.example.com/aaa/の場合は以下のように、移行元ページにカノニカルタグを設置して移行先のURLを記載します。
<link rel="canonical" href="http://www.example.com/bbb/">
カノニカルタグを利用する際の注意点
次のタグや設定ファイルがある場合、カノニカルタグが効かない可能性がありますので、注意が必要になります。
注意点1:robots.txt
カノニカルタグを設置したページをrobots.txtでブロックしていた場合、クローラーがサイトにアクセス出来ず、カノニカルタグを認識できません。
この場合は、対象のページをブロックしないようにrobots.txtの内容を修正する必要があります。
注意点2:カノニカルタグの複数設置
ミスや仕様によりカノニカルタグが2つ以上入ってしまうことがあります。この場合、カノニカルタグが効かない(無視される)可能性があります。
必ずカノニカルタグを設置した時は、複数入っていないか確認しましょう。
カノニカルが複数入ってしまう例:
- 他のページからカノニカルの入ったソースをコピペしてきて、確認せずにもう一つカノニカルを入れる
- WordPressのテーマにデフォルトでカノニカルタグが入る仕様なのに、プラグインでもカノニカルの設定をしてしまい、複数のカノニカルが設置される
注意点3:301リダイレクト
カノニカルタグが設置されたページを他のページに301リダイレクトした場合、クローラーがリダイレクト元を読み込まれない為、設置したカノニカルは無効となります。
必ずどちらか1つの方法を選びましょう。
注意点4:絶対パスでの指定を推奨
相対パスでもカノニカルタグは動作します。
ですが、相対パスの記述ミスなどを回避するために基本的には絶対パスで記載します。
まとめ
カノニカルタグの用途について紹介してきました。
タイトルタグやメタタグとくらべてカノニカルタグは、まだまだ認識されていないタグになります。
うまく利用して検索エンジンに好かれるサイト作りを目指しましょう!