How to implement and use hreflang

Comfortable and effective web surfing is a key factor for a successful site operation. To maximize and stimulate traffic, many sites translate their content to several languages. This translation increases the number of visits and engages net surfers from all around the worlds.

Webmasters usually use tag hreflang to clarify the lingual and geographical targeting of a website; this allows visitors to see any page in their mother tongue.

What is hreflang for?

This tag indicates to search engines that a certain site is available in different languages: the pages' content is the same but aimed at different groups of people from diverse regions. In order for all this to happen, site is to be indexed before it's shown to users. This tag helps searching robots to make the site visible for users.

Tag hreflang prevents merging of the pages while indexing and allows the searcher to identify needed version of the content conforming to the region of the user.

For instance, Serpstat.com includes content in three language versions: English, Ukrainian, and Russian. Thank to the hreflang tag, users are shown as soon, as they entered the site, the most suitable content's version for the region they live in. As a result, they don't need to switch it manually.

When is it needed?

In most cases, hreflang is used when the site content is completely translated into other languages. But there are three more cases when hreflang is of use:

When the site content, catalogs or subdomains are partially or completely identical. For example, sites aimed at different regions speaking the same language (Great Britain, USA, and Australia are English-speaking countries).

Webmasters translated only page template and over looked the main content. This case is about forums; where users constantly generate content themselves.

The site is partially translated and the content is aimed at a particular kind of audience, according to particular features.

This tag doesn't guarantee that the search engines won't mark the pages as doubled. If you separate the content for different regions, it has to be unique.

How to implement hreflang?

Remember that codes must include links to other site's versions. If the alternative for English version is a German one, then the German page's code must contain a link to the English version.

There are three ways to implement hreflang:

Using HTML-tags

A code has to be typed for every single page. So home page codes' have to be included into section <head></head>. Here is an example:

<link rel="alternate" hreflang="uk" href="https://serpstat.com/uk/">
<link rel="alternate" hreflang="ru" href="https://serpstat.com/ru/">
<link rel="alternate" hreflang="en" href="https://serpstat.com/">

Also, the tag may include language and regional site versions. To do this, you have to use the following code:

<link rel=”alternate” hreflang="xx-YY" href="URL" />

xx — language;
YY — region;
URL — link to the alternative page.

This option is not advised for large websites. All the site versions are bound to each other. If your site is translated into several languages, all of them have to be added to the code on every page as it is shown above. When the user enters the needed version of the page, the browser will need load all the existing versions of the site. It is quite a time-consuming process.

Using sitemap files

This tool is more convenient for large multi-language websites. Add an xhtml:link element to the code. Do this for every page which includes an alternative version. These tags have to point at alternative URLs including the current one. Add xhtml:link in the <url> </url> section with links to alternative pages of the site.

<url>
<loc>http://domain.com/</loc>
<xhtml:link rel="alternate" hreflang="en-GB" href="URL" />
<xhtml:link rel="alternate" hreflang="es" href="URL" />
<xhtml:link rel="alternate" hreflang="x-default" href="URL" />
<xhtml:link rel="alternate" hreflang="en" href="URL" />
</url>

Using HTTP headers

This option is great for pages in PDF format and other formats except for HTML. The main problem of this method is similar to the link in the <head> section.

Link: <URL/document.pdf/>; rel="alternate"; hreflang="en"
Link: <URL/document.pdf/>; rel="alternate"; hreflang="en-GB"
Link: <URL/document.pdf/>; rel="alternate"; hreflang="es"
Link: <URL/document.pdf/>; rel="alternate"; hreflang="x-default"

Tag hreflang x-default

This is a special tag which determines the page a user should enter if none of the languages you mentioned in the code meets his browser's settings. You can see how it looks above.

Conclusion

Tag hreflang is quite an important component of the regular working process of any site. It helps users from different parts of the world to see the content in their language.

This tag also indicates to search engines the existence of the same pages but in other languages. It helps them to be indexed and shown to the users while surfing the net.

This article is a part of Serpstat's Checklist tool

Checklist is a ready-to-do list that helps to keep reporting of the work progress on a specific project. The tool contains templates with an extensive list of project development parameters where you can also add your own items and plans.

Try Checklist now

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5

Found an error? Select it and press Ctrl + Enter to tell us