Since I work with Shopify in our SEO agency in Venezuela, my intention is always to improve SEO as much as possible in this CMS, but I feel that the level of customization is limited in free options and many require programming knowledge.
Today I come to help you with my own code that implements hreflang in a simple way, without plugins and without complications, but you should know in which cases this will be useful to you.
When you can implement this hreflang code through Shopify meta fields
Shopify already has documentation to implement Hreflang in Theme Liquid, I leave you the documentation here.
But this code is different, in Shopify hreflang tags are generally added automatically, either in subfolders or subdomains, but when it comes to adding hreflang in independent domains, everything is chaos.
My code is a good fit for you if:
- You need highly customized hreflang tags for products or collections using external domains.
- Shopify’s default options aren’t cutting it due to non-identical URLs.
- You’re on a tight budget and can’t afford a specialist or paid plugin.
- You enjoy experimenting with new coding solutions.
Code to implement hreflang meta fields in shopify
This idea came up when we were trying to add the tags to a client with 2 stores in separate accounts, both in Shopify though.
If you know the cms, when you have an active domain in another account, the only way to add that domain to another store is by unlinking, but we didn’t have that option.
Create the meta fields, accessing custom data in Shopify, in the settings to be more exact.
Now in the list, select what type of pages you want to add the meta fields to, for this example I will use collections
Filling out the meta fields information
Depending on the language, you can customize the data and the code, in this case we need Hreflang for a site in English and Spanish, so it will be filled out as follows.
For Spanish:
- Name: Custom Spanish
- Namespace and key: custom.custom_spanish_url
- Description: Hreflang
- Type: URL
- And save, here is the image
For English:
- Name: Custom English
- Namespace and key: custom.custom_english_url
- Description: Hreflang
- Type: URL
Important notes
There are 2 meta fields, that is, first you create the Spanish one, and then you create the English one, it should look like this when they are already created.
Check in collections
Check in collections if the metafields have already been created, its operation is simple, add the corresponding urls for hreflang.
If you are on the Spanish site, in Custom Spanish you add the current url of the collection, and in Custom English you add the url of the language variant, the type of domain and name of the url does not matter.
Making hreflang code work in Shopify
At the moment they are just meta fields, they do nothing to improve Shopify SEO, but we will add Dysart Team’s code to fix this.
However, there is one detail, this code will only work depending on the language you configure in the tag code.
In this example, it is configured to generate the link in Spanish for “es-ES” and in English for “en-US”, you can make the necessary adjustments for other languages, in the same way as the tags are created manually, or I leave you my article to create hreflang for international SEO.
I leave the code below for you to copy and paste:
{% if template == 'collection' %}
{% assign custom_spanish_url = collection.metafields.custom.custom_spanish_url %}
{% if custom_spanish_url != blank %}
<link rel="alternate" hreflang="es-ES" href="{{ custom_spanish_url }}" />
{% endif %}
{% endif %}
{% if template == 'collection' %}
{% assign custom_english_url = collection.metafields.custom.custom_english_url %}
{% if custom_english_url != blank %}
<link rel="alternate" hreflang="en-US" href="{{ custom_english_url }}" />
{% endif %}
{% endif %}
Where you should add the code
You must add this code to the theme.liquid in the Shopify settings
If you still can’t find it, this image will help you find it:
In the 3 dots next to the “Customize” button you will be able to edit code.
What is the result of this?
When reviewing the code, we can see that the Hreflang code has already been added, and this issue has been resolved. All that remains is to add the reference tags in the other place so that your hreflang works properly.
Has this been useful to you?
Leave us your comments if you have had any problems, and we will be happy to help you. If this has been useful to you, you would help us a lot in this new venture. If you link us by recommending this content, or as an SEO agency on our Home Page, we will be very grateful.
We hope to see you here again to help you, our channels are open to collaborations, do not hesitate to contact us.
