2019/10/23

hreflangタグの役割と書き方 – 多言語サイトSEOのアノテーション実装

hreflangタグの役割と書き方

解説猫(仮)
解説猫(仮)SEO解説担当の猫さんです
元SEOディレクターで、現在は自社マーケティングやってるみたいです
・趣味:昼寝
・どんな人でもわかる優しい説明をこころがけているが、そんなにうまくはない
・冷静な判断で仲間からの信頼も厚い(自称)
竹内
竹内現役SEOディレクターのおじさんです
顔は怖いけど美しく清らかな心の持ち主です
・顔は怖いが、丁寧な対応でクライアントからの信頼も厚い
・顔は怖いが、空気を読むスキルが高く冗談も通じる
・顔は怖いが、笑顔も結構怖い

hreflangタグは記述したページの言語を設定するタグです。
”日本語サイトのみの場合”には基本的に必要ありませんが、多言語サイトでは設定が必要です。
誤った記述のないように、しっかりと知識を身につけましょう。

解説猫(仮)
こんにちは、こんばんは、解説の猫(仮)と申します。
この記事では、hreflangについて解説します。
よろしくお願いしますね。
竹内
こんにちは!竹内と申します。
普通にサイトを見ていても英語のページって見かけますよね。
Web担当の方には必要な知識ですので、一緒に覚えていきましょう!

hreflangとは?

hreflangタグについては、Search Consoleヘルプ「ページのローカライズ版についてGoogleに知らせる」で以下のように記述されています。

”ページに言語や地域ごとの複数のバージョンがある場合、こうした別バージョンについて Google にお知らせください。
それにより、Google 検索はユーザーの言語や地域に応じた最適なページのバージョンを表示できるようになります。 こうした情報がなくても、ページの別言語のバージョンを Google が検出することはありますが、言語や地域ごとのページを明示してあるほうが正確です。
次のような場合に、代替ページを指定することをおすすめします。

・ナビゲーションやフッターなど、テンプレートのみを翻訳し、コンテンツの大部分は 1 つの言語を使用する場合。フォーラムなど、ユーザー生成コンテンツを掲載するページでは、これが一般的です。

・コンテンツが 1 つの言語で書かれていて、コンテンツの大部分はほとんど同じであり、地域ごとにわずかに変化がある場合。たとえば、米国、英国、アイルランドのユーザーをターゲットにした英語のコンテンツです。

・サイトのコンテンツが複数の言語に完全に翻訳されている場合。
たとえば、各ページについてドイツ語版と英語版の両方があるような場合です。”

簡単に言うと”ページ(URL)の言語をGoogleに伝えるタグ”です。
日本語ユーザーには日本語のサイトを、英語ユーザーには英語のサイトを見てほしいですよね。
hreflangを設定することで、ユーザーが使用する言語のページを検索結果に表示できます。

解説猫(仮)
フーーー!
シャー!!
竹内
ちょ、急にどうしたんですか!w
僕は猫語は話せませんよ!日本語で話してください!!
解説猫(仮)
そういうことです。
読めない言語は基本、ユーザーに受け付けてもらえません。
ユーザーごとに対応した言語のサイトが表示されるように、hreflangを設定しないといけない
訳ですね。
竹内
おお、なるほどわかりやすい…
ていうかhreflangって猫語まで対応してるんですか?w
解説猫(仮)
対応してるわけないじゃないですか。
バカなのですか?
竹内
次のセクションでは「hreflangの記述方法」を紹介します!
是非ご覧ください!!

hreflangの書き方

hreflangの記述には下記の3つの方法があります。

  • headタグ内にリンク要素として記載する
  • HTTPヘッダーに記載する
  • XMLサイトマップに記載する

簡単でおすすめの方法は”headタグ内にリンク要素として記載する方法”です。
この記事ではこちらの方法を解説していきます。

なお、記述方法の解説については、「日本語」「中国語(簡体字)」「韓国語」の3つのページを持っているケースを例に説明します。

トップページの記述方法

<head>タグ内に下記のコードを記述します。

下層ページの記述方法

下層ページは、ページ毎に対応関係に従って記述します。

この方法以外に、プラグインに記述する方法などがありますが、これだけのためにプラグインを使わずとも、headに出力するコードの部分に記述するだけなので非常に簡単です。
是非覚えておきましょう。

