同じページなのにURLが違う？canonicalタグの役割
Webサイトの制作や調査でHTMLのソースコードを確認していると、<head>内に次のような記述が入っていることがあります。
<link rel="canonical" href="https://example.com/news/123.html">canonicalは「カノニカル」と読みます。
ページのデザインや動きには影響しないため、普段Webサイトを閲覧しているだけでは気づきにくいタグです。
では、この一行にはどのような役割があるのでしょうか。
同じ内容のページに、複数のURLが生まれることがある
Webサイトでは、同じ内容のページに複数のURLからアクセスできることがあります。
例えば、次のようなURLです。
https://example.com/news/123.html
https://example.com/news/123.html?from=top
https://example.com/news/123.html?utm_source=mail2つ目や3つ目のURLには、アクセス元の判別や効果測定などに使う文字列が付いています。
URLは異なっていますが、ブラウザに表示されるページの内容は同じです。
このほかにも、URL末尾のスラッシュやindex.htmlの有無、ページの並び替えや絞り込み機能などによって、同じ、またはよく似た内容が複数のURLで表示されることがあります。
canonicalタグで「正規URL」を伝える
複数のURLから同じ内容を表示できる場合、検索エンジンはその中から検索結果に表示する代表的なURLを選びます。
この代表となるURLを、正規URLと呼びます。
canonicalタグを設定すると、サイト運営者側から検索エンジンへ、どのURLを正規URLとして扱ってほしいかを伝えることができます。
例えば、パラメータの付いていない次のURLを正規URLにしたい場合、
https://example.com/news/123.htmlHTMLの<head>内に、次のように記述します。
<head>
<link rel="canonical" href="https://example.com/news/123.html">
</head>これにより、検索エンジンへ「このページについては、このURLを代表として扱ってほしい」と伝えることができます。
canonicalタグを設定しても、ページは移動しない
canonicalタグと混同しやすいものに、リダイレクトがあります。
リダイレクトを設定すると、古いURLへアクセスした人は、新しいURLへ自動的に移動します。
一方、canonicalタグを設定しても、ページを見ている人が別のURLへ移動することはありません。
元のURLにも引き続きアクセスできます。
canonicalとリダイレクトの使い分け
- 複数のURLを残したまま、検索エンジンに正規URLを伝えたい場合はcanonical
- 古いURLを廃止し、新しいURLへ完全に移動させたい場合はリダイレクト
どちらもURLを整理するために使われますが、役割は異なります。
設定すれば必ず指定どおりになるわけではない
canonicalタグは、検索エンジンに正規URLの希望を伝えるための強いシグナルです。
ただし、必ず指定したURLが正規URLとして選ばれるというものではありません。
ページの内容やリダイレクト、サイトマップ、サイト内リンクなどの情報が食い違っている場合、検索エンジンが別のURLを正規URLとして選ぶことがあります。
設定するときに気をつけたいこと
- ページの
<head>内に記述する - ドメイン名を含むURLを指定する
- まったく内容の異なるページを指定しない
- サイトマップやサイト内リンクでも、同じ正規URLを使用する
- 正規ページ自身にも、そのページを指定するcanonicalタグを設定する
画面には見えないけれど、大切な一行
canonicalタグは、画面のデザインを変えたり、新しい機能を追加したりするものではありません。
それでも、同じ内容に複数のURLが存在する場合に、どのURLを正規として扱ってほしいかを検索エンジンに伝える大切な役割があります。
Webサイトには、画面に見えるデザインや操作だけでなく、ソースコードの中にもサイトを支えるさまざまな仕組みがあります。
普段は何気なく見ているHTMLも、一つひとつのタグの役割を調べてみると、新しい発見があるかもしれません。
