How do I correct misconfigured hreflang tags in my online store?

henkka01 · ‎11-06-2023

Hi,

I am getting the hreflang tags incorrectly configured in my shop, it sets as country SE although it should be the respective target market of the language. Where do I change the countries for the languages ?

See attached.

Thanks in advance!

richbrown_staff · ‎11-07-2023

Hi @henkka01 , head to Settings > Markets > (specific market) > Languages and domains to manage which langauges are used in which markets / which domains are used. By default the primary domain is used for all markets, so all languages are in all markets, unless you change this under 'Manage domains'

To learn more visit the Shopify Help Center or the Community Blog.

henkka01 · ‎11-08-2023

Hi,

Thanks for the help, but unfortunately I need some more help still as I cannot figure it out based on your answer.

To clarify, what I need is to change the hreflang tags. Currently the look like as follows

link rel="alternate" hreflang="x-default" href="https://xxx/">
<link rel="alternate" hreflang="sv-SE" href="https://xxx/">
<link rel="alternate" hreflang="en-SE" href="https://xxx/en">
<link rel="alternate" hreflang="de-SE" href="https://xx/de">

And I want to change them to

link rel="alternate" hreflang="x-default" href="https://xxx/">
<link rel="alternate" hreflang="sv-SE" href="https://xxx/">
<link rel="alternate" hreflang="en" href="https://xxx/en">
<link rel="alternate" hreflang="de-DE" href="https://xx/de">

Appreciate in advance any other advice you might have.

henkka01 · ‎11-10-2023

@richbrown_staff Hi,

Did you have time to review my last message, any thoughts on how to get it configured?

Alan15 · ‎04-16-2024

HI @henkka01 . Did you find a solution to this? I'm having the same issue

Need more help? Contact me here

fklein · ‎05-19-2024

Also having the same issue. Did anyone find a solution so far?

Alan15 · ‎05-20-2024

You can ask Shopify support to turn off the automatic generation of the hreftags, then add them yourself to the theme.liquid file. That worked for me.

Need more help? Contact me here

fklein · ‎05-20-2024

Super! I will absolutely do this. Thanks @Alan15 !

Do you happen to have an example of the theme.liquid code changes?
Or perhaps willing to share how to did this on your side?

Alan15 · ‎05-20-2024

HI @fklein . You should to put your own hreflang tags inside the <head></head> of the theme.liquid file. Here's an example:

<!-- Home page -->
{% if template == "index" %}
<link rel="alternate" hreflang="x-default" href="https://your-store-name.com/">
<link rel="alternate" hreflang="nl" href="https://your-store-name.com/">
<link rel="alternate" hreflang="de" href="https://your-store-name.com/de">
<link rel="alternate" hreflang="en" href="https://your-store-name.com/en">
<link rel="alternate" hreflang="fr" href="https://your-store-name.com/fr">
{% endif %}
<!-- Collection pages -->
{% if template == "collection" %}
<link rel="alternate" hreflang="x-default" href="https://your-store-name.com/collections/{{collection.handle}}">
<link rel="alternate" hreflang="nl" href="https://your-store-name.com/collections/{{collection.handle}}">
<link rel="alternate" hreflang="de" href="https://your-store-name.com/de/collections/{{collection.handle}}">
<link rel="alternate" hreflang="en" href="https://your-store-name.com/en/collections/{{collection.handle}}">
<link rel="alternate" hreflang="fr" href="https://your-store-name.com/fr/collections/{{collection.handle}}">
{% endif %}
<!-- Product pages -->
{% if template == "product" %}
<link rel="alternate" hreflang="x-default" href="https://your-store-name.com/products/{{product.title}}">
<link rel="alternate" hreflang="nl" href="https://your-store-name.com/products/{{product.handle}}">
<link rel="alternate" hreflang="de" href="https://your-store-name.com/de/products/{{product.handle}}">
<link rel="alternate" hreflang="en" href="https://your-store-name.com/en/products/{{product.handle}}">
<link rel="alternate" hreflang="fr" href="https://your-store-name.com/fr/products/{{product.handle}}">
{% endif %}
<!-- Individual pages -->
{% if template == "page" %}
<link rel="alternate" hreflang="x-default" href="https://your-store-name.com/pages/{{page.handle}}">
<link rel="alternate" hreflang="nl" href="https://your-store-name.com/pages/{{page.handle}}">
<link rel="alternate" hreflang="de" href="https://your-store-name.com/de/pages/{{page.handle}}">
<link rel="alternate" hreflang="en" href="https://your-store-name.com/en/pages/{{page.handle}}">
<link rel="alternate" hreflang="fr" href="https://your-store-name.com/fr/pages/{{page.handle}}">
{% endif %}
<!-- Blog posts -->
{% if template == "article" %}
<link rel="alternate" hreflang="x-default" href="https://your-store-name.com/blogs/{{article.handle}}">
<link rel="alternate" hreflang="nl" href="https://your-store-name.com/blogs/{{article.handle}}">
<link rel="alternate" hreflang="de" href="https://your-store-name.com/de/blogs/{{article.handle}}">
<link rel="alternate" hreflang="en" href="https://your-store-name.com/en/blogs/{{article.handle}}">
<link rel="alternate" hreflang="fr" href="https://your-store-name.com/fr/blogs/{{article.handle}}">
{% endif %}

