If you have a multilingual website or are planning to make your website multilingual, then you’ve almost certainly heard of hreflang tags.
In short, hreflang tags are important to:
By itself, the concept of the hreflang tag isn’t too difficult to understand. However, accurately implementing hreflang tags on your website can be a whole different story – especially if you aren’t familiar with how to do so. Just take it from Google’s John Mueller:
But fret not. In this guide, we’re going to discuss some best practices for hreflang SEO and how to avoid the common pitfalls when implementing hreflang tags on your website.
Note: If you’re here to find a tool to implement your hreflang tags, sign-up for a free trial of Weglot for a fully translated website and automatically added hreflang tags.
A hreflang tag is an HTML attribute used by search engines to understand the language of a particular web page and for which geographical region it was intended.
For example, when we Google ‘Adidas official website’ in the United States, the first result that comes up is “adidas.com.” When we do the same search from France however, we get Adidas’ official website for France – namely “adidas.fr”.
These different search results are due to Adidas’ use of the hreflang tag. Hreflang helps tell Google that “adidas.com” is intended for searchers from the United States, while “adidas.fr” is intended for searchers from France.
Hreflang tags may be used in different contexts. For example, a business may want to use hreflang if it wants to offer:
The hreflang tag sends a signal to Google as to the versions of your web pages that are most relevant for certain search queries. It also signals how high Google should rank these pages in the search results.
This is how it works:
Using this information, Google then determines which version of the web page is most relevant for searchers with certain language or regional settings.
For example, your web page might have a hreflang tag indicating that the page is meant for visitors from Japan. When Google sees the hreflang tag, it views the web page as being especially relevant for Japanese visitors and may rank it higher for searches from Japan – which can result in more visibility and clicks to it.
On the flip side, let’s say that your web page doesn’t have a hreflang tag. In this case, Google may decide to serve it up to Japanese searchers anyway. However, if your web page is in English, a Japanese searcher may be less willing to read it and more inclined to quit (or “bounce”) right after landing on it.
The result is that Google will see this user behavior and conclude that your web page is less relevant for Japanese searchers. Because of this, your web page may not rank as highly or receive as much traffic from queries from Japanese searchers in the future.
When preparing the language and regional variants of your web pages, you may translate their contents into different languages, thus creating web pages with highly distinct page content.
Conversely, some language variants – such as pages in English for American and British audiences – may call for only minor content differences in the same language. The result is a website that has web pages with very similar content.
This could cause potential duplicate content issues because Google’s policy is to try and serve web pages with unique content to searchers. If it comes across web pages with duplicate content, it may decide to rank only one of these web pages.
Or, in cases where Google suspects that the website owner is trying to manipulate their search rankings, Google may even decide to rank none of the web pages. Needless to say, all this spells trouble for your attempts to direct searchers to your website.
However, the good news is that you can use hreflang tags to avoid such duplicate content penalties. With hreflang tags, you are telling Google that your web pages are meant for – and should be served to – different audiences, and so these pages shouldn’t be treated as identical content.
However, be aware that hreflang tags are not a directive.
In other words, while a correct hreflang implementation can help influence Google’s decision on which version of your web page is most relevant to searchers, Google is not obliged to show them the version that you want to show to searchers.
That’s because Google may also take other SEO factors into consideration when deciding on the relevance of a web page (and hence how high to rank it) for any given search query. Examples of these factors are your website’s load time, mobile friendliness, and domain authority.
The user’s search settings in Google also play a role. For instance, users browsing from France with their language preference set to English will mostly be shown search results in English rather than in French.
Of course, this doesn’t mean that you should skip hreflang and SEO best practices altogether. As mentioned, hreflang tags are important because they send a signal as to which web pages are most relevant for certain search queries.
Then, when your web page matches a searcher’s intent (meaning that it fulfills the user’s primary goal when searching a query in a search engine), Google will know that your web page is especially relevant for that particular search. It may then rank it higher for similar searches in the future – which is what you want.
When marketing to an international audience, you’ll need to create website content that’s suited to your visitors’ local context.
For example, take a look at the global homepage of the beverage multinational corporation The Coca-Cola Company:
Then, compare it with the homepage of the brand’s Australian website:
You’ll notice that The Coca-Cola Company has changed the corporate social responsibility program messaging on its Australian homepage to highlight its efforts to help Australian communities. This might resonate more with Australians compared to featuring a global initiative and generate more goodwill among the brand’s customers in Australia.
Similarly, you may want to craft different content to suit visitors from different regions. But if such content fails to reach its target audience, then you might not get the return on investment that you’re looking for.
This is where hreflang SEO comes in. With hreflang tags, you can help search engines direct searchers to the right versions of your web pages. This way, searchers will view the content that they were meant to view, as opposed to another version.
Imagine that you’re shopping for jeans online. You’ve found the perfect pair, and want to know how much it costs.
However, the price of the jeans is displayed in foreign currency. You’re frustrated, as you’d have to convert the price to your local currency to know how much it’d cost you. You might not even bother with the hassle and decide to abandon the purchase altogether.
To remove such friction in the customer journey and provide a more pleasant user experience, you’ll need to be able to show content that’s customized to your visitor’s context – and hreflang tags can help with that.
As an example, visitors to the clothing brand Levi’s United Kingdom website will view this site layout and product listing:
While those visiting Levi’s China website will see a different selection of products and content that is more adapted to their market:
The result? A smoother user experience on Levi’s website, which is bound to increase website engagement and sales.
Hreflang tags direct visitors to the appropriate versions of your web pages automatically. This means that you don’t have to leave visitors to pick their country to be shown the right content.
Instead, when Google detects the searcher’s location, it will match this to the correct language version of your website and push the latter to the searcher accordingly.
As an example, if you Google the website of athletics giant Nike with your location set to the Netherlands, Google will serve up Nike’s Dutch website, as opposed to the brand’s other country-specific websites.
Such automatic redirection of traffic can be the difference between visitors having a seamless user journey on your website, or bouncing in favor of a competing one.
Considering the extent of resources you’ll need to create customized content for each of your destination markets, you’ll definitely want to improve the chances of success for your international content strategy as much as possible.
Although hreflang tags can look complicated, they have a straightforward structure. They consist of three HTML attributes:
For example, hreflang tags for web pages meant for French and English speakers in Canada would look like these respectively:
A website may also have one web page in Spanish intended for visitors from Spain, and another web page in Spanish intended for visitors from Mexico. In this case, hreflang tags can be extended with hreflang annotations. Annotations will have to be added to both web pages to tell Google which localized page it should be serving to Spanish and Mexican visitors respectively. The hreflang tags would look like these:
If you don’t have alternate content versions for certain languages, you can set the hreflang attribute to the fallback value of x-default. Like so:
<link rel=“alternate” hreflang=“x-default” href=“http://www.example.com/ca/” />
This is a good practice, especially for web pages that aren’t catered to any specific language or region but allow visitors to select their country.
There are a few places on your website where you can put your hreflang attributes to implement hreflang tags:
1. For HTML content such as web pages, you can put your hreflang attributes in the section of every page. (This is where the Weglot plugin will add hreflang attributes if you’re using it to automatically translate your web pages. Note, hreflang tags are only added if you’re using a subdomain or subdirectory integration) It’d typically look like this:
<link rel=”alternate” href=”https://www.abccom/” hreflang=”en” />
<link rel=”alternate” href=”https://www.abc.com/en-ca” hreflang=”en-ca” />
<link rel=”alternate” href=”https://www.abc.com/en-gb” hreflang=”en-gb” />
One downside to this method is that since you’re essentially adding link elements to your multilingual pages, it increases your server calls and page loading time. If you have a large site catering to multiple languages, it could lead to a considerable amount of increase in loading time.
2. For non-HTML content types such as PDF files, HTML link elements won’t work. Instead, your hreflang attributes can go in these files’ HTTP headers. Here’s what a typical hreflang tag example would look like if implemented on the HTTP headers of our E-Commerce Calendar article:
Link:<https://en.weglot.com/blog/wp-content/uploads/2022/02/The-International-Ecommerce-Calendar-2022-Weglot.pdf>; rel=”alternate”; hreflang=”en”,
<https://de.weglot.com/blog/wp-content/uploads/2022/02/The-International-Ecommerce-Calendar-2022-Weglot.pdf>; rel=”alternate”; hreflang=”de”
<https://zh.weglot.com/blog/wp-content/uploads/2022/02/The-International-Ecommerce-Calendar-2022-Weglot.pdf>; rel=”alternate”; hreflang=”zh”
Like the previous method, this can also add markup to your site and increase loading time.
If you’d like to put the hreflang attributes for all the web pages of your website in one place, it’s best to add it in your website’s XML sitemap using the hreflang attribute xhtml:link. Putting hreflang tags in your XML sitemap also helps avoid the possible slowdown in page load speed from using the <head> section or HTTP headers method. Here’s a hreflang tag example for this implementation:
<url>
<loc>https://www.abc.com/us/</loc>
<xhtml:link rel=”alternate” hreflang=”en” href=”https://www.abc.com/” /> <xhtml:link rel=”alternate” hreflang=”en-ca” href=”https://www.example.com/au/” />
<xhtml:link rel=”alternate” hreflang=”en-gb” href=”https://www.example.com/uk/” />
</url>
If you will be manually implementing hreflang tags on your website, take note that you need to use only one of the above methods. Be mindful of the fact that you’re working with long pieces of code (particularly in the XML sitemap method) and you might have to troubleshoot errors, which can be a tedious task. That’s where hreflang tools come in handy.
Hreflang tools to use for implementing hreflang tags
If you’re a visual learner, here’s a video explaining how to add hreflang tags to your website:
There are no minimum or maximum limits on the number of hreflang attributes you can add to any given web page. You could have 10, just one or even none at all.
However, this doesn’t mean that you should try to add hreflang attributes for all variations in language and region. Creating content for each possible variation will take up significant resources, so focus on producing content for only those that make sense for your business. Then, add the relevant number of hreflang attributes to your web pages accordingly.
And for all other variations that you don’t have specific content for, cater for them by using “x-default.”
You’ll want Google to find all of your web pages so it can serve them to the right visitors. Therefore, when doing hreflang SEO, you should be indexing all of your web pages – the original content and all its variations.
Be sure that none of your pages (whether the original or the variations) contain noindex tags, as these can conflict with the hreflang tags’ instructions to index both the original and the content variations.
In addition, if Google doesn’t index these pages, then it won’t see your hreflang instructions on them. As a result, it won’t be able to serve the pages to the searchers who should be seeing them.
Hreflang tags come in twos. In other words, if you have a hreflang tag on the original web page that links to an alternate language version of the page, then that alternate page must also have a hreflang tag that links back to the original web page.
Such hreflang links are called return links, or bi-directional links. To implement them, you’ll need to add them to all of your original web pages and their alternates, and make sure that the originals point to the alternates and vice versa. Otherwise, Google may not be able to serve the right versions of your web pages to the right visitors.
We’ve covered three methods of hreflang implementation above, and you can choose one (and only one) of them to use for your website.
Be sure to implement your chosen method properly as well, or this can result in problems in your hreflang tag setup. (If you’re using Weglot, you don’t have to worry about inaccurate implementation as it will set up everything correctly on your behalf.)
You need to use the right ISO 639-1 language codes and ISO 3166-1 region codes when stating the language and region of your hreflang link attributes. For example, you should be using “ko” to refer to the Korean language but “kr” for the region of South Korea.
Using the wrong language or country code may throw up a “your site has no hreflang language tags” error in Google Search Console. Visitors may also see the wrong version of a page.
Hreflang tags need to be implemented on all pages of your website that have language and regional variants, and not just the homepage. Otherwise, you’ll signal that you have one or more variants for the homepage only but not for your other web pages.
Adding hreflang tags for language variants to web pages that haven’t been customized for such languages might sound like a good strategy for covering all your bases. However, this exercise is more likely to be a waste of time.
That’s because when visitors view these web pages that have not been tailored to their context, they will probably get confused and bounce. Google may pick up on this and note that your web pages have lower relevance for such visitors – and hence rank them lower for similar searches in the future.
France and Belgium may both have people who speak French, but this doesn’t mean that you can serve the same version of your web page to French speakers from both France and Belgium.
This is because your web pages will need to be tailored to the local contexts for both groups, be it in terms of content or culture, if you want to provide a truly localized user experience.
These web pages have been noindexed, which means Google is unlikely to index them – or see and process the hreflang tags that you’ve spent time adding to them.
As mentioned above, you don’t have to provide alternate versions of your web pages for all possible languages and regions. However, you should have fallback pages that Google can serve to visitors with language and region settings that you haven’t catered for.
Don’t forget to set up the “x-default” hreflang attribute for these pages either!
As your website grows, be sure to stay on top of your website structure and monitor whether your hreflang tags need updating.
For example, if you add a new domain for a country, you’ll need to add hreflang tags to all your existing web pages to point to the web pages in that new domain. Or, if you have deleted a language version of your website, then the hreflang tags that point to that language version will also need to be removed.
You don’t want to have hreflang tags that point to missing or incorrect URLs – this hurts the user experience and can also affect your rankings in Google searches.
Hreflang tags indicate to Google which one of the different (but often similar) versions of your web page should be served for different language and regional searches. For example, if you’re in Spain, then you should be served a Spanish web page meant for visitors from Spain, instead of a Spanish web page meant for visitors from South America.
On the other hand, you may have several web pages with similar (or even identical) content, and you want Google to index and give ranking priority to only one of these in the search engine results. Here, you’d use a canonical tag to indicate to Google which web page this is, so that it doesn’t rank some other page instead. Doing so can also help you avoid duplicate content issues.
Hreflang and canonical tags can be implemented together, but it’s important to do this correctly. Otherwise, you may be sending conflicting signals to Google on which pages it should be indexing, such that it decides to ignore all your directives completely.
To implement hreflang and canonical tags together, you should add your hreflang tags and their return links to your web pages as per usual. Then, add canonical tags that indicate the canonical versions of these pages in the same language (or the best possible alternate language if there isn’t one).
This will result in your web pages having:
It’s possible to manually add hreflang tags to your multilingual website (see above for the three methods we’ve covered). However, the most recommended solution is to use a plugin that will do all the heavy lifting for you.
If you’re using a quality translation solution like Weglot to prepare your web pages for multilingual SEO, then you can rest easy as your hreflang tags are implemented to your website automatically. Your setup will also be error-free, helping you avoid many of the common hreflang mistakes we’ve mentioned in this guide.
For peace of mind, it’s a good idea to double-check that your hreflang tags are working after you’ve implemented them. We’ve developed a handy Hreflang Checker tool for this very purpose!
Simply paste the URL that you want to check into the search bar of the tool (with “http://” or “https://” in front), choose the search engine bot that you want to mimic and then click on the “Test URL” button.
Here are some demo results, using ecommerce platform Shopify’s website as an example:
Our Hreflang Checker tool will work regardless of whether you’ve implemented your hreflang tags manually or through using the Weglot plugin, so go ahead and give it a spin.
Hreflang SEO is a powerful tool for ensuring that the different language versions of your content reach their intended audience, especially if you’re targeting an international crowd.
If you haven’t already implemented hreflang tags on your website, then we hope this guide has helped show you the benefits of doing so and how you can get started. On the other hand, if you’ve realized that you’ve made a mistake in your hreflang SEO implementation, use the pointers in the guide to take care of this important aspect of your multilingual website.
Either way, keep in mind that after you’ve added hreflang tags to your website, or corrected your existing implementation, you’ll need to wait at least a couple of days for any ranking changes to occur. This is because Google will have to reindex your website to pick up on your changes, and such reindexing might not happen immediately.
Also, don’t be disappointed if you don’t see an increase in traffic after implementing hreflang tags on your website. The goal of adding hreflang tags is to serve the right language version of your content to the right users, and this might not necessarily translate to more website visitors. Instead, looking out for improvements to your website engagement and bounce rates may be the better way of seeing if your hreflang tags are making a difference.
Of course, hreflang SEO is only one of the things that you’ll need to do to make your website multilingual. There’s also the translation of your website content to think about – and Weglot can handle this effortlessly and with a high degree of accuracy.
If needed, Weglot can also automatically add hreflang tags to your website, so that’s one thing off your plate as you plan your foray into the international markets. But you don’t have to take our word for it – sign up for a free trial to experience the power of Weglot for yourself.
