hreflang属性とは？多言語サイトのSEOに必須！

日本語サイトだけでなく、他の言語を使用してコンテンツを提供している場合、Googleにそのページの存在と言語を知らせる必要があります。そこで使用するのが、linkタグの要素の1つであるhreflangです。

多言語サイトを運営しているにも関わらずhreflangを記載しなかった場合、Googleは他の言語ページがあることを見落とす可能性があります。Googleが他の言語ページを検出できなかった場合、外国圏で検索したユーザーにも日本語のページが表示されてしまい、貴重なユーザーを逃してしまうことになります。

今回は、多言語サイトを運営している方向けに、hreflangの役割と使い方をご紹介します。

hreflangとは？

hreflangは、多言語サイトを運営している際、GoogleにそのページのURLと使用している言語を知らせるためのlinkタグの要素の1つです。

例えば、日本だけでなくヨーロッパ向けの事業を行っている場合、コンテンツは同じでも、日本語のサイトと英語やフランス語のサイトを持つことがあるかもしれません。
その際にhreflangを使えば、日本語以外の言語に対応したページがあることをGoogleに知らせることができ、ユーザーが住む地域の言語に合ったページを検索結果に表示してくれます。

hreflangを記載しなかった時のSEO影響

多言語サイトを運営しているにも関わらずhreflangを記載しなかった場合、Googleは他の言語ページがあることを見落とす可能性があります。

Googleが他の言語ページを検出できなかった場合、例えばフランスで検索したユーザーに対しても日本語のページが表示されてしまいます。日本語が読めないユーザーは、サイトを離脱してしまうでしょう。フランス語のページがあるにも関わらず、貴重なユーザーを逃してしまうことになります。

このような機会損失を確実に防ぐためにも、hreflangは記載しましょう。

hreflangの記載方法

言語ごとに異なるURLを使用してページ作成をしている場合、hreflang アノテーションを使用してhreflangの記載をします。

基本的な構文

hreflang アノテーションは下記のように記載します。

<link rel=”alternate” hreflang=”言語コード” href=”ページのURL”>
※XHTML1を使用している場合は閉じタグ(半角のスペースと/)が必要です。

上記を各ページのhead内に記載し、GoogleにどのURLがどの言語を使っているのか知らせます。

言語の指定には、言語コードと呼ばれる特定の形式を使います。

例えば、日本語のページと英語のページがある場合は下記のような記載になります。

【例】
<link rel=”alternate” hreflang=”ja” href=”https://sample.com/”>
<link rel=”alternate” hreflang=”en” href=” https://sample.com/en/”>

hreflangの後にある「ja」と「en」が、言語コードと呼ばれるものです。「ja」は日本語、「en」は英語を意味しています。

また、場合によって国コードと呼ばれる形式を使って、地域を追加することも可能です。英語といってもアメリカ向けのコンテンツとイギリス向けのコンテンツでは違いがある、といった場合に使用します。

【例】
<link rel=”alternate” hreflang=”en-US” href=” https://sample.com/en/”>
<link rel=”alternate” hreflang=”en-GB” href=” https://sample.com/en2/”>

言語コードの後ろにハイフンでつながれている「US」と「GB」が国コードです。「US」はアメリカ、「GB」はイギリスを意味しています。

言語コードと国コード

hreflang アノテーションで、言語や地域を指定するために使用する言語コードと国コードは、言語や国・地域を特定の文字列で表し、世界共通の認識で使っていくために定められたコードです。

このコードはISOと呼ばれる国際機関が定めたもので、Googleは言語や地域の判定にISOのコードを使用しています。

各コードにも多様な場面で使い分けられるよう種類が設けられていますが、Googleが使用するのは下記のコードです。

言語コード

「ISO639-1形式」と呼ばれるコードで、言語を2文字のアルファベットを使って表します。

主な言語の例としては、下記のようになっています。

このように、言語ごとにアルファベット2文字が決められています。

ただし、1つの言語で複数の文体を持つ場合、例えば中国語の繁体と簡体のような場合は、アルファベット2文字だけでなく、上記のような特定の書き方をする場合もあります。

