Hreflang attribute: what it is and how to use it on multi-language sites without mistakes

Put us to the test

Put us to the test!

Analyze your site
Select the database
The problems with multilingual versions of a site are among the most frequent errors in SEO campaigns, as we said some time ago, and today we want to further deepen this topic and, above all, try to give some indication on the best practices to follow. We are going to then focus on the hreflang tag and the correct implementation of this attribute, which allows you to convey sites and pages for users of different locations, as companies and publishers who operate on an international or otherwise multinational scale know well, and therefore need to know all aspects of this issue in order to properly serve content to the right users.

What is the hreflang attribute

Hreflang annotations are attributes of the link element in the page header that are there to inform Google of all page variants present in different languages and for different geographical areas.

Google may find these pages localized even without ours and thus provide versions of the page in other languages, but it is still preferable to explicitly indicate the presence of such pages related to specific languages or geographic areas to facilitate directing users to the most appropriate version for them.

The correct syntax of each link element is <link rel=”alternate” hreflang=”language_code” href=”url_of_the_page” />: in this way only Google can understand which language we are using on a specific page and then provide the exact result to users who search in that language on the search engine.

To be clear, language_code refers to the target code supported by the page version, which can also be left indefinite (x-default) to “indicate any language not expressly listed by an hreflang tag on the page” (usually when there are no corresponding languages assigned and the user can select his country from a clickable map). Instead, url_of_the_page is the full address of the page version related to the specified language/geographical area.

In summary, then, hreflang is a link attribute that informs Google of the language used on a page, thus allowing the search engine to have the information it needs to show the version of the page corresponding to the language in which a person is searching. To simplify, without the hreflang attribute Google could serve the user pages in a language the person does not speak or specific to a country where the person does not reside.

How to use annotations for multi-language sites

The hreflang attribute was introduced by Google in December 2011 to establish a relationship between Web pages in alternative languages and is useful when we create content specific for a local audience. In the presence of the tag, search engines redirect traffic to the most appropriate version for the language of the users and to their IP address of localization, in order to guarantee them a profitable experience, suitable to their needs.

We can also use hreflang in a more specific way, if we have contents targeted towards variants of a single language, suitable for instance to a certain region (for example, for the Spanish language we can set hreflang=”es-es” to localize the content in Spain, while hreflang=”es-mx” localizes Mexico) and intercept a more precise target, favoring currency variations, shipping, seasonality and culture.

Hreflang characteristics

However, one important aspect needs to be clarified: hreflang is a signal, not a directive. This means that other SEO factors perceived by the search engine can override the hreflang attribute and cause a higher ranking for a different version of the page.

The attribute can be entered in the HTML header section, in the HTTP header or in the sitemap, by selecting only one of these locations. In addition, each page variant should include “a set of <link> elements in the <head> element”, explains Google, or “a link for each variant of the page, including the page itself”, ensuring that the link set is identical for each version of the page.

This step is important if we have multiple versions of a page related to different languages or geographical areas, because it reports to Google the presence of these alternatives and allows the search engine to direct users to the version of the most appropriate page based on the language or geographical area.

Hreflang and duplicated contents

The concern of many people, especially when working with eCommerces, is to offer duplicate – or perceived as such by the search engine – content, and often even toward the hreflang tag there is this fear. Actually, though, Google makes it clear that “localized versions of a page are considered duplicates only if the main contents of the page remain untranslated”.

Therefore, by correctly using multilingual attributes we can solve the problem of duplicating content and so declining products (or articles) to a specific audience or target, qualified by language or region.

When to use hreflang

Google suggests three particular scenarios where it is preferable to use the alternative page system for specific languages or geographical areas:

  • Pages with user-generated contents, such as forums, if we keep the main content in one language and translate only the template (navigation bar or footer).
  • Similar contents in a single language but intended for areas with local variations, such as an English site for users in the United States, Great Britain and Ireland.
  • Site with contents fully translated into different languages, such as each page presenting Italian, German and English versions.

Clearly, the use of this attribute is very useful for the multilingual SEO because it allows to highlight the link between pages translated into different languages and, above all, to make more accurate targeting of organic traffic, sinceGoogle will show a version of the site in line with the geographic location of users.

Moreover, there are also positive effects on the user experience, given the fact that for instance an Australian will be able to purchase on an English-language website using the local dollar (and not the US dollar) as default setting, while a Canton Ticino user can land on a page in Italian on a site based in Germany.

Best practices to implement hreflang

In order to achieve these goals we must obviously follow a series of indications and comply with precise parameters. In particular:

  • The alternate hreflang rel must be present on all pages and specify all versions, including the one of the page itself. We cannot limit ourselves to the home page.
  • Avoid the absence of return links: if an X page refers to page Y, page Y must refer to X page.
  • Do not refer to pages with HTTP status code 404 or 301/302.
  • Check the language and geographical area codes: the language codes are in ISO 639-1 format and the geographical area codes in ISO 3166-1 Alpha 2.
  • The indication of the geographical area in hreflang is optional, but it is not possible to use only the latter without specifying the language.
  • If there is a canonical rel on the page, it must be self-referential and report itself as a canon. Never point the canonical toward another page, unless you want to block it. Also, you cannot combine hreflang and canonical attributes in a single tag.

