hreflangで多言語サイトを知らせるための設定方法と注意点とは

外国人に向けて多言語サイトの開設や運用を検討されている方もいらっしゃると思います。その際、日本語以外の言語を利用してコンテンツを提供するには、Googleにそのページの存在と言語を知らせる必要があります。そこで、Googleへの伝達手段として使用するのがhalflangというタグです。

halflangによって対象ページの存在と言語がGoogleに伝達されれば、ユーザーの使用言語に応じたページを検索結果に表示できます。今回は、hreflangで多言語サイトを知らせるための具体的な設定方法やタグ記述時の注意点について解説していきます。

hreflangとは

hreflangとは、言語や地域ごとに複数ページが存在している場合に、hreflangを設定すると、ユーザーの言語や地域に応じたページを表示することができるタグです。多地域、多言語サイトの管理で使用することが推奨です。

例えば、hreflangを使うことでユーザーの使用言語に応じて日本人には日本語サイトを、アメリカ人には英語サイトを表示できます。

なぜ多言語サイトにhreflang必要なのか

多言語サイトの運用にあたってhreflangはなぜ必要なのでしょうか。
「別に設定しなくても何も影響が出ないのでは？」と思っている方もいるはずです。なぜ、hreflangが必要となるのか、その理由をSEOの観点からご説明します。

hreflangが必要な理由

Googleの検索エンジンは、検索結果に表示させる際、コンテンツの内容からどの国に向けたものなのか、最適な言語を自動的に判断しています。そのため、言語情報を指定できるlang属性やURLに関する情報は、言語の判断に使用されていません。それなら、「hreflangで言語情報を指定する必要はないのでは？」と思う方もいるでしょう。

しかし、ある特定の地域に合わせてコンテンツページを作成しても、地域ターゲティングを行わない限り、その地域でのページランクを上昇させることはできません。ページランクを上げるには、hreflangを利用して検索エンジンからの特定地域での評価を高める必要があります。

そのため、hreflangはどの地域のどのような言語をターゲットとしたページなのかを明確にし、地域ターゲティングによるSEO攻略に非常に役立ちます。

hreflangを使った方がよいケース

多言語サイトを運用されている方は、hreflangの使用をおすすめします。多言語サイトの運用時にhreflangを使わず、Googleが他の言語ページを認識できなかった場合、アメリカで検索したユーザーに日本語ページが表示され続けてしまいます。

日本語を読むことができないユーザーであれば、すぐに離脱してしまうか翻訳に苦労するでしょう。せっかく英語のページがあっても、ユーザーにサイトを表示できなければ、サイト離脱という機会損失につながります。
ユーザーの言語に最適化したページを表示して、海外ユーザーの離脱を防ぐためにも、hreflangをしっかりと設定しておきましょう。

hreflangの設定方法

hreflangは、主に3つの方法で設定できます。さまざまな設定方法がありますので、状況に応じて最適なものを選びましょう。まずは、HTMLタグでの設定方法をご紹介します。

HTMLタグで設定する

hreflangの基本構文をHTMLタグのhead内に記述していきます。hreflangの基本構文は、その対象ページも含めてページ単位で指定します。HTMLタグでの設定方法は、下記のとおりです。

【参考例】トップページが「https://sample.com/」で、他言語のページがドメイン配下に「/ch/」「/en/」にある場合

<link rel="alternate" hreflang="ja" href="https://sample.com/">
<link rel="alternate" hreflang="zh-Hans" href="https://sample.com/ch/">
<link rel="alternate" hreflang="en" href="https://sample.com/en/">

多言語ページがトップページ以外にもある場合、多言語ページが損じするページが変わる毎にHTMLタグを設定する必要があります。

HTTPヘッダーのレスポンスで設定する方法

HTTPヘッダーのレスポンスで、該当ページの言語や地域バージョンを伝えることもできます。この方法はPDFファイルのように、HTMLではないファイルで設定したい時に便利な方法です。

【記述方法】

Link: <ページのURL >; rel=”alternate”; hreflang=”言語コード”,
　　　<ページのURL >; rel=”alternate”; hreflang=”言語コード”

記述のポイントは、ページのURLを<>で囲むことです。また、複数ページに記載する場合は、半角のカンマで区切ります。hreflangの基本構文を応用すれば、簡単に記述できます。

【参考例】

Link: < https://sample.com/file.pdf>; rel=”alternate”; hreflang=”jp”,
　<https://sample.com/zh/ file.pdf >; rel=”alternate”; hreflang=”zh”,
　<https://sample.com/en/ file.pdf >; rel=”alternate”; hreflang=”en”


