6095
How-to 32 min read

Hreflang Tags: What They Are And How To Implement Them

Hreflang Tags: What They Are And How To Implement Them

Kevin Dam
CEO, Founder of Aemorph
Hreflang is essential for international SEO to ensure you properly serve content to the right audience. By implementing hreflang tags on your website, you can ensure that search engines provide the correct version of your content to users in different languages and from specific countries.

Not only does this help improve the user experience for your international audience, but it also helps you to rank better in search results. That's because hreflang tags can help Google and other search engines understand the relationship between different versions of your content, leading to improved search engine optimization.

If you want to take your international SEO to the next level, hreflang tags are a great place to start. In this post, we'll take a closer look at what hreflang tags are, how important it is to SEO, why you need them, and some tips for implementing and using them on your website. We'll discuss some misconceptions about hreflang and the truth in it. This post will also provide troubleshooting to some common hreflang errors that you may encounter.

Hreflang: What is it, and why do you need it?

Google introduced hreflang in December 2011 to help website owners who wanted to target users in specific countries or regions. While hreflang is not required, it can benefit websites that want to ensure the right people see their content.

Hreflang tells search engines what written language a website is. It is an attribute that helps search engines index and rank websites in the correct language results. Hreflang can also specify the region or country a website is targeting.

The hreflang tag looks like this:
<link rel="alternate" hreflang="en" href="https://example.com/en"/>
The "rel" attribute specifies the relationship between the current document and the linked document. In this case, the "alternate" value indicates that the linked document is an alternate version of the current document.

The attribute "hreflang" specifies the language of the linked document. In this case, the "en" value indicates that the linked document is in English.

The attribute "href" specifies the URL of the linked document. In this case, the URL is http://example.com/en/.

The Hreflang tag specifies alternate page versions in different languages. Here's an example of what hreflang code might look like:
<link rel="alternate" hreflang="en-US" href="http://www.example.com/"/>
<link rel="alternate" hreflang="en-GB" href="http://www.example.co.uk/"/>
<link rel="alternate" hreflang="de-DE" href="http://www.example.de/"/>
In this example, the hreflang tags indicate three different versions of the website - one for English speakers in the United States, one for English speakers in the United Kingdom, and one for German speakers in Germany.

It means that when someone from the United States searches for something on Google, it'll direct them to the American version of the website. Similarly, Google will show someone from the United Kingdom the British version, and someone from Germany will be delivered the German version.

Adding hreflang tags in your website for each language version is essential if it is available in multiple languages. It will help ensure that users are directed to the correct version of your website, regardless of their location.

When someone from the US searches for "Facebook Official Website", it will show:
Google SERP: Searching for "Facebook official website" from the U.S. region
Its hreflang tag is:
<link rel="alternate" href="https://www.facebook.com/" hreflang="en-us" />
When someone does the same but is from Spain, it will show:
Google SERP: Searching for "Facebook official website" from Spain
Its hreflang tag is:
<link rel="alternate" hreflang="es-ES" href="https://www.facebook.com/es">
Also, note that you should add hreflang tags to all pages on your website — not just the homepage. It will help search engines correctly index your content and direct users to the most relevant version of your website.
Would you like to discover all hreflang-related issues on your website with just a few clicks?
There's Serpstat Site Audit! Click the button below, sign up and get a free 7-day trial!

How Important Is Hreflang For SEO?

Hreflang tags are an essential part of SEO for international websites. They help show the right users your content in the correct language that helps improve your website's search engine rankings and click-through rates.

Without hreflang, you risk your content being misindexed and appearing in search results that aren't relevant to your target audience. It can lead to a drop in traffic, conversions, and poor user experience.

Here are four critical cases in which hreflang can make a big difference for your SEO:

1. When you have multiple versions of the exact page

If you have different versions of the same page (for example, one in English and one in Spanish), hreflang can help direct users to the correct version. It is vital if the content on each page is significantly different.
<link rel="alternate" hreflang="en" href="http://example.com/en/" />
It tells Google that there is an alternate version of this page in English and provides the URL of the English page.
<link rel="alternate" hreflang="es" href="http://example.com/es/page.html" />
It tells Google that there is an alternate version of this page in Spanish, and provides the URL of the Spanish page.

2. When you have similar pages in different languages

Hreflang lets you specify the relationship between two pages in different languages. If you have similar pages in different languages (for example, a product page and a category page), hreflang can help search engines understand that they are related. For example:
<link rel="alternate" hreflang="x-default" href="http://example.com/en-us/products" /> 
<link rel="alternate" hreflang="en-us" href="http://example.com/en-us/products" /> 
<link rel="alternate" hreflang="en-gb" href="http://example.com/en-gb/products" /> 
<link rel="alternate" hreflang="es-es" href="http://example.com/es-es/productos" />

