Hreflang tags

The hreflang tag, initiated by Google, is a snippet of code that specifies to search engines the language and geographic restrictions of a content. In other words, it is used to tell Google what language to use when delivering search results to a geographically targeted audience. It applies mainly to sites with similar content, but addressed to different regions or languages

Have you ever served multiple versions of content in different languages or for users in different countries on your website?

By doing so, Google may make a mistake and display the wrong version in its search results that does not match the user’s language or country.

Fortunately, you can help Google display the right version in the search results for each user based on their location by using the hreflang tag

• But first, what is the hreflang tag?
• What are the main reasons why you should use it?
• And in what contexts should it be used?
• How to use it?
• What are the mistakes to avoid when using it?

These are some of the questions I will answer clearly and concisely in the rest of this mini-guide

Let’s go!

Chapter 1: What is the Hreflang tag and why use it?

In this chapter, I will:

• Clarify the concept of the hreflang tag in more depth;
• Diagram its structure
• Explain when and why you should use it.

1.what exactly is the hreflang tag?

If you have an audience in different countries of the world, then it is important that your website uses hreflang tags

They allow you to tell Google which language and country you are targeting for a specific web page. This way, the search engine will be able to provide users searching in a specific language or from a specific country with the appropriate version of the page.

To better understand the concept of Hreflang tags, let’s take the example of a user who searches in English. Thanks to this tag, Google will be able to browse the different versions of the same page and display to the user the one that corresponds to his language, English.

There is therefore no risk that this English-speaking user will end up with a page in French or Spanish.

As you can see, the hreflang tag contributes to a good user experience. With a page that automatically adapts to the visitor’s search language, he won’t have to translate the page before understanding its content.

It must be said that this tag acts as a signal for search engines and not as a directive.

Here is an example of the syntax of the Hreflang tag

In this code, we can notice the abbreviation “fr” which indicates to Google that it is the french version of the page and that it must be a priori intended for a french-speaking public.

1.2 Hreflang structure

Let’s now look at the structure of the Hreflang tag

• The first part, rel = “alternate” tells us that the page is an alternate version of the main page;

• The second part, hreflang = “language” tells us the language of the page;
• The third part, href = “exampleaddress.com” is theURL of the site that is indexable.

Since the languages chosen are not written in full in the tag, you may wonder what code corresponds to each language?

Here you have a complete list of language codes for the hreflang tag. This is an exhaustive list of all the languages that are accepted in the Hreflang tag

For example, for a cake recipe web page for Mexico, this could be:

But, as we said, by using this tag, you can not only target a languagebut also a country. If you want to target a country, you must use this structure hreflang = “language-country”

Using the example of “cake recipes” for Mexico, we can use

To find out the code for each country, see this complete list of country codes for the hreflang tag.

1.3. When should the hreflang tag be used?

Here are some examples of situations that require the use of this tag:

• If the main content of the web page depends on the preferences of the users while the content passcode will have to change depending on the geography and language, the hreflang tag should be used.

• If the content of the web page will be changed with minor differences for different regions, accents and cultures such as British English (en-UK), American English (en-US), Turkish Turkish (tr-TR) and Azerbaijani Turkish (az-AZ), the hreflang tag should be used so that only the correct version is indexed for the right audience.
• If the website has multiple language versions such as English, German and French, all web pages of the website should point to each other symmetrically with a hreflang tag.

1.4. The Hreflang tag: What are the advantages of using it?

The Hreflang attribute gives your content an SEO boost. In addition to having content in multiple languages, you can also have content targeted to variants of a single language.

As mentioned in the definition, this tag allows an international website to deliver results based on the search language or location of the searcher

Ultimately, you should use hreflang for these two main reasons:

• For a better user experience

Content created specifically for an audience and delivered in their own language will better resonate, engage, and meet users’ search expectations.

This leads to a bounce rate and higher page rankings.

• For avoid duplicate content problems

If you “manually” create pages with the same content in different languages or region-specific content in the same language without using Hreflang tags, Google may not understand it and consider it as duplicate content.

