HreflangとShopifyについて知っておくべきことすべて

公開: 2020-11-05

ますます多くのShopifyストアが国際化するにつれ、検索エンジンのランキングを管理することはこれまでになく重要になっています。新しい地域に拡大することは、刺激的な新しい市場機会を生み出す一方で、深刻なSEOの課題をもたらす可能性もあります。

国際的な拡大がもたらす主なSEOの問題は次のとおりです。

検索エンジンがどのページをどの地域/言語でランク付けする必要があるかを理解するのに役立ちます
地域または言語固有のページが重複コンテンツの問題を作成するのを防ぐ

この記事では、これらの国際的なSEO問題を解決するために使用されるHreflangと呼ばれる機能を紹介します。

なぜHreflangが必要なのですか？

まず第一に、なぜ私たちはhreflangが必要なのですか？

ブランドにさまざまな地域向けの複数のWebサイトがある場合、検索エンジンはどのサイトがどの地域向けであるかをどのように知るのでしょうか。

これを説明するために、フィットネスブランドのGymsharkを使用します。 GymsharkはShopifyを使用しており、さまざまなオーディエンス向けにさまざまなWebサイトを用意しています。

英国-https：//uk.gymshark.com

ドイツ-https：//de.gymshark.com

フランス-https：//fr.gymshark.com

これらのサイトは母国語に翻訳されているため、各サイトがどの地域に属しているかをGoogleに知ることができます。しかし、Gymsharkには米国のWebサイトとカナダのWebサイトもあります。

米国-https：//www.gymshark.comカナダ-https：//ca.gymshark.com/

これらのウェブサイトの両方のコンテンツは英語です。では、検索エンジンはこれらを英国の英語のWebサイトとどのように区別し、各サイトが正しい地域にランク付けされるようにするのでしょうか。

これがhreflangの出番です。

Hreflangとは何ですか？

Hreflangは、異なる地域/言語のオーディエンスを対象としたページの代替バージョンがある場合に検索エンジンに示すHTML属性です。

Hreflangはさまざまな方法で実装できますが、最も一般的なのは、代替バージョンを持つ任意のページに配置される単純なメタタグです。これがGymsharkの例です：

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

このhreflangタグは、英国のGymsharkホームページ「https://uk.gymshark.com/」にあります。

このページの米国版は「https://www.gymshark.com/」にあることを検索エンジンに伝えます。

hreflangタグには、次の2つの重要な属性が含まれています。

1-Href hrefは、代替ページへのリンクです。完全なURLアドレスである必要があり、作業ページである必要があります。「これは現在表示されているページの代替バージョンです」と検索エンジンに通知します。

2-Hreflang hreflang属性には、代替ページのターゲットオーディエンスの言語コード（ISO 639-1）と、オプションで国コード（ISO 3166-1）が含まれます。国コードはオプションですが、言語コードは必須です。

さまざまな言語/国のターゲティングの組み合わせを使用したhreflang属性の例：

en-英語を話す人
en-GB-英国の英語話者
fr-FR-フランスのフランス語話者
en-US-米国の英語話者
それ-イタリア語話者
it-CH-スイスのイタリア語話者。

'href'と 'hreflang'をつなぎ合わせると、検索エンジンは、この代替URL（href）がこの特定のオーディエンス（hreflang）を対象としていることを認識します。

代替ページ

hreflangはドメインレベルではなくページレベルで機能することを覚えておくことが重要です。 Hreflangタグは、「代替Webサイト」ではなく、「代替ページ」を宣言します。多くのWebサイトは、hreflangタグを使用して、同じドメイン上の代替言語/地域固有のページを宣言しています。

たとえば、サブフォルダを使用して、サイトの代替言語/地域バージョンをホストできます。これは、Appleがフォルダを使用して国際的なWebサイトを設定する方法です。

英国：https：//www.apple.com/uk/
ES：https：//www.apple.com/es/
FR：https：//www.apple.com/fr/

X-デフォルト

'x-default'と呼ばれる特別なhreflangフォールバック値があります。他のhreflangリンクが検索者の言語/地域に一致しない場合、Webページの検索エンジンがランク付けされるため、「x-default」を考えてください。

再びGymsharkを例として使用します。彼らはrow.gymshark.comに他の世界の店を持っています。これはx-defaultとして宣言されています。

 <link rel="alternate" href="https://row.gymshark.com/" hreflang="x-default" />

したがって、誰かがGymsharkのhreflangタグで宣言されていない言語/場所で検索した場合、GoogleはGymsharkのRoWストアを表示する可能性があります。

Hreflangを追加する必要がありますか？

異なる言語/地域のオーディエンスにサービスを提供するほぼ同一のページが2つある場合にのみ、Hreflangタグを追加する必要があります。ページの代替バージョンがない場合は、hreflangタグを追加する必要はありません。

Hreflangルール

hreflangタグを検証するには、特定のルールに従う必要があります。

