There are websites that receive visitors from all over the world, with translated content intended for users in a specific country or geographical area. Google uses the attributes rel = ”alternate” hreflang = ”x” to display, in the search results, the page of the site intended for the user’s locality and language.
Any website offering content in different languages should consider implementing the hreflang attribute. It doesn’t matter whether it’s a Prestashop or Magento eCommerce , a site developed with WordPress, Joomla, Drupal, or totally handmade, the alternate hreflang attributes help SEO – they improve the visibility of pages in different languages .
Introduced by Google in December 2011 , the hreflang attribute allows search engines to communicate the relationship between pages in different languages . The hreflang is appropriate when creating specific texts intended for a target localized in countries with different languages. The hreflang attribute tells search engines which page to show to a user of a specific country and language.
Why use the hreflang
In the past, before the existence of the hreflang attribute, when looking for a famous brand it could happen that Google showed the homepage in English in the search results. This happened because, in general, the most authoritative homepage, with the highest PageRank is the one in English, and in SERP the strongest page won.
With the hreflang attribute, on the other hand, the Spanish-speaking user will find the Spanish homepage in the results, with hreflang = ”es”, regardless of authority. By offering localized results it is possible to reduce the bounce rate , improve the conversion rate and offer a better user experience.
With the hreflang attribute it is possible to localize the content even for variants of the same language. The Spanish homepage for Spain will use the hreflang = ”es-es” attribute, while the Spanish homepage for Mexico will use the hreflang = ”es-mx” attribute. If you have a multi-language ecommerce you will already know how important it is to have offers in the local currency , specific shipping information for the customer’s country, differentiate offers for holidays and local events, are all strategies that improve the use of the website by an international audience. .
Another problem with multi-language sites is that they can generate duplicate content . For example the “about us” page for UK will probably have the same content as the “about us” page for USA. To avoid transmitting content considered duplicates to Google, it is necessary to implement the hreflang attribute.
Is hreflang a signal or a directive?
Hreflang is a signal , not a directive. This means that search engines are not obliged to respect it, other SEO factors could nullify the effect of the hreflang attribute and place another page in the search results instead of the local one. To make sure you send clear language signals to search engines, follow the guidelines for a multilingual SEO site .
Which search engines interpret the hreflang attribute?
As of this writing, Google and Yandex consider the hreflang attribute, Bing uses the meta tag language instead.
Implementation and guidelines
To get the maximum benefits from the hreflang attribute you should follow these simple tips:
Where to insert the hreflang attribute
The hreflang attribute should be present on all pages that have copies translated into other languages. It must be entered in one, and only one, of the following options :
- In the head tag, then in the HTML page markup
- In the HTTP header
- In the sitemap.xml
How to write the hreflang
The hreflang attribute must include a reference to the page in which it is included and to all pages served in alternate languages.
ISO Language and Regional Codes
Google supports the ISO 639-1 format for languages , but you can use the more specific ISO 3166-1 Alpha 2 format to specify geographic regions to target.
Values supported for languages
The value of the hreflang attribute identifies the language (in ISO 639-1 format) and, optionally, geographic area (in ISO 3166-1 Alpha 2 format) of an alternate URL. Eg:
- eg: content in Spanish, regardless of the region
- es-ES: Spanish content for users from Spain
- es-MX: Spanish content for Mexican users
Do not specify just the country code. Google does not automatically derive the language from the country code. You can only specify the language code if you want to simplify the encoding. Add the country code after the language to limit the page to a specific geographic area.
Example:
- be: Belarusian language, regardless of geographical area (not Belgian French)
- nl-be: Dutch for Belgium
- fr-be: French for Belgium
For variants of the script of the same language, the correct script is inferred from the country. For example, if you specify zh-TW for zh-TW users, the language spelling is automatically derived (Traditional Chinese in this example). You can also explicitly specify writing using ISO 15924 , as follows:
- zh-Hant: Chinese (traditional)
- zh-Hans: Chinese (simplified)
Alternatively, you can also specify a combination of script and region, for example use zh-Hans-TW to specify Chinese (simplified) for Taiwanese users.
Finally, the ” x-default ” value is used to indicate language selectors / redirects that are not specific to a language or geographic area, for example your homepage showing a clickable world map ( language gate).
Generic targeting with x-default
As you may have seen in the example posted above with the alternate hreflang lines, the last line includes the x-default attribute. This attribute tells search engines that the linked page does not target any particular language / region.
Hreflang and impacts on SEO
Implementing the hreflang attribute does not necessarily increase organic traffic, the goal of this attribute is to make search engines serve the correct content to the correct user. The hreflang is a signal that helps search engines to rank the specific page version for the location and language of the user performing the search.
The difference between hreflang and canonicalization of resources
The canonicalization of resources is a tool to indicate to search engines the default version of the URL of a given page, to avoid problems of duplication of contents. The hreflang attribute, on the other hand, is a tool to indicate which page is most suitable based on the user’s locality and language. The two tags have different functions and purposes.
Canonical and hreflang together?
Google recommends not using the rel = ”canonical” tag on pages that target different countries or languages. The rel canonical tag, on the other hand, should be used on pages that target the same language or country. In practice, however, you can often see canonical and hreflang coexist together, see the booking.com pages:
As you can verify, line 1 (canonical tag) points to the same URL as line 11 (hreflang).
When is it best to use hreflang
Here are some scenarios in which it is advisable to use rel = “alternate” hreflang = “x”:
- Keep the main content in one language and translate only the template, such as the navigation bar and footer. This is a common solution for pages with user-generated content such as forums.
- Your content has small local variations but the pages have similar content in one language. For example, you may have English content intended for users in the United States, Great Britain and Ireland.
- The contents of your site are fully translated. For example, for each page you have German and English versions.
Using annotations for the language
Imagine that you have an English language page hosted at www.example.com, and an alternate version in Spanish at es.example.com. You can declare to Google that the Spanish URL is the Spanish equivalent of the English page in one of the three methods explained below:
HTML link element in the header
In the head section of the HTML code of http://www.example.com/, add the hreflang element that refers to the Spanish version of the web page at http://es.example.com/.
Hreflang in the HTTP header
If you are publishing files in a format other than HTML (such as PDF), you can use the HTTP header to indicate a different language version or versions of a URL:
Href in the Sitemap.xml
Rather than using markup, you can place language version information in the sitemap.xml. If you have multilingual versions of a URL, for the page in each language, you must identify the versions in all languages, including this one. For example, if your site has content in French, English and Spanish, the Spanish version must contain a link rel = “alternate” hreflang = “x” for itself as well as links to the French and English versions, while these the latter must each include the same references to the French, English and Spanish versions.
See this example:
You can specify URLs in multiple languages in the same domain or use URLs from a different domain. If you have several alternate URLs targeting users with the same language but located in different locations, it is a good idea to specify a generic URL for users whose geographic zone is not specified. For example, you may have specific URLs for English-speaking users in Ireland (en-ie), Canada (en-ca) and Australia (en-au), but you may want your general English-speaking page to be displayed for all other English-speaking users. (en) and that the home page is displayed for all others. In this case you need to specify the generic English (en) page for users searching in the UK, for example.
You can annotate this cluster of pages using a sitemap file or HTML link tag, as follows:
For language / country selectors or home pages with automatic redirection, you must also add an annotation for the “x-default” value of hreflang:
Check Hreflang
To verify the correctness of the hreflang attribute you can use the dedicated function of Google Search Console .
Alternatively you can use two spiders: Screaming Frog and Visual SEO which, since November 2016, has a specific function to control hreflang (good Federico Sasso!).
Common mistakes
Make sure that the specified hreflang value is indeed valid, the URL entered must exist ( status code 200). Pay particular attention to the two most common mistakes:
- No confirmation link. If page A links to page B, page B should link to page A. If not for all pages that use hreflang annotations, those annotations may be ignored or misinterpreted.
- Wrong language codes. Make sure that all language codes you use identify the language (in ISO 639-1 format) and, optionally, the geographic area (in ISO 3166-1 Alpha 2 format) of an alternate URL. Geographical area specification only is invalid.
I hope this guide has helped you better understand the purpose of this important SEO tag. If something is still not clear to you, leave a comment!