他の言語について、一覧は下記から確認が可能です。

■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

国コード

「ISO 3166-1 Alpha 2形式」と呼ばれるコードで、ラテン文字2文字を使って表します。

主な国の例としては、下記のようになっています。

上記のように、国や地域ごとに特定の2文字が決まっています。大文字や小文字の認識も区別されるため、記載する際は気を付けましょう。

国コードは単体で使用することはできないため、言語コードとセットで使います。

しかし、必ず使用する必要もないため、地域を特定しておきたい場合のみ使用しましょう。

他の地域について、一覧は下記から確認が可能です。

■ISO 3166-1国コード一覧
参照：https://ja.wikipedia.org/wiki/ISO_3166-1

hreflangの設定方法

hreflangの設定は上で述べたものも含めて3つの方法があります。

サイトの規模やページの仕様などにあわせて適切な記載方法を選ぶようにしましょう。

ここでは、日本語、英語、中国語(簡体)のサイトを運営している場合を想定した設定方法の例をご紹介します。

HTMLでの設定方法

基本的な構造でご紹介したhreflangアノテーションをHTMLのhead内に記載する方法です。

hreflangアノテーションはページ単位で指定する必要があるため、対応するすべてのページに記載します。

また、hreflangはそのページ自身も含めて記載しなければなりません。よくあるミスなので、自ページ含めたすべての言語のhreflangを記載するようにしましょう。

【記載例】
<link rel=”alternate” hreflang=”ja” href=”https://sample.com/”>
<link rel=”alternate” hreflang=”en” href=” https://sample.com/en/”>
<link rel=”alternate” hreflang=”zh-Hans” href=”https://sample.com/ch/”>

HTTPヘッダーでの設定方法

HTMLのheadに書き込みができないような場合、HTTPヘッダーのレスポンスで知らせる方法もあります。

PDFのようにHTMLではないファイルで設定するのに便利な方法です。

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

ページのURLは<>で囲む必要があります。また、複数のページに記載をする際は半角のカンマで区切りを付けて記載を行います。

言語コードなどは基本的な構文と同様のものを使用します。

【記載例】
Link: < https://sample.com/file.pdf>; rel=”alternate”; hreflang=”jp”,
      　<https://sample.com/en/ file.pdf >; rel=”alternate”; hreflang=”en”,
      　<https://sample.com/cn/ file.pdf >; rel=”alternate”; hreflang=”zh-Hans”

sitemap.xmlでの記載方法

サイトマップファイルを使用して、多言語ページの存在を知らせる方法もあります。

サイトマップファイル作成のルールに従い、ページのURLを<loc>内に記載します。続けて、<url>要素の中に<xhtml:link>を使って、対応している他言語ページのURLとその言語を追記します。

サイトマップの詳しい書き方は下記を参照してみてください。

■ サイトマップについて
参考：https://support.google.com/webmasters/answer/156184

【サイトマップでの多言語対応の書き方】
<?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>内に記載する必要があります。また、<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>

サイトマップファイルを作成したら、必ずSearch Consoleでサイトマップの送信を行いましょう。

また、robots.txtにもサイトマップファイルの場所を記載する必要があります。

こちらの送信と記載を行うことで、Googleにより早く正しい情報を知ってもらうことができます。

hreflang記載時の注意点

hreflangの記載にはさまざまなルールがあります。

間違えて記載をしてしまうとGoogleは正しく認識をしてくれません。記載を行う際には下記の点に注意してください。

対になるページを個々に設定

hreflangアノテーションはドメイン単位ではなく、ページ単位で指定をします。

そのため、サイトのトップページだけでなく下層ページも、全て対応するページのURLで記載をする必要があります。

【トップページの記載例】
<link rel=”alternate” hreflang=”ja” href=”https://sample.com/”>
<link rel=”alternate” hreflang=”en” href=” https://sample.com/en/”>
<link rel=”alternate” hreflang=”zh-Hans” href=”https://sample.com/ch/”>