I'm just using some liquid code to check the page template and adjusting the url as needed. When you have that set up contact the Shopify support, make sure you are logged in as the store owner when you make contact, if you don't have full permissions for the site they won't be able to turn off the automatic generation of the tags.

Need more help? Contact me here

fklein · ‎05-21-2024

Thanks! Got it working 🙂

Couple of tips for any others that may encounter this.

1. Disabling Shopify hreflang tags
You can disable the Shopify generated hreflang tags yourself (if preferred) per;
https://www.digitaldarts.com.au/hreflang-tags-shopify-app#shopifys-tags

2. Syntax for template detection
The syntax on the conditional checks, I could not get {% if template == "page" %} to work.
Apart from the index page. Which it does.
Other templates identified via {% if template.name == 'collection' %} etc

3. Question on sitemap.xml
I would like to create an additional hreflang specific sitemap to also submit to Google, complementary to the Shopify automated sitemap (which I understand cannot be modified).
Has anyone experience creating hreflang sitemaps for Shopify stores? @Alan15 perhaps? 🙂
Looks cumbersome to both initially create and also maintain!
Ideally an automated way would be great to also reduce manual error.

Alan15 · ‎05-23-2024

Sorry @fklein don't have any ideas on the hreflang specific sitemap, I would be interested if you find any info.

Need more help? Contact me here

prsediting · ‎10-06-2024

Hi Alan,

I just used your code which you provided. I replaced the URLs with my my store URL, however, it does not work for product and page templates. All other templates, homepage, collections and blog articles working fine with the code. Any idea what it I might have done wrong? thx Rene

Sergio_SFWEB · ‎05-30-2024

I think it can work this way. PS. It must be customized based on the language of the site

{%- comment -%}
 {{ content_for_header }}
{%- endcomment -%}

{% capture custom_content_for_header %}
 {{ content_for_header | replace: 'hreflang="en-IT"', 'hreflang="en-gb"' }}
{% endcapture %}
{{ custom_content_for_header }}

fklein · ‎05-31-2024

Exactly!

This in, in-fact the approach I used in the end.
As the alternative "rewrite" the hreflang tags in full, was causing issues with the translated URL slugs.

Good solution for now! Thanks.

Still looking for a sitemap solution.....but I am guessing that will need to be a custom solution.
I see nothing "out of the box" that offers this today.

Sergio_SFWEB · ‎05-31-2024

I don't think it's possible to edit the sitemap.xml
In any case, the html code is fine, we have already solved the problem 👌

https://developers.google.com/search/docs/specialty/international/localized-versions

Saif_002 · ‎09-06-2024

how would this apply if i have multiple language translations setup on my sub domains?

KanstanstinH · ‎08-21-2024

It works for me:

/layout/theme.liquid

{% assign content_for_header = content_for_header | replace: 'hreflang="fr-FR"', 'hreflang="fr"' %}
{{ content_for_header }}

How do I correct misconfigured hreflang tags in my online store?

How do I correct misconfigured hreflang tags in my online store?

Community Blog Articles