[a-blog cms/多言語サイト] ローカライズされたページをGoogleへ伝える方法
この記事の概要
複数の言語や、同一言語でも地域別に内容が異なるページを持つサイトの場合、そのことを HTMLリンクタグ を使ってGoogleに伝える事ができます。
この記事では、その手順を紹介します。
また、記事の最後にa-blog cmsでの実装例も紹介します。
Googleにローカライズされたページを伝えるメリット
Googleが、検索者の属性に応じて適切なページを表示できるようになるため、ユーザーの利便性が高まります。また、検索の機会損失防止にもつながるのではと思われます。
ページに言語や地域ごとの複数のバージョンがある場合、こうした別バージョンについて Google にお知らせください。それにより、Google 検索はユーザーの言語や地域に応じた最適なページのバージョンを表示できるようになります。
こうした情報がなくても、ページの別言語のバージョンを Google が検出することはありますが、言語や地域ごとのページを明示してあるほうが正確です。出典 : ページのローカライズ版 | Google 検索セントラル | ドキュメント | Google for Developers
3つの方法
これに対応する方法は3つあります。
- HTML
- HTTP ヘッダー
- サイトマップ
この記事では、HTMLによる方法を紹介します。
なお、Googleはhtmlタグのlang属性の値でサイトの言語を判断はしていませんので注意が必要です。
Google では、ページの表示内容からその言語を判断します。lang 属性のようなコードレベルの言語情報や、URL は使用しません。Google が言語を正しく判断できるように、各ページのコンテンツとナビゲーションには 1 つの言語を使用し、原文と訳文を一緒に表示することは避けてください。
出典 : 多地域、多言語サイトの管理 | Google 検索セントラル | ドキュメント | Google for Developers
HTMLのリンクタグを使う方法
この方法では、 link タグを利用します。
構文は以下の通りです。
<link rel="alternate" hreflang="lang_code" href="url_of_page" />
lang_code には言語コードと国コード、もしくは言語コードのみを使用し、 href には、そのページのURLを設定します。
例えば4地域分のページがある場合は、以下のように記述します。
<head>
<title>Widgets, Inc</title>
<link rel="alternate" hreflang="en-gb" href="https://en-gb.example.com/page.html" />
<link rel="alternate" hreflang="en-us" href="https://en-us.example.com/page.html" />
<link rel="alternate" hreflang="en" href="https://en.example.com/page.html" />
<link rel="alternate" hreflang="de" href="https://de.example.com/page.html" />
<link rel="alternate" hreflang="x-default" href="https://www.example.com/" />
</head>
上記の例は、言語としては英語とドイツ語の2言語ですが、同じ英語でも、英国とアメリカ合衆国とで別のページを持ち、さらに汎用的な英語ページを持つ場合の記述例です。
linkタグの最後に<link rel="alternate" hreflang="x-default" href="https://www.example.com/" />の記述がありますが、これは、どの国や言語にも当てはまらない場合に誘導する、デフォルトのページの指定です。
ユーザーが言語や地域を選べるページにするか、そのようなページが無い場合は、汎用的な言語のページを指定します。
なお、注意点として、今表示しているページに対するlinkタグも必要になります。
上記の例では、国や言語別にページが5つ用意されていますが、その5ページに対して、同じ記述をする必要があります。
これは、対象となるページが相互にリンクしている必要があるためです。
次に、日本語と英語の二言語サイトの例で考えみると、次のような記述が考えられます。
<link rel="alternate" hreflang="ja" href="https://example.com/page.html" />
<link rel="alternate" hreflang="en" href="https://example.com/en/page.html" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/page.html" />
特定の地域に特化した情報を届けたい訳ではなく、単純に日本語と英語で情報を届けたい場合は、hreflangは言語コードのみ記述します。
そして、日本語と英語のどちらにも該当しない方には、英語の方が世界的にみて利用者が多いだろうという事で、フォールバックとして英語のページを指定しています。
hreflang Tags Testing Toolの結果画面
デフォルトページの言語を何にすべきかは、目的に応じて検討する必要があります。
a-blog cmsでの実装例
a-blog cmsでは、現在のページのURLを グローバル変数 の %{CURRENT_URL} で取得できます。
これを 校正オプション で操作できれば、比較的簡単に実装できると思いますが、グローバル変数 には 校正オプション は利用できません。
そのため、タッチモジュール で今いる場所を取得し、それに応じて、グローバル変数 等を組み合わせてれタグを作成します。
次の記述は、エイリアス機能を使って日本語と英語の二言語サイトを構築した場合の例です。
ポイントは、カテゴリーページの場合は、Touch_IndexでTouch_Categoryを囲ってあげることです。
なお、子ブログがある場合は Touch_RootBlog や Touch_NotRootBlog を使うと対応できます。
<!-- BEGIN_IF [%{ALIAS_ID}/eq/1] -->
<!--
[英語] トップページの場合
-->
<!-- BEGIN_MODULE Touch_Top -->
<link rel="alternate" href="%{HTTP_ROOT}" hreflang="ja" />
<link rel="alternate" href="%{CURRENT_URL}" hreflang="en" />
<link rel="alternate" href="%{CURRENT_URL}" hreflang="x-default" />
<!-- END_MODULE Touch_Top -->
<!--
[英語] カテゴリーページの場合
-->
<!-- BEGIN_MODULE Touch_Index -->
<!-- BEGIN_MODULE Touch_Category -->
<link rel="alternate" href="%{HTTP_ROOT}%{CCD}/" hreflang="ja" />
<link rel="alternate" href="%{CURRENT_URL}" hreflang="en" />
<link rel="alternate" href="%{CURRENT_URL}" hreflang="x-default" />
<!-- END_MODULE Touch_Category -->
<!-- END_MODULE Touch_Index -->
<!--
[英語] エントリーの場合
-->
<!-- BEGIN_MODULE Touch_Entry -->
<link rel="alternate" href="%{HTTP_ROOT}%{CCD}/%{ECD}" hreflang="ja" />
<link rel="alternate" href="%{CURRENT_URL}" hreflang="en" />
<link rel="alternate" href="%{CURRENT_URL}" hreflang="x-default" />
<!-- END_MODULE Touch_Entry -->
<!-- ELSE -->
<!--
[日本語] トップページの場合
-->
<!-- BEGIN_MODULE Touch_Top -->
<link rel="alternate" href="%{CURRENT_URL}" hreflang="ja" />
<link rel="alternate" href="%{HTTP_ROOT}en/" hreflang="en" />
<link rel="alternate" href="%{HTTP_ROOT}en/" hreflang="x-default" />
<!-- END_MODULE Touch_Top -->
<!--
[日本語] カテゴリーページの場合
-->
<!-- BEGIN_MODULE Touch_Index -->
<!-- BEGIN_MODULE Touch_Category -->
<link rel="alternate" href="%{CURRENT_URL}" hreflang="ja" />
<link rel="alternate" href="%{HTTP_ROOT}en/%{CCD}/" hreflang="en" />
<link rel="alternate" href="%{HTTP_ROOT}en/%{CCD}/" hreflang="x-default" />
<!-- END_MODULE Touch_Category -->
<!-- END_MODULE Touch_Index -->
<!--
[日本語] エントリーの場合
-->
<!-- BEGIN_MODULE Touch_Entry -->
<link rel="alternate" href="%{CURRENT_URL}" hreflang="ja" />
<link rel="alternate" href="%{HTTP_ROOT}en/%{CCD}/%{ECD}" hreflang="en" />
<link rel="alternate" href="%{HTTP_ROOT}en/%{CCD}/%{ECD}" hreflang="x-default" />
<!-- END_MODULE Touch_Entry -->
<!-- END_IF -->
Googleヘルプページとチェックツール
- ページのローカライズ版 | Google 検索セントラル | ドキュメント | Google for Developers
- Hreflang Tags Generator Tool by @aleyda
- hreflang Tags Testing Tool | TechnicalSEO.com
