多言語サイトのcanonical・hreflang・x-default設定

日英の内容が対応しているページでは、canonicalとhreflangを混同しないことが重要です。canonicalは「このページの正規URL」を示し、hreflangは「同じ内容を別の言語で読めるURL」を示します。英語版を正規URLとして日本語のcanonicalに指定する、といった設定は二つの役割を混ぜてしまいます。

ここでは、日本語を既定URL、英語を/en/配下に置く静的サイトを例に、必要な出力と生成後の確認方法を整理します。

canonicalは各ページ自身を指す

日本語記事がhttps://app-hacks.net/blog/example/、英語記事がhttps://app-hacks.net/en/blog/example/にある場合、canonicalは次の対応になります。

<!-- 日本語ページ -->
<link rel="canonical" href="https://app-hacks.net/blog/example/">

<!-- 英語ページ -->
<link rel="canonical" href="https://app-hacks.net/en/blog/example/">

言語が違うページは、内容が対応していても別の利用者に向けた別URLです。canonicalを相手言語に向けるのではなく、それぞれが自分自身を指すようにします。httpとhttps、末尾スラッシュ、サブドメインの有無まで、サイトで採用したURL形式に統一してください。

対応する言語URLをhreflangで結ぶ

日英の両方が存在するページには、ja、en、x-defaultを同じ組として出力します。

<link rel="alternate" hreflang="ja" href="https://app-hacks.net/blog/example/">
<link rel="alternate" hreflang="en" href="https://app-hacks.net/en/blog/example/">
<link rel="alternate" hreflang="x-default" href="https://app-hacks.net/blog/example/">

x-defaultは、特定の言語・地域に一致しない利用者へ既定として示すURLです。この構成では日本語既定URLを指定していますが、ブラウザを強制的に日本語URLへ移動させる設定ではありません。言語切り替えの導線は別に用意し、利用者が選択できるようにします。

URLを組み立てる場所を一つにする

記事ページ、一覧ページ、固定ページでURLの組み立て方が異なると、片方だけに末尾スラッシュがなかったり、開発環境のURLが混ざったりします。canonicalとalternate URLを共通コンポーネントへ集め、ページからは現在のcanonical URL、言語、対応先パスだけを渡すようにすると、出力条件を一か所で確認できます。

<SEOHead
  canonical={canonicalUrl}
  lang="ja"
  alternatePath={`/en/blog/${post.id}/`}
/>

英語ページではlang="en"と日本語の対応先を渡します。対応する翻訳が存在しないページに、推測したURLを出力してはいけません。実在しないalternate URLは、利用者にもクローラーにも誤った対応関係を伝えます。

ビルド結果で相互関係を確認する

ソースを読んだだけでは、実際に生成されたURLの間違いを見逃します。npm run buildの後、日英の対応ページを一組選び、生成HTMLを両方確認します。

rg -n 'canonical|hreflang' \
  dist/blog/example/index.html \
  dist/en/blog/example/index.html

確認するポイントは次のとおりです。

• 各ページのcanonicalが自分のHTTPS URLを指す
• 日本語と英語のHTMLが同じ二つのalternate URLを持つ
• x-defaultの参照先がサイト方針と一致する
• localhost、プレビューURL、翻訳未作成のURLが混ざらない
• 記事IDと末尾スラッシュの形式が日英でそろう

canonicalとhreflangは一度設定して終わりではありません。新しい固定ページ、記事、言語を追加するたびに、対応先の有無と生成結果を確認します。自己canonicalと相互の言語対応を分けて考えることで、多言語URLの設定を一貫させられます。

関連記事

• Astroで構築するSEOメタタグとOGP画像
• Astro標準i18nで日本語URLを維持した多言語サイト構築