Hreflangタグ：究極のガイド

公開: 2021-02-02
hreflangを理解して使用することがまだ技術的なトリックに含まれていない場合は、これを追加する時期かもしれません。 Hreflangは、Googleがユーザーの言語と場所を考慮して、検索に表示されるページを決定するのに役立つHTML属性です。 hreflangは単純なHTML属性ですが、把握して実装するのは難しい場合があります。

では、なぜわざわざ？ その理由は次のとおりです。hreflangは、複数の言語で同様のコンテンツを含むサイトのSEOコンテンツを作成する上でおそらく最も重要な側面です。 ですから、ご安心ください。見返りは、プロセスに関連するあらゆる苦痛を上回ります。さらに、気付かれることでしょう。 それについて好きではないことは何ですか？

Hreflangタグとは何ですか？

Hreflangは、同じコンテンツを利用するサイト上のすべてのURLを指定するコード（具体的にはHTML属性）です。 hreflang属性は10年以上前にGoogleによって導入され、ユーザーが検索エンジンにさまざまな言語の複数のWebページ間の関係を表示できるようにします。 これは、特定の視聴者向けにコンテンツを作成する場合に役立ちます。 同じウェブページの複数のバージョンが異なる言語で使用されている企業の場合、hreflangタグはこれらのバリエーションを検索エンジンに伝達し、ユーザーに正しいバージョンを提供するのに役立ちます。

たとえば、米国で誰かが「Ikea」をグーグルで検索すると、次の結果が表示されます。

hreflangusのIkeaの結果

カナダの検索者による同じクエリで、次の結果が返されます。

IkeaのカナダのGoogle検索結果

なぜ大騒ぎ？ hreflangタグを使用すると、検索エンジンは国や言語の好みに基づいてユーザーに結果を配信できるため、hreflangタグの意味は非常に貴重です。ユーザーエクスペリエンスが最適化され、検索ランキングが向上します。 お互いに有利なのはどうですか？

なぜHreflangはSEOにとって重要なのですか？

それはすべて、パーソナライズされた結果に要約されます。 ユーザーが自分に合わせた結果に誘導されない場合、Webページを複数の言語に翻訳するという大変な作業はすべて失われます。 つまり、hreflang SEOを使用すると、検索エンジンは、言語と場所に基づいて、会社のWebページの最も適切なバージョンをユーザーに提供できます。 ユーザーの特定の好みに合わせて最適化されたページを手に入れましたか？ あなたは彼らにそこに着陸させたいだけでなく、彼らに長居させたいのです—いくつかの理由で—そしてhreflangタグSEOはそれを行う方法です。

この方法を実装すると、ユーザーエクスペリエンスが向上し、検索結果へのバウンスが最小限に抑えられ、ランキングが高くなります。 （最初に成功しなかった場合は、再試行してください。Webベースの検索をナビゲートするときに必ずしも役立つことわざではありません）。 ここでの目標は、トラフィックを増やすことではなく、迅速で信頼性の高い収益を求める適切なユーザーに適切なコンテンツを提供することです。 Hreflangタグは、これらの微妙な結果を達成するための鍵です。

別の理由が必要ですか？ hreflangを使用すると、重複コンテンツの問題が解消されます。 あなたの会社が米国とカナダを対象とした異なるURLで同じコンテンツを英語で提供していると想像してみてください。 違いはおそらくわずかであり、通貨の詳細（USD対CAD）および用語（インペリアル対メートル法）に反映されます。

graphic showing hreflang tags meaning and how hreflang tags send users to the correct page for their location

hreflangタグは、検索エンジンがこれらのページと、それぞれが作成された個別のオーディエンスとの関係を認識して理解するのに役立ちます。 hreflangがないと、Googleはこれらのページを重複コンテンツと見なし、結果の1つだけを返す傾向がある可能性があります。 hreflangを使用すると、コンテンツは（ほぼ）同じですが、さまざまな母集団に最適化されていることが検索エンジンに非常に明確に伝えられます。 あなたの帽子の羽（またはカナダの友人の場合はトーク帽）はどうですか？

これらの詳細は重要なので、詳細を読んでください。

Hreflangタグはどのように見えますか？

Hreflangタグはシンプルで一貫性があり、次の構文を使用します。

 <link rel =“ alternate” hreflang =“ x” href =“ https://www.example.com/new-page” />

