Hreflang: Full guide for newbies

Every day millions of French users visit global websites such as Amazon.com. Although the official page, Amazon.com, has content in English, users can still see text and product descriptions in French. Why? The global website has a localized version for France, thus all the French users will automatically have website content displayed in French. 

If your website has pages localized into several languages just like Amazon, you can specify the language for each page using hreflang attributes. 

With hreflang, search engines can easily identify that your website has content in different languages and redirect visitors to the page that corresponds to their region.   

What is hreflang?

Hreflang is an HTML attribute used for websites with content in multiple languages and for visitors from different regions. 

In other words, if the home page, example.com, is translated into German and English, you can use this attribute to indicate the language and/or the region for your pages. Depending on the user’s location, Google will pick and show them the right version of the page. 

How sites use the hreflang attribute

If you live in France and Google “Samsung official site,” you’ll see the following results:

By clicking on the link, you will be taken to https://www.samsung.com/fr/. Google will identify your location and bring you to the French version of the website. 

Hreflang attribute structure

Let’s see how hreflang is implemented on the SE Ranking’s website:

<link rel="alternate" hreflang="fr" href="https://seranking.com/fr/">

What do these elements mean? 

• link rel = “alternate”: alternate value indicates an alternative version of the page, in our case—French.
• hreflang = ”fr”: This alternative link points to ”fr”, which is the French language code. 
• href =”https://seranking.com/fr/”: The page in French can be found at the given URL. 

How many language versions your website really needs

Before going into details, let’s find out if all sites need language versions, how many languages a page needs, and how to manage multi-language pages.

At first glance, it might seem that creating localized pages for all sorts of regions is the best solution for user experience. By viewing pages in their native language, visitors usually spend more time on the site, which positively affects user behavior.

However, in discussions on Reddit, John Mueller advises not to scatter your focus on dozens of different languages simply because you can. “Let’s create all languages! Let’s make pages for all countries! What if someone in Japan wants to read it in Swahili? Let’s make even more pages!” 

According to Mueller, all of these pages will possibly get very little traffic, add little value to your site, and will add huge overhead—both to you and search engines. Therefore, make your decision carefully: If you have a lot of users from a certain region and the page contains important information, translate it. If you want to have a language version “just in case,” do not waste resources on it.

John advises focusing on the most important pages and not seeking to localize all the pages on the site.  

How to create multi-language pages

There are several ways to tell Google about multiple language versions of a page using hreflang annotations.

Separate domains for different languages

The most straightforward option, but also the most expensive one, is to create different websites in different languages: 

• https://example.fr/
• https://example.com 

As a result, you’ll have two individual domains that should be promoted as independent websites. Moreover, you’ll have to make sure that all changes are implemented on both projects. 

Subdomains

• https://en.example.com/
• https://fr.example.com/

As in the previous case, search engines see a subdomain as a separate site; so the disadvantages of this method are the same. 

Subfolders

This method is inexpensive and easy to set up. The different page versions are located within the same domain, which means all edits can be made in one place.

• https://example.com/  is the main version of the site in English
• https://example.com/es/  is the Spanish version

We recommend using the third option as this is the easiest method in terms of SEO and website maintenance. 

When you need the hreflang attribute

Before using hreflang, let’s figure out when you need it: 

1. Only the template, such as a header, footer, or navigation elements, is translated on a webpage. 
2. The site has different content for different regions. For example, there is English content for US users and French content for Canadian users. 
3. The site is fully localized into several languages:
   • A Portuguese website has 2 different versions,
     • for Portugal: <link rel=”alternate” href=”https://example.com/pt” hreflang=”pt-PT” />
     • and for Brazil: <link rel=”alternate” href=”https://example.com/br” hreflang=”pt-BR” />

2. Global sites with several versions for different regions in one language: for the UK, USA, and Canada.
3. Websites in different languages: English, Italian, and Chinese.
4. Sites in English and Russian languages but only for the visitors from the UK.

If your website is similar to one of the examples above, you need to implement the hreflang attribute.

When you shouldn’t use hreflang 

Let’s analyze several scenarios where you don’t need hreflang or should use it carefully. 

For websites with similar content in the same language

Sites with the same or similar content in the same language, even for different regions, do not need hreflang. 

For example, the website in English lists different prices for the US and UK (in dollars and pounds) and has different ways of placing an order—with and without delivery. 

If you decide to still use hreflang annotations in such cases, we recommend additionally creating a URL that’s not related to a specific region. For example, in addition to the US (en-US) and UK (en-GB) options, create the “en” version for visitors from other English-speaking countries.

For non-canonical pages 

Using rel=canonical incorrectly together with the hreflang attribute can cause conflicts and confuse search engines. 

You cannot use hreflang if the page is a duplicate and the canonical tag points to another page. 

When rel=canonical redirects a user to another page, it sends the following signals: “Don’t pay attention to this page, please index another canonical page instead.” 