Hreflang attribute: the solution to major doubts and errors

Analyzing its characteristics, then, hreflang should be a fairly simple concept to understand and apply to remove ambiguity from a set of pages, especially in a common language, attributing them to a specific local area.

Yet, as we said at the outset, this attribute is often misinterpreted and misused on sites, which is why it is useful to follow some tips and pointers for using hreflang without errors, while also checking some of the simpler and more frequent questions that can reduce the complexity and misinterpretations of the command.

The first step in debugging the most common problems with the hreflang tag is the International Targeting report found in Search Console, which offers simple directions to check for errors on the site.

The reasons behind the most common errors

More generally, in our support comes the guide compiled by Motoko Hunt on Search Engine Journal, which begins by briefly reminding us what hreflang is and what it means: that is, a simple method of indicating to search engines for which specific language and market a page that presents the same content conveyed in multiple variants is designed and optimized.

In English, for example, “you can have a page for the United States and then have the exact same page for many other markets“.

Frequently asked questions about multilingual versions

Handling hreflang only becomes complex when the specification is misinterpreted and/or when the web infrastructure is not uniformly configured to make alternative mapping easy.

To clarify the issue, the expert then identified seven frequently asked questions about hreflang, which can lead to precisely these misinterpretation errors, providing the answers and guidance needed to complete the process accurately.

  1. I have an English site designed for the United States, United Kingdom and Ireland: can I use “Hreflang = en-us-gb-ie?”
  2. I have a site for all EU countries and another for the entire Middle East: can I use “EU” and “ME” as the country setting in hreflang?
  3. Can I combine the canonical tag and the hreflang tag in the same line?
  4. I use a CMS to automatically generate XML sitemap files (hreflang) and include URLs that do not exist: is it okay to keep them in the list? I see them displayed in GSC error reports: is that bad?
  5. Should I use hreflang to handle the same content that exists in different domains, each targeting different countries?
  6. Should I use the URL of a specific page or home page like x-default?
  7. I have English and French content on the same page: can I assign it to both languages in the hreflang tag?

Managing a site for multiple countries with the same language

The first question perhaps stems from an attempt to be too creative with respect to the organization of the site; in fact, if we only have one set of EN pages, we only need to use one attribute without specifying countries, as in this string:

<link rel = “alternate” hreflang = “en” href=”https://www.example.com/en/page.html” />

If, on the other hand, the site provides another set of EN pages for other English-speaking countries such as Australia and Singapore, and we want to set the specific target countries, we need to create a separate line for each, even when the page URL is the same for all three locations. To wit:

<link rel = “alternate” hreflang = “en-ie” href=”https://www.example.com/en/page.html” />

<link rel = “alternate” hreflang = “en-gb” href=”https://www.example.com/en/page.html” />

<link rel = “alternate” hreflang = “en-us” href=”https://www.example.com/en/page.html” />

Best practices for different areas

Different is the attempt to specify location by geographic area: it is not possible to set attributes such as

<link rel = “alternate” hreflang = “en-EU” href=”https://www.example.com/en/page.html” />

or

<link rel = “alternate” hreflang = “en-ME” href=”https://www.example.com/en/page.html” />

(for European Community or Middle East, respectively), because the Hreflang tag can only use the actual ISO country and language codes, and thus is not intended to use are regional codes such as EU, EMEA, APAC, and ME.

Many sites have regional sites targeting Latin America (LatAm) or the European Union (EU) or the Middle East (ME) that represent multiple countries and often languages in a region, but try to associate one of the ISO country codes to represent the region.

A frequent error with this type of regional setting involves trying to represent the Latin American site in Spanish using es-LA: in reality, this command tells Google that the page is in Spanish but served in Laos.

Canonical and hreflang, tips for use.

Another mistake is trying to combine canonical and hreflang rels in the same string of code, as in the example

<link rel=”canonical, alternate” hreflang=”en-gb” href=”https://example.com/en-uk/page.html” /> .

It is mandatory to separate the canonical tag from the hreflang tags, and then set as commands

<link rel = “canonical” “href=” https://example.com/en-uk/page.html “/>

<link rel = “alternate” hreflang = “en-gb” href=”https://www.example.com/en-uk/page.html” />

<link rel = “alternate” hreflang = “en-us” href=”https://www.example.com/en-us/page.html” />

Non-existent URLs in the XML sitemap

Answering the fourth question, the situation described above is yes a problem that can arise due to a CMS setting, “which allows a placeholder URL to be automatically created for each language or country on the site when a page is created on one of the sites.”

Sometimes, the URL is automatically generated by the global navigation rules even if the page does not exist, and “unfortunately, there is no easy way to handle this problem.”

In short, nonexistent page URLs should not be listed in the Hreflang XML sitemap files; the actual solution varies by individual CMS, but the intervention begins by examining the URL alias rules, parent-child rules, or local page propagation rules, which, in many cases, have not been set correctly.

Rules may be overridden by JavaScript navigation rules or IP detection/redirection protocols; most systems have a fallback option on a global page when the page has not been localized or published explicitly to the marketplace.

