Skip to content
Blink SEO

Implementing Hreflang Tags

One of the biggest SEO challenges for international eCommerce brands is delivering content to audiences in different locations. Whether you’re targeting consumers across English-speaking markets or translating pages for multilingual audiences around the world, you need to know that search engines send visitors to the correct version of your website.

By using hreflang tags, you can tell search engines like Google which version of your page each audience should see.

The problem for eCommerce brands is that adding tags for every page can be time-consuming while the best approach for different platforms like WooCommerce and Shopify varies. In this article, we look at the best methods for adding hreflang tags to your international store on the top eCommerce platforms.

The hreflang problem for international stores

If you’re creating multiple versions of the same page for different languages/locations, every page with a unique URL needs its own hreflang tags. With custom-built websites, this is relatively easy because you can add the relevant hreflang tags to the <head>section of each page.

Better yet, you can create a php function to automatically generate the tags, based on the URL of the page.

Unfortunately, this isn’t so easy to do if you’re running an online store on one of the major eCommerce platforms like BigCommerce or Magento. Platforms like these place the <head>tags in universal files which are called into every page, making it difficult to add hreflang tags to individual pages.

Thankfully, adding HTML hreflang tags to individual pages isn’t the only approach you can take. You can manually add them to your XML sitemap and there are a number of performance benefits to this, too.

There’s another problem, though.

Many platforms (BigCommerce and Shopify included) automatically generate a sitemap for your store and don’t allow you to edit them.

Adding hreflang tags to international eCommerce websites isn’t always straightforward and the best approach to take depends on which platform you’re using. So let’s take a look at some of the options you have available on the big four platforms:

  1. WooCommerce
  2. BigCommerce
  3. Shopify
  4. Magento

First up, we’ve got WooCommerce, and this offers the greatest flexibility when it comes to adding hreflang tags.

Adding hreflang tags in WooCommerce

Thanks to WordPress’ infrastructure, there are three approaches you can take to adding hreflang tags to your WooCommerce store. Arguably, the easiest option is to use a plugin but you can also add tags manually to your sitemap or create some custom code to edit the <head> code, based on each page’s URL.

First up, the plugin approach.

Adding hreflang tags with a plugin

WPML is one of the most popular WordPress plugins for building multilingual sites on the world’s favourite CMS. It also provides a dedicated plugin called WooCommerce Multilingual that automatically adds hreflang tags to your pages – all you need to do is run through the initial setup.

WooCommerce Multilingual comes as part of WPML’s Multilingual CMS plan, which will cost you an initial $79, plus a yearly $59 renewal fee. 

Polylang is another option that offers a paid WooCommerce plugin for creating multilingual online stores. Prices start at €99 (one-off fee) and the hreflang features are similar to what you’ll be getting from WPML – you’re paying for convenience.

Keep in mind that both plugins offer translation features but you should always rely on expert human translators to create content for multiple languages, never automatic translation tools.

A free but less automated option is HREFLANG Tags Lite, which allows you to add hreflang tags to individual pages without the coding headaches.

The plugin lets you choose which pages you want to add tags to and you can manually select tags and add alternative URLs from the WordPress interface.

  

This might not be the most automated solution but the manual input reduces errors and makes them easier to diagnose.

Add hreflang tags to your sitemap

If you prefer not to use a plugin, you can also add hreflang tags manually to your sitemap. This is the cleanest approach in terms of website performance but time-consuming and you also have to wait for search engines to recrawl your site for updates to reflect in the SERPs.

The code you need to add to your XML sitemap is more bloated than the HTML markup you might be used to adding within <head> tags, too.

For example, here’s the code you need to add for just one of the URLs of a website with three language versions:

<url>
  <loc>http://example.com/en-gb/</loc> 
  <xhtml:link rel="alternate" hreflang="en-gb" href="http://example.com/en-gb/" /> 
  <xhtml:link rel="alternate" hreflang="fr" href="http://example.com/fr/" />
  <xhtml:link rel="alternate" hreflang="es"  href="http://example.com/es/" />
</url>

That’s the code you need to add for the UK homepage of our imaginary site, as defined within the <loc> tags. You’ll want to add one of the snippets above for each version of your site and ensure that the values of all versions are defined in each snippet, as shown in the xhtml:link tags above.

So, the full code snippet for all three languages would look something like this:

<url>
  <loc>https://example.com/en-gb/</loc>
  <xhtml:link rel="alternate" hreflang="en-gb" href="https://example.com/en-gb/" />
  <xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
  <xhtml:link rel="alternate" hreflang="es"  href="https://example.com/es/" />
</url>
<url>
  <loc>https://example.com/fr/</loc>
  <xhtml:link rel="alternate" hreflang="en-gb" href="https://example.com/en-gb/" />
  <xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
  <xhtml:link rel="alternate" hreflang="es"  href="https://example.com/es/" />
</url>
<url>
  <loc>https://example.com/es/</loc>
  <xhtml:link rel="alternate" hreflang="en-gb" href="https://example.com/en-gb/" />
  <xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
  <xhtml:link rel="alternate" hreflang="es"  href="https://example.com/es/" />
</url>

All you’re doing here is copying and pasting the first snippet and changing the URL defined in the <loc> tags. So there is a lot of copying and pasting involved but the manual workload is immense, regardless.

Using custom code to add hreflang tags to every page

