Guide

A Guide to Hreflang Tag Best Practices for SEO

Elizabeth Pokorny
Written by
Elizabeth Pokorny
Elizabeth Pokorny
Written by
Elizabeth Pokorny
Reviewed
Reviewed by
A Guide to Hreflang Tag Best Practices for SEO

If you have a multilingual website or are planning to make your website multilingual, then you’ve almost certainly heard of hreflang tags.

Here’s an example of a hreflang tag targeting English speakers in Japan:


<link rel=”alternate” hreflang=”en-jp” href=”http://www.example.com/en-jp/” />

And this is what it would look like targeting Japanese speakers in Japan:


<link rel=”alternate” hreflang=”ja-jp” href=”http://www.example.com/ja-jp/” />

In short, hreflang tags are important to:

  • Reach potential customers in different countries.
  • Serve the correct content to visitors based on their region and preferred language.
  • Build a strong international search engine optimization (SEO) strategy for your website.
  • Provide a good user experience on multilingual websites.

The concept of the hreflang tag isn’t too difficult to understand by itself. 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.

But fret not. In this guide, we’ll 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.

What are 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”.

Results for Adidas.com in the US and France

These different search results are due to Adidas’ use of the hreflang tag. Hreflang helps Google tell that “adidas.com” is intended for searchers in the United States, while “adidas.fr” is intended for searchers in France.

Hreflang tags may be used in different contexts. For example, a business may want to use hreflang if it wants to offer:

  • Its entire website is in two or more languages to cater to audiences that speak different languages.
  • Different content to visitors from different regions that speak variants of the same language. For example, a web page in German for visitors from Germany and another web page in Swiss German for visitors from Switzerland.

What Do the Hreflang Attributes Look Like?

Hreflang tags have a straightforward structure.

They consist of three HTML attributes:

  1. rel: this tells Google that the link in the hreflang tag points to an alternate version of the content instead of the original.
  2. hreflang: this specifies the language and the region that this content version is meant for, in “language-region” format.
  3. href: this contains the link to the web page that Google should direct visitors with such language and region settings to.

For example, hreflang tags for web pages meant for French and English speakers in Canada would look like these respectively:


<link rel=“alternate” hreflang=“fr-ca” href=“http://www.example.com/fr-ca/” />
<link rel=“alternate” hreflang=“en-ca” href=“http://www.example.com/en-ca/” />

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, you can extend hreflang tags 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:


<link rel=“alternate” hreflang=“es-es” href=“http://www.example.com/” />
<link rel=“alternate” hreflang=“es-mx” href=“http://www.example.com/” />

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 for web pages that don’t target a specific language or region but allow visitors to select their country.