【下層ページの記載例】
<link rel=”alternate” hreflang=”ja” href=”https://sample.com/paeg/”>
<link rel=”alternate” hreflang=”en” href=” https://sample.com/en/page/”>
<link rel=”alternate” hreflang=”zh-Hans” href=”https://sample.com/ch/page/”>

このように、ページごとに正しい組み合わせのURLになるよう気を付けましょう。

特定の言語や地域に属さないページはx-defaultを記載

ユーザーのブラウザ設定が、必ずしも指定した言語や地域に一致しない場合もあります。

その場合は、hreflangにx-defaultを記載することで誘導したいページを指定しておくことができます。

この時に指定するURLは、ユーザーが言語を選択できるようなページや、サイトのトップなどがおすすめです。

【記載例】
<link rel=”alternate” hreflang=”x-default” href=”https://sample.com/ “>

他の言語だけでなく、自ページの言語も設定が必要

hreflangを記載する際に間違えやすいのが、自ページの言語の設定です。

全てのページに全ての言語のhreflangアノテーションを記載する必要があるため、自ページ分の記載も行う必要があります。

【正しい例】
日本語のページに「日本語」「英語」「中国語(簡体)」のhreflangアノテーションを記載

【間違っている例】
日本語のページに「英語」「中国語(簡体)」のhreflangアノテーションを記載

sitemap.xmlでの設定時はUTF-8で記載し、特殊文字をエスケープする

XML形式でサイトマップファイルを作成する場合は、必ずエンコードUTF-8で作成する必要があります。

この場合、特殊文字(＆や>など)は正常に読み取ることができなくなるため、エスケープコードを使用して記載しましょう。

【エスケープが必要な例】
https://sample.com/page.php&q=hoge

【エスケープ後の記載例】
https://sample.com/page.php&q=hoge

hreflangアノテーションの記載だけに限らず、サイトマップファイルを作る場合はGoogleが指定する方法に沿って作成をすることをおすすめします。

Googleのサイトマップに関するガイドラインは下記から確認ができます。

■サイトマップについて
参考：https://support.google.com/webmasters/answer/156184

一方向だけの指定をしない

hreflangアノテーションを記載したページは、互いに参照しあっている必要があります。

日本語ページと英語ページがあるのであれば、それぞれにhreflangアノテーションが記載されているはずです。

しかし、日本語ページには英語ページのhreflangアノテーションが記載されており、英語ページには何も記載されていない、という場合は正しく記載ができていない状態です。

このように、一方向だけに記載してしまうと、Googleはその記載を無視してしまいます。

必ず多言語同士が参照しあうように記載しましょう。

hreflang記載後の確認方法

hreflangの記載を行った後は、正しく設定ができているか確認をしましょう。

Googleが提供しているGoogle Search Console内には、インターナショナル ターゲティング レポートというレポートがあります。

旧Search Consoleのレポートではありますが、使用状況やエラーの確認をすることができるため、記載をしたあとは確認をするとよいでしょう。

現在のSearch Consoleでは、「以前のツールとレポート」から行くことができます。

• インターナショナルターゲティング
  https://www.google.com/webmasters/tools/i18n

その他にも、正しくhreflangアノテーションが記載できているか確認できるツールがあります。
Googleが管理をしているわけではありませんが、よく使われるツールとして下記が上げられます。

• The hreflang Tags Generator Tool
  https://www.aleydasolis.com/english/international-seo-tools/hreflang-tags-generator/
  
• hreflang Tags Testing Tool
  https://technicalseo.com/tools/hreflang/
  
• hreflang.ninja
  http://hreflang.ninja/

どのツールも英語のツールとなっていますが、インターナショナルターゲティング以外での確認の際は参考にしてみてください。

まとめ

多言語サイトを運営しているサイトにhreflangは必須ともいえます。

hreflangアノテーションを使いGoogleに多言語サイトを知らせておくことで、適切なユーザーに適切な言語のページを届けることが可能です。

国際的にサイト展開を行っている方は、hreflangの記載を行うようにしましょう。

また、すでに記載している方も、間違いやエラーはないか確かめてみてはいかがでしょうか。

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。 エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。