shopifyアカウントを複数作成して越境サイトを構築する場合のhreflangの設定について

[BECOS]

国内向けに、shopifyにて運営しているサイトで海外向けにも展開したいと考えております。

ccTLDを取得するか、サブドメインにて運用を考えておりまして、もう１アカウントshopifyアカウントを開設し、そちらで越境向けのサイトを構築しようと考えております。

その場合、hreflangタグの設定はした方が良いのでしょうか。

また、タグを入れる場合はどのようにしたらいいでしょうか。

教えていただければと思います。

[junichiokamura]

アカウントを分けるということで、ショップの多言語化ではなく、別言語、ドメインのショップを２つ作ると理解しました。

ショップ間で相互リンクを貼るということでしょうか？
https://moz.com/learn/seo/hreflang-tag

[BECOS]

ショップの多言語化ではなく、別言語サイトの立ち上げです。

ショップ間で相互リンクを貼るのは行うのですが、例えば、下記のようにページをつくると思うのですが、それぞれのページのヘッダーなどに

対応するタグを設置しなければいけないという認識なのですが、こちらはあっていますでしょうか。

shop.com/about

en.shop.com/about

<link rel=”alternate” hreflang=”ja” href=”shop.com/about/”>
<link rel=”alternate” hreflang=”en-US” href=”en.shop.com/about/”>

shop.com/collections/tableware

en.shop.com/collections/tableware

<link rel=”alternate” hreflang=”ja” href=”shop.com/collections/tableware/”>
<link rel=”alternate” hreflang=”en-US” href=”een.shop.com/collections/tableware/”>

また、その場合に全てのページに手作業で記述するわけにはいかないと思いますので、対応するアプリや、動的にタグを生成できる方法などはあるのでしょうか。

教えていただけると助かります。

[junichiokamura]

個人的にはドメインを分ける場合はhreflangはそれほど気にする必要はないかと思うのですが、もし指定したい場合は、

テーマのコード編集でtheme.liquidを開いて、そのheader内に記述すれば全てのページに適用されます。

[BECOS]

ご返信ありがとうございます。

私も、同一ドメイン内で複数の言語が存在する場合は、hreflangの設定が必要だと認識していたのですが、少し古い記事ですが

下記の記事なのでは、ccTLD等の別ドメインだとしても設定するほうが良いとの見解でした。

ccTLDの場合は必ずしも「hreflang」を利用しなくてもいいという認識だったのですが、ベストプラクティスとしては、ccTLDのサイトであっても、Googleに正確に国や地域別のサイトの関係性を伝えるために「hreflang」を利用した方がいいということのようです。

https://www.tyto-style.com/blog/archives/3140

設定する場合、日本語サイト、英語サイトのそれぞれにtheme.liquidを開いて、動的にタグが各ページのheaderに記述されるように設置する必要があると思うのですが、どのようにコードは記述したら良いのでしょうか。

”{{ canonical_url }}”　この部分をどのように指定したらいいのかがわからず、教えていただけるとありがたいです。

<link rel=”alternate” hreflang=”ja” href=”{{ canonical_url }}”>
<link rel=”alternate” hreflang=”en” href=”en.{{ canonical_url }}”>

よろしくお願いします。

[junichiokamura]

以下のliquidを使えば可能かと思います。
https://shopify.dev/docs/themes/liquid/reference/objects/shop#shop-url

[BECOS]

教えていただきありがとうございます。

その記述の場合下記の「shop.com」を指定するコードだと思うのですが、shop.com以下のディレクトリを指定するためにはどのようにしたらいいのでしょうか。

shop.com/collections/tableware

en.shop.com/collections/tableware

<link rel=”alternate” hreflang=”ja” href=”shop.com/collections/tableware/”>
<link rel=”alternate” hreflang=”en-US” href=”een.shop.com/collections/tableware/”>

[junichiokamura · Accepted solution]

Liquidでやる場合は、

{{template}} オブジェクトで現在読み込まれているテーマのテンプレート名を取得して、どのページ（商品なのかなど）か判断した上で、対応するオブジェクトのurl属性を取得するとかでしょうか？
https://shopify.dev/docs/themes/liquid/reference/objects/product#product-url
https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#within

後は単純にload時にJSで現在のURIを取得して動的にタグを生成する方法もありますが、これだとGoogleがちゃんと認識してくれるか微妙かもしれませんね。

[BECOS]

的確にアドバイスいただきましてありがとうございます。

実装できそうです。

教えていただきましたコードで、商品ページとコレクションページをhrefnalg設定可能なのですが、その際にコードを出し分けることは可能なのでしょうか。

最悪ヘッダーに、２つとも記述してしまおうと思うのですが、分岐させる方法等あれば教えていただけるとありがたいです。

よろしくお願いします。

[junichiokamura]

en-US と、jaを出し分けるということでしょうか？

liquidで、shopのlocaleを取得できるので、それで場合分けするなどはいかがでしょうか？

[BECOS]

お世話になっております。

教えていただきました、下記コードで各ページ問題なくhreflangの設置ができました。

ありがとうございます。

<link rel="alternate" hreflang="ja" href="https://www.shop.com{{ product.url | within: collection | within: page | within: blog }}">
<link rel="alternate" hreflang="en" href="https://en.shop.com{{ product.url | within: collection | within: page | within: blog }}">

とても助かりました。