rel=”alternate” hreflang=”xx” の調査

[nagasheep]

こんにちは。
永原です。

多言語サイトの作成でrel=”alternate” hreflang=”xx” について、必要性や方法を調査してみます。

出力例①
<link rel="alternate" href="http://www.example.com/ja" hreflang="ja" />
<link rel="alternate" href="http://www.example.com/en" hreflang="en" />

出力例②
<link rel="alternate" href="http://www.example.com/" hreflang="ja" />
<link rel="alternate" href="http://www.example.com/en" hreflang="en" />

[nagasheep]

HTMLの仕様を調査

HTML 属性: rel
rel 属性は、リンク先のリソースと現在の文書との関係を定義します。link、a、area、formで有効で、対応する値は属性が見つかった要素に依存します。

rel の値
alternate 現在の文書の別な表現。
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Attributes/rel

hreflang は HTMLAnchorElement インターフェイスのプロパティで、リンクされたソースの言語の文字列です。
要素の hreflang 属性を反映し、hreflang 要素がない場合は空文字列 ("") となります。
https://developer.mozilla.org/ja/docs/Web/API/HTMLAnchorElement/hreflang

[nagasheep]

Googleの対応を確認

ページのローカライズ版について Google に知らせる
https://developers.google.com/search/docs/specialty/international/localized-versions?hl=ja

[nagasheep]

【サイトの一部が多言語対応している場合】

多言語設定
ja /movie
en /en
es /es

上記が各言語の同じページのURLを示すことを表す。
この配下のページは同じURLの場合、相互に多言語化で対応したページとみなす。
多言語化で対応したページは、対応している言語全ての rel=”alternate” hreflang=”xx” を出力する。

【サイトの全部が多言語対応している場合】

多言語設定
ja /
en /en
es /es

【処理】

[nagasheep]

プログラム案

middlewareでMultLanguageを作成
configはすでに取得済みなので、サイトが多言語設定する＆カレントページが多言語設定URLの配下の場合のみ以下の処理

多言語データ（config）とカレントページのURLを元にカレントページに対応する多言語ページのURL一覧を取得
取得したURL一覧をHTMLのヘッダーセクションでalternate属性で出力

[nagasheep]

現在（カレント）の言語コードは HTMLタグの lang="ja" で指定している。

• 「ja」は「js-JP」のようにロケールの指定でも問題はなさそう。
• デフォルトのロケールはconfigディレクトリのapp.phpで設定しているけれど、Appファサードが提供するsetLocale関数で変更可能。
• カレントのロケールを変更するのはmiddlewareが良いかな。
• 表示すべきロケールは多言語設定で登録したロケールを使用。