canonical属性タグの書き方～SEOを意識したURL正規化

オススメ記事

canonical属性タグを正しく使えていますか？意外とSEOを意識した設定ができていないサイトが多いです。

URLの正規化を正しく設定しないとリンクポピュラリティの分散を招いてしまいます。ここでは、こうしたリスクを回避し、SEOに役立てる「canonical属性タグ」の正しい使い方をご紹介します。

canonical属性タグとは？
1. URLの正規化（canonical）が必要な理由
2. canonical属性タグの記述方法
URLの正規化が必要な5つのケース
canonical属性タグのよくある間違い
まとめ

canonical属性タグとは？

canonical属性タグとは、ページ内容が類似もしくは重複しているURLが複数存在する場合に、最も大切なURLをGoogle検索エンジンに伝え、ページ評価の分散を防ぐために用いる記述です。

この最も大切なURLのことを「正規ページ」と言い、これを優先的にインデックスさせるための設定を「URLの正規化」と呼びます。

URLの正規化（canonical）が必要な理由

重複ページが存在するとリンクポピュラリティが分散し、ページの評価が下がってしまいます。「URLの正規化」を行うことで、重複ページが起こしうるSEO上のデメリットを回避することができます。

canonical属性タグの記述方法

canonicalタグは<head>内に、以下のようなコードを記述します。

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

重複ページにこのコードを記述することで、Googleからの評価を集中させることができます。（下図参照）

URLの正規化が必要な5つのケース

「wwwの有無」や「http / https」が併存している場合

サイトによっては「wwwの有無」や、セキュリティ強化のため「https」対応しているサイトがそれぞれ併存しているケースがあります。

https://example.com/
https://www.example.com/
http://example.com/
http://www.example.com/

このように同じページが異なるURLからアクセスできる場合、リンクポピュラリティの分散や重複ページ判定を受けるといったデメリットがあります。このような場合にURLの正規化を行うことで、そうしたリスクを回避できるなどSEO的なメリットが大きいです。

ECサイトなどで類似する商品ページが複数ある場合

ECサイトなどで、商品のカラーバリエーションやサイズごとに異なるURLが生成されるケースがあります。このようの場合、重複コンテンツと認識される恐れがあり、canonical属性タグを使ったURLの正規化をする必要があります。

それぞれのページのURL構成は、以下のようになります。

・http://www.example.com/bag_red.html
・http://www.example.com/bag_blue.html
・http://www.example.com/bag_green.html

このように、コンテンツが同じでカラーのみ異なるURLが存在すると、Google検索エンジンは重複コンテンツとみなしてしまう可能性があります。このような場合には、優先させたいページのURLを決めて、それ以外の全てのページにcanonical属性タグを設置します。

こうすることで、検索エンジンに重複ページ（ブルー、グリーン）は正規化したいページ（レッド）のコピーであることを伝え、ペナルティを回避できます。

PCとスマホのURLが異なる場合

PCサイトとスマホサイトが別々に用意され、それぞれ異なるURLで運用されている場合は、URLの正規化が必要です。

基本的にはPCサイトを正規ページとし、スマホサイト側に以下canonical属性タグを設定します。

<head>
    <link rel="canonical" href="http://PCサイトのURL/">
</head>

さらにPCサイトに以下コードを記述しましょう。そうすることで、検索エンジンにスマホ版の存在を知らせ、誤認を防ぐことができます。

<head>
    <link rel="alternate"
        media="only screen and (max-width: 640px)" href="http://スマホサイトのURL/" />
    <link rel="alternate"
        media="handheld" href="http://スマホサイトのURL/" />
</head>

スマホサイトには「canonical（カノニカル）」、PCサイトには「alternate（オルトネート）」を設置する！と覚えておきましょう。

ちなみに、canonicalは直訳すると「正典、規準的な、標準的な」すなわち「正規の～」といった意味を持ち、alternateは「代役、代理」の略語です。

AMPを導入した場合

AMPを導入するには、AMP用のページを別途用意することになります。AMPページと非AMPページ（本体ページ）では内容が重複しているため、canonicalの設置が必要です。

▼非AMPページ（本体ページ）記述
本体ページに以下コードを記述します。こうすることで、AMPページがあることを知らせることができます。

<head>
    <link rel="amphtml" href="http://AMPページのURL/" />
</head>

▼AMPページ記述
AMPページに以下コードを記述して、URLの正規化を行いましょう。

<head>
    <link rel="canonical" href="https://非AMPページ（本体ページ）のURL/" />
</head>

ABテストを行っている場合

ABテストを実施している場合もURLの正規化が必要です。大抵の場合、一部分だけが異なり大半が同じ内容になっていることが多いでしょう。これだと重複コンテンツと見なされる恐れがあるため、canonicalの設定を推奨します。

canonical属性タグの失敗例

canonical属性タグは一度理解してしまえば、意味や用法はシンプルで難しくありませんが、しばしば間違った使い方をしているサイトを見かけます。誤った使い方は順位下落の原因になりかねませんので気をつけましょう。

誤って「相対パス（URL）」で記述する

canonical属性タグは基本的に絶対パスで指定しましょう。相対パスで記述してしまうと、予期せぬ問題が起きることがあります。

▼正しい例（絶対パスで記述）

ref="http://example.jp/category/index.php"

▼間違った例（相対パスで記述）

ref="category/index.php"

canonical属性タグを2つ以上設置する

canonical属性タグの設置は必ず1ページ1つにしましょう。2つ以上あると検索エンジンは全てのcanonicalを無視します。

「複数ページに分けた記事」に設定する

ニュースサイトやブログなどで、2ページ以上にまたがって掲載している記事（コラム）をよく見かけます。

この場合、2ページ目以降の記事（続きのページ）から1ページ目に向けてcanonical設定するのは間違いです。それらのページは続きの内容であって同一ではないため、誤って設定してしまうと2ページ目以降がインデックスされなくなってしまいます。

<head>タグの外に記述する

canonical属性タグは必ず<head>タグ内に記述しましょう。<head>タグの外に記述してしまうと機能しません。

まとめ

canonical属性タグを使った重複コンテンツの対応は、一度理解してしまえば決して難しいものではありません。ここで紹介した「URLの正規化が必要なケース」に該当するページにcanonical設定することで、検索エンジンに正しく認識され、SEO効果が高まることもあります。

また、canonical属性タグはできるだけソース上部に記述することで、クローラーが早い段階で読んでくれるため、確実に処理されるようになります。

※掲載している情報については充分注意・確認をした上で掲載しておりますが、最新性や正確性を保証するものではありません。ユーザー様に、より有益な情報をお届けしたいと考えており、もし誤った情報がございましたら、当ブログまでご一報いただけますと幸いです。