This can negatively impact the ranking of these pages. Just like the canonical tagtag, hreflang helps avoid penalties associated with duplicate content on international sites

Now that we have covered what hreflang tags are, let’s go into more detail on how they are handled by search engines

Chapter 2: How does Google handle the hreflang tag?

In this chapter, we will see how the search engine Google handles theindexing and the ranking of web pages containing the hreflang tag.

2.1. How does hreflang work with indexing?

When this attribute works properly, search engines will will crawl each of the URLs tagged with hreflang and count them as unique pages.

This way, pages will be indexed appropriately with respect to location and languages in the SERP, and then swapped out if necessary

Keep in mind that Alternative hreflang URLs s use crawl budget, as Google will need to crawl each language variant in a set to ensure that the pages follow good practices.

For example, Google will need to ensure that none of these pages include or link to spam content.

This is something to be aware of if you are already struggling with the crawl budget and have a lot of different language variations.

2.2. how does the hreflang tag work with ranking?

First of all, hreflang tags do not directly affect rankings when used.

When configured correctly, search engines simply swap pages in the SERPs with the local or relevant language pages you have identified via the hreflang code.

For example, if you have an english language page page that is ranked in the German German SERPs and you have a hreflang tag for an equivalent page in Germanpage, the english page will not be ranked higher, but will be replaced by the german version

In 2016, Google Webmaster Trends analyst, John Mueller, confirmed that hreflang won’t help your ranking any more than not having it

All it does is help Google know which URL to swap it for based on language or region. Now let’s move on to the best practices for using this tag on a website.

Chapter 3: How to use Hreflang tags on a website

In this chapter, we will see the following:

• The three (03) methods of implementing the hreflang tag ;
• The technical elements to take into account during the implementation;
• The key points in the implementation of this tag;
• The five (05) common mistakes to avoid during the implementation.

Let’s start!

3.1. 3 methods of implementation of the hreflang tag on a Web site

To use this tag on a Web page, you have three different possibilities

• HTML tags
• HTTP headers ;
• And the sitemap

These methods have different advantages and rules for using hreflang to specify different versions of the Web page.

3.1.1. How to use Hreflang tags with HTML tags (Hreflang in your )?

Hreflang tags can be used with HTML tags as in the following example:” ”

The Hreflang code must be inserted in an hTML link tag link tag in the header section of the web page. It is these HTML link tags that nest the hreflang tag which will indicate to search engines the different language and regional versions of the same page

In order to respect the indentation order, each different language or regional version of the page must be specified in a element contained in the section of the web page document’s source code.

Here are some examples of hreflang usage for a multilingual web page

The language code in the hreflang must be formatted according to the ISO 639-1 format and the region code must be formatted according to the ISO 3166-1 Alpha 2.

As you can see on the different examples, the ” href “part of the tag must be consistent with the language and region code of the hreflang section.

That is, if you mention “en” in the “href”, you must also respect the same “en” in the “hreflang” part.

Note:

This method can slow down loading times for large sites that have a lot of languages to load. It may be the simplest option, but it will require regular updating.

That is, every time you add or remove a page, you will also need to update your hreflang tags.

3.1.2. How to use Hreflang tags in HTTP headers

This tag can also be used in the HTTP headers of the web page.

Using this tag in the HTTP header can:

• Reduce the size of the HTML document
• Increase the speed of the page;
• Allow the search engine to see the hreflang code earlier because the HTTP headers are read before the web page is even downloaded

Here is an example of the syntax to be followed when using the Href tag in the HTTP header

Link: ; rel=”alternate”; hreflang=”lang_code_1″, ; rel=”alternate”; hreflang=”lang_code_2″, …

The section section here is the alternate version of the same web page document while ” lang_code_x ” is the language and region of the alternate version of the web page.

In the URL SECTIONsection, the signs “<&gt“signs must be used. When using the hreflang tag with the HTTP header the requested web page version and the alternative versions must be used together.