When you use hreflang attributes on the same page, search engines will interpret them as: “Please index this page, we have great content here. And don’t forget about the versions in other languages too.” 

Not to confuse search engines, just don’t use hreflang on non-canonical pages. 

How to set up hreflang attribute

Now let’s see how to implement hreflang correctly and bring users and search engines to the most relevant version of a webpage by language or location.

HTML tags

Below you’ll find a piece of HTML code from seranking.com containing hreflang attributes and HTML tags. 

To bring users from different regions to the right pages, you should insert the <link> tag into the <head> element. Note that you should list all the language versions a page has in the code. 

Each element must have the following structure:

<link rel="alternate" hreflang="lang_code" href="url_of_page" />

Bold elements, “lang_code” and “url_of_page“, are variables that contain a certain language code and/or region plus the relevant link. For visitors from France, specify the language and region code fr and add the appropriate link:

<link rel="alternate" hreflang="fr" href="https://seranking.fr/">

You can find a full list of supported language/region codes here.

HTTP headers

If you have non-HTML files, such as PDF, you can use an HTTP header to tell search engines about pages in multiple languages.

The HTTP header must have the following structure:

Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", …

• url—full URL of a localized version of your page
• lang_code—a supported language/region code

Let’s say you want to show users two German versions of a PDF file: a German version for users from the United Kingdom and a German version for international users. In this case, the HTTP header will be as follows:

 Link: <http://de-gb.example.com/file.pdf>; rel="alternate"; hreflang="de-GB",
       <http://de.example.com/file.pdf>; rel="alternate"; hreflang="de"   

Sitemap

Let’s see how to use a Sitemap to tell search engines about alternative versions of a page using an example below. 

Let’s say that we have two pages: the first one is for Spanish-speaking visitors from Argentina and the second one is for Spanish-speaking visitors from other countries:

• www.example.com/es-ar/page.html—website in Spanish for users from Argentina; 
• www.example.com/es/page.html—website in Spanish for users from other countries.    

Sitemap will contain the following code:

 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
   xmlns:xhtml="http://www.w3.org/1999/xhtml">
   <url>
     <loc>http://www.example.com/es/page.html</loc>
     <xhtml:link
                rel="alternate"
                hreflang="es-ar"
                href="http://www.example.com/es-ar/page.html"/>
     <xhtml:link
                rel="alternate"
                hreflang="es"
                href="http://www.example.com/es/page.html"/>
   </url>
   <url>
     <loc>http://www.example.com/es-ar/page.html</loc>
     <xhtml:link
                rel="alternate"
                hreflang="es"
                href="http://www.example.com/es/page.html"/>
     <xhtml:link
                rel="alternate"
                hreflang="es-ar"
                href="http://www.example.com/es-ar/page.html"/>
      </url>
 </urlset> 

Languages and regions

You may have noticed that some examples included a single code (it, en, es, de), while others—a combination of codes (ru-EN, es-AR, etc). The first code indicates the language (in ISO 639-1 format), and the second points to the region (in ISO 3166-1 Alpha 2 format). 

The language code is mandatory and always comes first, whereas the country code is optional and comes second. The language and region codes don’t have to be related to each other. For example: 

• pl—a page in Polish for users from all over the world
• pl-PL—a page in Polish for users from Poland
• pl-DE—a page in Polish for users from German

Note that in some countries users can use different dialects. For example, in China, there are 10 dialect groups. If you have a large audience from a specific Chinese region, you can select the needed code from the ISO 15924 list.

What is x-default

In the HTML example below, you can find the line containing the x-default hreflang attribute.

If none of the specified languages match the browser settings of your users, x-default will automatically redirect them to the default page. As a rule, users are redirected to the main version of the page. 

Common hreflang mistakes

If you’ve made a simple technical mistake, search engines will just ignore invalid hreflang tags. This is certainly not the best scenario, but consider it as a minor setback as hreflang will not affect the site’s rankings.

On the other hand, if you did everything right but linked the wrong pages, you can affect the user experience.

In the infographics below, you will find the most common hreflang conflicts webmasters often deal with.

Let’s explain these mistakes in detail.

Missing return links

If page A links to page B, then page B must link back to A. When using an hreflang attribute, all pages must include this backlink. Otherwise, search engines will misinterpret the guidelines. 

For example, if the French page uses hreflang annotation that includes a German version, the page in German must also link back to the French page.

The French version of the page should look like this:

Page 1: https://www.example.com/fr

 ✅<link rel="alternate" href="https://example.com/de" hreflang="de" />
 <link rel="alternate" href="https://example.com/en" hreflang="en" />
 <link rel="alternate" href="https://example.com/fr" hreflang="fr" /> 

In turn, the German version must also include the URL of the French page, which is missing in the example below: 

Page 2: https://www.example.com/de

 <link rel="alternate" href="https://example.com/de" hreflang="de" />
 <link rel="alternate" href="https://example.com/en" hreflang="en" />
 ❌ <link rel="alternate" href="https://www.example.com/fr" hreflang="fr" />  

