Whether you're a beginner or advanced SEO, our guide to hreflang has you covered.
Hreflang lets search engines know which language your content is written in, and the desired geographical targeting of the content.
For example, if a page is originally written in English, but also exists in Spanish elsewhere on the site, we can use the HTML Hreflang tag to inform search engines that they are the same page, just designed for different languages.
We can also use Hreflang to inform search engines when content is written for different geographical markets - for example, two pages both written in English, but one with offers for US readers and the other with offers for UK readers. Here we can use hreflang tags to tell search engines which page is best suited for which market.
Hreflang sounds complicated, but in reality it’s just telling search engines which page is most suited depending on the language and location of the user - we can therefore use hreflang to direct readers to the most appropriate content that’s written in their language, and written with their geographical location in mind.
By using hreflang tags, we can provide extra context about the language and geo-location targets for search engines to use, which can be extremely valuable information when it comes to the right page being shown to the right users.
By sending users to the version of your page that’s written specifically for their native tongue, metrics such as time on site, number of pages viewed and conversion metrics tend to be higher - all highly valuable metrics that have a huge impact on your website’s performance.
If we use hreflang tags to indicate that pages are related to one another due to being translated, they effectively become ‘merged’ as one.
This means that if the content gets great coverage (and backlinks) in Spanish press for example, the authority from that press coverage is transferred to the whole hreflang ‘cluster’ of content - i.e. the other language versions gain the authority, too.
This, in turn, means the whole cluster of pages is more likely to rank in SERPs as a result. They aren’t treated as separate pages, but more as a group.
The other benefit of using hreflang comes in the form of reducing the impact of duplicate content on your site.
For example, two landing pages, one for UK English users and one for US English users - without hreflang, these would be defined as two separate pages and search engines would try to rank them individually. Chances are, they will clash with one another and make it difficult for search engines to understand which one should be the priority.
Instead, by using hreflang, we can easily show the relationship between the two pages, indicating how they are in fact the same page but designed for different audiences. Again, this merges the value of the pages into one, and search engines can use the hreflang information to ensure they display the most appropriate page for your users.
Note that Hreflang is used as a signal to inform search engines how to use your page content, but it does not mean they will decide to agree with you. It’s always worth doing spot-checks and analysing data in tools such as Google Search Console to verify that your hreflang is working as intended.
An hreflang tag is a simple string of HTML code, which is placed in the ‘head’ of the source code of the page.
It looks like this:
And can be broken down to be easier to understand as follows:
Hreflang is specified page-by-page, so it’s not just a case of adding one tag to a home page - instead, all of your translated or location-specific pages need to be marked up accordingly.
Hreflang is particularly useful in certain website setups where international targeting is commonplace or where content is tailored to a specific language or geographical location.
https://example.fr/
https://example.com
In this situation, one of these sites would be for the French-speaking market (.fr) while the other one would be for English-speakers (.com)
Without hreflang, these would be treated as two totally separate websites. However, with hreflang, we can show the association between the two sites and ensure that French content gets shown to French readers, and English content to English readers.
https://en.example.com/
https://fr.example.com/
Much the same as the Multi-Language Domain example, the same applies with subdomains.
As in the previous case, search engines see a subdomain as a separate site; so we can use hreflang to indicate that they are in fact the same page(s), just for different languages.
https://example.com/en/
https://example.com/fr/
The same situation applies for subfolders, too. In this example, the /fr/ subfolder would host the French content, while the /en/ folder would host the English content.
Without hreflang, these would be treated as separate pages - but with hreflang, we can show the relationship between the pages in terms of being the same content but for different languages.
So far, we’ve looked at the basic setup of hreflang tags and how they can be used to indicate which language or location the content is most suitable for.
However, they don’t work as a single tag on their own -
For example, if a page is written in English and Spanish; the English page must use hreflang to inform search engines about the Spanish-alternative. However, vice versa, the Spanish page must use hreflang to inform search engines about the English-alternative, too.
This is called an hreflang return tag, or reciprocal hreflang tagging.
Hreflang tags work in pairs.
If you add a hreflang tag on an English page that references a Spanish variant, then the Spanish variant must return the favour with its own hreflang tag that points to the English version.
Additionally, the hreflang setup should be completed with a ‘self referencing’ tag that points back to itself.
This reinforces the language / geographical setup of the tags as a whole.
Although it’s not in Google’s official hreflang guidelines, self-referencing hreflang has been stated as good practice in recent documentation, so it’s a good idea to follow.
This means the tag should contain a reference back to itself, with the language/location targets for that URL.
An “x-default” Hreflang tag allows you to state which URL should be presented to users that are not in any of your target regions or languages.
For example, you might have content specifically tailored for UK and US markets, but nothing else. In this situation, you might use the “x-default” tag to indicate that the UK page is the ‘fall back’ page to show to users outside of those markets.
This is an optional tag, but it is recommended that you use it to meet hreflang best practices.
When setting up hreflang tags in terms of their language and geographical targets, there are two ‘parts’ to the tag that we need to complete.
These are:
The language being targeted (e.g. “en” for English, “fr” for French, and so on)
The location being targeted (e.g. “GB” for Great Britain, “US” for the US, and so on)
When we are building an hreflang tag, we can therefore decide which language and location the content is most suitable for, and use language and location codes to inform search engines.
For example, we’d use “en-US” to target English speakers in the US.
Using an example of an English-speaking website that targets users with different services or products depending on their geographical location, you might end up with a situation of needing to have pages that are very similar in terms of content, but hreflang can help to show how they differ.
Language-Only Targeting
Note that it’s not a requirement to state a location within your hreflang setup. If your content is translated for specific languages, but is suitable for any geographical location, you might choose to only use language-specific hreflang setup.
Ultimately the best setup for your site depends on the structure of your website, and the type of users that your site attracts.
Knowing which language and country code can be tricky depending on where you’re targeting. You don’t need to memorise them, and there are plenty of websites that have lists of country codes to scroll through.
However, our Hreflang Testing Tool allows you to input your target languages and countries, and it will generate the hreflang code for you.
Once your hreflang tags are in place and up and running, it will take time for search engines to crawl, index and update their results accordingly. Don’t expect to see changes overnight. This process could take months to process fully, so the sooner you implement hreflang the better!
However, once hreflang is being represented in search results, there’s a few ways you can test to make sure search engines are using your hreflang tags as you’d expect.
By using a VPN you can act as if you’re in another location. Using such software, this allows you to make some searches in Google for terms that you know your website shows up for.
Using a VPN to act as if you’re in Spain, for example, should mean that search engines display your Spanish content if it’s marked up correctly.
Google Search Console is an incredibly powerful tool that allows you to look at how people are finding your website from search results, including the keywords they used to make a search.
However, it also allows you to filter by user location, meaning you can use this tool to see what pages are being shown to users by location - and look for errors.
Again by filtering users by location in your reporting software (e.g. Google Analytics 4), you can see which pages are being visited by your website’s audience. Within such a report, you can then use this data to identify if users are seeing the pages you’d expect them to see depending on their location.
Hreflang can be a difficult subject to understand, especially if your website targets multiple languages and geographical locations. A recent study showed that 31% of international sites contain hreflang errors, so it’s clearly a challenging task at scale!
At a single page level, hreflang implementation can be quite straightforward - however it can grow into quite a complex development on larger sites with an international SEO focus.
Due to the complexity of hreflang, always consult an expert prior to implementation on an international website. Getting it wrong can result in a poor experience for your users, and poor conversion rate as a result. Hreflang isn’t just another part of technical SEO, but it can be a critical part of your user journey too.
Developing the required hreflang setup per page, providing assistance for a development team to implement the setup correctly, and thorough testing thereafter, all requires an experienced SEO agency to help things run smoothly.
Thinking about optimising your international website? Speak to our Hreflang Experts today about our international SEO services.
Andy drives high-quality, high-converting organic traffic to a wide range of businesses, from local companies to global brands.
A strategic search marketer, Andy’s expertise lies predominantly in ecommerce websites and technical SEO, and is particularly adept at finding opportunities to provide quick wins and long-term return on investment.
More about Andy