Hreflang Tags: What They are and How to Use Them

If your site is targeting audiences from different countries, then it is logical to show users content in different languages. After all, most users prefer to read in their native language.

There are also situations when different information needs to be displayed for specific regions. For example, a restaurant chain website might have a menu page with content that differs depending on the country of the visitor.

To solve these problems, pages with the alternate tag and the hreflang attribute are usually used.

What Is Hreflang and How Does It Look in the Site Code?

Hreflang is an HTML attribute used to indicate the language versions of pages on a site. It helps the Google search engine to identify the content correctly. This way, the SERP will show versions of the site that are suitable for the language and/or country of the user.

The attribute must be used with the <link rel=“alternate”/> tag. This link indicates that the page is alternative, and hreflang determines the language version or region.

For example, by entering the search “Doctor Martens” in the USA, the system will help us navigate to a page in English.

If you’ll make the same search from France, then the result will change:

The rel alternate and hreflang tags make these results in the SERP possible. In the HTML code of the site it looks like this:

Let’s see what each part of the code means:

1. <link rel=“alternate” – indicates that the link in the tag is an alternate version of the page.
2. hreflang=“fr-fr” is a French language page for people in France.
3. href=”https://www.drmartens.com/fr/fr/” – an alternative page can be found at this link.

When Should You Specify an Alternate Hreflang?

Google is able to identify alternate versions of a site, even if you don’t do anything about it. But there are still cases when it is recommended to specify alternative pages.

1. The main content of the site remains in the original language but you have translated the page template such as the navigation bar. Typically, such actions are performed on pages whose content is created by the users such as comment pages or forum posts.
2. The site contains the same content but it is slightly different for different regions.
3. The content of the entire site is fully translated into several languages.

How to Correctly Form and Use the Hreflang Tag on the Site

It is very easy to generate a tag. To do this, you need to correctly specify the code for the selected language. Hreflang supports any ISO 639-1 two-letter language code. A complete list can be found here.

If you do not find a suitable language code, you can use the value hreflang=”x-default”. It is recommended to use this code if the regional settings or language does not match the browser settings.

In addition to the language, you can specify a region or country in the tag. This is optional. However, if you want to target the site to native speakers of a specific language in a specific region, then enter the country code in the ISO 3166-1 alpha – 2 format. The full list can be found here.

Specifying the country can be useful if you have an online store in English that targets the US and the UK. These countries use different currencies, so you can create two versions of your product pages with the different currencies. In the hreflang tag, specify the country so the correct alternative page will be shown.

Remember that when forming hreflang, the language is indicated before the country:

hreflang=“en-us – this page is in English and is intended for American residents.

Please note that if you enter only the country code, Google will not be able to determine the language in which you want to display the page.

Support Google

In addition to the rules for the formation of a tag, there are also rules for their placement on the pages:

1. The URL of the alternative pages must be specified in full. This includes the name of the protocol.  href=”https://example.com/Italian” is correct, but not href=”example.com/Italian”, or href=”https://example.com”.
2. Tags must be bidirectional. If you add hreflang to the German version on the English version of the site, you also need to specify the hreflang for the English page on the German version.
3. Each alternate page must contain a hreflang link to itself. For example, on the alternative page for Italians https://example.com/Italian, you need to specify: <link rel=“alternate” hreflang=“it” href=“https://example.com/Italian”/>  in addition to other language versions.

How to Properly Embed Hreflang on a Website

There are three methods that you can use to point Google to alternative pages:

1. Tags in HTML.
2. HTTP headers.
3. Sitemaps.

The site owner should choose the most suitable option for themself.

Implementing Hreflang Tag Using HTML

Using HTML is the simplest method. To do this, you need to form an hreflang: <link rel=”alternate” hreflang=”language code” href=”page URL” />. After, add it to the <head> tag on the desired page of the site. There are no restrictions on the number of added alternative pages.

Google recommends adding all <link> tags at the beginning of the <head> element.

Support Google

You can use the HTML Validation Tool to verify that the <link> tag is placed correctly.

