The hreflang attribute is necessary if your site has content in two or more languages.

According to John Mueller of Google, the hreflang attribute, HTML attribute, is one of the most complicated SEO processes to manage. In fact, even if it seems as simple as a meta tag, it can get complicated quickly.

But as we’ll see, it just needs a little extra attention and you can use it easily for your site.

Continue reading the Dear Web article to find out more.

What is the hreflang attribute?
The HTML hreflang attribute is used to determine the language and geographical location of the website. You need to use it if there are multiple versions of the same page but translated into different languages: by entering the hreflang attribute you can tell the search engine how many variants exist of a single web page.

For example, thanks to the hreflang attribute, the Apple site searched in the United States will result in “www.apple.com,” while in Italy it will be “www.apple.com/it”

Hreflang is importance in SEO
If your site has content available in multiple languages, it is very useful for Google to be able to provide the most appropriate version for each user: in fact, having content available in their own language improves the user experience on the site, increases dwell time by reducing the bounce rate. All these aspects contribute positively on the SEO of the site.

Hreflang tags can also influence a page’s ranking, as pages in a hreflang cluster share ranking.

Another aspect why it is important to use hreflang tags is to avoid duplicate content. In fact, if, for example, there is content in British English and American English on your site, Google will classify it as duplicate content and index only one page.

Using hreflang tags, on the other hand, you can locate pages within a cluster by indicating to Google that the two pages are related but do not have the same content. To emphasize this difference, you can use lexical variants for the two languages or differentiate prices based on currencies,

How to Construct an Hreflang Tag
To build an hreflang tag we need to know the two-letter code for the language we need. In fact, hreflang supports any ISO 639-1 language code.

In case we want to translate our site from English to German, the hreflang tag will be:

By entering the code “de” and the URL, the page will be translated into German.

In addition to the language you can also specify which region or country the page is aimed at. Again, just add a die-letter code in ISO 3166-1 alpha-2 format.

For example, if the page in English is addressed to the United Kingdom, you will have:

While for the United States:

To indicate the region we are referring to, we must use the formula: hreflang=”language-country”.

How to Implement Hreflang Tags
There are many ways to implement hreflang tags, but regardless of the methodology you choose, you must always remember these three basic rules.

Let’s look at them below.

Rule 1. Hreflang tags are bidirectional: hreflang tags must be used in pairs: if you add the tag for the English version to an Italian page, the English version must contain the tag for the Italian version.

This tells Google that the pages are both under our control and that they are related to each other.

The moment the tags are broken or the relationship has not yet been established, you will get the wrong page or the wrong title for the URL that was correct in the search phase.

Rule 2. it is okay to create self-referential hreflang attributes: According to Google, “each language version must list itself and all other language versions.”

This means that each page must contain an hreflang tag that links to the page itself.

So if we create a hreflang tag between an English and an Italian page we will have the following hreflang tags:

The first tag indicates the URL of the Italian alternative of the page while the second tag is self-referential.

Similarly, the tags must appear on the Italian page.

Rule 3. x-default tags are recommended, but not required: the hreflang x-default tag allows you to set up a fallback page to show when language variants suitable for the user browsing are not available.

Using this tag is not mandatory, but Google recommends that you include it.

An x-default hreflang tag is composed as follows:

Implementing Hreflang Tags
Let us now see how to implement the hreflang tag.

You can do this through:

1. the HTML tags;
2. the HTTP headers;
3. sitemaps.

Let’s look at them below:

HTML tags
Using HTML tags is the easiest way to implement hreflang tags, especially if you are a novice.

Add the hreflang tags you need in the tag of the page. Take, for example, the English, German, and Chinese versions of the same blog page:

To take advantage of the hreflang tags we need to put the code in the of each page.

Using this method, however, involves a lot of work and can easily be confusing.

In fact, for each page translation inserted, there is a need to add the new tag to each previous version. There is no maximum number of hreflang tags to insert per page.

HTTP headers
On non-HTML pages you cannot implement tags in the of HTML, since there is no code of that type.

For these pages, HTTP headers must be used to indicate variants of the document.

Although this method is mainly used for content such as PDFs, it also works properly with normal web pages.

If we convert the English, Spanish, and German versions of the site pages we took as examples earlier to PDF, we will have these HTTP headers:

HTTP/1.1 200 OK

Content-Type: application/pdf

Link: https://ahrefs.com/blog/free-keyword-research-tools.pdf; rel=”alternate”;hreflang=”x-default”,