canonicalの使い方

URLの正規化を行えるmetaのcanonicalの使い方について少し調べたのでメモ。

canonicalについて

canonicalは同じ内容のコンテンツが複数URLで存在する場合に使用します。
例えば以下のような場合です。

• httpとhttps、wwwの有無、index.htmlの有無で同じコンテンツで別URLが生成される場合
  例:
  • http://example.com/
  • https://example.com/
  • http://www.example.com/
  • http://example.com/index.html
• ECサイトで、検索条件などによって同じ商品ページに複数の動的URLが生成される場合
  例:
  • http://example.com/detail/item001/
  • http://example.com/detail/item001/?category=anime&color=green
  • http://example.com/detail/item001/?tag=idol
• PCサイトとスマホサイトでURLが別の場合
  例:
  • http://example.com/
  • https://example.com/sp/
• 印刷用ページとして同じ内容のコンテンツを別URLで生成している場合
  例:
  • http://example.com/article/
  • http://example.com/article/print/

重複コンテンツが多数ある場合、PageRankが分散する、どのURLをインデックスに取り込むのか検索エンジンが判断できないなどの問題が発生し、検索結果の順位の低下につながることがあります。
　

canonicalの指定方法

canonicalはhead内に以下のように指定します。

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

http://example.com/にインデックスに登録したいURLを入れます。
　

注意点

canonicalを指定する際、以下の点に注意してください。

• rel=canonicalのリンク先がエラーやソフト404でないことを確認する
• rel=canonicalを1つのページで2つ以上指定しない。(指定があると無視される。)
• head内に記述する。(body内にあるとGoogleでは無視される。)
• 「/hoge.html」のような相対パスではなく、「http://example.com/hoge.html」のように絶対パスを使用する

スマホサイトが別URLで存在する場合

PCサイトとスマホサイトでURLが異なる場合、PCサイトのページにはスマホサイトが存在することを示すためalternateを設定します。

PCサイト(http://example.com/)

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

スマホサイトのページには、対応するPCサイトのページのURLをcanonicalに設定します。

スマホサイト(https://example.com/sp/)

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

複数ページにまたがるコンテンツの場合

以下のように、複数ページにまたがっているコンテンツがあるとします。

• http://example.com/article/c001/page01.html
• http://example.com/article/c001/page02.html
• http://example.com/article/c001/page03.html

この場合、ページ毎にコンテンツ内容が重複しているわけではないので、1ページ目のURLをcanonicalに設定するのは間違いです。

コンテンツ全体を1ページにまとめたページ(例: http://example.com/article/c001/all.html)がある場合、全体をまとめたページをcanonicalのURLに指定して、各ページに設定します。

page01.html/page02.html/page03.html

<link rel="canonical" href="http://example.com/article/c001/all.html" />

コンテンツ全体を1ページにまとめたページがない場合、rel=”prev”とrel=”next”を使ってページ間の関係を指定します。

page01.html

<link rel="next" href="http://example.com/article/c001/page02.html" />

page02.html

<link rel="prev" href="http://example.com/article/c001/page01.html" />
<link rel="next" href="http://example.com/article/c001/page03.html" />

page03.html

<link rel="prev" href="http://example.com/article/c001/page02.html" />

【参考サイト】

• Google ウェブマスター向け公式ブログ: rel=canonical 属性に関する 5 つのよくある間違い
• Google ウェブマスター向け公式ブログ: 検索結果に「すべて表示」ページを優先的に表示する方法
• 正規 URL を使用する – Search Console ヘルプ
• 別々の URL – ウェブマスター向けモバイルガイド