東京渋谷株式会社イー・バード - BtoB広告大賞金賞受賞のWeb制作会社
BLOG ブログ
2023年11月1日

多言語サイト制作|hreflang属性とは?

Webサイト制作 多言語サイト制作

Webサイトを運営する上で、多言語対応はグローバルなユーザーへのアプローチを広げるために欠かせません。その際に重要なのが、「hreflang」属性です。

hreflang属性とは


では、hreflang属性とは何でしょうか?
hreflang属性は、同一のコンテンツが複数の言語で利用可能なケースで、検索エンジンに対して特定の言語や地域向けのページを指示するために使われます。

例えば、あるWebサイトが英語、日本語、スペイン語で利用可能なケースで、hreflang属性を適切に設定することで、検索エンジンはユーザーの言語設定や地域に応じて最適なページを表示することができます。

これにより、ユーザーは自分の言語に合わせたコンテンツに直接アクセスすることができて、ユーザーエクスペリエンスの向上に繋がります。

hreflang属性の記述方法


hreflang属性は、linkタグを用いてHTMLのhead部分に記述されます。

例えば、日本語のページには以下のように記述します。

<link rel=”alternate” hreflang=”ja” href=”https://www.e-bird.biz/ja/page.html”>

こうすることで、このページが日本語のユーザー向けであることを検索エンジンに伝えることができます。

英語のページは国によって異なり、以下のように記述します。

アメリカの場合
<link rel=”alternate” hreflang=”en-US” href=”https://www.e-bird.biz/en-us/page.html”>

イギリスの場合
<link rel=”alternate” hreflang=”en-GB” href=”https://www.e-bird.biz/en-gb/page.html”>

カナダの場合
<link rel=”alternate” hreflang=”en-CA” href=”https://www.e-bird.biz/en-ca/page.html”>

タイ語のページには、以下のように記述します。

タイの場合
<link rel=”alternate” hreflang=”th” href=”https://www.e-bird.biz/th/page.html”>

また、多言語サイトにおいては、異なる言語間でコンテンツが適切にリンクされていることも重要です。各言語版ページは相互にリンクされている必要がありますが、これも、hreflang属性によって実現します。日本語と英語、日本とアメリカとイギリスとカナダとタイのページがある場合には、それぞれのページに、

<!– 日本語のページ –>
<link rel=”alternate” hreflang=”ja” href=”https://www.e-bird.biz/ja/page.html”>

<!– 英語のページ(アメリカ) –>
<link rel=”alternate” hreflang=”en-US” href=”https://www.e-bird.biz/en-us/page.html”>

<!– 英語のページ(イギリス) –>
<link rel=”alternate” hreflang=”en-GB” href=”https://www.e-bird.biz/en-gb/page.html”>

<!– 英語のページ(カナダ) –>
<link rel=”alternate” hreflang=”en-CA” href=”https://www.e-bird.biz/en-ca/page.html”>

<!– タイ語のページ –>
<link rel=”alternate” hreflang=”th” href=”https://www.e-bird.biz/th/page.html”>

を記述します。

以下、22カ国の25の言語コードを表にしました。

国/地域 言語 言語コード
日本 日本語 ja
アメリカ合衆国 英語(アメリカ) en-US
イギリス 英語(イギリス) en-GB
カナダ 英語(カナダ) en-CA
カナダ フランス語(カナダ) fr-CA
フランス フランス語 fr
スペイン スペイン語 es
ドイツ ドイツ語 de
イタリア イタリア語 it
ブラジル ポルトガル語(ブラジル) pt-BR
ポルトガル ポルトガル語 pt
中国 中国語(簡体字) zh-CN
中国 中国語(繁体字、台湾) zh-TW
韓国 韓国語 ko
ロシア ロシア語 ru
タイ タイ語 th
ベトナム ベトナム語 vi
マレーシア マレー語 ms
インドネシア インドネシア語 id
フィリピン フィリピノ語 tl
ミャンマー ミャンマー語 my
カンボジア クメール語 km
ラオス ラオ語 lo
シンガポール 英語 en-SG
シンガポール マレー語 ms-SG

hreflang属性の重要性


こうした細かな設定は、WebサイトのSEO対策としても、極めて重要な役割を果たします。

Webサイトのユーザーが世界中にいる場合、hreflang属性を正しく使用することは不可欠です。ユーザーが自分の言語で検索したときに、適切な言語のページが表示されなければ、ユーザーエクスペリエンスは損なわれ、サイトへのトラフィック減少にも繋がる可能性があります。逆に、hreflang属性を効果的に使うことで、Webサイトの信頼性を向上させ、ユーザーに最適なコンテンツを提供できます。

まとめ


「hreflang」属性は多言語Webサイトを構築するうえで、ユーザーに最良のコンテンツを届け、SEOを最適化するために不可欠な要素です。サイトが多言語に対応することで、グローバルな市場における競争力を保ちながら、異なる言語を話すユーザーにも親しみやすいブランドイメージを築くことができます。

関連ページ:

多言語サイト制作について

多言語サイト制作|ロケールコード 「ja」と「jp」、「ja-jp」「ja-JP」の違い

多言語サイト制作|初回アクセス時の言語切り替えの方法

多言語サイト制作|フォントの選び方

多言語サイト制作|canonicalタグを設置する重要性

多言語サイト制作|ECサイトのシステムにshopifyを採用するメリット