— the German page doesn’t link back to the French page

No self-referencing hreflang

Each page should not only include URLs of other language versions but also reference itself. In our example, the French page contains such a URL, whereas the German version doesn’t.

Page 1: www.example.com/fr

 ✅<link rel="alternate" href="https://example.com/de" hreflang="de" />
 <link rel="alternate" href="https://example.com/en" hreflang="en" />
 <link rel="alternate" href="https://example.com/fr" hreflang="fr" /> 

—the French page references itself in hreflang annotations

Page 2: https://www.example.com/de

 <link rel="alternate" href="https://example.com/en" hreflang="en" />
 <link rel="alternate" hreflang="fr" href="https://www.example.com/fr"/>
 ❌ <link rel="alternate" href="https://example.com/de" hreflang="de" /> 

—the German page doesn’t reference itself in hreflang annotations

Region code alone is specified (missing language code)

You can specify either the language or both the language and the region, if necessary. You cannot use only the region (country code) because the search engine will not be able to determine the language only by the country code, for example:

• FR—it is wrong to specify only the region without the language;
• fr-FR—you can specify the language and the region;
• fr—specify only the language if you want your page to be accessible by users from all countries.

Incorrect canonical tags

When using rel = “canonical” and hreflang, make sure the canonical tag includes the link to the current page. However, non-canonical pages should not contain hreflang.

In the example, rel = “canonical” indicates the current version of the page and includes an hreflang attribute. Search engines will read this guideline as follows: this is the main version of the page, which needs to be indexed; this page is in French but there is also a page in German, which also needs to be indexed.

In this case, search engines will crawl and index both pages.

https://www.example.com/fr

✅ <link rel="canonical" href="https://www.example.com/fr">

—rel=”canonical” contains the URL of the current version of the page. 

 <link rel="alternate" hreflang="en" href="https://www.example.com/en"/>
 <link rel="alternate" hreflang="fr" href="https://www.example.com/fr"/> 

Let’s look at another example where rel = “canonical leads to another page:

https://www.example.com/fr

❌ <link rel="canonical" href="https://www.example.com/1/fr"> 

— rel=”canonical” redirects to another page. 

 <link rel="alternate" hreflang="en" href="https://www.example.com/en"/>
 <link rel="alternate" hreflang="fr" href="https://www.example.com/1/fr"/> 

How will Google interpret this message? Here, we ask to index another page and ignore the current version. At the same time, we say that both French and German pages should be added to the index. Google will simply ignore such controversial instructions.

Several language codes for one URL

If multiple language codes have the same URL, search engines are unlikely to figure out which language version to show.

For example, if hreflang = “fr” and hreflang = “de” lead to https://www.example.com/de, this will create a conflict.

Multiple pages with the same language code

Google prefers that you have only one language code for one domain. For example, avoid using two different URLs for the “de” version: https://www.example.com/ and https://www.example.com/de.

Missing x-default

Although it is not necessary to use “x-default”, we still recommend doing so. For example, users from countries outside of your core regions may also want to visit your website. Without this specified default page, search engines will choose a domain that may not be the one you intend. For example, if your site doesn’t have a French version, you can specify that all visitors from France should be redirected to the main version of the page, as a rule, to the English version that is not region-specific. 

How to find and resolve hreflang errors 

It can be very difficult (if not impossible) to check all the pages manually. Google suggests using the International Targeting report in Google Search Console to see if any errors were detected. 

You can also debug the most common problems automatically with the help of the SE Ranking tool for SEO website audit. This instrument will not only check your hreflang attributes and come up with the error details, but will also offer recommendations on how to fix them.

The Website Audit tool will help you to identify:

• invalid language codes
• hreflang pages that don’t link out to themselves
• hreflangs to non-canonical pages
• hreflang and HTML lang that do not match
• confirmation (return) links missing on hreflang pages
• multiple language codes for one page
• invalid HTML lang codes
• language duplicates in hreflang attributes
• missing HTML lang codes
• missing x-default hreflang attributes

To find errors, go to your account, select your project, then Website Audit → Issue Report → Localization:

Read our detailed website audit guide and get a checklist to keep checks under control.

Conclusion

The hreflang attribute is a surefire way to help search engines serve the right page results to users searching in a particular language and region. Thanks to hreflang, you can prevent duplicate content issues, improve the user experience, and give your content a global SEO boost. 

Implementing hreflang may not be easy—even the smallest mistake can result in lost rankings and duplicates—but when done correctly, the benefits for websites and users are huge.

Maria Yefimenko

Editor

Maria is a writer and editor at SE Ranking. For the best part of her career, she has built experience and expertise in content marketing and blogging. With a particular fondness for doing research, she has written on lots of tech-related topics, including SEO, fintech, blockchain, and startups. Her passion for travel and music allows her to broaden her outlook and use her strengths – creative and descriptive writing.