Optimizing a web project is already a difficult task in itself, but there is a particular type of site that can make any SEO shiver: the highly feared multi-language websites.
SEO for multi-language sites is difficult for two reasons: it involves managing multiple versions of the same site in parallel, and connecting them in a seamless way. The documentation in this regard is often incomplete or contradictory: Google’s guidelines on this topic are quite scattered and at times full of technicalities.
That’s why I deided to draw up a handbook of best practices to manage a multi-language site without risking nervous breakdown, based both on my personal experience and the most useful and complete tutorials found on the web.
The first chapter of the guide covers hreflang tags.
What are hreflang tags
When an SEO gets to grips with a multi-language site, the very first aspect she should analyze is the structure of the website. By structure I’m referring to two different sides of the same coin:
- User experience: can the user intuitively change the language of the site? Is the button for switching from one language to another clearly visible on all pages, and are the links correct? If the answer is no, it is recommended to implement a simple and intuitive solution to allow site visitors to switch from one version to another.
- Technical SEO: in the eyes of crawlers, is it clear how many versions of the site there are? Is each page associated with its version in another language?
To answer this last question (which is the one that interests us most), it is necessary to verify the presence of the rel hreflang tags. It is a type of html tag that communicates to Google (and Yandex) which language is used on a specific page, so that the search engine can provide the user with a result in her language. They can be implemented in the site head, in the sitemap or in the HTTP header.
The hreflang tag has this structure:
<link rel="alternate" href="http://www.esempio.it" hreflang="it-it" />
Warning: the hreflang tag does not affect the positioning of the site, in the sense that a web page will not be penalized by Google in case of absence of the tag. However its purpose is to present to each user the suitable version of the site based on search preferences and location, therefore his absence could compromise the user experience, increase bounce rate and consequently worsen the ranking.
The tag consists of the following parts:
- href = “url”: The URL of the page in the indicated language;
- hreflang = “it”: the language of the page (in the ISO 639-1 format). It is also possible to indicate the geographical area code (in the ISO 3166-1 alpha-2 format) for countries that speak the same language (for example, en-gb for the United Kingdom and en-us for the United States) or for a content intended for people who speak a certain language in a given geographical area (for example, es-us for those who live in the United States and speak Spanish).
The language snippet is always mandatory, while that of the optional geographical area is not (it is mainly used for e-commerce that deal with countries with different currencies).
When to use hreflang tags?
Hreflang tags are used in all cases where a web page is available in two or more different languages (or language variants), or the website needs to present slightly different pages based on the user’s location.
They are used both in the case of sub-folders (http://www.example.com/it) and top-level domains (http://www.example.it).
Where can I implement these tags?
As previously mentioned, there are three different ways of integrating this type of tag into a web page:
- Within the sitemap: you can indicate the different languages of the site in the xml sitemap. The fastest way to do this is to map all the URLs corresponding to the different languages in an Excel sheet and use this tool.
- In the HTTP header: this option is mainly used for non-HTML files, such as PDF documents. It is usually implemented in the .htaccess file and the string to add is the following:
Link: <http://www.esempio.it/es/file.pdf>; rel="alternate"; hreflang="es">
- In the HTML head (enclosed in the head tags): this is the most common solution, and also the one we will cover in this tutorial. The tags are indicated along with the other meta tags in the head of the page.
Only one of these three methods should be chosen. They are all equally valid, but I personally prefer to use the tag in the head of the site, as it is the simplest one to implement and leaves more freedom of action in the case of small changes.
How many hreflang for each page?
On each page there must be:
- The hreflang tag related to the page itself
- The tags for all the different versions of the page, one for each version
The tag must be reciprocal, which means that if page A links to page B, page B must necessarily link to A.
Here is a practical example: I have a website in Italian which also has a French version. On the Italian home page of my site I will insert the following tags:
<link rel="alternate" href="http://www.esempio.it/" hreflang="it" /> <link rel="alternate" href="http://www.esempio.it/fr" hreflang="fr" />
And in the French one:
<link rel="alternate" href="http://www.esempio.it/fr" hreflang="fr" /> <link rel="alternate" href="http://www.esempio.it/" hreflang="it" />
Same country, different languages
For countries with more than one national language, such as Switzerland:
<link rel="alternate" href="http://www.esempio.ch/it" hreflang="it-ch" /> <link rel="alternate" href="http://www.esempio.ch/fr" hreflang="fr-ch" /> <link rel="alternate" href="http://www.esempio.ch/de" hreflang="de-ch" />
Same language, different countries
For countries that use the same language, but need to view a different version of the page (e.g. due to different currencies). In this case it also becomes necessary to indicate the geographical area:
<link rel="alternate" href="http://www.example.com" hreflang="en-us" /> <link rel="alternate" href="http://www.example.com/ireland" hreflang="en-ie" /> <link rel="alternate" href="http://www.example.com/uk" hreflang="en-gb" />
Different country, different languages
One of the most common cases, where both country and language are different:
<link rel="alternate" href="http://www.esempio.it" hreflang="it" /> <link rel="alternate" href="http://www.exemple.fr" hreflang="fr" /> <link rel="alternate" href="http://www.example.com" hreflang="en" />
Redirect from a splash page
There is a way to include the tag in a “universal page” of the site, which doesn’t have a particular language or region set.
It is used in pages that allow the user to choose their preferred language, or automatically redirect it through geolocation to the page in their language.
In these cases it is sufficient to indicate x-default as an attribute related to the language.
<link rel="alternate" href="http://www.example.com/" hreflang="x-default">
Give me a tool that does this for me
Here you go: The hreflang tags generator tool 🙂
Some more recommendations
The tag is at page level, not site level, so it must be present on every single page.
When dealing with a language that has writing variations, you can specify a combination of writing and region, for example zh-Hans-TW to indicate simplified Chinese (zh-Hans) for users in Taiwan (tw) .
Directions for adding tags on WordPress
Those who use WordPress can rely on a plugin that allows you to add different meta tags to the head of individual pages.
The simplest and most reliable is definitely Add Meta Tags.
Once installed you will find an extra section in the page (and post) editor that will allow you to insert the hreflang tags relating to that page in the “Full meta tags” box.
Warning: if you use the Yoast SEO plugin, when you install Add Meta Tags a warning will probably appear to communicate that the two plugins conflict with each other: to solve the problem just enter the plugin settings (from the left-hand menu, Settings -> Metadata) and remove the flag from the following boxes:
Under “Basic metadata”:
– Automatically generate the description meta tag
– Automatically generate the keyword meta tag
Under “Metabox features”:
– Custom description
– Custom keywords
– Custom content of the title
Instead, you will have to tick the “Full meta tags box”, which is in fact the one you need to insert the tags.