How to Implement Hreflang Tags?

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. (The Weglot plugin will add hreflang attributes here 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.abc.com/" 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, your loading time may increase.

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 an ecommerce calendar:


<https://www.weglot.com/blog/wp-content/uploads/2024/02/The-International-Ecommerce-Calendar-2024-Weglot.pdf> rel="alternate"; hreflang="en",
<https://www.weglot.com/de/blog/wp-content/uploads/2024/02/The-International-Ecommerce-Calendar-2024-Weglot.pdf> rel="alternate"; hreflang="de"

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 your website’s web pages in one place, it’s best to add them to 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, you need to use only one of the above methods.

Be mindful that you’re working with long pieces of code (particularly in the XML sitemap method). 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

  1. Use a hreflang tags generator to add hreflang tags in the <head> section, add hreflang attributes in the XML sitemap, or generate example code templates. Just add your URLs in their form (or upload up to 50 URLs in CSV format), choose your language and country, and generate your tags.
  2. Weglot’s hreflang tag checker – to avoid having to troubleshoot, check if your hreflang attributes work. Weglot’s hreflang checker is the best way to check if a hreflang tag has been correctly implemented.

If you’re a visual learner, here’s a video explaining how to add hreflang tags to your website:

Hreflang Tag vs Canonical Tag: What’s the Difference?

Hreflang tags indicate to Google which of your web page’s different (but often similar) versions 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 rank only one of them 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:

  • Add your hreflang tags and their return links to your web pages as you normally would
  • 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:

  • One canonical tag that points to the canonical version of the page (whether it is itself or another page).
  • As many hreflang attributes as needed for all the language variants that you’ve catered for.

Why are Hreflang Tags Important for International SEO?

Hreflang SEO Helps Signal Web Page Relevance

The hreflang tag signals to Google which versions of your web pages 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:

  • Hreflang tags tell Google that a web page has several language and regional variants
  • They provide the link to that web page
  • They specify the language and region of the particular variant that Google is looking at.

Using this information, Google determines which web page version is most relevant to 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 relevant to Japanese visitors and may rank it higher for searches from Japan. This will lead to an increase in visibility and clicks to it.

On the other hand, let’s say your web page doesn’t have a hreflang tag. In this case, Google may decide to serve it 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.

Free download: How to grow your international SEO performance in 4 steps

Hreflang Tags Help Avoid Duplicate Content Penalties

When preparing the language and regional variants of your web pages, you’ll end up translating their contents into different languages, resulting in 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. You’ll then have a website that has web pages with very similar content.

This could cause potential duplicate content issues because Google’s policy is to serve web pages with unique, relevant content to searchers. If it comes across web pages with duplicate content, it may decide to rank only one of these web pages.

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.

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 they shouldn’t be treated as identical content.

Hreflang Tags Are Not a Directive

However, be aware that hreflang tags are not a directive.

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 consider other SEO factors when deciding on a web page’s relevance (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 see search results in English rather than French.

Still, it’s imperative to follow hreflang and SEO best practices altogether.

Importance of Hreflang Tags for International Brands

Ensuring That the Content That You Produce Reaches the Right Target Audience

When marketing to an international audience, you must create website content that is suited to your visitors’ local context.

For example, take a look at the global homepage of the beverage multinational corporation The Coca-Cola Company:

Coca Cola Company's global page

Then, compare it with the homepage of the brand’s Australian website:

Coca Cola Australia homepage

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 will 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.

Fostering a More Pleasant User Experience

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:

Levi United Kingdom

While those visiting Levi’s China website will see a different selection of products and content that is more adapted to their market:

Levi China homepage

The result? A smoother user experience on Levi’s website, which is bound to increase website engagement and sales.

Hreflang Tag FAQs

How Many Hreflang Attributes Does a Page Need?

There are no minimum or maximum limits on the number of hreflang attributes you can add to any given web page.

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 to them by using “x-default.”

How Should You Index Your Pages After Adding Hreflang Tags to Them?

As part of hreflang SEO, index all of your web pages—including the original content and all its variations—so that Google can find these and serve them to the right visitors.

None of your pages (whether the original or the variations) should contain noindex tags. These can conflict with the instructions in the hreflang tags to index both the original and the content variations.

If Google doesn’t index these pages, you won’t appear on SERPs, and it won’t see your hreflang instructions on them. So it won’t serve the pages to the searchers who should be seeing them.

How Do You Implement Return Links?

Hreflang tags come in twos. If you have a hreflang tag on the original web page that links to an alternate language version of your 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, 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.

Common Mistakes to Avoid When Using Hreflang Tags

Using the Wrong Method to Implement Hreflang Tags

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; it will set up everything correctly on your behalf.)

Not Using the Correct Language and Region Codes for Your Hreflang Link Attributes

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.

Using the Hreflang Tag on Only Your Homepage

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.

Using Hreflang Tags to Point Your Web Pages to Irrelevant Language Variants

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.

But this will only confuse your visitors and cause them to bounce, particularly when they see web pages that haven’t been tailored to their context.

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.

Using the Same Language Variants for Visitors From Different Regions

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 in both countries.

Your web pages will need to be localized and tailored to the local contexts for both groups, whether in terms of content or culture, to provide a truly localized user experience.

Adding Hreflang Tags to Noindexed Pages

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.

Not Providing a Fallback Page for Uncatered Variants

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 to.

Don’t forget to set up the “x-default” hreflang attribute for these pages, either!

Not Keeping Your Hreflang Tags Up to Date

As your website grows, be sure to stay on top of your website structure and monitor whether your hreflang tags need updating.

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.

But if you have deleted a language version of your website, 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.

What is the Best Way of Adding Hreflang Tags to Your Multilingual Site?

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, your hreflang tags are automatically implemented to your website. Your setup will also be error-free, helping you avoid many of the common hreflang mistakes we’ve mentioned in this guide.

How to Check That a Hreflang Tag Has Been Correctly Implemented

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.

Weglot's hreflang checker

Here are some demo results, using Weglot's own website as an example:

Results for Weglot's hreflang tags

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.

Get the Hang of Hreflang

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.

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. 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 for improvements to your website engagement and bounce rates may be a better way to see 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.

In this guide, we're going to look into:

Explore more about working with Weglot

Try for free