サイトマップ（sitemap.xml）に設定する

サイトマップ（Sitemap.xml）を使用して、各URLの言語や地域ページのバージョンを知らせることができます。代表URLと代替URL（各言語、地域）をsitemap.xmlに指定します。

【記述方法】

<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″
xmlns:xhtml=”http://www.w3.org/1999/xhtml”>
<url>
　<loc>ページのURL </loc>
　　<xhtml:link
　　　　rel=”alternate”
　　　　hreflang=”言語コード”
　　　　href=”ページのURL”/>
　<xhtml:link
　　　　rel=”alternate”
　　　　hreflang=”言語コード”
　　　　href=”ページのURL”/>
</url>
</urlset>


記述のポイントは、ページのURLを<loc>内に記述することです。そして、<url>要素内に、<xhtml:link>を利用して対応している多言語のページURLとその言語を記述します。<xhtml:link>には、そのページ自体の情報も含める必要があります。少し複雑になりますが、内容を確認しながら順番に記述していきましょう。

【参考例】

<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″
xmlns:xhtml=”http://www.w3.org/1999/xhtml”>
<url>
　<loc>https://sample.com/</loc>
　<xhtml:link
　　　　rel=”alternate”
　　　　hreflang=”jp”
　　　　href=”https://sample.com/”/>
　<xhtml:link
　　　 rel=”alternate”
　　　　hreflang=”en”
　　　 href=”https://sample.com/en/”/>
　<xhtml:link
　　　　rel=”alternate”
　　　　hreflang=”zh-Hans”
　　　　href=” https://sample.com/ch/”/>
</url>
<url>
　<loc> https://sample.com/en/</loc>
　<xhtml:link
　　　　rel=”alternate”
　　　　hreflang=”jp”
　　　　href=”https://sample.com/”/>
　<xhtml:link
　　　　rel=”alternate”
　　　　hreflang=”en”
　　　　href=”https://sample.com/en/”/>
　<xhtml:link
　　　　rel=”alternate”
　　　　hreflang=”zh-Hans”
　　　　href=” https://sample.com/ch/”/>
</url>
<url>
　<loc> https://sample.com/ch/</loc>
　<xhtml:link
　　　　rel=”alternate”
　　　　hreflang=”jp”
　　　　href=”https://sample.com/”/>
　<xhtml:link
　　　　rel=”alternate”
　　　　hreflang=”en”
　　　　href=”https://sample.com/en/”/>
　<xhtml:link
　　　　rel=”alternate”
　　　　hreflang=”zh-Hans”
　　　　href=” https://sample.com/ch/”/>
</url>
</urlset>


サイトマップへhreflangの記述が完了したら、必ずサーチコンソールでサイトマップの送信を行いましょう。そして、robots.txtにも同様にサイトマップファイルの場所を記載します。これらの一連の作業を行えば、Googleに対して正確な情報を伝達できます。

xmlサイトマップの詳細な記述方法は下記を参考にして下さい。
⇒XMLサイトマップとは？正しい記述方法を徹底解説
⇒XMLサイトマップとロボッツテキストの記述方法

hreflangで設定できる主な言語コード

hreflangに指定する値は、言語コードを使って指定します。Hreflangに指定する言語コードは、「ISO639-1形式」で、世界共通の認識でコードを利用していきます。さまざまな種類がありますが、主な言語コードは、下記のとおりです。

言語コード	言語名称
ja	日本語
en	英語
fr	フランス語
pt	ポルトガル語
ru	ロシア語
es	スペイン語
it	イタリア語
ko	韓国語
zh	中国語
zh-Hans	中国語(簡体)
ar	アラビア語
de	ドイツ語

言語コードは、主にアルファベット2文字で作られています。ただし、1つの言語で複数の文体を有する場合は、アルファベット2文字に文体を示す言語コードを記述します。上記以外の言語について知りたい方は、下記のISO639-1形式の言語コード一覧から対象の言語コードを参照しましょう。

【公式】ISO639-1形式の言語コード一覧

https://ja.wikipedia.org/wiki/ISO_639-1%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7

必要あれば地域コードを指定

hreflangでは、言語コードにハイフンを付属させることで地域コードを指定できます。たとえば、ある場所ではアメリカ英語、別の場所ではイギリス英語を使った方が伝わりやすい場合に、地域コードを利用します。

地域コード	国
EU	EU
JP	日本
BR	ブラジル
GB	イギリス
FR	フランス
IT	イタリア
TW	台湾
KR	韓国
CN	中国
DE	ドイツ
ES	スペイン
CH	スイス
HK	香港
SG	シンガポール
RU	ロシア連邦
AU	オーストラリア
AE	アラブ首長国連邦
US	アメリカ合衆国
CA	カナダ
MX	メキシコ