この形式は、リンクされたページが現在のページの代替バージョンであり、言語「x」で表示されることを伝えます。 Hreflangタグは、ディレクティブではなく、検索エンジンのシグナルとして機能します。 言い換えると、hreflang属性は、言語「x」を使用してクエリを実行するユーザーが、言語「y」のコンテンツがほぼ類似しているページよりもこの結果を好むことを検索エンジンに通知します。 シグナルとディレクティブのもう1つの違いは？ Googleは、不正確であると見なされた場合、hreflang属性を認識しない場合があります。その結果、他のSEO要因がhreflang属性を上書きし、会社のページの代替バージョンが最良のバージョンよりも上位にランク付けされます。

HreflangHTMLの使用

複数の言語に翻訳されたWebサイトの場合、タグhreflangの作成は1-2-3と同じくらい簡単です。 これらの各手順では、上記の構文（<link rel =“ alternate” hreflang =“ x” href =“ https://www.example.com/new-page” />）を基盤として使用します。

  1. hreflang属性には、言語で構成される有効な値が含まれている必要があります。 この情報は、ISO639-1形式と呼ばれる2文字のコードで伝達されます。 たとえば、サンプルページをポルトガル語に翻訳する場合は、次のようになります。
     <link rel =“ alternate” hreflang =“ pt” href =“ https://example.com/portugese-version” />

    領域はオプションであり、使用する場合はISO 3166-1 Alpha2形式である必要があります。 ポルトガルとブラジルのポルトガル語話者をターゲットにするためにそれぞれ利用できる2つの異なるタグを次に示します。

     PT-PT：<link rel =“ alternate” hreflang =“ pt-pt” href =“ https://example.com/pt/our-page” />
PT-BR：<link rel =“ alternate” hreflang =“ pt-br” href =“ https://example.com/br/our-page” />

    地域コードは必ずしも直感的ではないため（英国のコードは「uk」ではなく「gb」です）、再確認してください。 このリストを使用して、サイト全体に間違った情報を埋め込む前に、正確な言語と地域のコードを確認してください。

  2. 各URLには、他のすべてのURLへのリターンリンクが必要です。これらはすべて、特定のWebサイトの正規バージョンまたは優先バージョンを指している必要があります。 言語が多ければ多いほど、必要なhreflangリンクも多くなります。 それらを制限したくなるかもしれませんが、このステップを回避することは不可能です。さらに、rel =” alternate” hreflang =” x” markupとrel =” canonical”は一緒に使用でき、一緒に使用する必要があります。 すべての言語には、それ自体を指すrel =” canonical”リンクが必要です。 example.comのホームページから始めると、次のようになります。
     <link rel = "canonical" href = "http://example.com/">
<link rel = "alternate" href = "http://example.com/" hreflang = "pt" />
<link rel = "alternate" href = "http://example.com/pt-pt/" hreflang = "pt-pt" />
<link rel = "alternate" href = "http://example.com/pt-br/" hreflang = "pt-br" />

    カノニカルの詳細については、「カノニカルタグとURL：初心者向けの簡単なガイド」を参照してください。

  3. hreflangの構築を成功させるための最後のステップは、自己リンクに根ざしています。 各ページのhreflang属性には、それ自体と、その代替として機能するページへの参照が必要です。 Googleは、指定された範囲外の訪問者に対して特定の言語または地域を対象としないデフォルトバージョンとして単一のURLを確立する「x-default」ページを設定することを強くお勧めします。変化するであろう：
     <link rel = "canonical" href = "http://example.com/pt-pt/">
<link rel = "alternate" href = "http://example.com/" hreflang = "pt" />
<link rel = "alternate" href = "http://example.com/pt-pt/" hreflang = "pt-pt" />
<link rel = "alternate" href = "http://example.com/pt-br/" hreflang = "pt-br" />

消化するのはたくさんあります！ しかし、これまでに達成したので、次のステップであるhreflangタグの実装方法を学ぶ準備ができています。

Hreflangタグの実装

hreflangタグを実装する方法は3つあり、すべて配置に要約されます。

1 – HTMLを使用したHreflangタグの実装：

ページでhreflangタグを使用するスクリーンショット

hreflangを初めて使用する場合は、基本的なHTMLタグを使用するのが最も簡単で迅速な方法です。 Webページの<head>タグに適切なhreflangタグ（上記を参照）を追加するだけです。

例： example.comのウェブマスターは、米国の英語とスペイン語を話すユーザーがホームページにアクセスできるようにしたいと考えています。 サイトのHTMLの<head>で次のアノテーションを使用すると、これが実現されます。

 <link rel = "alternate" href = "https://www.example.com" hreflang = "en-us" />
<link rel = "alternate" href = "https://www.example.com/es" hreflang = "es-us" />

