Using hreflang tags

If your store has multiple URLs for different languages and regions, then you can use hreflang tags to make sure that the correct site is displayed when a user finds your store using a search engine like Google.

For example, if your URL is www.mystore.shopify.com, you might also have a Spanish language version at www.es.mystore.shopify.com. You can add hreflang tags to your store's theme.liquid file to detect when a user has a Spanish language setting. When the user finds your store on a search engine, the Spanish version is automatically displayed at the top of the search results. Being able to detect the right language and location information improves the user experience and leads to higher SEO rankings.

What is a hreflang tag?

A hreflang tag is a link element that you add to your store's HTML header. Each hreflang tag identifies a localized version of your website's URL. Hreflang tags use the following syntax:

<link rel="alternate" hreflang ="es" href="http://es.www.mystore.com/" />'

You must add unique hreflang tags for each language or region URL. Hreflang tags work for multi-language URLs in the same domain, such as www.es.mystore.shopify.com and www.de.mystore.shopify.com, or for versions of your website that use a different domain, such as www.monmagasin.shopify.com.

Generating hreflang tags

There are many resources online that can generate hreflang tags for you. Try using "hreflang tag generator" as a search term online. Using a hreflang tag generator ensures that your hreflang tag uses the correct syntax and values specified by Google.

Adding hreflang tags to theme.liquid

After you have generated your hreflang tags, you must add them to your theme.liquid file.

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Layout folder, open theme.liquid.

  3. Locate the closing </head> tag.

  4. Paste the hreflang tag right above the closing </head> tag. When you are finished, your code should look like this:

Code sample showing hreflang tag pasted just above the closing head tag
  1. Click Save.

Want to discuss this page?

Visit the Shopify Community