Adding a hreflang tag to second shopify store

Roland · ‎08-08-2024

Hi everyone

I hope you can help. We have the following task. We have 2 shopify stores that are currently being set up and run under different URLs

* One for the EU market (https://28ef06-fb.myshopify.com)
* One for the UK

We want to run the same blog posts on both sites and according to the SEO agency we need the hreflang tags

Currently the hreflang tags in the EU store look like this:

<link rel="alternate" hreflang="x-default" href="https://28ef06-fb.myshopify.com/blogs/rezepte/kaspressknodel-mit-tzatziki">
<link rel="alternate" hreflang="de-AT" href="https://28ef06-fb.myshopify.com/blogs/rezepte/kaspressknodel-mit-tzatziki">
<link rel="alternate" hreflang="en-AT" href="https://28ef06-fb.myshopify.com/en/blogs/recipes/kaspressknoedel-with-tzatziki">

What we need now is the hreflang tag for the UK store, so:

<link rel="alternate" hreflang="x-default" href="https://28ef06-fb.myshopify.com/blogs/rezepte/kaspressknodel-mit-tzatziki">
<link rel="alternate" hreflang="de" href="https://28ef06-fb.myshopify.com/blogs/rezepte/kaspressknodel-mit-tzatziki">
<link rel="alternate" hreflang="en" href="https://28ef06-fb.myshopify.com/en/blogs/recipes/kaspressknoedel-with-tzatziki">
<link rel="alternate" hreflang="en-UK" href="https://uk-shop.co.uk/blogs/recipes/kaspressknoedel-with-tzatziki">

how can i manage this 2 points

* adding the new hreflang tag with the UK link

* changing the hreflang tag from "de-at" to "de" and "en-at" to "en"

Thank you so much for your effort.

Best Roland

tim · ‎08-08-2024

How are your current hreflangs code is output -- is it hard-coded in liquid or it's output by Shopify markets?

If it's done automatically by markets, then you'd need to disable this functionality (https://help.shopify.com/en/manual/international/international-domains/setting-up-unique-urls/hrefla...) because it's designed to work with single store.

You may want to have a look at https://www.digitaldarts.com.au/hreflang-tags-shopify and possibly have a look at their app.

When creating hreflangs it's important to not create links to nowhere, which you'd need to address unless your sites are perfectly in sync.

Otherwise you can easily output them with liquid...

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

conversionist · ‎08-08-2024

o manage the hreflang tags for your Shopify stores, follow these steps:

1. Adding the New hreflang Tag for the UK Link:

You'll need to manually add the new hreflang tag for the UK store in your theme's Liquid files where the blog posts are rendered.

Locate the Blog Template: In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
Edit the Blog Post Template: Find the file that handles blog posts, usually something like blog.liquid or article.liquid.
Add the UK hreflang Tag: Insert the following line within the <head> section of the template:

<link rel="alternate" hreflang="en-UK" href="https://uk-shop.co.uk{{ request.path }}">

This will dynamically generate the UK link based on the current blog post path.

2. Changing the hreflang Tag from de-AT to de and en-AT to en:

You can update the existing hreflang tags by modifying the Liquid template as follows:

Replace de-AT with de:

<link rel="alternate" hreflang="de" href="https://28ef06-fb.myshopify.com{{ request.path }}">

Replace en-AT with en:

<link rel="alternate" hreflang="en" href="https://28ef06-fb.myshopify.com/en{{ request.path }}">

3. Update for Each Blog Post:

Make sure that these tags are dynamically generated for each blog post by using the {{ request.path }} Liquid variable which fetches the current URL path.

Building 100 Shopify apps for that BMW M5 dream

Follow the journey at https://www.youtube.com/@conversinist
https://
conversionist.online/
Buy me a coffee

Roland · ‎08-08-2024

Hi. First thanks for the detailed answer.

If I insert <link rel="alternate" hreflang="en-UK" href="https://uk-shop.co.uk{{ request.path }}"> in the first line of main-article.liquid, then the code is not displayed in the <head>, but in line 3706 of the page.

I am using the Dawn theme. How do I get the entry into the head?

tim · ‎08-08-2024

How are your current hreflangs code is output -- is it hard-coded in liquid or it's output by Shopify markets?

If it's done automatically by markets, then you'd need to disable this functionality (https://help.shopify.com/en/manual/international/international-domains/setting-up-unique-urls/hrefla...) because it's designed to work with single store.

You may want to have a look at https://www.digitaldarts.com.au/hreflang-tags-shopify and possibly have a look at their app.

When creating hreflangs it's important to not create links to nowhere, which you'd need to address unless your sites are perfectly in sync.

Otherwise you can easily output them with liquid...

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

Roland · ‎08-09-2024

it's done automatically. (I use the Dawn-Theme)

I quess in the language-localization.liquid

 {%- for language in localization.available_languages -%}
        <li class="disclosure__item" tabindex="-1">
          <a
            class="link link--text disclosure__link caption-large focus-inset"
            href="#"
            hreflang="{{ language.iso_code }}"
            lang="{{ language.iso_code }}"
            {% if language.iso_code == localization.language.iso_code %}
              aria-current="true"
            {% endif %}
            data-value="{{ language.iso_code }}"
          >
            <span
              {% if language.iso_code != localization.language.iso_code %}
                class="visibility-hidden"
              {% endif %}
            >
              {%- render 'icon-checkmark' -%}
            </span>
            <span>
              {{ language.endonym_name | capitalize }}
            </span>
          </a>
        </li>
      {%- endfor -%}

tim · ‎08-09-2024

No, this is different -- it's a language selection element and hreflang property is used on these links to hint at the language of the page this link points too.

Here we're talking about actual <link hreflang=...> elements and I believe they are output by Shopify Markets as I've guessed. They are not something you can edit, you'd need to disable them as mentioned in Shopify document I've linked above.

Unless! you'd be ok with supplementing these default hreflangs with your own and you do not have markets defined on your UK shop

(because if you have markets on your UK shop, it will output default hreflangs pointing to itself which is not what you want, you want them to point at your main store).

Then you could output your own hreflangs in UK store, by adding liquid code.

So, I'd be starting by contacting Shopify support to disable Markets-based hreflangs, then it's either use an app by @Josh_Uebergang or custom liquid code (a good starting point is available at the DigitalDarts page I've mentioned above as well) .

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

Roland · ‎08-12-2024

Thank you very much for the support. We will try it with the app from DigitalDarts.

Adding a hreflang tag to second shopify store