<link rel="canonical"> / hreflang

対応:		HTML5（2014）

『link rel="canonical"』は重複コンテンツが存在する場合に正規URLを検索エンジンへ伝えるための要素で、『hreflang』は複数言語・地域向けのページの対応関係を検索エンジンに伝えるために使用します。

構文

<!-- 正規URLを指定（head内に記述） -->
<link rel="canonical" href="https://example.com/page/">

<!-- hreflang: 日本語・英語版の対応を指定 -->
<link rel="alternate" hreflang="ja" href="https://example.com/ja/page/">
<link rel="alternate" hreflang="en" href="https://example.com/en/page/">
<!-- どの言語にも一致しない場合のデフォルト -->
<link rel="alternate" hreflang="x-default" href="https://example.com/page/">

属性一覧

属性 / 値	概要
rel="canonical"	このページの正規URLを指定します。重複するURLが複数ある場合に、検索エンジンに代表URLを伝えます。
rel="alternate"	hreflangと組み合わせて、別の言語・地域向けの代替ページを指定します。
hreflang	対象ページの言語（および地域）を指定します。言語コードはISOの規格（例: ja, en, zh-TW）に従います。
hreflang="x-default"	どの言語タグにも一致しない場合のデフォルトページを指定します。
href	正規URLまたは代替ページのURLを指定します。必ず絶対URLで記述します。

サンプルコード

sample_link_canonical.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">

  <!-- 正規URLを指定（URLパラメータ付きページでも正規化） -->
  <link rel="canonical" href="https://wp-p.info/articles/html-basics/">

  <!-- hreflang: 日本語・英語・台湾中国語版を指定 -->
  <link rel="alternate" hreflang="ja"
        href="https://wp-p.info/ja/articles/html-basics/">
  <link rel="alternate" hreflang="en"
        href="https://wp-p.info/en/articles/html-basics/">
  <link rel="alternate" hreflang="zh-TW"
        href="https://wp-p.info/zh-tw/articles/html-basics/">
  <!-- デフォルトURL（言語が特定できない場合） -->
  <link rel="alternate" hreflang="x-default"
        href="https://wp-p.info/articles/html-basics/">

  <title>HTML基礎 | やさしいプログラミング</title>
</head>
<body>
  <h1>HTML基礎</h1>
</body>
</html>

実行結果

ブラウザ上での表示は変わりませんが、Googleクローラーがページを訪問した際にcanonicalとhreflangの情報を取得し、検索インデックスに反映します。

サンプルページはこちら

概要

『link rel="canonical"』はURLの正規化に使用します。同じコンテンツが複数のURL（`?sort=date` などのパラメータ付き、`www` あり・なし、`http` と `https` の混在など）で閲覧できる場合、検索エンジンはどれが本来のURLか判断できず、評価が分散してしまいます。canonicalを指定することで「このページが正規版です」と明示でき、検索評価を正規URLに集約できます。canonicalには必ず絶対URLを指定してください。相対URLは推奨されません。

『hreflang』は多言語・多地域サイト向けの設定です。同じトピックの日本語版・英語版・中国語版が存在する場合、それぞれのページで全言語版のhreflangを相互に記述します。一方のページにしか記述しない片方向のhreflangは正しく機能しないため、全言語版のページで互いにhreflangを記述する「双方向の記述」が必須です。

canonicalとhreflangは独立した設定ですが、多言語サイトでは両方を組み合わせて使うのが一般的です。各言語版ページのcanonicalはその言語版自身のURLを指し、hreflangで他言語版との対応を示します。OGPとのURL一致も重要で、『og:url』にも正規URLを指定することが推奨されます（詳細は『meta name="description" / OGP』を参照）。

canonicalが必要になる典型的なシナリオ

同じコンテンツが複数のURLで表示されうる状況はよくあります。それぞれのパターンと対処法を確認してください。

パターン	問題	canonicalの指定例
URLパラメータ付き（?sort=date, ?page=1）	ソート・ページングで同じコンテンツに複数URLが発生する	パラメータなしのURLを指定
www あり・なし（www.example.com と example.com）	どちらでもアクセスできる場合、評価が分散する	どちらか一方に統一して指定
http と https の混在	リダイレクト設定漏れで両方アクセス可能になる	https版を指定
末尾スラッシュあり・なし	/page/ と /page の両方が存在してしまう	どちらか一方に統一して指定
印刷用・AMP版ページ	内容が同じ別URLが存在する	元ページのURLを指定

<!-- 例：ソート・フィルターのあるECサイトの商品一覧ページ -->
<!-- このページのURL: /products/?category=html&sort=price&page=2 -->
<head>
  <!-- 正規URLはパラメータなし -->
  <link rel="canonical" href="https://example.com/products/?category=html">
</head>

多言語サイトの完全なhreflang設定例

hreflangは全ページで相互に記述します。日本語版・英語版・台湾中国語版の3言語サイトでは、各ページに3つすべてのhreflangを記述します。

<!-- 日本語版ページ（/ja/html/）の head -->
<head>
  <link rel="canonical" href="https://example.com/ja/html/">
  <link rel="alternate" hreflang="ja"      href="https://example.com/ja/html/">
  <link rel="alternate" hreflang="en"      href="https://example.com/en/html/">
  <link rel="alternate" hreflang="zh-TW"   href="https://example.com/zh-tw/html/">
  <link rel="alternate" hreflang="x-default" href="https://example.com/en/html/">
</head>

<!-- 英語版ページ（/en/html/）の head -->
<head>
  <link rel="canonical" href="https://example.com/en/html/">
  <link rel="alternate" hreflang="ja"      href="https://example.com/ja/html/">
  <link rel="alternate" hreflang="en"      href="https://example.com/en/html/">
  <link rel="alternate" hreflang="zh-TW"   href="https://example.com/zh-tw/html/">
  <link rel="alternate" hreflang="x-default" href="https://example.com/en/html/">
</head>

canonicalはその言語版自身のURL、hreflangは全言語版を相互に記述する点が重要です。どちらのページにも全言語版のhreflangが含まれていなければなりません。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典