This example tells search engines that the page at http://example.com/en-us/products is available in different languages and provides the URLs for those pages. The hreflang values (x-default, en-us, en-gb, and es-es) specify the language and region for each page.

In the example above, the hreflang tags tell search engines that the English version of the product page is available in both the United States and Great Britain. In contrast, the Spanish version is only available in Spain. When using hreflang, it's important to remember that you are specifying the relationship between two pages.

3. When you want to target specific regions or countries

If you want to target specific regions or countries, hreflang can help ensure you direct users in those regions to the correct version of your site. It is essential for two reasons: first, it ensures that users have a good experience; second, it helps you avoid any penalties from search engines for targeting the wrong region.

In conclusion, hreflang is a powerful tool that can help ensure that your multilingual website performs well in search. It shows your content to the right users and that you're getting the best out of your international SEO efforts.

How Do You Implement Hreflang?

As we all know, international SEO is becoming more and more critical. Search engines' algorithms improve to understand the searcher's intent better, and part of that is understanding what language they are searching in. Google even offers different search results based on the searcher's location and language settings. It is where hreflang comes in.

Implementing hreflang can be tricky, but it's worth the effort.

Using On-page Markup or HTML

On-page markup, or HTML, is the code that helps search engines understand the content on your website. This code includes things like titles, headings, and meta tags. It is essential to have a well-written and keyword-rich on-page markup so potential customers can easily find your website.

On-page markup helps hreflang by indicating which written language a particular piece of content is to search engines. Without on-page markup, search engines would have difficulty understanding which language a website is written in and could serve the wrong content to users.

You can implement hreflang using on-page markup or HTML by rel= "alternate" hreflang= "x" tag in the head of each page.
<link rel="alternate" hreflang="en" href="http://www.example.com/en/page.html" /> 
<link rel="alternate" hreflang="es" href="http://www.example.com/es/page.html" />
<link rel="alternate" hreflang="x-default" href="http://www.example.com/en/page.html" />

The rel= "alternate" hreflang= "x" tag tells search engines that there is an alternate version of the page in another language. The "x" in hreflang= "x" stands for the language code of the alternate page. In the example, there are three different tags, one for English, one for Spanish, and one for the site's default language (in this case, English).

You can also add hreflang tags to your website using on-page markup by the following code in the head section of your HTML:

For example, if you have a page that is in English, you would add the following code:
<html lang="en">
If you have a page that is in French, you would add the following code:
<html lang="fr">
You can also use the lang attribute on specific elements within your pages, such as paragraphs or titles.

For example, if you have a paragraph that is in English, you would add the following code:
<p lang="en">This is a paragraph in English.</p> 
If you have a paragraph that is in French, you would add the following code:
<p lang="fr">Ceci est un paragraphe en français.</p> 
It is important to note that hreflang tags only indicate the language of a page, not the region. You must use geo-targeting if you want to target a specific region.

Implementing In Your XML Sitemap

XML sitemaps can significantly help improve the implementation of hreflang on your website. Including information about the different language versions of your pages in your sitemap makes it easier to find and index your content for search engines. It, in turn, makes it easier for users to find the version of your page that they're looking for, regardless of their location or language.

Here's an example of how to use the hreflang element in an XML sitemap:
<URL> <loc>http://www.example.com/en-US/page1.html</loc> 
<xhtml:Iink rel="alternate" hreflang="es" href="http://www.example.com/es-ES/page1.html"/> 
<xhtml:Iink rel="alternate" hreflang="en" href="http://www.example.com/en-US/page1.html"/> 
<xhtml:Iink rel="alternate" hreflang="x-default" href="http://www.example.com/en-US/page1.html"/> 
</URL> 
The hreflang attribute specifies a page's language and country/region codes in this example. The value of the hreflang attribute is "es" for Spanish, "en" for English, and "x-default" for any other language.

The xhtml:link element specify the relationship between the current page and the alternate page. The rel attribute specifies the relationship, and the href attribute specifies the URL of the alternate page.

The value of the xhtml:link element's hreflang attribute should match the value of the URL's hreflang attribute. It tells search engines which page's version they should serve to users in different languages and regions.

If you're unsure which hreflang values to use, you can find a list of ISO 639-1 language codes here and a list of ISO 3166-1 country codes here.

It is important to note that Google doesn’t automatically derive the language from the country code. Specify the country code after the language code.

Implementing In Your HTTP Header

