Shopifyで多言語対応のECサイトを運営する際、適切なタグの設定についてお悩みではありませんか？ Hreflangタグは、異なる言語や地域ごとのページを検索エンジンが正しく認識できるようにする重要なSEO要素です。本記事では、Shopifyが提供する標準的な機能を活用した設定方法と、エンジニア向けのカスタマイズ手順を具体的に解説します。
Hreflangタグの概要とメリット
Hreflangタグは、検索エンジンが異なる言語や地域ごとのページを正確に理解し、適切にインデックスするのを助ける重要なHTML属性です。これにより、多言語対応サイトでのSEO効果を大幅に向上させることができます。
例えば、同じ商品ページが複数の言語や地域に対応している場合、Hreflangタグが正しく設定されていれば、ユーザーが使用している言語や地域に基づいたページが優先的に検索結果に表示されるようになります。結果として、ターゲットとする市場での検索順位の向上や、適切な顧客層へのリーチが期待できます。
ユースケース
- 多言語対応のShopifyストアを運営する際に、ユーザーが適切な言語・地域のページにアクセスできるようにするために利用します。
- 検索エンジンにおいて、複数言語で提供されているページの中で適切なバージョンをインデックスさせるために使用します。
- 国や地域に応じた商品やキャンペーンページを提供する場合に、対象ユーザーが正しいページに誘導されるようにする目的で利用します。
利用API・関数
本文
hreflangタグは、多言語対応ストアのSEO最適化をサポートするために必要なHTML属性です。このタグを正しく設定することで、検索エンジンが異なる言語や地域のページを適切に認識し、ユーザーが期待するコンテンツを提供できます。
以下では、hreflangタグを設定する手順を詳しく解説します。
実装手順
- テーマの編集を開始する
Shopify管理画面にログインし、「オンラインストア」>「テーマ」>「アクション」>「コードを編集」を選択します。
- 適切なテンプレートファイルを選択する
編集したいテーマのlayout/theme.liquidファイルを開きます。
- Liquidタグで
hreflangを設定する
言語と地域に対応するリンクを動的に生成するため、以下のコードを<head>タグ内に追加します。
サンプルコード
以下の例では、コレクションページと商品ページにhreflangタグを追加する方法を示しています：
<head>
<!-- head element content -->
<link rel="alternate" hreflang="en" href="your-store.myshopify.com/collections/{collection-name}" />
<link rel="alternate" hreflang="es" href="es.your-store.myshopify.com/collections/{collection-name}" />
</head>
動作確認
実装後、以下の点を確認してください。
- ブラウザでソースコードを表示し、
hreflangタグが正しく出力されているか確認します。 - Google Search Consoleの「URL検査ツール」を使い、タグが適切に認識されていることを確認します。
注意事項
- 言語コードと地域コードの適切性
locale.iso_codeは、正確なISO 639-1（言語コード）とISO 3166-1（地域コード）を使用していることを確認してください。不適切なコードはSEOに悪影響を与える可能性があります。
- 多言語対応設定の確認
Shopifyストアが多言語対応であることを事前に設定する必要があります。未設定の場合、このコードは意図した動作をしません。
- 重複コンテンツの回避
同じコンテンツを複数のURLで公開している場合、hreflangタグを正しく設定しないと重複コンテンツとみなされるリスクがあります。