What is hreflang? The HTML attribute for multilingual websites

If you want to internationalise your website and offer it in different languages, there are a few things you need to take care of, including optimising the different language versions for search engines. Only by using language or country-specific SEO measures is it possible for the search engine crawlers to correctly label the different language versions of the website and later display them to the appropriate audience. One of the most effective tools available for this purpose is the link attribute hreflang.

What is hreflang?

In December 2011, Google introduced hreflang as a simple and effective solution to inform search engines about the relationships between alternative website variants. The attribute signals to search application crawlers that the current page’s content is available in different language versions. To do this, the attribute is set within a link element in the HTML document, including the respective language abbreviation. For example, if you want to label a Spanish website, you use the country code ‘es’. The complete element looks like this:

<link rel="alternate" hreflang="es" href="Website URL" />

If this element were to be integrated into an English language page, for example, the search engine would automatically identify users with Spanish speaking IP addresses and send them to the relevant language version of the site.

hreflang can also be used to distinguish variants of a single language. In this case, the attribute is simply extended by specifying the target region. For the previously mentioned Spanish variant, it is possible to divide users into regional categories such as Spain ("hreflang="es-ES") and Mexico ("hreflang="es-MX"). The list of possible language and regional abbreviations can be found in the ISO 639 and ISO 3166 standards.

Why is hreflang relevant for SEO?

The main argument for using attributes such as canonical or hreflang is to avoid duplicate content in multilingual web projects. The aim is to serve multiple markets without fundamentally changing the content – except with the actual translation. For countries where the same language is spoken, the situation is a bit more complicated because a few changes due to cultural or regional differences (vocabulary, currency, contact information, etc.) need to be made, but apart from that the content is otherwise identical. Since the same domain is generally used, it important to let the search engines know the situation to prevent a decrease in rankings.

While the canonical attribute declares a URL to be the dominant variant and prevents all alternative versions from being indexed, the hreflang attribute signals which version should be displayed to a specific target group (language and/or country). For this reason, HTML markup is always a good idea if you want your website to be successful internationally and offer corresponding multilingual content. Even if the attribute has no direct influence on the search engine ranking, using it correctly will pay off in the long term because both crawlers and users in different countries will be able to understand your website better.

How is the hreflang tag structured?

Wondering how hreflang works? The link hreflang tag link is based on the HTML link element. The link element <link /> is a blank element and is simply intended to be used for implementing the corresponding attributes. It can only be used in the head area, but as many times as necessary. In order to link the different language versions with hreflang, the two attributes rel and href are required in addition to the hreflang attribute. Here is the function of the three different components:

• rel: rel specifies the relationship between the underlying document and the linked document. The value alternate tells the search engine that the external document contains an alternative version of the website.
• hreflang: hreflang itself describes the language that the linked document is written in and can sometimes also indicate which country it is particularly relevant to. A clear listing of all possible combinations can be found at lingoes.net.
• href: The href attribute specifies the URL of the alternative language version by default.

The following hreflang example illustrates this:

<link rel="alternate" hreflang="Language code-country code" href="Website URL" />

If users are not assigned to a suitable language version, the ranking decides which of the language variants should be displayed. In this case, you may end up losing potential readers after just a few seconds if they land on the wrong language version. However, with "x-default", Google provides an option which you can use to diffuse the situation. This element lets the search engine know that the linked URL is the default option for all users who do not have an explicitly named language version. Here is an example:

<link rel="alternate" hreflang="x-default" href="URL of the ‘default’ page" />

The element is discussed in more detail in Google’s blog post on introducing “x-default hreflang” for international websites.

How do you implement hreflang?

The hreflang link attribute can be implemented in three ways. The most common way is by including it in the head area of the respective HTML document. For documents that are not in HTML format (e.g. PDF files), the element can alternatively be used in the HTTP header. Last, but not least is the option of including the language or country-specific attribute in the sitemap.

Adding it to the HTTP header works in principle in the same way, as all existing language versions must also be referenced here. There are only a few minor differences in the syntax:

Link: <http://exampledomain.com/es/downloads/manuals.pdf/>; rel="alternate"; hreflang="es"

Implementing the hreflang attribute within an XML sitemap serves as a particularly effective strategy for managing large-scale, international web projects, compared to the standard practice of marking each page individually. If you offer multilingual content on a large scale, the effort involved in the implementing HTML would be relatively high. In a sitemap, all language versions must also be listed individually by specifying the respective URL. Each URL is additionally specified by an xhtml:link element that references the other available variants:

<?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://exampledomain.com/</loc>
        <xhtml:link
            rel="alternate"
            hreflang="en"
            href="http://exampledomain.com/"
        />
        <xhtml:link
            rel="alternate"
            hreflang="it"
            href="http://exampledomain.com/it/"
        />
        <xhtml:link
            rel="alternate"
            hreflang="es"
            href="http://exampledomain.com/es/"
        />
        <xhtml:link
            rel="alternate"
            hreflang="de"
            href="http://exampledomain.com/de/"
        />
    </url>
</urlset>

You must then repeat the <url> tag in the same way for each language version of your article.