You can also embed the markup in pages that do not have their own source code, or PDF files that have also been indexed in Google. Here are some real-world examples of using hreflang with the HTTP header

Link

; rel=”alternate”; hreflang=”tr-TR_1″ ; ; rel=”alternate”; hreflang=”en-US” ; ; rel=”alternate” hreflang=”de-DE” ; rel=”alternative”; hreflang=”fr-fr” ; rel = “alternative”; hreflang = “fr-fr”

As it was the case for thehTML headerheader, this technique requires an implementation at the URL level. Therefore, in these three versions, the HTTP header code for a category page is as follows

Link

< http://www.exemple.com/fr/categorie1/> ; rel=”alternate “; hreflang=”en” < http://www.exemple.com/en/categorie1/> ; rel= “alternate” ; hreflang= “en” < http://www.exemple.com/de/categorie1/>; rel= “alternate”; hreflang= “de”

Note:

This method is the least known and least used, despite having many advantages in theory

However, unlike its use in the xML sitemap sitemap (which we will see below), the HTTP header is always processed when the page is crawled. Thus, the information of the hreflang is always received by Google

As the implementation in the it is not necessarily the best option for large sites with many languages because it also slows down their loading speed.

3.1.3. How to use Hreflang tags with sitemaps?

Hreflang tags can be used in xML sitemaps sitemaps to match alternative versions in different languages and regions for web pages

In the sitemapwhen using hreflang tagstags, for each version of the web page, including itself, the language and region code must be used together, for each of these versions.

To use hreflang tags in sitemaps, the following recommendations must be followed:

• Each tag tag must have a URL ;
• Each tag tag must have a for each version of the web page. The order of these other URL specifications is not important.

Below is an example of using hreflang tags with sitemaps

http://www.exemple.com/de

Finally, each sitemap must end with the tag .

Note:

This method is the better of the last two and is the most recommended. With this one, you can make your changes directly via the sitemap without worrying about adding something to each page of your site.

Moreover, if your sitemap.xml file is automatically generated, this approach can make it easier to add or remove pages without worrying about the hreflang configuration.

3.2. Technical elements to take into account

Once the implementation method is defined, it is important to consider some technical elements before starting:

3.2.1. The hreflang x-default tag

The x-default tag tag represents a hreflang attribute value, whose role is to define the default version to which users should be redirected if none of the implemented languages conform to their browser settings

This tag will be implemented in the HTML tag.

3.2.1.1. Hreflang X-Default tag in HTML tags

If a Web page has a default version in terms of region and language, it can use the x-default “in the hreflang tag to specify this.

For example, if we have a default version in addition to English, German and Turkish variants of the same web page, we can also use ” x-default “for the default language.

If we have the ” french ” as the default, we can insert the code block below in the section section of the web page

3.2.2. The canonical tag and the hreflang

As a reminder, canonical tags are a way to tell search engines that a single URL (not necessarily a pagination) is the master copy of two or more other pages. This avoids possible risks of duplicate content

The following three tags must be used simultaneously rel= “alternate”, hreflang= “en” and rel= “canonical”.

Let’s take another case study, the English of Great Britain and Australia for example and suppose we are on the home page with this code

If we were on the page en-gbpage, it is only the canonical tag that will have change:

Note:

You must make sure that the hreflang links redirect to the canonical version of each URL, otherwise, it will cause the system to malfunction.

3.2.3. Language and region codes that are supported by the Hreflang protocol

The Hreflang tag can be used with language codes in the ISO-639-1 format and region codes in ISO-3166 FORMAT–1 Alpha 2.

To use these different language, accent and region codes together, you must first write the language code, then the region code. These two codes must be separated by a ” – “.

In addition, the region code must be in uppercase letters, unlike the language code. A region code cannot be used alone without a language code

Below are some examples of language and region codes with their explanations:

• ” in “: English content, independent of any region;
• ” tr “Turkish content, independent of any region;
• ” It “Italian content, independent of any region;
• ” en-US “: content in English for users in the United States;
• ” tr-DE “Turkish-language content for users in Germany;
• ” it-ES “Italian language content for users in Spain.