ベネズエラとメキシコのスペイン語を話すユーザーにホームページを表示したい場合、hreflangアノテーションは次のようになります。

 <link rel = "alternate" href = "https://www.example.com/ve" hreflang = "es-ve" />
<link rel = "alternate" href = "https://www.example.com/mx" hreflang = "es-mx" />

この方法の最大の欠点は何ですか？ Hreflang HTMLは、面倒で時間がかかる可能性があります。 また、<head>要素と<header>要素には違いがあることを忘れないでください。 <head>には、ページに表示されない要素（この場合はhreflang属性）が含まれています。

2 – Hreflang HTTPヘッダーの実装：

WebサイトのPDFおよび非HTMLコンテンツの場合、HTTPヘッダーを使用してhreflangを実装します。 名前は少し誤解を招く可能性があります。実装は、<head>または<header>を介してページ上で実行されません。 代わりに、それはすべてサイトのバックエンドで行われます。 HTTPヘッダーを使用すると、ドキュメントバリアントの相対的な言語を指定するだけでなく、このコンテンツを最適化できます。

例：英語版とフランス語版でサイトのPDFドキュメントを識別するには、HTTPヘッダーに表示されるリンクは次のようになります。

 リンク：<http://en.example.com/document.pdf>; rel = "alternate"; hreflang = "en"、 
<http://fr.example.com/document.pdf>; rel = "alternate"; hreflang = "fr"

この実装方法の最大の欠点は？ HTTPヘッダーを使用すると、サイトで行われる各リクエストにオーバーヘッドが追加され、ユーザーのブラウジングエクスペリエンスが低下する可能性があります。

3 –XMLサイトマップにHreflangを実装する

hreflangを実装するための最後のオプションは、XMLサイトマップマークアップを使用することです。 これは、XMLのxhtml：link属性を使用して、すべてのURLに注釈を追加します。

XMLサイトマップにhreflangを実装する方法は複数ありますが、次のような方法をお勧めします。

hreflangリンクを含むsitemap.xmlのスクリーンショット

または、以下の例のいくつかを使用することもできます。

注意：言語/場所変数のペアを持つ単一のURLに必要なマークアップは長く表示されます！ そうは言っても、メリットについて読んでください。 （沢山あります！）

例：

 <url>
<loc> http://www.example.com/uk/ </ loc> 
<xhtml：link rel = "alternate" hreflang = "en" href = "http://www.example.com/" /> 
<xhtml：link rel = "alternate" hreflang = "en-au" href = "http://www.example.com/au/" /> 
<xhtml：link rel = "alternate" hreflang = "en-gb" href = "http://www.example.com/uk/" />
</ url>

3番目のURLが自己参照であることに注意してください。 これは、特定のURLがen-gbを対象としていることを指定し、他の2つの言語/場所の組み合わせを指定します。 これらのURLの両方をサイトマップに実装すると、次のようになります。

 <url>
<loc> http://www.example.com/ </ loc> 
<xhtml：link rel = "alternate" hreflang = "en" href = "http://www.example.com/" /> 
<xhtml：link rel = "alternate" hreflang = "en-au" href = "http://www.example.com/au/" /> 
<xhtml：link rel = "alternate" hreflang = "en-gb" href = "http://www.example.com/uk/" />
</ url>
<url>
<loc> http://www.example.com/au/ </ loc> 
<xhtml：link rel = "alternate" hreflang = "en" href = "http://www.example.com/" /> 
<xhtml：link rel = "alternate" hreflang = "en-au" href = "http://www.example.com/au/" /> 
<xhtml：link rel = "alternate" hreflang = "en-gb" href = "http://www.example.com/uk/" />
</ url>

テキストの海を越えて見ることができると仮定すると、<loc>要素内のURLのみが変更されていることに気付くでしょう。それ以外はすべて同じままです！ ふぅ。 このメソッドは、自己参照hreflang属性を持つ各URLに依存し、他のURLへのリンクを返します。

大変な作業のようですね。 一方では、はい、このメソッドは長く、多くのURLに対してこれを行う場合、かなりの出力を必要とします。 とはいえ、利点は単純です。通常のユーザーはこのマークアップに煩わされることはありません。 追加のページウェイトはありません。この種のマークアップを生成するために、ページの読み込み時に多くのデータベース呼び出しを行う必要はありません。

最後に、XMLサイトマップを介してhreflangを実装すると、すべてが1つのファイルで定義されるという大きなメリットがあります。 これにより、ページが変更または削除されるたびに複数のHTMLドキュメントを編集する必要がなくなります。 さらに、サイトの速度低下はありません。 言い換えれば、好きなものがたくさんあります！

