Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
<link rel="canonical"> / hreflang
『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で記述します。 |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- 正規URLを指定（URLパラメータ付きページでも正規化） -->
<link rel="canonical" href="https://example.com/articles/html-basics/">
<!-- hreflang: 日本語・英語・台湾中国語版を指定 -->
<link rel="alternate" hreflang="ja"
href="https://example.com/ja/articles/html-basics/">
<link rel="alternate" hreflang="en"
href="https://example.com/en/articles/html-basics/">
<link rel="alternate" hreflang="zh-TW"
href="https://example.com/zh-tw/articles/html-basics/">
<!-- デフォルトURL（言語が特定できない場合） -->
<link rel="alternate" hreflang="x-default"
href="https://example.com/articles/html-basics/">
<title>HTML基礎 | やさしいプログラミング</title>
</head>
<body>
<h1>HTML基礎</h1>
</body>
</html>
実行結果
ブラウザ上での表示は変わりませんが、Googleクローラーがページを訪問した際にcanonicalとhreflangの情報を取得し、検索インデックスに反映します。
<!-- Googleが認識する情報のイメージ --> このページのURLはいくつかあるが、 正規URL → https://example.com/articles/html-basics/ 日本語ユーザー → /ja/articles/html-basics/ を表示 英語ユーザー → /en/articles/html-basics/ を表示 台湾ユーザー → /zh-tw/articles/html-basics/ を表示 それ以外 → /articles/html-basics/ を表示（x-default）
概要
『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』を参照）。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする