How to correctly generate hreflang tags for different subfolders?

Xavi73 · ‎10-13-2023

Hi everyone,

When working with different markets Shopify generates automatically hreflang tags which usually aren't correct. Recently, for a client that has 5 different languages automatically it generated more than 500 lines of hreflang, which doesn't make any sense. We asked Shopify to remove them in order to be able to add our own ones. We thought this would work, but unfortunately not fully. Here is an example of another client. What we added is:

{% if hrefhandle %}
{%- liquid
assign hrefhandle = hrefhandle | remove: "/en"
assign hrefhandle = hrefhandle | remove: "/en-ar"
assign hrefhandle = hrefhandle | remove: "/en-eu"
assign hrefhandle = hrefhandle | remove: "/en-int"
assign hrefhandle = hrefhandle | remove: "/es-int"
assign hrefhandle = hrefhandle | remove: "/es"
-%}
<link rel="alternate" hreflang="es-es" href="https://domain.com{{ hrefhandle }}" />
<link rel="alternate" hreflang="en" href="https://domain.com/en-int{{ hrefhandle }}" />
<link rel="alternate" hreflang="en-gb" href="https://domain.com/en-eu{{ hrefhandle }}" />
<link rel="alternate" hreflang="es" href="https://domain.com/es-int{{ hrefhandle }}" />
<link rel="alternate" hreflang="en-sa" href="https://domain.com/en-ar{{ hrefhandle }}" />
<link rel="alternate" hreflang="x-default" href="https://domain.com/en-int{{ hrefhandle }}" />
{% endif %}

The problem with this is that no matter the subfolder that I visit, Shopify then automatically adds the same handle for all versions, for both Spanish and English versions. Following the example, I got:

when it should be:

Is there any way to solve this properly?

How to correctly generate hreflang tags for different subfolders?

How to correctly generate hreflang tags for different subfolders?

Community Blog Articles