Guide to Hreflang tags for SEO
Author:
Categorised In:
Share:
Hreflang tags are essential for any online business with an international presence. They help get the right people to the right version of your website, avoiding confusing User Experiences and increasing your chance for a sale.
For the non-technical audience, hreflang tags essentially work like the Points system on a train track, directing the train to its intended destination. Imagine the track is your user’s journey, the Point is a Search Engine and the destination is an international version of your website.
Is that a convoluted enough metaphor for you? Well then, let’s get into it.
What is a Hreflang Tag?
A Hreflang tag is a piece of HTML code that sits in the <head> container of your website’s back-end code.
In more technical words, a Hreflang tag gives a direct instruction to Search Engines to only serve a certain version of your website for a particular Country or Region’s Search Results. I.e. if your website had a UK and US version, you’d want the UK version to appear in the UK Search Results and vice versa.
How Does a Hreflang Tag Work?
Search Engines will cross-reference the information they receive from your Hreflang tag and marry it up to a user’s physical location (where possible) as well as the language settings assigned to their keyboard.
This ensures that the correctly stated version of the website will appear in the correct Country/Region’s Search Engine.
Example of a Hreflang Tag
Below is an example of a Hreflang tag:
- <link rel=”alternate” href=“https://www.apple.com/”hreflang=“en-US”/>
- <link rel=”alternate” href=“https://www.apple.com/ae-ar/” hreflang=“ar-AE”/>
The key variables you need to worry about are highlighted in red and blue
- Href: This section of the code is used to define what page you’d like to appear for a particular Country or Region
- Hreflang: This defines the language and Country/Region in your (above-stated) URL that should appear in the Search Results.
X-Defaults
You’ll sometimes find an “x-default” attribute in the “Hreflang” section of your tag.
This acts as a failsafe, telling Search Engines that if a user doesn’t meet the criteria stated in other hreflang tags, to go to that destination.
The most common X-default destination is the English-speaking version of your website, as this is the most commonly spoken language across the world. Alternatively, you can set the X-default to a page that allows the user to choose which language they’d like to browse the website in and help them navigate accordingly.
An understanding of how Language and Country Codes work is fundamental when creating a Hreflang tag, as you want to ensure your website appears for the correct languages and location-specific Search Engines.
We’ll dissect the below example:
<link rel=”alternate” href=”https://www.apple.com/ae-ar/” hreflang=”ar-AE” />
The first part of the code (highlighted in green) defines the language this page is intended for. In this example, “ar” means Arabic. This will be cross-referenced with language settings of a user’s keyboard and, if there’s a match, it’s a strong indicator to Search Engines that the user’s primary language is Arabic.
The second part of the code (highlighted in orange) defines the Country/Region in the URL is intended to appear for. In this case, “AE” is the Country Code for the United Arab Emirates.
To sum it all up, this Hreflang tag is implemented correctly for people who speak Arabic in the United Arab Emirates.
How To Implement a Hreflang Tag
To implement a Hreflang tag, you must remember two fundamental things:
1. The Hreflang tag code must be configured correctly:
Always make sure your Hreflang tag is following the below rules:
- Reference the correct page
- Reference the correct Language & Country
- Ensure it’s in the <head> container of your HTML code
2. You must have a reciprocal link
Hreflang tags come in pairs, so you must ensure that whichever page you’re referencing in your tag also has a tag pointing right back at you.
For example, the below tag was found in the HTML of https://www.apple.com/uk/ :
<link rel=”alternate” href=”https://www.apple.com/ae-ar/” hreflang=”ar-AE” />
This Hreflang tag says that if your primary language is Arabic and you’re located in the United Arab Emirates, Search Engines must serve up https://www.apple.com/ae-ar/ instead of https://www.apple.com/uk/
However, Search Engines won’t understand this connection unless you have a similar piece of Hreflang on the /ae-ar/ page that points to itself, essentially corroborating/confirming that they are alternate pages of each other.
So, when I visit https://www.apple.com/ae-ar/ we see the same tag:
<link rel=”alternate” href=”https://www.apple.com/ae-ar/” hreflang=”ar-AE” />
Which is correct!
If this reciprocal (or “return”) link was missing, the hreflang would fail and it would be as though there are no hreflang tags at all. Definitely not one to make a habit of!
Below are some ways you can implement Hreflang tags on your International website:
Plugins
There are many CMS out there that have a plethora of Plugins that make implementing Hreflang tags an absolute doddle, taking away the necessity for hard-coding these into your website and allowing flexibility for page changes in the future.
Below is an example of a plugin you can install in a standard WordPress CMS:
Polylang
The Polylang WordPress plugin allows you to translate content, automatically create alternate pages and implement hreflang tags at scale.
The cherry on top is that it is also fully compatible with WooCommerce, meaning if you run an E-Commerce website and are looking to expand to international regions, you’re already covered and the process should be pain-free.
Add Directly to HTML Code
As mentioned above, Hreflang tags sit in the <head> container of your website’s HTML code. It’s, therefore, possible to add Hreflang tags into your HTML code directly, but this is normally a manual process and can take time, especially with larger enterprise-scale websites.
A way that Embryo has found a way around this in the past is by coding in a custom PHP script to the WordPress installation, which analyses the URL of a page and, if the exact same URL existed in international subfolders, it would create and implement the hreflang tag accordingly.
I.e. Example.com has a subfolder for their English-speaking UK audience (en-GB) and another one for their English-speaking US audience (en-US).
The custom PHP script would analyse URLs across the entire site, find matches, and assign the appropriate hreflang tag. So, if example.com/en-us/about-us and example.com/en-gb/about-us/ both exist, the PHP script will kick in and ensure that the en-us version appears for English-speaking people in the US and the en-gb version appears for English-speaking people in the UK.
Complicated – but effective!
XML Sitemap
The XML Sitemap of your website is used to tell Search Engines how to crawl your site, defining which pages are higher or lower priority and how frequently they should be crawled.
But did you know that you can also use your XML sitemap to define hreflang tag attributes? (pause for gasps)
This follows the same logic/structure of a hreflang tag, with slight adaptations to ensure it can be read properly by Search Engines in the XML file. Example below:
<url>
<loc>https://example.com</loc>
<xhtml:link rel=”alternate” hreflang=”en-GB” href=”https://example.com/en-gb/”/>
<xhtml:link rel=”alternate” hreflang=”en-US” href=”https://example.com/en-us”/>
</url>
Now, this process can be very time-consuming if not working efficiently. I’d recommend utilising the free XML Sitemap Generator on TechnicalSEO.com, where you can fill in their XML Hreflang Template and re-upload to generate your XML sitemap, inclusive of appropriate and correct Hreflang tags.
After this is done, simply update your XML sitemap, re-submit to Google via Google Search Console – and voila!
Are There Any Alternatives to Hreflang Tags?
There’s only really one viable alternative to the traditional hreflang-tag approach to International SEO, which is Content-Language Headers.
A Content-Language Header is an HTTP header that specifies the primary language of a page. However, this does not specify regional variants.
So for example, if you want English speakers from the US to land on one version of your website and English speakers from the UK to land on another, this wouldn’t be possible with this approach and therefore leads to less accurate results.
However, if your website is segmented purely on language with no need to target specific regions, this could be an option for you. But we’d always recommend a Hreflang tag approach for more sophisticated targeting.
What Countries/Regions Can Be Used with Hreflang Tags?
Technically speaking, any country can be targeted via Hreflang, as long as the country has its own ISO 3166-1 alpha-2 code (try saying that 3 times fast).
In essence, an ISO 3166-1 alpha-2 code is a nickname for a country, below are some examples:
- US for the United States
- FR for France
- JP for Japan
- MX for Mexico
At present, all recognised countries and territories have an ISO 3166-1 alpha-2 code, meaning that you can internationally target every country across the globe.
Below are examples of popular country codes:
| Code | Country |
| US | United States |
| CN | China |
| IN | India |
| JP | Japan |
| DE | Germany |
| GB | United Kingdom |
| FR | France |
| BR | Brazil |
| RU | Russia |
| CA | Canada |
To Conclude
Hreflang tags can be a complicated affair, so it’s essential that you understand them before attempting any implementation, lest you lose those rankings you’ve worked so hard for!
However, Hreflang tags are essential for any website that wants to target Search Engines in other countries and ensure the correct version of their website is appearing for their audience.
We have a talented in-house Technical SEO team that are experts in International SEO, so if you’d like to explore your options, please get in touch with our talented team today on [email protected] or call the office on 0161 327 2635.
