グローバルコマースを展開する事業主にとって、ECサイトを多言語対応するだけでなく、ユーザーに応じて最適なページが表示されるよう設定することは重要です。そこで活用されるのが、hreflangタグです。hreflangタグを適切に設定することで、検索エンジンが各ページの対象言語や地域を正しく認識し、ユーザーに適したページが表示されやすくなります。
この記事では、hreflangタグの概要やメリットを紹介します。設定時の注意点や実装後の確認方法を押さえ、越境ECに役立ててください。
hreflangタグとは
hreflangタグとは、多言語サイトを運用している場合に、使用言語とターゲットとなる国を示すためのコーディングの規則です。ウェブページに異なる言語や国向けの複数のバージョンが存在することをブラウザや検索エンジンに伝え、ユーザーに適したページを表示できるようにする役割を担っています。
hreflangタグを設定するメリット
- 検索結果を最適化できる：検索エンジンが各ページの対象言語や地域を正しく認識できるため、ユーザーの言語や地域に適したページが検索結果に表示されやすくなる
- 重複コンテンツ扱いを避けられる：hreflangタグを適切に設定すれば、言語違いの同じコンテンツも多言語展開として検索エンジンに認識され、重複コンテンツとしてペナルティを受けるリスクを低減できる
- 顧客体験を改善できる：ユーザーの言語や地域に合わせて最適化されたページが表示されるため、顧客が目的の情報にスムーズにたどりつくことができ、利便性や顧客満足度の向上につながる
hreflangタグの設定方法
hreflangタグの設定方法は主に以下の3つがあります。
HTMLタグで設定する
hreflangタグの設定によく使用されるのが、HTMLタグを使う方法です。HTMLとはウェブサイトを作成するときに使用される言語を指します。多言語化するページのHTMLファイルを開き、<head>タグ内に以下のようなhreflangタグを追加します。
<link rel="alternate" hreflang="ja-JP" href="/jp"/>
この構文は、次の3つの要素で構成されています。
- link rel="alternate"：同じ内容で言語・地域が異なるページがあることを検索エンジンに伝える
- hreflang="言語コード-国コード"：対象の言語と地域を指定する
- href=”URL”：対象ページのURLを指定する
上記の例では、日本語で書かれた日本向けのページであることを示しています。
また、以下の値を追加することで、どの言語や地域にも該当しないユーザー向けにデフォルトページを設定することもできます。
<link rel="alternate" hreflang="ja-JP" href="/jp">
<link rel="alternate" hreflang=”fr-FR" href="https://www.shopify.com/fr">
<link rel="alternate" hreflang="x-default" href="https://www.shopify.com/">
この場合、日本のユーザーには/jp、フランスのユーザーにはhttps://www.shopify.com/frを指定し、どの地域や言語にも該当しないユーザーにはhttps://www.shopify.com/がデフォルトで表示されるよう設定されています。
hreflangの設定で使用できる主な言語コードと国コードは以下の通りです。
言語コード
|
日本語 |
ja |
|
英語 |
en |
|
韓国語 |
ko |
|
中国語 |
zh |
|
中国語（繁体） |
zh-Hant |
|
中国語（簡体） |
zh-Hans |
|
ドイツ語 |
de |
|
フランス語 |
fr |
|
スペイン語 |
es |
|
イタリア語 |
it |
|
ポルトガル語 |
pt |
国コード
|
日本 |
JP |
|
アメリカ合衆国 |
US |
|
イギリス |
GB |
|
韓国 |
KR |
|
中国 |
CN |
|
ドイツ |
DE |
|
フランス |
FR |
|
スペイン |
ES |
|
イタリア |
IT |
|
ポルトガル |
PT |
HTTPヘッダーで設定する
PDFファイルのようなHTML以外のコンテンツを多言語展開する場合、HTTPヘッダーにhreflangタグを設定します。記述例は以下のとおりです。
Link: < https://example.com/file.pdf>; rel=”alternate”; hreflang=”jp”,
<https://example.com/file.pdf >; rel=”alternate”; hreflang=”zh”,
<https://example.com/file.pdf >; rel=”alternate”; hreflang=”en”,
<https://example.com/file.pdf >; rel=”alternate”; hreflang=”ko”
上記コードでは、日本語、英語、中国語、韓国語の4つの言語に対応しています。
記述の際は、URLを<>で囲みます。また複数の言語・地域向けのページを指定する場合、それぞれの記述を半角カンマで区切ります。
サイトマップで設定する
サイトマップ（sitemap.xml）を使えば、多言語対応ページを一度に検索エンジンに伝えることができます。サイトマップとは、検索エンジンにサイト内にあるURLを伝えるためのファイルのことです。サイトマップにhreflangタグを設定することで、言語や国の情報を検索エンジンに伝えることができます。
例えば、Shopifyがカナダ向け英語ページとカナダ向けフランス語ページ、オーストラリア向けページを検索エンジンに伝えるためには、以下の記述をサイトマップに追加します。
<url>
<loc>https://www.shopify.com/</loc>
<xhtml:link
rel="alternate"
hreflang="en-ca"
href="https://www.shopify.com/ca"/>
<xhtml:link
rel="alternate"
hreflang="fr-ca"
href="https://www.shopify.com/ca-fr"/>
<xhtml:link
rel="alternate"
hreflang="en-au"
href="https://www.shopify.com/au"/>
<lastmod>2023-09-23</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
記述する際は、<loc>で対象ページを指定し、<xhtml:link>で言語や地域ごとのページを設定します。
なお、 hreflangは言語コードのみでも設定できますが、国コードを指定する場合は、言語コードを先に記述し、その後に国コードを記述する必要があります。
hreflangタグを設定するときに気を付けるポイント
記述ミスに注意する
検索エンジンに正確にhreflangを伝えられるよう、コードやURLは正しい形式で記述しましょう。地域や言語の指定では、決められたコードを使用して「言語コード-国コード」の順で記述します。国コード単体で用いることはできない点も留意する必要があります。また、URLは「https://」から始まる絶対URLで記載します。相対URLで記述してしまうと、正しく機能しないため注意が必要です。
全てのページに全言語のhreflangを設定する
検索エンジンに自社サイトの情報を正しく伝えるために、全てのページに全言語のhreflangを追加しましょう。例えば、日本語、英語、中国語に対応するサイトを運営している場合、各ページに日本語、英語、中国語のhreflangを設定する必要があります。特に、日本語ページに日本語のhreflangを設定していないなど、元となる言語のhreflang設定を忘れてしまうケースが少なくないため注意が必要です。
必要に応じて更新する
新規ページを追加したりURL構造を変更したりした場合、hreflangも更新する必要があります。また、設定ミスやリンク切れがないかを定期的に確認し最新の状態に保つよう心がけましょう。CMS（コンテンツ管理システム）やECプラットフォームによっては自動更新されるケースもあるため、自動更新の有無を事前に確認しておくと安心です。
hreflangタグの確認方法
hreflangを実装したら、正しく設定されているかを確認することが重要です。手動での確認とツールでの確認の2つのパターンがあります。
手動での確認方法
- HTMLタグの確認方法：Google Chromeのデベロッパーツールなどを使ってソースコードを確認し、Elementsタブのhead要素内にhreflangタグが正しく記述されているかを確認する
- HTTPヘッダーの確認方法：デベロッパーツールのNetworkから対象ファイルを選択し、Headers内のResponse HeadersでLinkヘッダーが正しく設定されているかを確認する
ツールでの確認方法
次のようなツールを使って、特定のページやウェブサイト全体でhreflangタグが適切に設定されているかを検証します。
このほか、hreflangの確認機能を搭載しているSEOツールもあるため、普段使用しているツールに同様の機能がないかを確認してみるとよいでしょう。
なお、一般的なhreflangの確認方法として知られるGoogle Search Consoleのインターナショナルターゲティングレポートは、サポートを終了しています。
まとめ
hreflangタグは、ウェブページがどの国や言語をターゲットとしているかを検索エンジンに示すことで、ターゲットとなるユーザーにサイトを適切に表示する海外SEO対策の一つです。
hreflangタグを設定することで、海外からのアクセス獲得につながるだけでなく、ユーザー体験の向上や重複コンテンツのペナルティ回避にも効果があります。今回紹介した手法を参考にhreflangタグを適切に設定し、成果を上げる多言語サイトの運営を目指しましょう。
hreflangタグに関するよくある質問
hreflangタグとは？
hreflangタグとは、対象となる言語と地域を検索エンジンに伝えるためのコーディングの規則です。適切に設定することで、ユーザーに応じて最適なページを表示できるようになります。
hreflangタグを設定するメリットは？
- 検索エンジンが各ページの対象言語や地域を正しく認識できるため、ユーザーの言語や地域に適したページが検索結果に表示されやすくなる
- 言語違いの同じコンテンツも多言語展開として検索エンジンに認識され、重複コンテンツとしてペナルティを受けるリスクを低減できる
- ユーザーの言語や地域に合わせて最適化されたページが表示されるため、顧客が目的の情報にスムーズにたどりつくことができ、利便性や顧客満足度の向上につながる
hreflangタグを設定するときに気を付けるポイントは？
- 言語コードや国コード、URLなどの記述ミスに注意する
- 全てのページに全言語のhreflangを設定する
- ページの追加やURL構造の更新などに合わせて、必要に応じて更新する
