今回は多言語サイトの設定に欠かせないhreflangタグについてわかりやすく説明しました。
そもそもhreflangタグとは何か、『サイトにhreflangタグがありません』や『「ja」 – リターンリンクがありません』がインターナショナルターゲティングで表示されたらどうすればいいのか？などの疑問に答え、hreflangタグの設定の仕方とWordpressで簡単に設定できる方法を紹介します。
内容
２ hreflangタグは多言語サイトに設定しないとトラフィックを失う可能性も
3 『サイトにhreflangタグがありません』をインターナショナルターゲティングで確認
3-1 <link re=”altrenate” hreflang=”x”>言語アノテーションタグの実装
3-2 『「ja」 – リターンリンクがありません』と表示されない為のhreflangタグの書き方
3-3 Word Pressの機能を使用してhreflangタグを設定しよう
１ hreflangタグとは何か
hreflangとは言語や地域ごとにページが存在する場合、Googleにその複数ページの存在を知らせて、ユーザーごとに最適なページを検索結果で表示させる役割があります。
簡単に言うと多言語サイトを運用している場合、ページのローカライズ版が存在することをGoogleに知らせることです。
２ hreflangタグは多言語サイトに設定しないとトラフィックを失う可能性も
多言語サイトを運営している場合、hreflangタグを設定していないと検索結果に母国語とは違うページが表示されてしまいます。例えば特定のブランド名で検索したのに英語のページが表示されるとクリックせずにそのまま離脱してしまう可能性もありますよね。
実際にhreflangタグが適切に設定しないとどうなるか見てみましょう。
2-1 hreflangタグがないサイトはどうなるのか
下のイメージはH&Mグループの『COS』の検索表示結果です。検索キーワードはもちろんブランド名。
日本で検索したにも関わらず英語のサイトがトップに表示されています。原因はCOSのトップページでは、hreflangタグに日本語サイトのURLや地域・言語指定がないからです。
COSの例ではユーザーが英語表記のページをクリックしても、英語のせいで内容が理解できずページを離脱する可能性もあります。またはページが英語表示なのでそもそもクリックすらしてもらえないかもしれません。
hreflangの見方ですが、例えば『hreflang=“en-FR”』では『en』がEnglishで言語、『FR』がフランスで地域という意味です。またそのあとの『href=』以降に表示されているURLが検索結果に表示されるという意味です。ですのでフランス内で英語で検索したユーザーに『href=』以降のURLが検索結果に表示されます。
2-2 hreflangタグがあるサイト
下のイメージはForever21のトップページのhreflangタグです。
赤線の中に
link rel=”alternate” hreflang=”ja-JP” href=”http://www.forever21.co.jp” /
とhreflangタグが実装されています。hreflangタグの実装により、Forever21は各地域・言語に対応したウェブサイトをユーザーに提供することが可能になります。
2-3 Googleはlang属性を無視
そもそもですが、すでに言語についてはlang属性で設定しているのになぜhreflangタグを設定しないといけないのでしょうか。
実はGoogleはlang属性を無視します。なのでしっかりとhreflangタグを設定しないとユーザーに適切な検索結果を返せないのですね。
3 『サイトにhreflangタグがありません』をインターナショナルターゲティングで確認
hreflangタグが設定されていない場合はGoogle Search Consoleの『インターナショナルターゲティング』をクリックすると、『サイトにhreflangタグがありません。』と表示されます。
またhreflangタグの設定に問題がある場合は、『hreflangタグにエラーがありました』と表示されます。
どちらの場合もhreflangタグが正しく実装されていないことが原因で表示されいるので下記のやり方でhreflangタグを設定してください。
3-1 <link re=”altrenate” hreflang=”x”>言語アノテーションタグの実装
先ほど説明したように各地域と言語に合った検索結果を表示させるために<link re=”altrenate” hreflang=”x”>言語アノテーションタグをheadタグ内に記載します。
国によってはサイトのドメインが異なる場合も(日本サイト=example.co.jp、英語ではexample.comのようなケース)ありますが、hreflangタグでは異なるドメインでも指定することが可能です。
3-2 『ja」 – リターンリンクがありません』と表示されない為のhreflangタグの書き方
架空のトップページを元に説明してみます。
言語アノテーションタグ記述例:日本のトップページ
1 link rel=”alternate” hreflang=”en-us” href=”http://www.theegg.com/” /
2 link rel=”alternate” hreflang=”ja-jp” href=”http://www.theegg.com.jp/” /
3 link rel=”alternate” hreflang=”fr-fr” href=”http://www.theegg.com.fr/” /
4 link rel=”alternate” hreflang=”ko-kr” href=”http://www.theegg.com.kr/” /
5 link rel=”alternate” hreflang=”x-default” href=”http://www.theegg.com/” /
まず細かい説明をすると『fr』は言語コードでフランス語、『ko』は韓国語をさします。
『hreflang=”x-default”』とはどの言語にも一致しない場合に、リダイレクトされるURLを指定します。一般的には本体のドメインである.comを指定しておいてください。
ここで重要なのは多言語に対応している各国の各ページにも同様のhreflangタグを設定しないといけないことです。フランスや韓国のサイトにも同様のhreflangタグを設定する必要があります。
もし相互的なhreflangタグを設置しないと『「ja」 – リターンリンクがありません』とGoogle Search Consoleから、エラーメッセージが表示されます。今回だと『.com』、『.com.fr』、『.com.kr』それぞれのURLに記述例と同様のhreflangタグを設置することによりエラーメッセージが防げます。
3-3 Word Pressの機能を使用してhreflangタグを設定しよう
運営しているサイトがWordPressなら『Language Selector Related』プラグインがおすすめです。
インストール後、以下の画面でURLと国、言語を指定することができます。
設定が完了したらheadタグ内にHreflangタグが挿入されています。
4 hreflangタグまとめ
いかがでしたでしょうか？多言語サイトにおいて、hreflangタグを適切に設定しないとユーザビリティを損なうどころか、トラフィックを失う可能性もあります。SearchConsoleのインターナショナルターゲティングでhreflangタグを確認し、各ユーザーの検索結果に表示させたいページを表示させましょう。
弊社では内部SEOはもちろん外部SEO対策も行っておりますので興味がございましたらお問い合わせください。
寄稿者について
Yutaka: 福岡県出身。前職ではファッション、銀行、医療、飲食、食品など様々な業界の企画、集計、分析、レポートまでを担当。 特にユーザーの行動観察調査などを得意とする。 リアルのマーケティングからWebのマーケティングに携わりたく、The Eggに入社。The Eggでは日本語のコンテンツ制作やウェブ解析に従事している。