For the different language scripts (alphabets and cultures), the country and region code should be used.

In addition, the ISO 15924 format can be used to specify the different versions of the language scripts as below:

• ” en-coptic “: English language in the Goptic alphabet ;
• ” zh-Hant “Chinese in thetraditional alphabet ;
• ” es-Goth “: Spanish in thegothic alphabet.

3.3. What are the important points in the implementation of Hreflang tags?

Here are seven (07) important rules for the correct implementation of hreflang tags:

• Canonical tags and Hreflang tags must be consistent.
• Hreflang tags must be fully qualified, including “HTTP” and “HTTPS” versions. Note that relative URL paths are not accepted.
• Alternate URLs do not have to belong to the same domain
• If there are multiple regional versions of a web page for the same language, one version must be specified as the default version without any region code. For example, if there are 5 pages for different English-speaking countries such as “USA” as ” en-US “, “United Kingdom” as ” en-GB “, “New Zealand” as ” en-NZ “India” as “en-IN en-IN “South Africa” as ” en-ZA “there should be a web page with just the code ” en “in the hreflang tag without any regional specification.
• If the different versions of the web pages do not point to another consistency, the hreflang tags will be ignored by the search engine algorithms.
• If a website has multiple languages and bi-directional implementation of hreflang is difficult, the webmaster should focus on maintaining hreflang tags for the default and dominant language. This way, Google will always treat content from other languages with its own predictions and perceptions while focusing on the important section of the web page
• For auto-redirecting homepages or language pages with no match, using a default version is useful with the hreflang code ” x-default ” such as “ “.

3.4. Five (05) common mistakes with hreflang tags to avoid

During one of his statements, John Mueller, one of Google’s representatives, announced that hreflang is one of the most complex technical problems that SEO professionals often face.

In fact, when implementing it, it is easy to make a mistake that can of course cost you dearly!

To that end, I’ve listed below, five common mistakes with hreflang tags that you should avoid at all costs:

• Not including hreflang return tags correctly;
• Not checking language and region codes;
• Not specifying the default page;
• Not configuring the hreflang correctly;
• Having problems with the pages to which the hreflang attribute points.

3.4.1. Error: Not including hreflang return tags correctly

Remember that when a page is linked to another page as an alternative, the alternative page must also link to the original page.

For example, if the page A links to page B with the hreflang tag, the page B must also link to page A with the hreflang tag in return.

Failure to do so may result in errors in the implementation of hreflang tags.

These tags can end up being ignored or interpreted incorrectly by search engines, which will negate any benefits you are trying to achieve with the creation of this tag

Tip: Make sure that the hreflang tags you create use the appropriate self-referential canonical tags

3.4.2. Error: Failing to check language and region codes

The language and region codes used in hreflang tags come fromISO 639-1 and fromISO 3166-1 Alpha 2

• Use of incorrect language codes

First of all, the use of an incorrect language code is one of the most common errors observed when adding hreflang tags. A website should always use these tags with the correct language codes.

The ISO 639-1 format should be checked for the suitability of language codes in hreflang tags.

• Use of incorrect region codes

The use of an incorrect incorrect region code means that this code in the hreflang tag is not compatible with the ISO-3166 Alpha 2 format of the region code list.

Although some of these codes are what people can easily guess, such as ” in “or the ” fr “from French, they don’t always look like what most people would think

For example, the UK is actually theUkrainewhile the abbreviation for targeting those in England would be GB (for Great Britain). The verification of the iSO-3166 Alpha 2 format format will help a website avoid these types of errors

Tip: When working on creating your hreflang tags, always carefully evaluate the abbreviations you are using to make sure you are targeting the right language and country.

3.4.3 Mistake: Not using the x-default hreflang tag

Without this specific tag, search engines will still show your page on the SERP, and they will try to target the version of your site that makes the most sense. However, remember that you are letting the search engine algorithms play a game of chance

