What is hreflang and to use them on site for seo to improve SEO score

How to set an alternative hreflang attribute


What is the alternate hreflang attribute and what is it for?

The rel=”alternate” attribute hreflang=”x” helps the search engine understand the geo-referencing of a page to provide the user with the correct language version in the search results. It shows search engine crawlers that the same content is available in different languages. With rel=”alternate” hreflang=”x”, search engines can automatically show the correct language version, based on geographic and linguistic data.

The hreflang attribute is responsible for implementing the required language version.

Also, the hreflang attribute does not allow gluing two pages with the same content. It indicates to the robots of search engines that the pages are created for different regions. Otherwise, the search engine may consider the pages are identical and glue them together, because of which they will not get into the index and will not be ranked.
John Mueller (a leading analyst at Google) claims that the hreflang attribute is one of the most difficult aspects of SEO. But do not worry, the attribute hreflang is not so complicated, and the ways of its implementation will be discussed below.

JohnMu about hreflang alternate on twitter

When do I use the rel=”alternate” hreflang attribute?

The rel=”alternate” hreflang attribute should be used in the following cases:

  • On your site, only some of the site elements are translated, for example, only the page template (the navigation bar or the footer). This is often used in forums with a lot of UGC (User-Created Content). In such cases, you need to avoid the appearance of multilingual content on the same URL.
  • The content is posted in the same language, but differs in some nuances for residents of different regions. For example, content in Spanish will be slightly different for residents of Spain, Mexico, and Argentina.
  • Your site is completely translated into another language. For example, every page exists in Russian and English.

Here is an example:

There are several options for indicating to the search engine that the site is multi-lingual and multi-regional. For example, our site has a English-language page https://new-site.com/ and its PL version – https://new-site.com/pl/. Thanks to one of the following ways, we can tell the search engine that under the other URL is the Poland version of the English version of the site.

Example implementation:

Hreflang alternate implementation on site
How to implement hreflang alternate | SEO

Also consider the option that we have an online store, the regions of which are both the U.S. and the UK. In this case people from the U.S. prefer to see prices in the online store in dollars, and people from England – in pounds.

To provide users with a relevant answer, you need to create two language versions of the same page. One will show the price in dollars, the other in pounds. All other content on the pages will be identical, but we will use the rel=”alternate” hreflang attribute to explain to search engines that these are alternate versions.

For a deeper understanding, it is also worth reading Google and Yandex tips on using hreflang.

The alternate hreflang attribute and SEO

The main advantage of the alternate hreflang attribute is that only with its help it is possible to optimize the multilingualism of the site and indicate it to search engines. Without implementing this attribute, search engines will not be able to recognize and correctly display the desired language versions of the site in the results.

But beyond that, it has a number of other advantages:

  • Introducing this attribute solves the problem of duplicate content. For example, if our site has pages in English for UK and US users, but the content on these pages is identical. The hrelfang attribute will show the search engine that the pages were created for different regions.
  • Implementing this attribute helps expand the international reach of the target audience and increase traffic. If the attribute is set correctly, the search engine will understand that pages are optimized for users from relevant regions and will redirect them to more appropriate language and regional versions of the site.
  • Increase conversions, decrease bounce rate and pessimization. Having information in the language the user wants, depending on the location, improves the user experience and results in a lower bounce rate. The fewer people return search results, the better the site will rank.

How to properly implement alternate hreflang attribute on the site?

Now let’s talk about how to properly implement alternate hreflang on your site. There are three ways to implement the alternate hreflang attribute:

  • Introducing the hreflang attribute with HTML tags.
  • Implementing the hreflang attribute using XML sitemap.
  • Implementing the hreflang attribute with HTTP headers.

Now more about each of them.

Implementing the hreflang attribute with HTML tags

This is the most popular and simplest method. To implement it, in the html code of pages that have an alternative version in another language (and/or for another region), you must place links to these versions.

In the HTML section at https://new-site.com/, place a link to the German version of the site, according to the following example:

<link rel="alternate" hreflang="de" href="https://new-site.com/">