This hreflang implementation will be useful if your site does not have a Sitemap. Without it, you cannot implement HTTP headers.

This process can become time consuming. If the site has many language versions, then all alternative URLs should be specified on each such page. This will increase the size of the HTML code.

Implementing Hreflang via HTTP Headers

For PDF pages, it is impossible to implement hreflang via HTML code, since the code is not there. In these cases, HTTP headers are used. They indicate the language of the alternate versions of the document.

The title should look like this:

Link: <URL >; rel=”alternate”; hreflang=”language code“, <URL>; rel=”alternate”; hreflang=”language code“

Let’s see what the code elements mean:

1. <URL> – Here, you need to specify the URL of the language version page.
2. <language code> – The code of the required language and region is indicated here.

This way of adding hreflang will also make the page code heavier in case there is a large number of language versions.

Implementing Hreflang via Sitemap

You can specify alternative page variants in the xml Sitemap file. For this method, you need to use the <loc> element, which specifies the URL of the page that you want to report the language versions. In this case, you need to specify links to all language and regional variants in the <xhtml: link> tags, as well as a URL linking to itself. Read the related article – Sitemaps XML Guide.

There are rules for specifying alternative pages in sitemaps:

1. You should always specify the xhtml namespace: xmlns:xhtml=”http://www.w3.org/1999/xhtml“.
2. For each new URL, you need to create your own <url> element.
3. You must include the <xhtml:link rel=”alternate” hreflang=”language code“> element in each <url> element. It lists all the page options, including the current one. The order of the listed <xhtml: link> does not matter.

Support Google

Let’s take a closer look at what this part of the Sitemap means:

1. xmlns:xhtml=”http://www.w3.org/1999/xhtml” – This specifies the xhtml namespace.
2. <loc>http://www.example.com/english/page.html</loc> – This is a page that has alternate versions.
3. <xhtml:link>   – This is an element that contains data for an alternative page.
4. rel=”alternate” – This is an attribute that indicates that the page is alternative.
5. hreflang=”de” – The language of the alternative page is German.
6. href=”http://www.example.com/deutsch/page.html“ – This is a URL where you can find an alternative version of the page.

Using a Combination of Hreflang and rel=canonical

Canonical is specified in order to tell the search engine which URL should be considered the main one. That way, if your site has multiple variations of the same page, Google will figure out which one is canonical. Therefore the rel=”alternate” href=”URL” and the rel=”canonical” attributes must be used together in all language versions. In this case, on each alternative page, rel=”canonical” must point to the URL of the current page, not the main version. For example, you have a main page https://site.com and its language version https://site.com/italian, for which https://site.com/italian will be canonical. More information on the topic in the article – Rel=Canonical Tag.

Why hreflang is needed in SEO and what useful tools to use when working with it

There are several reasons why you need to use hreflang in your website promotion process.

1. If the resource has different language versions, and you want to appear in the search results of different countries, then hreflang is required for use. Google will be able to determine which page to show to certain native speakers this way. Users won’t leave the site because they don’t understand it, which will ultimately reduce the bounce rate. Read more – What is a Good Bounce Rate?
2. Hreflang can solve the problem of content duplicates. The same content may appear on pages for America and Great Britain. The language will be English but the currency is different. Google will treat these pages as the same, but hreflang will tell it that they are for users from different countries.

By using the hreflang attribute, you can run into some errors like missing backlinks and incorrect language codes. If the site has a large number of language versions, it will be difficult to track errors manually. Because of this, Google Search Console has an International Targeting report tool. With its help, you can track and fix the problems that come about. Find out more in the article – What is Google Search Console?

There are also other tools that are useful for working with hreflang:

1. Aleyda Solis’s hreflang tags generator tool is a tool for creating and modifying the hreflang attribute.
2. Merkle SEO hreflang tag testing tool allows you to check the hreflang tag on the website pages.
3. Hreflang XML sitemap generator helps to create hreflang for the sitemap file.

As an SEO specialist, you just have to learn how to correctly form the hreflang attribute and use it for alternative site pages. If you have any questions on the topic, I suggest watching a video from Google employees: