We live in the middle of the digital era where globalization, the internet, and mobile phones mark the market. Companies in this environment expand their areas of action, and it is common for them to operate in other countries or areas, with service web pages, online stores, corporate pages.
For SEO it is important to tell Google that a web page is destined for a specific country or language so that it can index it in better positions for searches carried out in that country.
The hreflang tag is a fundamental tool to mark a page for a specific country or language, implementing it in the HTML code of the website.
What are Hreflang tags?
The use of the hreflang tag in HTML allows indicating that a web page is focused on a specific country or language. It is an essential label for multi-language websites or that operate in different countries.
If we analyze the name of this tag, we can see that it is the union of two words, href (which is used in HTML to create links) and lang (which refers to language or language, in English).
There are three reasons why Google recommends the use of these types of tags:
- When the main content of the web remains in a single language, and only the content is translated, a common practice in forums, for example.
- The web is in a single language, but it has specific content in a specific language.
- Multi-language sites that have all their content translated into each of the languages.
What are the benefits of using the hreflang tag?
Hreflang tags provide two fundamental advantages for a web page, eCommerce or blog that uses them:
Improve local web positioning (in a country)
This tag allows Google to separate web positioning by country, helping to improve international website SEO. When using this tag, Google will take into account the positioning in each of the web languages. If omitted, Google will focus on positioning it in a single language, going unnoticed in the rest.
Let’s imagine an online store that operates in Spain, France and Germany. With the use of hreflang tags, Google will position the eCommerce in the searches of each country, while, if they are not implemented, it will only do so in Spanish, and the business will not appear in the search results of France and Germany.
Avoid duplicate content problems
When using multi-language pages you can have duplicate content problems that can seriously affect the web positioning of the site. By applying the hreflang tag correctly, Google will know how to identify this content and will not confuse it with duplicate content, avoiding any related positioning problems.
How to implement hreflang with HTML tags?
The hreflang tag must be included in the header o of the web page, and as many tags as languages or countries are available on the site must be included.
The format for including hreflang tags in HTML is as follows:
<link rel="alternate" href="https://en.nombrededominio.com" hreflang="en"> <link rel="alternate" href="https://nombrededominio.com" hreflang="es"> <link rel="alternate" href="https://fr.nombrededominio.com" hreflang="fr"> The link in the href attribute must match the web URL for that language. In the example above, we have used .es for Spain, but it could just as easily be .com or another domain extension.
If the web does not use a different domain for each language, but the pages of the different languages are in subdomains, the following format should be used.
<link rel="alternate" href="https://www.nombrededominio.com/en/" hreflang="en"> <link rel="alternate" href="https://www.nombrededominio.com/es/" hreflang="es"> <link rel="alternate" href="https://www.nombrededominio.com/fr/" hreflang="fr"> How to check hreflang implementation?
You can check if the implementation of the hreflang tags was successful. To do this, you can go to Google Search Console in the Search traffic / International targeting / Languages tab option, and you can check if the hreflang attribute is well implemented in each URL.
Language and region codes
Correctly using the language and region codes supported by Google is essential to correctly implement the hreflang tag.
- The language value must be in ISO 639-1 format.
- The value of the region must be presented in ISO 3166-1 Alpha 2 format.
The importance of the x-default tag
Using the x-default value in the hreflang tag is important to instruct Google to display that URL in all languages for which a hreflang tag is not included.
For example, if hreflang tags are included for Spain, the United Kingdom, and France, adding a hreflang tag with the value x-default and a URL to the website in English, will show all users from other countries (except those from Spain and France), the page in English.
<link rel="alternate" href="https://www.nombrededominio.com/en/" hreflang="x-default"> <link rel="alternate" href="https://www.nombrededominio.com/es/" hreflang="es"> <link rel="alternate" href="https://www.nombrededominio.com/fr/" hreflang="fr"> Other ways to implement hreflang
Let’s see how hreflang tags can be used using HTTP headers, sitemaps, or WordPress.
HTTP headers
It is possible to return HTTP headers with GET responses to inform Google of the variations of languages and regions that a website has. The format of these headers is as follows:
Link: <url>; rel = "alternate"; hreflang = "lang_code_x"</url> Adding commas can include more URLs with different languages.
We can see that the header has two important parts:
- . It is the URL of the web corresponding to the language code that must be indicated below. It is included between the characters & lt; & gt; without using quotes.
- lang_code_x . It is a code for the language or region to which the above URL is directed. In this link you can consult the codes of each language or region. It should be noted that if the value of lang_code_x is x-default, it will be indicated that this version of the web should be shown for users of languages that are not mentioned in the hreflang tag.
Hreflang tags with sitemaps
Sitemaps are files in XML or TXT format that contain a list of the URLs of a site that are used to indicate to Google, sending them through Search Console, about URLs that it should crawl and index.
Google allows the use of these files to receive information about the language or region of all URLs on a website.
Let’s look at an example of a sitemap file to indicate to Google that the website is localized in three languages (Spanish, German and English) and that it has content aimed at people who speak German in Switzerland.
<?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://www.example.com/</loc> <xhtml:link rel="alternate" hreflang="es" href="http://www.example.com/" /> <xhtml:link rel="alternate" hreflang="de" href="http://www.example.com/de/" /> <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/en/" /> </url> </urlset> WordPress multi-language plugins that apply the hreflang tag
For sites created and managed with the WordPress CMS, it is very easy to work with the hreflang tags for multi-language sites thanks to the use of translation plugins.
For example, the WPML plugin, one of the most popular and complete to translate a WordPress site into multiple languages, facilitates the inclusion of the necessary tags in the head of the site for the different languages.
There are also specific plugins to add the hreflang attributes, such as the Language selector related, which allows adding the hreflang attribute, or the Hreflang Manager Codecanyon, which allows connecting pages and posts between the different Languages.
Common mistakes made with hreflang
Entering incorrect values for the region and country codes
The main problems related to hreflang tags are related to mistakes made when entering or selecting a country or region code. If the wrong code for a country is entered, Google will not be able to position the web for it.
Making spelling mistakes or using a format not accepted by Google (ISO 639-1 for languages, or ISO 3166-1 Alpha 2 for regions) are two of the common mistakes when implementing this type of label for multilanguage.
The main spelling mistakes that are usually made when entering the value of the country or region code are:
- Underscores. Underscores should not be used to separate country and language values (a common practice in web developers).
- Use of common abbreviations. These codes have their own abbreviations, and the ones that are commonly used do not match, as is the case with ENG for English, which is commonly used, but in the hreflang tag, it must be EN.
- Do not include the language code. Google indicates that the language code should always be included if the country code is used. Including the country code only will have no effect on the hreflang tag.
- Wrong order of the codes. You need to enter the country and language codes correctly, first the language code and then the country code. If done in reverse, the hreflang tag will not be understood by Google.
Other errors
There may also be other errors related to hreflang tags, such as lack of self-referencing tags, conflicts with the canonical tag, or more than one URL having the same value of hreflang.
It should be noted that if the URL entered in the tag is incorrect, the result will not be as desired when it comes to positioning the web in Google.
Implementing the hreflang tag is a necessary practice for websites that operate in different countries or offer content in different languages. Google uses this tag to know how to position a website in different countries or regions correctly.
This tag is also very useful to avoid penalties in web positioning for duplicate content, something that can happen on multi-language pages with ease.
