こんにちはリードファクトリーの遠藤です。
多言語サイトのSEO対策では、各地域や国に合わせたページが正しく検索結果に表示されることが大切であり、hreflangタグは記述したページの言語を設定するタグで必ず設定する必要があります。
この記事では、多言語サイトに必要なグやhreflang属性、canonicalタグの書き方について詳しく説明します。
hreflangとは？
hreflangとは、ウェブページの言語や地域を指定するためのHTML属性です。hreflangを使うことで、同じコンテンツを異なる言語や地域で提供している場合に、検索エンジンに正しいページを表示させることができます。
例えば、日本語と英語の2言語で同じ商品を紹介しているウェブサイトがあるとします。この場合、hreflangを使って、日本語のページにはja-JP、英語のページにはen-USという値を設定することで、検索エンジンはユーザーの言語や地域に応じて適切なページを表示することができます。
hreflang属性が多言語SEOに必要な理由
多言語SEOでは、hreflang属性が重要な役割を果たします。なぜなら、hreflangがない場合、検索エンジンは同じコンテンツを重複して扱ってしまう可能性があるからです。
例えば、日本語と英語の2言語で同じ商品を紹介しているサイトがあるとします。この場合、hreflangがないと、検索エンジンは日本語のページと英語のページを別々のページとして扱ってしまう可能性があります。そうなると、検索結果において不適切なページが表示されたり、検索順位が低下したりする原因になってしまいます。
上記の場合に、hreflangタグを上手く使うことで、検索エンジンは日本語のページと英語のページが同じコンテンツであることを理解し、ユーザーに最適なページを表示することができます。
hreflang=”x-default”の役割
hreflang=”x-default”とは、特定の言語や地域に対応していないデフォルトのページを指定するための値です。
例えば、日本語と英語の2言語で同じ商品を紹介しているウェブサイトがあるとします。この場合、日本語や英語以外の言語や地域からアクセスしたユーザーに対してどのページを表示するかを決める必要があります。このような場合に、hreflang=”x-default”を使ってデフォルトのページを設定することができます。
また、例えば、英語のページをデフォルトにしたい場合は、英語のページにhreflang=”x-default”を設定することで、日本語や英語以外の言語や地域からアクセスしたユーザーに英語のページを表示させることができます。
hreflangの書き方
hreflang属性は<link>タグや<a>タグに設定することができます。<link>タグは<head>タグの中に、<a>タグは<body>タグの中に記述します。hreflang属性の書き方は以下のようになります。
<link rel="alternate" href="https://example.com/ja/" hreflang="ja-JP" />
<link rel="alternate" href="https://example.com/en/" hreflang="en-US" />
<link rel="alternate" href="https://example.com/en/" hreflang="x-default" />トップページの記述方法
トップページでは、ウェブサイト全体の言語や地域を指定することができます。例えば、日本語と英語の2言語で同じ商品を紹介しているウェブサイトがあるとします。この場合、トップページでは以下のように記述することができます。
<link rel="alternate" href="https://example.com/ja/" hreflang="ja-JP" />
<link rel="alternate" href="https://example.com/en/" hreflang="en-US" />
<link rel="alternate" href="https://example.com/en/" hreflang="x-default" />これは、トップページが日本語と英語の2言語で提供されていることを検索エンジンに伝えることができます。また、hreflang=”x-default”を使って、日本語や英語以外の言語や地域からアクセスしたユーザーに英語のトップページを表示させることができます。
下層ページの記述方法
下層ページでは、各ページの言語や地域を指定することができます。例えば、日本語と英語の2言語で同じ商品を紹介しているウェブサイトがあるとします。この場合、下層ページでは以下のように記述することができます。
<link rel="alternate" href="https://example.com/ja/product1/" hreflang="ja-JP" />
<link rel="alternate" href="https://example.com/en/product1/" hreflang="en-US" />下層ページが日本語と英語の2言語で提供されていることを検索エンジンに伝えることができます。
また、下層ページではhreflang=”x-default”を使わないことが推奨されます。なぜなら、下層ページはトップページからリンクされているため、ユーザーは自分の好みの言語や地域に応じて選択することができるからです。
言語コードとは
言語コードとは、世界中のさまざまな言語を表すための短い文字列です。例えば、日本語は「ja」、英語は「en」、フランス語は「fr」というように、各言語に対応する2文字のコードがあります。これらのコードは、ISO 639-1という国際標準規格で定められています。
言語コード一覧
ISO 639-1では、約180種類の言語に対して言語コードが割り当てられています。しかし、実際にはもっと多くの言語が存在します。そこで、ISO 639-1ではカバーできない言語に対しては、ISO 639-2やISO 639-3という別の規格で3文字のコードが付与されています。例えば、ハワイ語は「haw」、チベット語は「bod」というように、ISO 639-1では表現できない言語も3文字のコードで表せます。
言語コードの一覧は、以下のサイトで確認できます。
- [ISO 639-1 コード表](https://www.loc.gov/standards/iso639-2/php/code_list.php)
- [ISO 639-2 コード表](https://www.loc.gov/standards/iso639-2/php/code_list.php)
- [ISO 639-3 コード表](https://iso639-3.sil.org/code_tables/639/data)
地域コードの指定について
言語コードだけでは、同じ言語でも地域や方言によって異なる表現や文化を反映できません。そこで、言語コードに続けて地域コードを付けることで、より細かく言語を区別することができます。地域コードとは、国や地域を表すための2文字または3文字のコードです。これらのコードは、ISO 3166-1という国際標準規格で定められています。
例えば、「en-US」というコードは、アメリカ合衆国で話される英語を表します。「en-GB」というコードは、イギリスで話される英語を表します。「zh-CN」というコードは、中国で話される中国語（簡体字）を表します。「zh-TW」というコードは、台湾で話される中国語（繁体字）を表します。
地域コードの一覧は、以下のサイトで確認できます。
- [ISO 3166-1 コード表](https://www.iso.org/iso-3166-country-codes.html)
hreflang属性のよくある間違い
hreflangタグを正しく設定することで、検索エンジンがユーザーの言語や地域に応じて最適なページを表示することができます。しかし、hreflang属性の設定には注意が必要です。
間違った設定をすると、逆に検索エンジンに混乱を招いたり、ページランクが下がったりする可能性があります。ここでは、hreflang属性の設定でよくある間違いを3つ紹介します。
href属性ページで相対URLを指定している
hreflang属性を設定する際には、linkタグのhref属性に各ページの絶対URLを指定する必要があります。相対URLを指定すると、検索エンジンが正しくリンク先を認識できなくなります。例えば、以下のようなlinkタグは間違っています。
<link rel="alternate" hreflang="en" href="/en/index.html">この場合、href属性に相対URLの/en/index.htmlを指定していますが、これでは検索エンジンはどのドメインのページを指しているかわかりません。正しくは以下のように絶対URLを指定する必要があります。
<link rel="alternate" hreflang="en" href="https://example.com/en/index.html">双方向にlinkタグを設置していない
hreflang属性を設定する際には、各ページから他の言語や地域のページへ双方向にlinkタグを設置する必要があります。つまり、日本語ページから英語ページへリンクするだけでなく、英語ページからも日本語ページへリンクする必要があります。これは、検索エンジンが各ページが互いに関連していることを確認するためです。例えば、以下のようなlinkタグは間違っています。
<link rel="alternate" hreflang="en" href="https://example.com/en/index.html">この場合、日本語ページから英語ページへリンクしていますが、英語ページから日本語ページへリンクしていません。正しくは以下のように双方向にlinkタグを設置する必要があります。
<link rel="alternate" hreflang="en" href="https://example.com/en/index.html">
<link rel="alternate" hreflang="ja" href="https://example.com/ja/index.html">下層ページで各地域TOPページを指定している
hreflang属性を設定する際には、同じ階層のページ同士でリンクする必要があります。つまり、下層ページから上層ページや別の階層のページへリンクすることは避ける必要があります。これは、検索エンジンが同じコンテンツであることを判断するためです。例えば、以下のようなlinkタグは間違っています。
<link rel="alternate" hreflang="en" href="https://example.com/en/index.html">この場合、日本語の下層ページから英語のTOPページへリンクしていますが、これでは検索エンジンは同じコンテンツであると認識できません。正しくは以下のように同じ階層のページ同士でリンクする必要があります。
<link rel="alternate" hreflang="en" href="https://example.com/en/subpage.html">
<link rel="alternate" hreflang="ja" href="https://example.com/ja/subpage.html">hreflangとcanonicalタグの違いについて
hreflangとcanonicalタグは異なる目的を持つタグであり、互いに補完的な役割を果たします。hreflang属性は、異なる言語や地域を対象とする同一コンテンツの異なるバージョンを示す際に使用します。一方、canonicalタグは重複コンテンツの問題を解決するために使用されます。
hreflang属性はユーザーに適切な言語のページを提供し、検索エンジンが正しいバージョンのページをインデックスするのを助けることができます。
一方、canonicalタグは、同じコンテンツが複数のURLで利用可能な場合に、どのURLが検索エンジンによって優先されるべきかを指定します。Canonicalタグは、重複コンテンツの問題を防ぐために使用されます。これにより、検索エンジンが重複したページを別々のページとして認識するのを防ぎ、ページのランキングに対するポジティブな影響をもたらします。
したがって、多言語サイトでは、hreflang属性とcanonicalタグの両方を適切に使用することが重要です。hreflang属性によって言語や地域を適切に指定し、ユーザーエクスペリエンスを向上させる一方で、canonicalタグによって重複コンテンツの問題を解決し、検索エンジンのランキングに悪影響を及ぼすのを防ぐことができます。
canonical（カノニカル）タグについて網羅的に解説した記事はいかになるので良ければご覧ください。
canonical(カノニカル)タグとは | 意味やURL正規化しないリスクも徹底解説！
実際のhreflangとcanonicalタグの書き方
以下の4つのサイトがあったとします。その際の実際のhreflangとcanonicalタグの書き方については以下の通りです。
日本向け http://example.com/jp
英語（イギリス向け） http://example.com/eu
英語（アメリカ向け） http://example.com/us
英語（インドネシア向け） http://example.com/asia
また、上記は言語が違うだけでコンテンツは同じもの（重複コンテンツ）であると仮定します。
1. 日本向けページ(http://example.com/jp)の場合：
ｈ
<link rel="alternate" href="http://example.com/jp" hreflang="ja-JP" />
<link rel="alternate" href="http://example.com/eu" hreflang="en-GB" />
<link rel="alternate" href="http://example.com/us" hreflang="en-US" />
<link rel="alternate" href="http://example.com/asia" hreflang="en-SG" />
<!-- canonicalタグの設定 -->
<link rel="canonical" href="http://example.com/jp" />2. 英語（イギリス向け）ページ(http://example.com/eu)の場合：
<!-- hreflang属性の設定 -->
<link rel="alternate" href="http://example.com/jp" hreflang="ja-JP" />
<link rel="alternate" href="http://example.com/eu" hreflang="en-GB" />
<link rel="alternate" href="http://example.com/us" hreflang="en-US" />
<link rel="alternate" href="http://example.com/asia" hreflang="en-SG" />
<!-- canonicalタグの設定 -->
<link rel="canonical" href="http://example.com/eu" />3. 英語（アメリカ向け）ページ(http://example.com/us)の場合：
<!-- hreflang属性の設定 -->
<link rel="alternate" href="http://example.com/jp" hreflang="ja-JP" />
<link rel="alternate" href="http://example.com/eu" hreflang="en-GB" />
<link rel="alternate" href="http://example.com/us" hreflang="en-US" />
<link rel="alternate" href="http://example.com/asia" hreflang="en-SG" />
<!-- canonicalタグの設定 -->
<link rel="canonical" href="http://example.com/us" />4. 英語（インドネシア向け）ページ(http://example.com/asia)の場合：
<!-- hreflang属性の設定 -->
<link rel="alternate" href="http://example.com/jp" hreflang="ja-JP" />
<link rel="alternate" href="http://example.com/eu" hreflang="en-GB" />
<link rel="alternate" href="http://example.com/us" hreflang="en-US" />
<link rel="alternate" href="http://example.com/asia" hreflang="en-SG" />
<!-- canonicalタグの設定 -->
<link rel="canonical" href="http://example.com/asia" />まとめ
今回はhreflangタグというSEOに重要な要素について説明しました。hreflangタグは、同じ内容のページが複数の言語で存在する場合に、検索エンジンに適切なページを表示させるために使われます。
また、hreflangタグの書き方や注意点、実装方法などを詳しく解説しました。hreflangタグを正しく設定することで、多言語サイトのSEOを効果的に行うことができますので必ず設定するようにしましょう。
リードファクトリーではデジタルマーケティングについての無料相談会も実施しておりますので、ぜひお気軽にご相談ください。
一橋大学商学部卒。ENEOS株式会社に新卒で入社。日本最大級の屋内型テーマパークの立ち上げ、ベンチャー企業でマーケティング責任者としてBtoBマーケティング、インサイドセールス等の立ち上げ。その後、プライム市場上場のグローバル医療メーカーにて、海外BtoBマーケティングに従事。その後、BtoBマーケティング・営業DX支援の株式会社LEAD FACTORY.を創業。