Liquid、JavaScriptなどに関する質問
国内向けに、shopifyにて運営しているサイトで海外向けにも展開したいと考えております。
ccTLDを取得するか、サブドメインにて運用を考えておりまして、もう1アカウントshopifyアカウントを開設し、そちらで越境向けのサイトを構築しようと考えております。
その場合、hreflangタグの設定はした方が良いのでしょうか。
また、タグを入れる場合はどのようにしたらいいでしょうか。
教えていただければと思います。
解決済! ベストソリューションを見る。
成功
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がちゃんと認識してくれるか微妙かもしれませんね。
アカウントを分けるということで、ショップの多言語化ではなく、別言語、ドメインのショップを2つ作ると理解しました。
ショップ間で相互リンクを貼るということでしょうか?
https://moz.com/learn/seo/hreflang-tag
ショップの多言語化ではなく、別言語サイトの立ち上げです。
ショップ間で相互リンクを貼るのは行うのですが、例えば、下記のようにページをつくると思うのですが、それぞれのページのヘッダーなどに
対応するタグを設置しなければいけないという認識なのですが、こちらはあっていますでしょうか。
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/”>
また、その場合に全てのページに手作業で記述するわけにはいかないと思いますので、対応するアプリや、動的にタグを生成できる方法などはあるのでしょうか。
教えていただけると助かります。
個人的にはドメインを分ける場合はhreflangはそれほど気にする必要はないかと思うのですが、もし指定したい場合は、
テーマのコード編集でtheme.liquidを開いて、そのheader内に記述すれば全てのページに適用されます。
ご返信ありがとうございます。
私も、同一ドメイン内で複数の言語が存在する場合は、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 }}”>
よろしくお願いします。
以下のliquidを使えば可能かと思います。
https://shopify.dev/docs/themes/liquid/reference/objects/shop#shop-url
教えていただきありがとうございます。
その記述の場合下記の「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/”>
成功
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がちゃんと認識してくれるか微妙かもしれませんね。
的確にアドバイスいただきましてありがとうございます。
実装できそうです。
教えていただきましたコードで、商品ページとコレクションページをhrefnalg設定可能なのですが、その際にコードを出し分けることは可能なのでしょうか。
最悪ヘッダーに、2つとも記述してしまおうと思うのですが、分岐させる方法等あれば教えていただけるとありがたいです。
よろしくお願いします。
en-US と、jaを出し分けるということでしょうか?
liquidで、shopのlocaleを取得できるので、それで場合分けするなどはいかがでしょうか?
お世話になっております。
教えていただきました、下記コードで各ページ問題なく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 }}">
とても助かりました。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 7, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 30, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024