地域コードは、国や地域ごとにアルファベット2文字が決まっています。記述の際は、大文字と小文字が区別されるため、小文字で記述しないように注意しましょう。

【参考例】

<link rel=”alternate” hreflang=”en-US” href=”https://examp.com/”>
<link rel=”alternate” hreflang=”en-GB” href=”https://examp.com/”>

上記以外の地域コードについては、下記のISO 3166-1形式の地域コード一覧から対象の地域コードを参照しましょう。

【公式】ISO 3166-1地域コード一覧

https://ja.wikipedia.org/wiki/ISO_3166-1

hreflangの注意点

hreflangには、守るべき記述のルールがあります。ルールを破ってしまうとGoogleは言語情報を認識しなくなります。そのため、hreflangの記述の注意点を知っておきましょう。

言語コードを間違えない

hreflangは、言語コードを間違えると意図通りに表示することができないので、正しく検索エンジンに伝える機能が果たせません。
言語コードは、ISO 639-1形式で記述し、地域コードはISO 3166-1形式で記述します。臆測で記述するとミスをしてしまうため、対応表を見比べながら慎重に作業を進めましょう。

同じ言語でも地域が異なる場合

hreflangは、地域コードによってその場所に応じた言語を選択できます。同じ言語でも地域が異なる場合は、その場所に対応する地域コードを利用しましょう。
例えば、同じ英語でもアメリカ英語（en-US）とイギリス英語（en-GB）では、地域コードの書き方が異なります。

地域で表示したいページを切り分ける場合、地域コードを確認の上、hreflangを設定しましょう。

各言語ページ同士の双方向リンク

hreflangを記述したWebページは、ページ同士が双方向で参照（リンク）し合っている必要があります。つまり、日本語と英語のページがある場合は、それぞれのページにhreflangを記述する必要があります。
例えば、英語ページにはhreflangが記述されているが、日本語ページにはhreflangが何も記述されていないという間違いが散見されます。
上記の例で言えば、英語ページと日本語ページそれぞれおにhreflangを設定するようにしましょう。

hreflangの確認方法

hreflangの記載が完了したらサーチコンソールで正しく設定できているか確認してみましょう。サーチコンソール内のインターナショナル ターゲティング レポートを閲覧すれば、hreflangの使用状況やエラーの状態を確認できます。インターナショナル ターゲティング レポートの閲覧手順は、下記のとおりです。

【インターナショナル ターゲティング レポート閲覧手順】

• ステップ1：Googleサーチコンソールにログインする
• ステップ2：対象サイトをクリックする
• ステップ3：管理画面の検索トラフィックをクリックする
• ステップ4：インターナショナル ターゲティングをクリックする

インターナショナル ターゲティング レポートには、“言語”と“国”という2つの表示形式があります。言語タブでは、Webサイトの上でhreflangが正しく機能しているかをチェックできます。国タブでは、ターゲットとなる国を選べます。

インターナショナルターゲティングのエラー表示

hreflangの記載方法に問題がある場合、サーチコンソールのメッセージにて、その原因が通知されます。一般的に、下記のようなエラー表示があるため、何が原因となっているのか把握しておきましょう。

リターンリンクなし

リターンリンクなしとは、「対象ページに該当するページは、（URL）ですよ」というhreglangの記載がないことを知らせるエラーです。そのため、ページごとに適切なURLをhreglangの基本構文で正しく指定しましょう。

リターンリンクなしによるエラー表示は、hreglangの基本構文の書き間違いが原因となっている可能性が高いです。

不明な言語コード

不明な言語コードとは、Webサイトで指定された言語コードに誤りがあることを知らせるエラー表示です。こちらもリターンリンクなしのときと同様に、hreglangの基本構文に誤りがある可能性が高いため、言語コードの記述にミスがないか見直してみましょう。

サイトにhreflangタグがありません

こちらは、hreflangの記述がないことを知らせるエラーです。hreglangの基本構文を正しく記載すれば、エラーを消すことができます。

おわりに

多言語サイトを運用している方は、hreflangの設定がおすすめです。逆に、多言語サイトを運用していなければ、hreflangを設定する必要はありません。最近は、訪日外国人の増加により、海外ユーザーによるWebサイトの訪問が増えています。

hreflangを設定していれば、Googleに多言語サイトの運用を事前に申告できるため、海外に向けてサービス展開を行っている事業者様は、hreflangをWebサイトに記載すると良いでしょう。