First of all, let us understand what it is? Hreflang is a technical solution for websites that have the same content in several languages, for example, if the user is a resident of France, the page of the site is in the SERP in the English language, but there might also be a French version. What is your goal? You need to make sure that this particular Google user views the page in French. With hreflang tags, you can specify that one page is for US residents and the other is for Britons, or you can make two different pages for users from Germany and Austria – this is exactly the purpose for which the hreflang attribute was developed.
Simply saying hreflang tag contains html link rel attribute which the main goal is to show relationships between web pages to search engines. In html code it will be shown for example:
Before reading this article , it is recommended that you read the Google instructions.
#1: Let’s figure out whether you need hreflang tags on your website at all?
Of course, this is the simplest step in the whole process but to make the right decision, you have to consider several things– you might need it, if:
- You have the same content in different languages;
- You have content geared to different geographic regions, but the language is the same.
For clarity, here are a few examples:
1st example: an English language website which has 3 different versions: one for the US, a separate one for the UK, and the last one for the rest of the world;
2nd example: a website with three language versions: English, Spanish, and French;
3rd example: a global website with three versions for different continents based on the English language: for Europe, Asia, US, and Canada;
4th example: a website with an English and Spanish language versions but only for the US;
5th example: a website for one country with different native languages.
If any of these examples are similar to your situation, you definitely need a hreflang attribute.
#2: Make a map of your websites country versions and languages
The current location of the user and the settings of his language determine the most appropriate URL. The user can have many languages in the browser settings. The order in which these languages appear in the settings determines the most appropriate language for the user’s convenience and experience.
The best idea is to create a three-column table:
- Language: One website version has only one language and it is important not to mix languages;
- Site version: You can create several site versions on one of several domains, or on different subdomains;
- Countries: Every site can target the audience from one specific country or to all countries in the world.
For one language or one country sites, this table is very simple. However, for all others, there are some more detailed examples.
1st example: an English language site which has 3 different versions: for the US, for the UK, and for the rest of the world.
You can use different domains. For example, the site for the US and the rest of the world can use domains like .com/us/ or .com/en/, while the UK site can be hosted on .co.uk. In fact, it is not necessary to use different domains and the UK version can be on .com/uk/, but it is a good example.
2nd example: a website with three international languages: English, Spanish, French.
It is mostly used for a global company’s users from different countries with different languages, like SaaS or similar industries (note that the same .com domain is used for all three versions but in different subdirectories).
3rd example: A global site with three versions for different continents based on the English language: Europe, Asia, US, and Canada.
You have the same language but the audience comes from all continents. Therefore, there should be three different options:
- Countries in Europe: Belgium, Iceland, Germany, Austria, Switzerland, Portugal, Czech Republic, Hungary, Denmark, Finland, UK, Croatia, Italy, Luxembourg, France, Norway, Sweden, Netherlands, Poland, and others;
- Canada, US;
- Countries in Asia: China, Australia, India, Japan, Hong Kong, New Zealand, Indonesia.
4th example: a platform with English and Spanish languages but only for the US residents.
This is an option for those countries with different state languages or multilingual environment, and in this case, you should consider using a country-specific domain like https://es. and https://en.
5th example: a site for one country with different native languages.
Usually, this option is used for e-commerce players (online stores, global online journals, travel or educational services, and other) around the world. B2B companies usually go with English over country native languages.
Here is a mix of sub-domain and sub-directory strategies with the idea to show you how different the site options can be with the use of the hreflang tag.
#3: Website structure and domain strategy
There is one very important rule. Google interprets content automatically on country-specific domains (ccTLDs) as targeted at users from exactly one country. Still, as it was already noticed, the hreflang attribute can implement with almost all domain combinations, sub-domains, and sub-directories:
- v gTLD (general top-level domain) is a top-level domain created for segmentation of electronic resources addresses of a certain class of organizations or communities;
- v ccTLD (generic top-level domain) is a top-level domain dedicated to a specific country; for example: .de for Germany, .fe for France, etc.
ccTLDS is associated with a specific country. On the contrary, gTLD are not country-specific. Not everyone has to consider this information but for international targeting, it is a very important thing because by using a ccTLD sub-domain or sub-directory, you will only target the audience from one ccTLD’s associated country.
Using gTLD Google Search Console, you can choose to target the content for users from an exact country. By using ccTLDs, it is impossible to specify a country because it has already been chosen by your ccTLD. It is complicated, but let us see what we can do.
Using ccTLDs, you target the site audience from the corresponding country but not the audience from other countries with your domain website content. Make sure that you create a structure with targeting options “All countries” or “Rest of the world” in order to target users on gTLDs. What does it mean?
For example, you have a site with many country versions, but no generic language versions for the audience of other countries – then it will be reasonable to add generic language versions on a gTLD in already created language versions for users targeting outside of the markets we created the site for. Thus, indicating a decent international or multilingual domain structure you have, we can easily define the hreflang value for every website version. This is something you should keep in mind.
#4: Hreflang value to each country and language option
- Hreflang value has a language code and a country code, which are separated by a hyphen;
- The language codes have ISO 639-1 format, the country codes have ISO 3166-1 Alpha-2 format;
- Hreflang value can be assigned only one time, and, in accordance with this, you cannot have two versions of your site, which are targeted at the same language and the same country users (every language and country combination has to be unique);
- URLs can receive multiple hreflang values at once.
Now we can add the 4th column in the 5 example (second step).
All versions in «5th example» are targeted at an exact country hosted on a ccTLD, so all of them receive the optional country codes, and while website versions are hosted on ccTLDs, the country codes are not necessary. Because ccTLDs are automatically associated with the country. Correct country code hreflang values should always receive with URLs on ccTLDs.
This is a special value for the hreflang attribute called “x-default”, which specifies on where users should go if none of the languages matches their browser settings in your hreflang links. For the first time, such an opportunity was presented for international landing pages – we mean the pages to which you redirect users, depending on their location.
At the same time, it serves as a universal tool. If the location and language of the audience do not match the established ones, they are redirected. For example, a user from Germany is looking for something in the English language – as a rule, there will not be a suitable URL and in such cases, the x-default is used. The fourth link is added and it becomes:
#6: Hreflang annotations
Hreflang annotations should be implemented on a uniform resource locator level. Therefore, every set of different country or language URLs receives its own set of annotations.
1. All pages might not exist in all locations and languages. You should not use hreflang annotations to point to non-existent pages.
2. You need hreflang annotations only for pages you want to be indexed by search systems, which is a significant point to keep in mind.
3. Non-canonical URLs should not have hreflang annotations.
Choosing hreflang annotations can be a very complicated thing. The most important thing that you need to take care of is that your account pages are supposed to be linked with hreflang received annotations.
#7: Hreflang implementation method
There are three common methods:
1. XML sitemaps
There are several problems with processing the info in sitemaps by Google because it does not process XML pages that often. Therefore, if you choose this method you can face some errors in Google Search Console.
Usually, developers prefer using XML sitemaps over implementing it in the HTML source code with each page for global (world) sites. We guess, many hreflang annotations cause more problems in an XML sitemap than in the code header section of a page.
What to keep in mind? The decision is up to but if you still are going to use the XML sitemaps implementation method, we recommend you to check out more information on Google’s recommendations before you make some mistakes.
2. The HTTP header of each page
Theoretically, the HTTP header of each page implementation method has all advantages you need:
- Google receives the info from HTTP header all the time, unlike in the case with XML sitemaps;
- You can set HTTP headers for every URL, even to the one without own source code, as well as PDFs and other non-HTML files.
However, this method is also quite complicated to use. SEO tools don’t pay enough attention to HTTP headers. Therefore, it often causes more difficulties than benefits but, on the other hand, the code on its own is quite easy to write and it is very similar to the HTML header.
3. The header section of the HTML code of each page
It is definitely the most popular and simple hreflang implementation method on the Internet. And most recommended for using across developers too. However, unfortunately, there are also some cons to this method.
There can be an error problem with using x-default value for your pages, so, if your site homepage is aimed to redirect the audience to their browser location or language, it is better to use the other two hreflang implementation methods.
In addition, if you have many different location or language options, you will need to make lots of hreflang annotations, which has some negative consequences. Which ones? The long additional code increases the web page size and thus, can slow down the load time. If you do not want to make your website size bigger, then you should consider using another method. However, there is another thing to keep in mind. In fact, standard web pages sizes are not always the optimal ones (due to numerous reasons, including different countries’ Internet issues), so this is where you should do some research to find the most efficient option for your resource and its users.
There are also some important tips you should pay attention to while working with hreflang:
- You should create a Google Search Console for every location and language option;
- You should align your hreflang implementation with international targeting options;
- You should go throw and solve all errors in Google Search Console;
- Watch out for a great increase in webpage sizes if you do not want to annoy users with a slow loading;
- Do not forget to control your Google Webmaster Tools impressions.
Now you know everything you need! Using the hreflang attribute is an integral part of optimizing global web resources for correct perception by search engines and adequate determination of the correctness of displaying a particular language version for a specific user.
Fulfillment of this condition will provide your web resource with positive statistics of the main indicators taken into account by search engines, which undoubtedly will affect the overall results of its promotion.