hrefタグについて、「どう読むの?」「何のためにあるの?」「使い方は?」などの疑問を持たれている方は多いと思います。今回はそんなhrefタグについて解説いたします。
hreflangは「エイチレフラング」と読み、別名「リンク先の言語」とも呼ばれています。
元々「href」は「hypertext reference」の略で、「ハイパーテキストの参照」という意味です。また、lang は「language」の略で、「言語」という意味になります。
hreflangは多言語サイトを知らせるためのタグ(hreflangアノテーション/言語アノテーションタグとも呼ばれます)です。もしサイトの中に多言語ページが存在しない場合は、hreflangタグを設定する必要はありません。
タグは下記のように記述します。
【記述内容】
<link rel=”alternate” hreflang=”■■■■■■■” href=”●●●●●●●”>
備考:
■: 言語コード
●: その言語ページのURL
言語コードは以下のように指定します。一例ですが、下記が言語コードになります。
【言語コード一覧】
言語コード | ISO639-1形式 言語名 |
hreflangタグは、HTMLタグで設定し、多言語展開しているページの<head> 内に記述することが推奨されています。
<link rel=”alternate” hreflang=”■■■■■■■” href=”●●●●●●●”>
※hreflangには言語(必要に応じて地域)を設定します。
※hrefには言語ごとのページのURLで設定します。
もう一つ大事なのは、多言語展開しているページ毎にページ同士でhreflangタグの記述をしなければなりません。
ページ毎というのは、サイトのトップページにhreflangタグを記述するだけではなく、そのページに多言語ページがある場合、そのコンテンツ毎にも記述しなければなりません。
またページ同士というのは、日本語、英語、中国語でサイトを作っている場合、日本語サイトと英語サイトと中国語サイト全てでhreflangタグを記述する必要があります。
例)日本語、英語、中国語があるサイト
日本語ページ : https://www.auncon.co.jp/
英語ページ : https://www.auncon.co.jp/en/
中国語ページ : https://www.auncon.co.jp/cn/
<head>部にはそれぞれ以下のような記述をします。
▼日本語ページ
<link rel=”alternate” hreflang=”ja” href=”https://www.auncon.co.jp/”>
<link rel=”alternate” hreflang=”en” href=”https://www.auncon.co.jp/en/”>
<link rel=”alternate” hreflang=”zh-cn” href=”https://www.auncon.co.jp/cn/”>
▼英語ページ
<link rel=”alternate” hreflang=”ja” href=”https://www.auncon.co.jp/”>
<link rel=”alternate” hreflang=”en” href=”https://www.auncon.co.jp/en/”>
<link rel=”alternate” hreflang=”zh-cn” href=”https://www.auncon.co.jp/cn/”>
▼中国語ページ
<link rel=”alternate” hreflang=”ja” href=”https://www.auncon.co.jp/”>
<link rel=”alternate” hreflang=”en” href=”https://www.auncon.co.jp/en/”>
<link rel=”alternate” hreflang=”zh-cn” href=”https://www.auncon.co.jp/cn/”>
いかがでしたか?多言語サイトを運営する場合「hreflangタグ」を記述するのが必須です。
hreflangタグを記述することでGoogleのロボットに多言語サイトということを知らせることができます。適切なユーザーに適切な言語のページを届けることもできるので、海外向けにサイト展開を行っている方は、hreflangタグの記述をしましょう。
もし、すでに記載しているのであれば、記述漏れ、間違いやエラーはないかをもう一度確かめてみてはいかがでしょうか。
Written by P.W