どの実装モードを選択すればよいかまだわかりませんか？ ウェブサイトのアーキテクチャとサイト構造に関するその他のヒントについては、SEOの技術的なベストプラクティスをご覧ください。

Hreflangの問題の検索と修正

Webサイトにhreflangを正常に実装したので（ここに仮想ハイタッチを挿入してください！）、メンテナンスが必要です。 選択した実装の定期的な監査を実行すると、正しく設定されていることを確認できます。 サイトのコンテンツを扱う社内の個人とのコミュニケーションは大いに役立ちます。彼らにhreflangについて知ってもらいたいので、意図せずに実装を壊すことはありません。

ここで言及する重要なポイントが2つあります。ページが削除された場合は、対応するページが更新されているかどうかを確認します。 ページがリダイレクトされたら、対応するページのhreflangURLを変更します。 あなたとあなたのチームがこれらのことを一貫して行い、定期的に監査すると仮定すると、それはスムーズな航海であるはずです。

それまでの間、最も一般的なhreflangの間違いとその修正方法を簡単に説明します。

1 –自己参照hreflangアノテーションがありません

大したことは何ですか？ Webページにhreflangタグを追加するたびに、自己参照型のhreflangタグを使用することが重要です。 Googleが述べていることを思い出してください。「各言語バージョンは、他のすべての言語バージョンと同様にそれ自体をリストする必要があります。」

修正方法：影響を受けるページを確認し、選択した実装方法を使用して、それぞれに自己参照のhreflangタグを追加します。

2 –Hreflangアノテーションが無効です

大したことは何ですか？ 検索エンジンは無効なhreflangタグを無視します。これにより、Webページの代替バージョンが見落とされます。

修正方法：影響を受けるページを確認し、無効なhreflangタグを削除して、有効な言語/ロケーションコード形式を使用するページに置き換えます。

3 –hreflangで複数の言語を参照しているページ

大したことは何ですか？ 各コンテンツは、単一の言語/言語の場所を提供するように設計されています。 2つ以上の競合する参照は、検索エンジンを混乱させ、hreflang属性を無視します。

修正方法：影響を受けるページを確認し、hreflang属性で特定のページを参照しているURLにエラーがないか調べます。 誤ったhreflang属性を削除し、言語ごとに1つの正しい属性のみを残します。

4 –相互hreflangがありません（リターンタグなし）

大したことは何ですか？ Hreflangタグは双方向です（ページAがhreflangアノテーションでページBにリンクしている場合、ページBはページAにリンクする必要があります）。

hreflangタグが相互にどのように必要であるかを示す図

修正方法：影響を受けるページを確認し、必要に応じて双方向のhreflangタグを追加します。 注：Google検索コンソールの国際ターゲティングレポート（[言語]タブの下にあります）は、欠落しているリターンタグのすべてのインスタンスにフラグを立てます。

例えば：

hreflangエラーのあるGoogle検索コンソールのスクリーンショット

5 –非正規へのHreflang

大したことは何ですか？ Rel =“ alternate” hreflang =“ x”は、ページの翻訳された（ローカライズされた）バージョンを表示するように検索エンジンに指示します。 rel = canonical属性は、これが信頼できる（正規の）バージョンではないことを示します。 これらの相反する属性は、検索エンジンを混乱させます。

修正方法：影響を受けるページを確認し、hreflangアノテーションを変更して、正規URLのみを指すようにします。 無効な正規タグのあるページに遭遇した場合は、それを削除してください。 これにより、hreflang属性が正しく理解され、検索エンジンがそれに続くことが保証されます。

6 –HreflangとHTML言語の不一致

大したことは何ですか？ 1つ以上のURLの宣言されたhreflang属性とHTML言語属性の間に矛盾がある場合、検索エンジン（Google以外）は混乱します。 これらの2つの属性の一貫性を保つことが重要です。

修正方法：影響を受けるページを確認し、HTML言語属性を変更して、宣言されたhreflang属性との整合性が保たれていることを確認します。

7-壊れたページへのHreflang

大したことは何ですか？ 検索エンジンは存在しないコンテンツを返すことはできません！ したがって、デッドページを指すhreflang属性は見落とされます。

修正方法：影響を受けるページを確認し、hreflangアノテーションを変更して、作業ページにリンクしていることを確認します。

8 –hreflangの同じ言語の複数のページ

大したことは何ですか？ 1つ以上のURLがhreflangアノテーションの同じ言語（または言語の場所）の2つ以上のページを参照している場合、検索エンジンは混乱します。

修正方法：影響を受けるページを確認し、hreflangアノテーションの1つを削除して、言語ごとに1つのページが参照されるようにします。

9 –X-デフォルトのhreflangアノテーションがありません

大したことは何ですか？ x-default hreflang属性はオプションですが、すべてのhreflangアノテーションのSEOベストプラクティスとして推奨されています。

修正方法：影響を受けるページを確認し、特定の言語または場所に固有ではないページを指す「x-default」hreflang属性が各ページに設定されていることを確認します。

まだ質問がありますか？ Core Web Vitalsアルゴリズムの更新を確認してください。これは、今年最新の状態にしたいと思う追加の技術SEOプラクティスの概要を示しています。

Googleが無視する可能性のある問題

あなたはベストプラクティスに従うことに自分の役割を果たしましたが、それでも、検索エンジンが特定の問題を無視する場合があります。 これは主に、検索エンジンが同じ問題を繰り返し認識し、それが彼らの側で説明できると信じている場合に発生します。 汗をかかないで！ これは実際には非常に役立ちます。 Googleが実際に「修正」するhreflangタグの問題をいくつか示します。

  1. ダッシュではなくアンダースコア：これは一般的なエラーであり、Googleがそれを説明しています。 毎日。 独身。 時間。
  2. en-GBの代わりにen-UKを使用する：これについては前に説明しました…地域コードが必ずしも直感的ではないという事実。 安心してください。Googleが対応します。英国は予約済みのコードです。つまり、Googleがこの一般的な問題を修正します。
  3. Hreflangに自己参照がない： Googleは最近、自己参照hreflangはオプションであると述べました。 そうは言っても、それは良い習慣のままです。
  4. 相対URLと絶対URL： canonicalとhreflangはどちらも相対パスを使用できますが、absoluteの方が絶対的です。 したがって、可能な場合はそれを使用することをお勧めします。

ユーザーのリダイレクト：注意事項

多くの場合、Webサイトは、Cookie、IPアドレス、またはブラウザ言語の組み合わせに基づいてユーザーをリダイレクトします。 リダイレクトに注意してください！ ユーザーにとって、これは苛立たしい（標準以下の読み取り）エクスペリエンスにつながる可能性があります。 検索エンジンの場合、コンテンツのインデックスを作成しようとすると問題が発生します。 さらに、ユーザーをリダイレクトすると、hreflangタグに必要な確立された接続が切断される可能性があります。

これがグーグルが練習について言わなければならないことです：

コンテンツを適応させるためにIP分析を使用しないでください。 IPロケーション分析は難しく、一般的に信頼性がありません。 さらに、Googleはサイトのバリエーションを適切にクロールできない場合があります。 すべてではありませんが、ほとんどのGoogleクロールは米国から発信されており、サイトのバリエーションを検出するために場所を変更しようとはしていません。 ここに示されている明示的な方法の1つ（hreflang、代替URL、および明示的なリンク）を使用します。

検索エンジンのクローラーは、どこからでもユーザーと同じように扱います。 検索エンジンボットをユーザーとは異なる方法で扱うことは、クローキングと見なされます。つまり、人間のユーザーや検索エンジンにさまざまなコンテンツやURLを提示することは、Googleのウェブマスターガイドラインに違反します。

ユーザーが期待する結果を提供する承認済みの修正が必要ですか？ 同じ検出ロジックを使用して、小さなバナーでユーザーに適したバージョンのページを提案します。 1つの注意点は、大きすぎると、インタースティシャルと見なされる可能性があることです（ユーザーにとってコンテンツが完全にまたは部分的に隠される原因になります）。

Webページのより良いバージョンを提案する検出ロジックの例

HreflangProのヒント

サイトのhreflangデプロイメントをチェックするプロセスを自動化するGoogleChrome拡張機能があります。 毎日のSEOメンテナンスの管理に役立つ、このSEOChromeアドオンやその他のSEOChromeアドオンに関する内部情報を入手してください。

結論

hreflangの理解、利用、トラブルシューティングは、今日のSEOの要件です。 世界の隅々であなたのサイトの可視性を高めるためにあなたができるすべてをしていることを確認したいですか？ Victoriousは、検索に影響を与える地元の文化的傾向と購入パターンを深く掘り下げて、国際的なSEOキャンペーンに最適な戦略を決定します。

SEOエージェンシーを始める準備はできましたか？ 今すぐ無料のSEO相談に登録して、Victoriousにプロセスを案内してもらいましょう。