If you don’t like either of the solutions we’ve looked at so far, the ideal compromise might be creating some custom code to add hreflang tags to the <head> section of your website, based on the URL of each page.

You can do this by adding a custom function to the function.php file of your theme to edit the code in header.php, depending on the current URL, using the wp_head hook. The problem is, we can’t give you a single code snippet that’s going to work for every domain structure and theme.

For example, here’s a code snippet suggested by WooCommerce developer Shadi Manna for an English language retailer running separate versions of its site for consumers in the US and Australia:

add_action('wp_head','set_meta_country', 10);
function set_meta_country() {
 global $wp;
 $current_url = home_url(add_query_arg(array(),$wp->request));
$blog_id = get_current_blog_id();
 if($blog_id == 1) {
 $us_url = $current_url;
 $au_url = str_replace(".com", ".com/au", $us_url);
 } elseif($blog_id == 2) {
 $au_url = $current_url;
 $us_url = str_replace(".com/au", ".com", $au_url);
 }
?>
 <link rel="alternate" href="<?php echo $us_url; ?>" hreflang="en-us"/>
 <link rel="alternate" href="<?php echo $au_url; ?>" hreflang="en-au"/>
 <?php
}

The function above automatically applies the relevant hreflang tags every time a page is loaded. Of course, you would need to edit the URL variables and add the relevant hreflang tags at the bottom of the snippet and probably work the code a little to get it working with your website.

If you’re comfortable with WordPress coding, the same principle applies.

Adding hreflang tags in BigCommerce

If you’re running your online store on BigCommerce, you haven’t got so many options when it comes to adding hreflang tags. The platform doesn’t allow you to edit your sitemap and there’s very little in the way of documentation that’s going to help you add tags to your pages.

Plenty of customers are asking for such documentation, as you can see from a quick Google search, but there’s very little to work with.

The first thing to note is that the <head> section of your BigCommerce store is located in a file named base.html and you can find it in templates > layout > base.html. This is where you need to add your hreflang tags using HTML markup, which should look something like this:

<link rel="alternate" hreflang="en-gb" href="https://example.com" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
<link rel="alternate" hreflang="es" href="https://example.com/es/" />

Much like WordPress’ header.php file, the base.html file in BigCommerce is a universal file that’s called into every page. So, once again, you’re going to have to create some custom code to edit this file, using the current page URL as a variable.

Unfortunately, there’s no single command for capturing the URL of the current page. Instead, BigCommerce uses a number of commands for different page types – for example, {{product.url}} for product pages and {{pages.url}} for content pages.

So you’ll have to create multiple functions for each type of page you’re looking to add hreflang tags to.

Adding hreflang tags in Shopify

Much like BigCommerce, Shopify automatically creates a sitemap of your store and restricts you from editing it. On the plus side, there are a number of apps that aim to help you create a multilingual store, similar to the plugins available on WordPress.

Weglot is a popular option and LangShop is a paid alternative that comes with a 14-day free trial. Keep in mind that these apps are only suitable for websites using a single domain (eg: subfolders for each language version) so they’re not going to help you if you’re managing sites across multiple domains.

If you want to add hreflang tags to the <head> section of your Shopify store, you can access it via the theme.liquid file of your theme. This is located in Online Store > Themes > Actions > Edit Code > Layout > theme.liquid.

Once again, this is a universal file but you can use Shopify’s replace command and shop.domain value to add hreflang tags based on the current URL.

The code should look something like this for British and US variations:

<link rel="alternate" hreflang="x-default" href="{{ canonical_url | replace: shop.domain, '4thandreckless.com' }}" />
<link rel="alternate" href="{{ canonical_url | replace: shop.domain, '4thandreckless.com'
}}" hreflang="en-GB" />
<link rel="alternate" href="{{ canonical_url | replace: shop.domain, ‘us. 4thandreckless.com' }}" hreflang="en-US" />
<link rel="alternate" href="{{ canonical_url | replace: shop.domain, '4thandreckless.com 
}}" hreflang="en" />


 

If you run into any problems, Shopify’s community forum is a little more proactive than BigCommerce so you should be able to get any help you need.

Adding hreflang tags in Magento

The easiest way to add hreflang tags to your site is to use an extension, similar to using a plugin on WordPress. The price of extensions varies greatly on Magento but the BSS Commerce SEO extension is a good place to start at $119.

 

The extension has a dedicated tool for managing hreflang tags across homepage, category, product and CMS page variations.

Alternatively, you can take a look at Amasty’s SEO Toolkit ($249), which allows you to add hreflang tags through the sitemap of your store.

     

As you may have guessed by now, Magento allows you to edit the sitemap of your store and this means you can manually add hreflang tags directly in your sitemap. From the Admin menu, head to  Marketing > SEO & Search > Site Map and either click on Add Site Map or edit your existing file.

All of the major eCommerce platforms have their strengths and weaknesses, many of which we’ve seen by looking at how to add hreflang tags on each of them. Technical SEO is particularly challenging for international retailers and you need the right expertise and/or the necessary tools to maintain a search presence across multiple markets.

For more guidance on hreflang tags and international SEO for eCommerce brands, you can contact us at info@blinkseo.co.uk or by calling 01603 928247.

Get in touch

Have a problem that Blink can help with? Let us know more about your project below and we’ll be in contact as soon as we can.