A certain characteristic of the attribute is very important for understanding how hreflang works. This is the fact that it links two or more documents bidirectionally and not unidirectionally, as is the case with a redirect. This means that it’s not enough for the English-language website to simply link to the Spanish-language version, because the Spanish-language version has to link back to the English-language page. The search engine can only recognise your website’s structure and adapt the results for searchers accordingly if the hreflang HTML annotation is set up in all documents in all possible directions (language versions).

The following hreflang example code for the website example company.com with the English, Italian, Spanish and German language versions would therefore have to be entered in the header of all four HTML documents:

<link rel="alternate" href="http://exampledomain.com/" hreflang="en" />
<link rel="alternate" href="http://exampledomain.com/it/" hreflang="it" />
<link rel="alternate" href="http://exampledomain.com/es/" hreflang="es" />
<link rel="alternate" href="http://exampledomain.com/de/" hreflang="de" />

Frequent errors when embedding the hreflang tag

The hreflang examples listed for HTML show that implementing practical, automatic user assignment for multilingual websites is by no means rocket science. However, they also illustrate the effort involved and the potential for error that should not be underestimated when dealing with so many reciprocal references. This occasionally results in minor or major errors, some of which only affect individual pages, but some of which also jeopardise the functionality of hreflang for the entire website. For this reason, we have summarised some of the most common sources of error below:

hreflang not being implemented at the URL level

Since the hreflang attribute is always linked to a specific URL, it must always be created at that level. In other words, if you only mark the output URL of your different language versions with the hreflang attribute, the automatic user assignment will only work for these start pages, and not for the entire website. It is therefore your task to implement the link element individually for all multilingual URLs, or alternatively, to work with the sitemap variant as previously mentioned.

One or more of the language versions do not reference themselves

Many site owners correctly label the URLs of other language versions with the hreflang attribute but forget that the respective page must also refer to itself. This means that the linking structure is incomplete and cannot be interpreted by Google and other search engines.

Don’t forget to specify a default page using hreflang x-default, otherwise you will leave some optimisation potential untapped.

Incorrect ISO codes

When it comes to country and language codes, many website operators tend to become creative when it comes to SEO. However, this often doesn’t work and can lead to incorrect hreflang code being implemented. The combination ‘en-uk’ looks correct if the content of the page is targeted to the UK public – however, the correct link is actually ‘en-gb’. Always check the country abbreviations you’re using against the ISO standard 639-1.

Reference to old, or non-existent URLs

A common cause of incorrect hreflang tags is using URLs that no longer exist. This primarily happens when the attributes are automatically integrated on all subpages, but not all of these pages are available in every offered language version. Outdated URLs logically occur whenever you make changes to the URL structure and do not transfer these changes to the link elements.

Contradictory use of the canonical and hreflang tag

Many international websites use the canonical tag so that search engine crawlers do not index pages with the same content twice. Although this approach is a great option in terms of working around the duplicate content issue, it is not compatible with the hreflang attribute. If a page contains both tags, the search engines get contradictory information and will ignore both signals. You should therefore only use the hreflang markup for pages that do not link to other pages via a canonical attribute.

Settings in Google Webmaster Tools send conflicting signals

Anyone who logs into Google’s Webmaster Tools (Search Console) can define the international orientation of a domain or URL, provided that top-level generic domains are used. In country-specific transmissions, Google even does this itself. There is no doubt that you, as a website operator, can benefit from this feature. Google uses this information to categorise your site as best as possible. So it’s definitely worth informing Google about localised versions of your site.

However, you should never forget to include these settings in your SEO measures. If you add additional pages with the hreflang attribute, there should be no contradictions or mistakes. For example, it can easily happen that a page is only assigned a language attribute with no regional specification, while at the same time, a specific country has been assigned in the Webmaster Tools.

Useful hreflang tools

It has already become clear that integrating the hreflang tag into all relevant HTML pages does require a certain amount of effort, and a lot of code. The more complex your multi-lingual website is, the more likely mistakes will creep into the hreflang implementation, even if you are aware of the potential errors and keep them in mind the entire time. For this reason, it is recommended to use tools to create the tags and check their functionality at regular intervals. Helpful tools can be found in the following list:

• SISTRIX hreflang Generator: With the free hreflang generator from SISTRIX, you can easily create link elements with a hreflang attribute for the HTML header of your multi-lingual content. To do this, you simple specify the URLs, language and region, and the code with be automatically generated. It is also possible to define a default page.
• SISTRIX hreflang Validator: If you have implemented references for different language versions in your web project, the SISTRIX hreflang validator may be useful to you. The free web service checks whether the set hreflang tags are correct for a given URL.
• Google Search Console: Signing into Google makes your site easier to track for the search engine, but also allows you to access various analysis tools to optimise your web project. In the ‘international orientation’ section, the dashboard also provides information on the used tags, including a list of missing backlinks.
• Hreflang Checker: With this hreflang checker, you enter a URL and get the hreflang attributes presented to you quickly and in a clear way. The tool even indicates which source the hreflang attributes were taken from (HTML, HTTP, etc.) and suggests how you could improve your hreflang implementations.