Organizing pages on different domains

Managing multiple websites in a different language or country on separate domains using hreflang on multiple domains (and subdomains) is not easy either. The proper procedure involves using “XML hreflang sitemaps that list all URLs for each of the unique domains, hoping that the URL paths are the same or at least similar, making it easy to map alternatives.”

To make the job even easier, Motoko Hunt suggests “taking advantage of Google’s cross-domain sitemap verification process and using a dedicated site that manages XML sitemaps for all domains in a central location, rather than having to create tickets to upload them to dozens of hundreds of unique domains.”

Content in different languages on the same page

Very specific is the next doubt-content in different languages on the same page-which, however, has a simple answer: each page should only have content in one language, “but multiple languages on a single page occur frequently with user-generated content in a localized template.”

Regarding the choice of hreflang version, Google is quite clear: you have to set the language region to the dominant language and/or template language.

Guidance on using x-default

Finally, according to the expert, “there is still a lot of confusion about the use of x-default,” which is nothing more than a directive to use a specific page for any language or market that does not have a dedicated hreflang setting.

If we want to show up where we don’t have a local version, in many cases we can use the global version of the site or the English version, remembering that you can only designate one version as x-default.

If we set a home page as x-default for pages other than the home page, we are asking Google to show the home page instead of any other page in the language-country that is not specified in the Hreflang tags.

Also, we cannot dynamically change the setting to match the local language of the user’s IP: “It’s been tried and no, it doesn’t work.”

What it is used for and how to best use hreflang x-default

Google, too, evidently believes there is confusion around x-default, and in fact an in-depth blog post by Gary Illyes appeared in May 2023, explaining some of the more “hidden” benefits of using this hreflang value.

The x-default hreflang value is used to specify the neutral, language- and region-independent URL for a piece of content when the site does not support the user’s language and region; it is used in conjunction with other hreflang values, which specify the version of a URL for a piece of content addressed to a specific language and region.

However, according to the Googler hreflang x-default is a potentially underused value by sites that already use hreflang to help Search users find the correct version of their pages, and it is a powerful tool and can do more than we (probably) think.

For example, it continues, if a page has hreflang annotations for the English and Spanish versions of a page along with value an x-default pointing to the English version, French-speaking users are directed to the English version of the page because of that annotation. The x-default page can be a language and country selection page, the page we redirect users to when we do not have content for their region, or just the version of the content we consider to be the default. Of course, we may not have localized versions of all pages, “and that’s fine: it’s absolutely fine to have hreflang annotations only on parts of the site.”

The two special features of x-default

But besides helping the site owner classify the right page for the right users, there are two other special use cases and benefits related to hreflang x-default, Illyes tells us.

  1. URL discovery

Google can also use the URLs specified in hreflang annotations, including x-default, for URL discovery: this can be useful for large sites with complex structures, for example, where it is difficult to make sure that every URL located on the site is well connected.

In practice, this means that the href attributes in the following example are extracted and can be scheduled for crawling:

Esempi di utilizzo di hreflang x-default per la scoperta degli URL

  1. Conversion

If our goal is some conversion of users arriving on our pages-and Google’s article defines conversion as “the result of the occurrence of a desired action that has been defined in advance by the company as a goal”-and if we have a multilingual site, we can use the x-default annotation to direct geographically/linguistically appropriate users to pages where they can actually finalize the conversion appropriately.

For example, when a user arrives on our page with an essay on Wuthering Heights, we might consider it a conversion when the user reads most of the essay (of course, remember Google, there are many forms of conversion and it is up to us to define what our business goal and strategy is). However, if we have published the essay only in German, it is unlikely that non-German speakers will read that page and make a conversion, so it might be appropriate to lead them to a special page labeled with hreflang=”x-default,” as in the two examples in the image.

Esempi di utilizzo di hreflang per le conversioni

Hreflang, a complex topic to simplify

Motoko Hunt’s article attempted to show that handling the hreflang attribute itself is not difficult, but it is the “interesting and sometimes challenging” Web site infrastructure that adds to the complexity.

The final advice is to start small with a couple of languages or a subset of pages and try out the settings, testing how they work.

When we handle it properly we will appreciate its value, because hreflang is a brilliant business case on which to divert resources for large-scale implementation.

And simplification is also talked about by John Mueller, who, speaking in a thread on Reddit, provided some insight into the proper implementation of this attribute, saying precisely that the first aspect to evaluate is whether there is actually a need to use hreflang or whether there may be easier and more immediate solutions to help users (such as a pop-up to select country/language that appears on the home page).

More specifically, the Googler says that hreflang is especially critical if the site we run has a strongly local angle that crucially impacts business and users (e.g., local currency, product or delivery availability, etc.) and if, a check to always do, there is an underlying problem and visitors will land on the wrong version of the site. If this does not happen, and thus if Google already provides the correct versions of pages on its own, we gain nothing by adding hreflang and can then save time and prioritize other areas that require optimization.

Iscriviti alla newsletter

Try SEOZoom

7 days for FREE

Discover now all the SEOZoom features!
TOP