The site also has an English and Ukrainian version for residents of Ukraine, for him the implementation of hreflang will look as follows:

<link rel="alternate" href="https://new-site.com.ua/" hreflang="ru-UA"> <! - Russian version of the site for residents of Ukraine -->
<link rel="alternate" href="https://new-site.com.ua/en/" hreflang="en-UA"> <!-- English version of the site for residents of Ukraine -->
<link rel="alternate" href="https://new-site.com.ua/uk/" hreflang="uk-UA"> <!-- Ukrainian version of the site for residents of Ukraine -->

Implementing hreflang using XML mapping

The file sitemap.xml helps to inform the search engine of the existence of alternative language versions and this method is a priority if the site has implemented a large number of language versions. To properly implement this method, we need the loc element and tags:


These tags indicate alternative language versions, including the current one.
Example implementation for https://new-site.com.ua/

<xhtml:link rel="alternate" href="https://new-site.com.ua/en/" hreflang="en-UA">
<xhtml:link rel="alternate" href="https://new-site.com.ua/uk/" hreflang="uk-UA">

Example implementation for https://new-site.com.ua/en/

<xhtml:link rel="alternate" href="https://new-site.com.ua/" hreflang="ru-UA">
<xhtml:link rel="alternate" href="https://new-site.com.ua/uk/" hreflang="uk-UA">

Example implementation for https://new-site.com.ua/uk/

<xhtml:link rel="alternate" href="https://new-site.com.ua/en/" hreflang="en-UA">
<xhtml:link rel="alternate" href="https://new-site.com.ua/" hreflang="ru-UA">

If there are multiple language versions of the URL on the site, you must use the rel=”alternate” attribute hreflang=”x” in each.

For example, you have content in Ukrainian, English and Russian languages. In that case, the language version of the site in Russian should include links with rel=”alternate” hreflang=”x” attributes to the English and Ukrainian versions. They, in turn, should contain similar links pointing to alternate versions.

Implementing the hreflang attribute with HTTP headers

This embedding method can be used for pages that are not HTML documents, but, for example, files in PDF, DOC, etc. Here the code will look like this:

Link: <https://new-site.com.ua/file.pdf/" rel="alternate" hreflang="ru-UA">
Link: <https://new-site.com.ua/en/file.pdf/" rel="alternate" hreflang="en-UA">
Link: <https://new-site.com.ua/uk/file.pdf/" rel="alternate" hreflang="uk-UA">

As a rule, this method is problematic because SEO tools pay little attention to HTTP headers. Thus, this method often causes more difficulties than benefits.

Hreflang and x-default

This is a special purpose of the hreflang attribute called x-default, which provides for a universal version of the page. This page will redirect users who live in those countries and speak those languages that the site does not provide with the hreflang attribute. In the link element it looks like this:

<link rel="alternate" href="https://new-site.com.ua/en/" hreflang="x-default">

If the user’s location and language do not match, redirects will be to the specified link.

When using the rel=”alternate” HTML attribute hreflang, pay attention to possible embedding errors:

  • be sure to do the linking. For example, if the Russian version of the site is the alternative English version, the English version must have a link to the Russian version of the site, otherwise the search engine will perceive these pages as duplicates;
  • incorrect coding for language and region. The language is ISO 639-1 and the region is ISO 3166-1 Alpha 2;
  • the hreflang attribute can contain two parameters: language and region. The region is used when necessary, and the language is required.


Let’s summarize all of the above:

  • In order for users from different countries and regions to get from search relevant language versions of the site pages, it is recommended to use the attribute rel=”alternate” hreflang.
  • The hreflang attribute indicates to the search engine that the site contains identical pages in different languages (or the same language) and that they are optimized for different regions.
  • The hreflang attribute prevents the gluing of pages, so they are better indexed and ranked.
  • There are 3 ways to embed rel=”alternate” hreflang into the site: with HTML tags, XML sitemaps, and HTTP headers
  • For a page that is not tied to a specific language or region, you must specify the attribute hreflang=”x-default”
  • Using the attribute hreflang helps distribute traffic more efficiently between pages of the site.
Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like