1-リンクを返す-ページhreflangが代替ページにリンクしている場合、代替ページは最初のページにリンクしている必要があります。たとえば、英国のGymsharkにドイツ語のGymsharkページを指すhreflangリンクがある場合、ドイツ語のページには英国版へのhreflangリンクが必要です。

2-作業ページ-hreflangリンク先のページは、200ステータスコードを返す必要があります。言い換えれば、hreflangリンクは作業ページでなければなりません。

3-自己参照Hreflangタグ-hreflangリンクを含むページには、それ自体へのhreflangリンクも必要です。これを自己参照hreflangリンクと呼びます。自己参照hreflangリンクには、標準の言語/国の宣言を含める必要があります。

Hreflangの課題

hreflangとは何か、そしてそれがどのように機能するかを確立したので、なぜそれがSEOのこのような複雑な部分であるのかを議論することができます。実際、hreflangは、おそらくSEOの中で正しく理解するのが最も難しい部分の1つです。

これは、Googleのウェブマスタートレンドアナリストであるジョンミューラーからのツイートで、hreflangがいかに難しいかを説明しています。

タグの追加は非常に簡単ですが、上記の3つのルールを満たすhreflangタグを維持することは非常に困難な場合があります。

常に検証するには、異なるページ間のhreflangタグが同期している必要があります。 URLを変更するのと同じくらい簡単なことで、2つのページ間のhreflang接続が切断される可能性があります。

動的なページがあり、さまざまなチームによって管理されている複数のWebサイトがある場合、これがどれほど複雑になるかを想像し始めることができます。複数のWebサイトがある場合は、hreflangタグが壊れないように、チームが調整していることを確認する必要があります。

Hreflangの間違い

私たちは常に壊れたhreflangセットアップに対処します。これらは、私たちが遭遇する最も一般的なhreflangの問題です。

リターンリンクなし

私たちが目にする最も頻繁なHreflangの問題は、Hreflangの戻りリンクがないページです。これは、hreflangタグが常に機能するように整理する必要がある場所です。一方のページでURLパスが変更され、もう一方のページでは変更されない場合、hreflangタグは同期しなくなります。

200ページ以外

Hreflangタグは、200サーバー応答を返す作業ページを指す必要があります。 Webサイトが進化するにつれて、URLは変化します。これによりhreflangタグが破損するため、ページを廃止してリダイレクトする場合は、hreflangタグも更新してください。

自己参照Hreflangタグなし

奇妙に思えるかもしれませんが、ページにhreflangタグがある場合は、それ自体への自己参照hreflangタグも含める必要があります。これは、多くのWebサイトでよくある間違いです。

Hreflangタグを確認する方法

Hreflangタグチェッカー

hreflangタグを監査する最も簡単な方法は、Hreflangタグチェッカーと呼ばれるChrome拡張機能を使用することです。拡張機能がインストールされたら、任意のページにアクセスしてツールバーアイコンを押すだけです。次に、拡張機能は、現在のURLにhreflangタグがあるかどうかを確認します。

このツールの最も優れた機能は、実際にhreflangリンクをクロールし、検証チェックに合格したことを確認することです。

悲鳴を上げるカエル

hreflangタグを大規模に監査したい場合は、ScreamingFrogが頼りになるツールです。 Screaming Frogは、Webサイトをクロールし、クロール中に検出されたhreflangタグを検証します。

検索コンソール

SearchConsoleのLegacyReportsセクションに隠されたInternationalTargetingレポートがあります。このレポートにアクセスするには、左側のメニューで[レガシーツールとレポート]> [インターナショナルターゲティング]に移動します。

このレポートには、Webサイトにあるhreflangタグの数と、hreflangエラーがある場所の詳細が表示されます。

Hreflangを追加するさまざまな方法

Hreflangを実装するものは複数あります。上記のHTMLタグ方式は、hreflangを設定する最も簡単な方法ですが、2つの代替アプローチがあります。

XMLサイトマップ

あなたはXMLサイトマップに精通しているかもしれません。 XMLサイトマップを更新して、サイトマップ内の各ページのhreflang宣言を含めることができます。複雑なシステムを備えた大規模なWebサイトの場合、これが最も簡単なアプローチになることがよくあります。

HTTPヘッダー

Webブラウザーがページにアクセスするたびに、サーバーはそのページに関する情報をWebブラウザーに返します。これはHTTP応答と呼ばれます。 HTTPヘッダー応答でhreflang情報を返すようにサーバーを構成できます。

ShopifyにHreflangを追加する方法

では、実際にどのようにしてhreflangタグをShopifyに追加しますか？ほとんどのコンテンツ管理システムと同様に、Shopifyには、プラットフォームで実行できることと実行できないことに影響を与えるニュアンスがあります。 XMLサイトマップまたはHTTPヘッダーメソッドを介してShopifyにhreflangを追加することは可能ですが、かなりの技術的構成が必要になるため、お勧めしません。

