Technical SEO Consultant
A hreflang tag is a code used on multilingual sites to tell search engines which page should be shown to which user. It is useful for two scenarios: when a site has multiple pages offering the same information in the same language, but the content itself is regional, and when a website has the same content in different languages designed for users searching from different locations.
The code search engines with the relevant information so that they can rank the correct page based on the language and the location of the user:
Adding in hreflang tags is a simple way of ensuring users are sent to the correct page on multilingual sites. Unfortunately, even the smallest error during implementation can cause problems, resulting in search engines either ranking incorrect URLs for the language or location, or even choosing not to rank any content at all should they be unable to decide which is the right page.
The result? Lower organic search visibility, as the content fails to get in front of the right people, and duplicate content issues, which puts your website at risk of being hit by Google’s Panda algorithm.
Incorrect hreflang implementation can also impact your:
Having helped hundreds of international brands grow their businesses globally since we first opened our doors, we have noticed that there are three hreflang mistakes that are commonly made by brands.
ISO codes are used to tell search engines which country the page is targeting, and which language the user needs the content to appear in. The full list of all IOS codes recognized by Google can be found here for language and here for countries.
The ISO codes need to be structured language first, then country; mixing the order is a common mistake we see which can impact whether search engines can correctly understand which page they should display. The codes used for language and country can vary, so mixing them up often leaves Google unable to read either part.
Another mistake we see developers make is repeating the language code instead of inputting both language and country; the language part of the code is essential, whereas the country aspect is optional, and we find that some developers feel the need to finish the sequence and do so by doubling up the language ISO code. Again, this causes issues as the two codes do not necessarily match up so search engines are unable to identify the correct location or language.
A final mistake we have seen multiple times is using ‘UK’ instead of ‘GB’, which is the ISO code recognized by Google. It is always worth double checking the official code for the country in every instance, as these can differ to what we’d expect to see.
It’s important to use both self-referential canonical tags and self-referential hreflang tags. Canonical tags are used to show a search engine which page should be indexed as the master page, and which pages are alternative versions and should not be indexed, whereas hreflang tags show which page is the main page but does not block the indexing of alternative versions.
Multilingual sites need to ensure that they are using self-referential canonical tags when combining with hreflang tags, to ensure that search engines can easily crawl and index all variations of the page.
We often see cases where the URL has a canonical tag directed at another URL, as well as hreflang tags set up. This tells search engines to both index, and not index, the main page; Google will either decide itself who to index, or skip indexing any page.
<link rel=”canonical” href=”http://www.example.com/gb” />
<link rel=”alternate” href=”http://www.example.com/gb” hreflang=”en-gb” />
<link rel=”alternate” href=”http://www.example.com/ie” hreflang=”en-ie” />
<link rel=”alternate” href=”http://www.example.com/au” hreflang=”en-au” />
<link rel=”alternate” href=”http://www.example.com/us” hreflang=”en-us” />
Note: canonical and hreflang must be kept as separate tags in the source code.
Once hreflang has been correctly set up, it’s important that you have set up analytics to track the correct metrics, in order to understand the impact that implementing the tags have had.
We commonly see brands setting up analytics to track traffic to individual country sites as a whole. However, correct use of hreflang tags is likely to cause an initial drop to the overall site traffic, as users are sent to the correct localized versions of the relevant site.
Instead, you’ll need to set up analytics to track traffic to the individual landing pages – if traffic is a metric you want to look at.
As traffic is filtered out to the relevant pages (e.g. US searchers to the US page, French searchers to the French page), you should begin to see improvements to the pages overall visibility, click-through rate and conversions. These are the metrics we’d recommend tracking, as they highlight where traffic is being directed to the relevant pages.
It’s important to place the hreflang code as close to the <head> of the page as possible, so that search engine bots are able to read and crawl the link to understand how the pages correlate with each other straight away.
If putting the tags first thing isn’t possible, avoid placing them under complex scripts that take time to load. These scripts can affect the crawlability of a site and mean that hreflang alternate pages can’t be discovered.
In this example, the following script was located just after the <head>
After we removed the scripts, the hreflang tags were discovered.
Hreflang tags are a great tool for brands managing multilingual websites. Unfortunately, seemingly small mistakes can have a big impact on how search engines read the code and index the pages.
Our technical team works alongside our in-house team of native speakers to help brands scale their websites internationally. If you’d like to know more, get in touch!
For the latest tips from our technical team, sign up to our newsletterSubscribe here