If you work in SEO, then the chances are you will have heard the term ‘hreflang tags’ being thrown around at some stage of your digital journey. This is particularly true if you’re tackling an international SEO campaign, or your website has content written in multiple languages. In these circumstances, the implementation of hreflang attributes is vital.
While the attribute itself is simple, getting an understanding of what they are, why they’re needed and how to implement them can be challenging. In fact, John Mueller himself said that hreflang is “one of the most complex aspects of SEO”.
TBH hreflang is one of the most complex aspects of SEO (if not the most complex one). Feels as easy as a meta-tag, but it gets really hard quickly.
— ? John ? (@JohnMu) February 19, 2018
With this beginner’s guide, I will be covering the correct implementation, Google’s official instructions and more!
Here’s everything this guide will cover:
- What is hreflang and why does it matter?
- How to check if you need hreflang tags
- How to create a hreflang tag
- Targeting locales
- Why you might need both language and locale.
- How to get started with hreflang tags [+FREE TEMPLATE]
- What you need to remember when implementing hreflang tags
- How to implement hreflang tags
- What’s the best way to implement hreflang tags?
- Hreflang’s impact on rankings
- Canonicalisation and international SEO
- How to align your international targeting with Google Search Console
What Is Hreflang and Why Does It Matter?
Hreflang is an HTML attribute that will effectively tell Google which language is being used on the page, in order for Google to serve the correct URL to users in SERPs.
The purpose of an hreflang tag is to indicate to Google that there is more than one version of your site available for users in different languages or from different countries. Generally, the URLs specific to language or country will be grouped whether that’s via a subfolder structure or a subdomain.
As an example, if we were to Google ‘Microsoft’ in the UK, we would be served this URL:
If we were located in Australia, however, we would be served this URL:
It is hreflang attributes which make this possible.
Hreflang tags are not a directive however, and instead, are a signal to Google. Having content on the pages that is also localised (i.e. specific lexicon variations such as bin vs. trashcan and localised pricing i.e. GBP and USD) when the same language is used but the region is different, is considered to be best practice to make the signals easier to understand for the search engine.
How To Check If You Need Hreflang Tags
Knowing whether or not you need hreflang tags on your website is simple – as soon as there is more than one version of your website for users from different countries or for different languages, then you are likely to need hreflang tags.
- You have a global website with an English, Spanish, French and Chinese language version.
- You have a website that targets the US and has both an English and a Spanish version.
- You have an English language website, with a version for the UK, the US and the rest of the world.
It is important to note that while Google and Yandex utilise hreflang tags, Bing and Baidu do not – instead, they use content-language HTML attributes.
How To Create A Hreflang Tag
The process of constructing an hreflang tag is simple. All you need to do is look up the code of your chosen language and fill in the tag. Hreflang supports two-letter ISO 639-1 language codes, such as:
- French – FR
- Haitian Creole – HT
- Icelandic – IS
- Japanese – JA
And so on.
Let’s put this into practice.
<link rel=”alternate” hreflang=” LANGUAGE CODE ” href=” URL ” />
As you can see here, all you have to do is fill in the chosen language code based on the variant of the page you are attributing the hreflang tag to, and input the URL itself.
For example, say we wanted to add a hreflang tag to Microsoft’s Spanish Applications page. We could add:
<link rel=”alternate” hreflang=”es” href=”https://www.microsoft.com/es-es/store/apps/windows” />
ES is the language code for Spain, and the URL is situated between the ” “.
As you can see, however, there is a slight differentiation in Microsoft’s language code setup, as they are also using regional references in their subfolder structure.
<link rel=”alternate” hreflang=”es” href=”https://www.microsoft.com/es-es/store/apps/windows”/>
We’ll cover that in the next section.
Many international websites will often simply target a language and leave it there when it comes to their hreflang tags, which is absolutely fine. In some cases, however, international sites, such as Microsoft, may also want to target a locale. This is used when you want to target a speaker of a particular language, in a particular locale.
In these situations, the syntax of the hreflang will be: hreflang=”language-country”
The code for locales is also a two-letter code, but in this situation, this in the IS0 3166-1 alpha-2 format.
Different countries around the world may speak the same language but in different locales. For example, in this format, Spain is mentioned 3 times with three different locale codes, as these countries speak Spanish or are owned by Spain, but have different locales:
ES – Spain
EA – Ceuta, Melilla (which is part of Spanish North Africa)
IC – Canary Islands
When it comes back to hreflang tags, this means that you may need to adapt your hreflang attribute to include both language and regional codes.
A key example for this, and one that is used most regularly, is the variation between UK and US English. As we know, that while the main language for both countries is English, there are different variations of the language such as:
- Trashcan / Bin
- Color / Colour
- Takeout / Takeaway
In this case, we may need to indicate to Google that we have both a US and a UK English version of the site.
To do this, we would use both language and regional codes within the hreflang attribute.
For US it would be: EN-US (English-US)
For UK it would be: EN-GB (English-Great Britain)
In practice this would look like:
<link rel=”alternate” hreflang=”en-us” href=”URL “/>
<link rel=”alternate” hreflang=”en-gb” href=”URL “/>
This is a simple example. But the same would apply to different locales with all languages, i.e. Spain.
Going back to our previous Microsoft example, we can see that Microsoft is using “es-es”. This means that they are targeting the language Spanish and the locale of Spain by their subfolder structure.
Therefore, the correct hreflang attribute would be:
<link rel=”alternate” hreflang=”es-es” href=”https://www.microsoft.com/es-es/store/apps/windows” />
If they were targeting the Canary Islands locale, then this would be “es-ic” and so on.
Why Might You Need Both Language & Locale
There are many situations where a country may speak multiple languages, or different countries may speak the same language but localisation may be prevalent (i.e. UK/US).
For example, in Canada, 21% of the population’s mother tongue is French and 57% of the population’s mother tongue is English, with either English or French being spoken by 98.2% of Canadians. Therefore, if you had a Canadian website, if you were to not target both of these languages, you may miss out on quite a large percentage of customers.
How To Get Started With Hreflang Tags
Knowing where and how to get started with your hreflang tags can be a little overwhelming, which is why we’ve put together this easy-to-follow template to help you to structure your pages, helping you to know how and where to attribute your hreflang tags. Download your free template here.
What You Need To Remember When Implementing Hreflang Tags
There are a number of things that you will need to remember when it comes to implementing hreflang tags.
- They are bidirectional
- Self-referential are best practice
- X-Default Tags are good to have
Bidirectional Hreflang Tags
It is important to remember that hreflang tags are bidirectional, meaning that they work in pairs. If an hreflang tag points to a specific page, then the page it is pointing to must return the favour, agreeing to the relationship that they have.
So, if you were to have a Spanish page pointing to an English variant, the English variant must point to the Spanish page also, acting almost as a circuit.
This is proof to the search engine that you are in control over the pages that you are pointing to and that it is a purposeful tag and signal.
When this circuit is not set up correctly, you may begin to see issues with wrong pages ranking, multiple pages ranking or confused page titles in SERPs.
Self-Referential Hreflang Attributes Are Considered To Be Best Practice
In 2018, John Mueller tweeted that hreflang attributes are “optional” considered to be “good practice”, although previous Google documentation stated that this wasn’t actually all that optional.
Self-referential hreflang is optional, but you’re right – it’s a good practice!
— ? John ? (@JohnMu) June 29, 2018
Google’s documentation, however, states clearly that: “Each language version must list itself as well as all other language versions”.
Therefore, if we had an English and a Spanish version of the same page, for example https://www.example.com/hello and https://www.example.com/hola then we would want to list both the self-referencing tag and the directional tag:
<link rel=”alternate” hreflang=”es” href=”https://example.com/hola” />
<link rel=”alternate” hreflang=”en” href=”https://example.com/hello” />
This would need to appear on both the Spanish and the English versions of the page.
Hreflang=’x-default’ – What Is It and Do You Need It?
The hreflang x-default tag allows you to specifically control what page a user will land on by default, if there is no appropriate language variant based on the user’s location or language settings.
Note – this is not mandatory, but it is recommended by Google that this is provided.
This would be displayed in the code like this:
<link rel=”alternate” hreflang=”x-default” href=”https://example.com/” />
How To Implement Hreflang Tags
According to Google’s official instructions, there are three separate ways to indicate language/locale versions of a page:
1: HTML Tags
Adding a hreflang tag element to the page header to indicate to Google the language/region variants of that page. This can be used in the event of there not being a sitemap or the ability to specify HTTP response headers.
Note: Many of the examples in this guide look at HTML tags, as this is typically the quickest and easiest way to implement, particularly for those new to hreflang.
All you need to do is to add the appropriate tags (covered below) into the <head> tag of the relevant pages.
2: HTTP Headers
HTTP headers can be returned with your page’s GET response which will inform Google of the language and region variant. This is particularly useful for non-HTML files, as there is no <head> in these types of files for an HTML tag to be added.
This can be used on normal web pages as well, but is more commonly used on non-HTML files.
An example of what this can look like:
The sitemap can be used to inform Google of the different language and region variants by adding a <loc> element specifying a single URL, with child <xhtml:link>. This will list every language/locale variant of the page itself. In the event that you have 5 versions of a page in different languages/regions, then the sitemap will have 5 entries, each with 5 identical child entries.
What’s The Best Way To Implement Hreflang Tags?
The method of implementation will depend entirely on the size of the international site, the access you have to the site, your level of knowledge, and the page itself.
For example, if you are looking to add hreflang tags to a bunch of PDFs on your site, then the best method of implementation would typically be HTTP Headers (as there is no <head> to add an HTML tag to, as PDFs are not HTML pages).
The exact way that you will implement this will depend on the method, the CMS you are using, and if you have plugin or developer support.
At Absolute Digital Media, we’d be happy to discuss what option would be of best practice for your individual website.
Hreflang’s Effect On Rankings
There is no guarantee or reference to hreflang attributes helping to increase rankings or to improve traffic to a website. The sole purpose of hreflang attributes is to help them to swap the correct version of a page on the search results to meet the user’s location and language preferences based on how they are searching.
Google’s Gary Illyes clarified this in 2019, stating that the hreflang attribute is not a ranking signal, but does assist with bringing more targeted traffic to the site:
“You will NOT receive a ranking benefit per se, at least not in the internal sense of the term. What you will receive is more targeted traffic.”
Canonicalisation In International SEO
Google recommends not to use a canonical tag (i.e. rel=“canonical” across either a country or a language version of the site), instead preferring the use of hreflang which will allow the most appropriate page based on language or region to show up in SERPs. Canonicalisation can, however, be used within a country or language version, in the event of duplicate content issues to indicate to Google which version of the URL is the most dominant and preferred.
How To Align Your International Targeting With Google Search Console
Once you have implemented hreflang on your website, it is important to create a Google Search Console property for each and every language or country version of your website. Having separate properties can help you to closely monitor any indexation issues or to closely analyse any search queries as part of an ongoing SEO campaign, specific to a language or country.
To do this, you will simply need to follow these steps:
- Go To Google Search Console
- Click ‘Add A Property’
- Add The Exact URL of each country or language versions (i.e. subdomain, directories, subfolders etc.)
Once this has been added to your Google Search Console, you will then also want to consider country targeting. This function was a part of the old version of Google Search Console and is yet to be integrated into the new style. It does, however, provide you with an easy way to ensure the correct property is being targeted to the correct country, alongside your hreflang attributes.
For example, some country targeting options include:
|Website Version||Language||Countries||Hreflang value||GSC Target|
|/uk||English||United Kingdom||en-gb||United Kingdom|
|/us||English||United States||en-us||United States|
Hreflang tags are not suitable for every site and are only necessary when you have a multi-lingual site or the same site targeting a multitude of countries. There are three different methods of implementation, along with two different ways to structure your hreflang tags. As John Mueller said, hreflang is a pretty complex part of SEO.
Sophie is our Client Services Director, who’s key responsibility is to build strong client relationships and retain clients, directly and train and develop the skills of multiple departments who have read more.