And it’s not clear that these algorithms will choose exactly the version of the site you wanted to display to those target users

Tip: Using the x-default option allows you to decide what your users should see primarily, i.e. the dominant version.

3.4.4 Error: Do not configure the hreflang correctly

Using these codes in the wrong order like putting the country before the language or using something other than the simple dash ” – ” will invalidate the code.

Marketers should also remember that while you can designate a language without designating a country, the reverse is not possible

You can’t designate a country without a language. Therefore, this first part of the tag (the language code) must always be filled in

Tip The hreflang code must follow a specific order – [language code] – [country code]. For example en-gb.

3.4.5. Error: Problems with pages to which the hreflang points

As your domain and business grow, you need to make sure your website structure stays on top of things.

If you have a new domain for a country or end up deleting a version of your website, you need to make sure that all of your hreflang tags receive the update as well.

In fact, your SEO can take a hit, if tags that point to missing (incorrect) URLs or pages return errors of any kind.

Advice: If there are redirect errors on your site, it’s important to spot them and know how to fix them

Before we finish, let’s take a look at some tools that will make your job easier and automate the process.

Chapter 4: The Best Hreflang Tagging Tools to Use

There are several great tools that can help you on your international help you on your international marketing journey. The tools below can help you check, detect and correct implementation errors automatically

4.1. Google Search Console Hreflang International Targeting Report

Google Search Console has an old tool called international targeting report which shows the usage and errors of the “hreflang” tag.

From the International Targeting Report in GSC, a webmaster can see if hreflang tags are being used correctly or not, as well as for which country, region and language these tags are being used.

In the Google Search Console International Targeting report, you will see the hreflang tags, either with errors or with a correct structure. You will also see their targeted areas and languages.

4.2. Hreflang Tags Generator by Aleydasolis

This hreflang tag generator tool helps you create all the tags you need with just one click. It is a great resource when creating multiple tags for multiple countries.

4.3. Technicalseo

If you need to quickly check if your individual pages have hreflang tags in place, use the technicalseo.

It allows you to enter a URL and get immediate feedback on it. You can also enter a sitemap to make sure your hreflang tags are implemented correctly.

Chapter 5: More questions about hreflang tags

5.1. What is a hreflang tag?

The hreflang attribute tells Google what language and country you are targeting for a specific page

5.2. What does Hreflang mean in HTML?

Hreflang is an HTML tag attribute that tells search engines the relationship between pages in different languages on your website. This is a must-have attribute for those concerned with international website SEO

5.3. Why is the hreflang tag important?

It allows search engines to provide the right page result for users searching in a specific language and country.

By using the link attribute rel = “Alternate” hreflang = “x”you can ensure that Google understands the corresponding geographic location of the site and outputs the appropriate language version or regional URL of the content to users.

5.4. Is Hreflang good for SEO?

When used incorrectly, this tag can negatively impact a website’s SEO. In fact, search engines ignore all invalid hreflang tagstags, which means that they can ignore alternative versions of your page

This is bad for SEO, because it means that search engines may not be able to show the most appropriate version of your page to users.

5.5. What are the possible ways to implement Hreflang?

To implement the hreflang tag, you have three different options

• Use link elements in the ;
• Use HTTP headers;
• Use an XML sitemap.

5.6. How do you use hreflang tags?

Step 1: Determine if you need hreflang annotations on your website.

Step 2: Create a map of the language and country versions of your website.

Step 3: Check your website structure and domain strategy.

Step 4: Assign a hreflang value to each language and country version.

Bottom line:

In a nutshell, Hreflang tags are among the indispensable elements of international SEO

Matching different versions of a page in terms of symmetry and search intent can help search engines better crawl and display a version based on the user’s geographic location or search language.

Also keep in mind that if one language version of a web page is performing poorly or contains poor historical data, this will also affect other language versions of the same web page.

To improve your site’s international visibility and gain organic growth as a cross-border of countries and cultures, proper implementation of hreflang tags is important

I hope this guide has helped you a lot

See you soon!