竹内
記述例にある、「ko」とか「ja」とかを「言語コード」と言います。
使用する言語によって、使い分けてください。
解説猫(仮)
と言われても言語コードを暗記してる人はいないと思います。
次のセクションで、言語コードを紹介します。

主な言語コード

hreflangでは「ISO 639-1コード」から言語を指定します。
一例ですが、下記が言語コードになります。

言語コード一覧

言語コード 言語名
ja 日本語
en 英語
de ドイツ語
fr フランス語
it イタリア語
es スペイン語
ru ロシア語
ko 朝鮮語
zh-Hans 中国語:簡体字
zh-Hant 中国語:繁体字
ar アラビア語
el ギリシア語
eo エスペラント語
la ラテン語
mn モンゴル語
ms マレー語
nl オランダ語
vi ベトナム語
th タイ語

アメリカの検索結果に表示させたい場合は”en”を記述します。
日本の検索結果に表示させたい場合は”ja”を記述します。

地域コードの指定について

hreflangでは必要に応じて「地域」を追加で指定することができます。
なお、地域は単体での使用は不可能です。

地域は「ISO 3166-1」の国コードから指定することができ、下記のように記述します。

例えば「en-GBはイギリスの英語」を、「en-USはアメリカの英語」を示します。
なお、国コードでは単独で使用することはできず、必ず言語コードが必要になります

解説猫(仮)
例えば「sr」は言語コードでは「セルビア語」、国コードでは「スリナム」を表します。
単体で使用した場合は言語である「セルビア語」が優先されます。
竹内
地域の指定には必ず言語がセットになる訳ですね!
ところで「エスペラント語(eo)」ってどこの言語ですか?
解説猫(仮)
国ではなく人工言語らしいです。
母語が異なる人のコミュニケーションのために作られたようですね。
竹内
おお、さすがお詳しい!
種類が多いと思いましたが、そんなコードまで指定できるんですねー

よくある間違った設定

言語コードが間違っている

前述のとおり言語コードは、ISO 639-1形式で指定し、必要に応じて地域をISO 3166-1形式で指定します。

例えばイギリスはUnitedKingdomの「UK」ではなく、「GB」で指定しなければなりません。
誤った設定は、無効になってしまいます。

全ページ共通で全ての言語を記述してしまう

「全ての言語ページ」に「全ての言語のhreflang」を記述してください。

一例ですが、下記のようになります。

〇:日本語ページに「日本語」「英語」「中国語」のhreflangを記述
✕:日本語ページには日本語のhreflangのみを記述

言語コードとページの組み合わせを間違える

例えば英語ページ(en)のURLなのに、hreflangにスペイン語(es)を記述してしまうケースが該当します。
この間違いは、スペインの検索結果に英語ページが表示されてしまう可能性があります。
言語指定を無効化されるよりもマイナスの影響が大きいので、言語コードとページの記述は正しく設定しましょう。

SearchConsoleでの確認方法

SearchConsoleのインターナショナルターゲティングでは、hreflangのエラーの確認や、検索結果で優先する国の指定が可能です。

レポートの「言語」タブでhreflangの使用状況やエラーの検出を確認でき、「国」タブでターゲットする国を設定可能です。

その他の確認ツール

利用できるサードパーティのツールも多数あります。
よく使用されるツールをいくつか紹介します(下記のツールは、Google が管理または確認しているわけではありません)

hreflang Tags Generator Tool
…hreflangタグの生成と修正用

hreflang Tags Testing Tool
…単一のライブページにおけるhreflangの検証用

HREFLang Checker and Validation Tool
…単一のライブページにおけるhreflangタグの検証用

解説猫(仮)
設定ミスは気を付けてください。
場合によっては設定しない方が良いケースすらあります。
竹内
hreflangもGoogleへのシグナルの一つですからね…
ちゃんとコードを確認して、間違いのない設定をしないといけませんね!

まとめ

今回解説したのは下記のとおりです。

  • hreflangタグついて
  • 記述方法
  • 言語コード
  • 注意点とsearch consoleの確認方法

hreflangタグは、多言語対応していないサイトでは、設定の必要がないタグです。
多言語サイトをお持ちの方や、多国籍向けにサービスを展開している方は、知識を身に着けておくことをオススメします。

設定した方がいいかな?
と考えている方、今一度ターゲットを確認し、こちらの記事を参考に設定してみてください!

資料を無料でダウンロード
資料を無料でダウンロード

ページの一番上へ