Shopify Webサイトの場合、Hreflangを実装するための推奨されるアプローチは常にHTMLタグです。サイトにhreflangタグを物理的に追加するのはかなり簡単ですが、hreflangタグが常に検証されるようにする必要があります。上記の3つのルールを覚えておいてください。

代替ページからのリターンhreflangリンクが必要です
代替ページは有効なURLである必要があります
hreflangタグを含むページには、自己参照型のhreflangタグが必要です。

アプリを介してShopifyにHreflangを追加する

ページにHreflangタグを追加するShopifyアプリがいくつかあります。 WeglotやLangifyなどの翻訳アプリは、Hreflangタグを自動的に生成し、ページに追加します。

アプリはShopifyストアにhreflangタグを追加できますが、私たちの経験では、これは最善の方法ではありません。アプリのアプローチは、多言語を提供する単一のストアがある場合にのみ機能します。ほとんどのアプリは、言語と国のhreflangターゲティングを提供しておらず、異なるドメインにまたがる複数のストアを考慮していません。 Shopifyアプリは、hreflangに推奨されるアプローチではありません。

Hreflangタグをtheme.liquidファイルに追加します

同じページとURLを持つ2つのストアがある場合（ドメインのみが異なる場合）、有効なhreflangタグを追加するのはかなり簡単です。 2つのWebサイトは完全なクローンであるため、サイトAのすべてのページに、サイトBに同等のWebサイトがあることがわかります。

したがって、テーマコードを編集して、表示されているページのURLパスを使用してhreflangタグを動的に作成できます。

これは、以下のリキッドコードが行うことです。

 <link rel="alternate" hreflang="x-default" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" /> <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" hreflang="en-GB" /> <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.us.mystore.com' }}" hreflang="en-US" />

このコードスニペットは、 theme.liquidファイルのセクション。 'mystore.com'インスタンスを実際のドメイン名に置き換える必要があります。このスニペットが配置されると、ページは正規のページを使用してhreflangタグを出力し、URLパスを作成します。

この方法ではWebサイトのコードを編集する必要があるため、このアプローチを選択する場合は、Shopifyの専門家を雇って変更を適用することを強くお勧めします。

カスタムフィールドを使用する（Shopify Hreflangの推奨アプローチ）

URLハンドルが一致しない何千もの製品を含む複数のShopifyWebサイトにHreflangタグを追加するにはどうすればよいですか？ページごとにhreflangタグを追加する時間はなく、アプリはこれを行うことができません。

このシナリオでは、カスタムフィールドと呼ばれる別のアプリを使用することをお勧めします。カスタムフィールドを使用すると、Webサイトに完全に新しいメタフィールドを作成できます。 Shopifyで複雑なhreflangの状況に対処するときはいつでも、クライアントがカスタムフィールドを使用してhreflangメタフィールドを作成することをお勧めします。 hreflangメタフィールドの値はに出力されますページのセクション。

このアプローチでは、Excelで独自のhreflangタグを作成し、ページごとにカスタムフィールドに直接追加できます。

さらに良いことに、Custom Fields Plusプランがある場合は、csvアップロードを介して製品のhreflangタグをインポートできます。私たちは定期的にこのアプローチを使用して、数千の製品hreflangタグをShopifyに数分でアップロードします。

カスタムメタフィールド（Shopifyエキスパートが必要）を設定して独自のhreflangタグを作成する必要があるため、このアプローチは最も単純ではありませんが、大規模なShopifyhreflang管理にははるかに効果的です。独自のhreflangタグを簡単に作成する方法が必要な場合は、AleydaSolisの無料のhreflangタグジェネレーターをお勧めします。

国際ドメイン（新規）

Shopifyは最近、InternationalDomainsと呼ばれる新機能を発表しました。この開発により、Shopifyマーチャントは、異なる言語/国をターゲットとする代替ドメイン/サブドメインにストアを表示できるようになります。

国際ドメインでは、対象国の2文字のISOコード（gb.yourdomain.comなど）を使用して代替ドメイン/サブドメインを登録します。その後、Shopifyは各ドメイン/サブドメインにわたってhreflangタグを自動的に構成します。これを行う方法の完全な手順は、Shopifyにあります。

国際ドメインにはいくつかの欠点があります。ドメイン全体でまったく同じページと製品をホストする必要がありますが、これはすべての販売者に適しているわけではありません。また、異なるドメイン間でコンテンツを編集することもできなくなります（翻訳を除く）。

そうは言っても、これは大きな前進であり、Shopifyが商人に耳を傾けてきたことを示しています。やがて、InternationalDomainsがShopifyの推奨hreflangソリューションになると確信しています。

Hreflangのヘルプが必要ですか？

hreflangの管理は、SEOの最も複雑な部分の1つです。私たちのSEOチームは、数十のWebサイトの国際SEOをうまく管理しています。国際SEOの最適化についてサポートが必要な場合は、お知らせください。