Hreflang tags are necessary attributes that improve the recognition of multilingual websites by search engines and facilitate their correct indexing. Learning when and how to implement hreflang tags correctly on multilingual websites is a key step towards reaching international users who might be interested in browsing your website in different languages.
What is an hreflang tag?
It is a specific HTML attribute, and its correct use is often more complex than with other HTML tags.
Fortunately, hreflang insertion can mostly be automated and the process has become much simpler than it used to be.
Why it matters for multilingual websites
Hreflang tags are very important attributes for search engines such as Google as they indicate which language a text has been written in.
What’s more, these tags indicate that web pages have been translated and are not merely duplicate content. They thus allow you to avoid being penalised by Google while helping businesses to rank well in SERPs.
That being said, it is worth bearing in mind that hreflang tags are not definitive indicators. They are just one of the many data points Google and other search engines use and compare with other elements on a webpage, such as the alphabet used, specific cultural touchpoints, and any other elements that contribute to the correct localisation of web pages.
How to insert hreflang tags
An hreflang tag consists of two parts and has the following syntax:
<link rel=”alternate” hreflang=”language” href=”https://home.com/page-3-alternative”/>
- The first section indicates that the page referenced by the link at the end of the tag is an alternative page, i.e., a page translated from an original page written in a different language
- The middle section indicates the language the alternative page is written in.
As an example, if the language chosen for the alternative page were Spanish, the syntax would be as follows:
<link rel=”alternate” hreflang=”es” href=”https://home.com/page-3-alternative”/>, where “es is used to indicate the Spanish language.
In certain instances, you can be even more specific, as in the case of English spoken in various countries of the world. To indicate the English spoken in the United States, you could use:
<link rel=”alternate” hreflang=”en-us” href=”https://home.com/us/page-3-alternative” />
How to add an hreflang attribute to your website
A key feature of the hreflang attribute is that it must be bidirectional, i.e., implemented both on the original language and translated webpage and must contain references to both pages in order to be correctly implemented (and received by search engines).
Let’s look at another example: if a French website decides to create an Italian version of its web pages, both the French and Italian versions should contain an hreflang tag written as follows:
<link rel=”alternate” hreflang=”fr” href=”https://company.com/bienvenue” />
<link rel=”alternate” hreflang=”it” href=”https://company.com/benvenuto” />
To sum up, the best website translations are those that can correctly translate, optimise and localise content, And remember: you absolutely must correctly insert hreflang tags into the code of your multilingual website!