There are reasons why you might want to use the HTTP header method of implementing hreflang:
  • You have an extensive website with thousands of pages, and adding the tag to each page would be impractical.
  • You don't have access to your page's HTML code (for example, if you're using a content management system that doesn't give you access to the code).
  • You want to keep your code as streamlined and clean as possible, and adding an extra tag to each page feels like unnecessary clutter.
Link Header

The Link header tells search engines that there is an alternate version of the page and provides the URL of that page.

For example, if you had a page in English targeted at the US audience that you wanted to show up when someone searched for "example" in Google, you would add the following tag to the header of that page:
<link rel="alternate" hreflang="en-US" href="http://www.example.com/"/>
If you had a similar page in French targeted at the Canadian audience, you would add the following tag to the header of that page:
<link rel="alternate" hreflang="fr-CA" href="http://www.example.com/fr"/>
It's important to note that the hreflang attribute value has two parts - the language code (in this case, "en" for English and "fr" for French) and the region code (in this case, "US" for the United States and "CA" for Canada).

Once you've added the Link tag to all of the pages you want to target, Google will be able to serve the correct page to users based on their language and location.

One final note - if you're targeting a specific language but don't want to specify a region, you can use the language code by itself (for example, "en" for English). Likewise, if you're targeting a specific region but don't want to specify a language, you can use the region code by itself (for example, "US" for the United States).
Canonical Tag

If you're running a multi-regional or multilingual website, you'll need to implement canonical and hreflang tags. Canonical tags tell which version of a page is the "master" version, while hreflang tags tell search engines which language or region a particular page is for. Canonical tags should always point to the master version of a page, while you should use hreflang tags to indicate alternate versions of a page in different languages or regions.

You can use canonical and hreflang tags together to ensure that search engines properly index your website and direct visitors to the correct version of your site. It might look like this:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<URL>
<loc>http://www.example.com/en-gb/</loc>
<xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/en-gb/" />
<xhtml:link rel="canonical" href="http://www.example.com/"/>
</URL>
</urlset>

It will tell Google that the canonical URL for this page is http://www.example.com/, and the page is also available in English (GB).

Hreflang links should point to the canonical version of each URL, as they work hand in hand!

Hreflang Misconceptions

Create separate pages for each language and region

You only need to create separate pages if the content on those pages is significantly different. For example, if you have a page in English for the US market and a separate page in French for the Canadian market, you would need to create individual pages. However, if the content on the pages is essentially the same, then you can use hreflang tags to indicate the different language versions of the page.
Use hreflang tags for every single language and region

It is not necessary. You only need to use hreflang tags for your target languages and regions. For example, if you have a page in English for the US market and a separate page in French for the Canadian market, you would only need to use hreflang tags for those two languages and regions.
Use hreflang tags on every single page of their website

You only need to use hreflang tags on pages specifically targeted to a particular language or region. For example, if you have a page in English for the US market and a separate page in French for the Canadian market, you would only need to use hreflang tags on those two pages.
Use hreflang tags on every single link on their website

You only need to use hreflang tags on links that point to pages specifically targeted to a particular language or region. For example, if you have a page in English for the US market and a separate page in French for the Canadian market, you would only need to use hreflang tags on links that point to those two pages.
The hreflang attribute only needs to be included once on a page

If a page targets multiple languages or regions, the hreflang attribute should be included multiple times on the page, once for each language or region. If you have an English page for the US market and a separate page in French for the Canadian market, then the hreflang attribute should be included twice on the page, once with a value of "en-us" and once with a value of "fr-ca".
You only need hreflang on the home page of the website

If a website offers content in multiple languages or regions, you should use hreflang tags on all website pages, not just the home page. For example, if you have a page in English for the US market and a separate page in French for the Canadian market, you should use hreflang tags on both the English and French pages.
Hreflang targets a specific country

Hreflang tags should target specific languages, not countries.

For example, if you have a website in English and want to target users in the United Kingdom, you would use a hreflang tag that targets English, not the United Kingdom.

It is because hreflang tags tell search engines what version of your website to show in what language. If you have an English website and want to target users in the United Kingdom, you would use a hreflang tag that targets English.
X-default tags are mandatory

X-default tags are not mandatory, but they can be helpful. X-default tags tell search engines what to do if they can't find a page in the language or region specified by the user.

For example, if you have an English website and want to target users in the United Kingdom, you would use a hreflang tag that targets English. If a user in the United Kingdom searches for your website in French, it will direct them to the English version of your website.

However, if you also have a French page specifically for users in the United Kingdom, you can use an x-default tag to tell search engines to show that page instead.
Hreflang tags are case sensitive

Hreflang tags are not case-sensitive. However, it is generally a good idea to use lowercase letters for consistency.

Troubleshooting Hreflang Errors

