1. このページの目的
本ページを使って、hreflang の記述例を示す。
2. 今回の想定事項
- 本ページ自体が日本語用ページになっている。
- それ以外に、英語ページだけ用意している。
3. HTMLコード
(1) 本ページの head内にセットした hreflang関連のタグ
<link rel="canonical" href="https://misc.laboradian.com/html-test/13/">
<link rel="alternate" hreflang="x-default" href="https://misc.laboradian.com/html-test/13/">
<link rel="alternate" hreflang="ja" href="https://misc.laboradian.com/html-test/13/">
<link rel="alternate" hreflang="en" href="https://misc.laboradian.com/html-test/13/en.php">
(2) 英語ページの head内にセットした hreflang関連のタグ
<link rel="canonical" href="https://misc.laboradian.com/html-test/13/en.php">
<link rel="alternate" hreflang="x-default" href="https://misc.laboradian.com/html-test/13/">
<link rel="alternate" hreflang="ja" href="https://misc.laboradian.com/html-test/13/">
<link rel="alternate" hreflang="en" href="https://misc.laboradian.com/html-test/13/en.php">
ポイント
- canonical には、そのページのURLをセットする（言語毎に別のURLになる）。
- hreflang属性を指定した linkタグは、どちらのページにも同じ内容を記述する。
- hreflang="x-default" には、どの言語にも一致しなかった場合用のURLをセットする。今回の場合、デフォルトページとして想定している本ページのURLにした。
- hreflang="ja" には、日本語ページのURLをセットする。同様に、hreflang="en" には、英語ページのURLをセットする。
4. 実験
hreflang Tags Testing Tool | TechnicalSEO.com というツールで、本ページをテストする。