If you're using hreflang tags on your website, it's essential to implement them correctly to avoid any errors. A few common hreflang errors can occur, and troubleshooting them can be tricky.

Here are tips on how to troubleshoot common hreflang errors:
Invalid HTTP Response Code

One common error is when the hreflang tag points to a page that returns an invalid HTTP response code (e.g. 404) caused by many things, such as a page that has been moved or deleted or an incorrectly entered URL. To fix this, ensure that the URL in the hreflang tag is correct and that the page exists.
Incorrect Language Code

Another common error is when the hreflang tag uses an incorrect language code. It can be by mistake in the code or by using a language code not supported by Google. To fix this, ensure that the language code is correct and that Google supports it.
Missing Hreflang Tags

One common error is when hreflang tags are missing from a page. It can be by oversight when implementing the tags or by using a tag generator that does not generate the tags correctly. To fix this, ensure all of the hreflang tags are present on the page and implement them correctly.
Non-canonical Pages

Another common error is when the hreflang tags point to non-canonical pages. It can be using an HTTP redirect instead of a canonical link or having multiple pages with the same content. To fix this, ensure the hreflang tags are pointing to the correct, canonical version of the page.
Incorrect Country Code

A common error is when the hreflang tags use an incorrect country code. It can be by mistake in the code or by using a country code that Google does not support. To fix this, ensure that the country code is correct and that Google supports it.
Hreflang and HTML lang mismatch

The error is when the hreflang tags and HTML lang attribute don't match. It can be by mistake in the code or using a different language for the two tags. To fix this, ensure that the hreflang tags and HTML lang attribute match.
Hreflang self-referencing error

The error is when the hreflang tags point to the same page. It can be by mistake in the code or by using a tag generator that generates the tags incorrectly. To fix this, ensure that the hreflang tags point to different pages.
Hreflang cycle error

The error is when the hreflang tags create a cycle. It can be by mistake in the code or by using a tag generator that generates the tags incorrectly. To fix this, ensure that the hreflang tags don't create a cycle.
Did you know that you can automatically detect all hreflang-related issues on your website?

With the Serpstat Site Audit tool, a comprehensive SEO audit is only going to take a few clicks.
As a result, you'll get the list of all technical issues that negatively impact your website's performance in search results, as well as recommendations on fixing them:
Checkout page
In the following article you can get a detailed Serpstat Site Audit overview:

Effective Website Audit With Serpstat: Tool Overview

Would you like to find all hreflang-related issues on your website RIGHT NOW?
Click the button below, sign up and get a free 7-day trial!

Conclusion

In conclusion, hreflang is a powerful tool that can help ensure that your multilingual or multi-regional website performs well in search. It helps ensure that you show your content to the right users and that you're getting the best out of your international SEO efforts.

Hreflang tag consists of attributes that specifies the relationship, language of the linked, and URL of the linked document. Without hreflang, you may risk your content being misindexed and appearing in the search results of audiences that aren't your target.

Hreflang help businesses gain an edge in search engine rankings as it tell search engines what language a website is written in, which can be a ranking factor. It can also help improve click-through rates from search results pages, as users are more likely to click on a result in their language, and prevent duplicate content issues, as it ensures serving each page version to the correct audience.

You can implement hreflang using on-page markup or HTML, XML sitemap, and HTTP header. Some benefits come from implementing hreflang tags:

  • Increase international traffic to your website
  • Improve your search engine rankings in specific countries or regions
  • Help users find the most relevant content for their location
  • Reduce the number of 404 errors on your website caused by users requesting content in the wrong language
  • Avoid having your website flagged as duplicate content in Google Search Console
  • Improve the overall website's user experience by ensuring that users always see content in their preferred language
To keep up with all the news from the Serpstat blog, subscribe to our newsletter. Also, follows us on LinkedIn, Facebook, and Twitter ;)

Speed up your search marketing growth with Serpstat!

Keyword and backlink opportunities, competitors' online strategy, daily rankings and SEO-related issues.

A pack of tools for reducing your time on SEO tasks.

Get free 7-day trial

Rate the article on a five-point scale

The article has already been rated by 1 people on average 5 out of 5
Found an error? Select it and press Ctrl + Enter to tell us

Share this article with your friends

Are you sure?

Introducing Serpstat

Find out about the main features of the service in a convenient way for you!

Please send a request, and our specialist will offer you education options: a personal demonstration, a trial period, or materials for self-study and increasing expertise — everything for a comfortable start to work with Serpstat.

Name

Email

Phone

We are glad of your comment
I agree to Serpstat`s Privacy Policy.

Thank you, we have saved your new mailing settings.

Report a bug

Cancel
Open support chat
mail pocket flipboard Messenger telegramm