Home > Technical SEO > What is Hreflang and Why it is Important in SEO

What is Hreflang and Why it is Important in SEO

Published: Last Updated on

Hreflang is an HTML attribute used along with Link Tag to specify the language and regional targeting of documents. It helps search engines to understand the relationship between the pages in multilingual and multi-regional sites. This further helps search engines to serve content relevant to the user query. 

Reasons for Choosing Hreflang? 

Before the introduction of hreflang, businesses could only target customers from the country of its origin. Even if they had a website, tapping customers from the international market was quite tricky. 

Let us understand this concept with the help of an example: 

Suppose there is a person ‘x’, an artefact seller from India who wants to expand his business to the international market. He sets up his website, patiently waits for his first order, but to his misery, he fails to receive a single order. He could not figure out why. (Note: In olden days Google produced similar results no matter where you search from, as location played little role in search results). But today we know why. Maybe his website did not have localized content for the targeted audience or there is absence of local currency on the transaction pages. 

The above scenario could have been trickier for search engines as well. Even though it might have indexed the website; it may not have shown the website frequently in International searches. Also, the site might be subject to a high bounce rate owing to its non-localised content. 

With the introduction of hreflang, Google has solved the problem completely. Businesses can now serve the optimized local content to the customers residing in a different country as well as in the same region. 

Hreflang Importance in SEO 

Google has neither confirmed officially about hreflang being a ranking factor nor do their technical documents have any confirmation regarding the same. However, using hreflang as on-page SEO technique helps sites to increase their CTR, which is a Google ranking factor. Below are two significant points which capture the importance of hreflang to its fullest. 

  1. When a search engine serves users with content in their local language, it enhances their user experience significantly. It leads to higher dwell time, less bounce off, and high CTR, which is an indirect ranking signal to Google. 
  2. When there are multiple contents in the same language but targeting different countries with slight variations, the problem of duplicate content is solved. Google considers them as duplicates but might choose one of them as the canonical version. By defining Hreflang, you can proactively indicate to Google that both are alternate versions of each other, created to serve different geographies. 

SEO should always remember that hreflang is just a signal to Google, not a directive. Its usage does not guarantee success. However, it should not be the reason to ignore the implementation of  hreflang. Using hreflang for multilingual or multi-regional sites is always a good practice. Agencies using advanced technical SEO should always refer to the documents by Google on Hreflang Implementations for harnessing its full potential. 

How Does an hreflang Tag Look Like?

The hreflang tag has a proper syntax that reads like this:

rel=”alternate” href=”(URL)” hreflang=”(language and country code)”

The syntax in this tag can be divided into three parts:

  • The rel=”alternate” part dictates search engines on the existence of another iteration or version of the same page
  • The href= part specifies the page’s specified location
  • and the hreflang= part identifies the specific country and its language

How To Build an hreflang Tag?

Building an hreflang tag is fairly simple. Now that you know the three parts of the tag, you can seamlessly build your tag according to your preference. To build an hreflang tag, all you need to do is know or have the country and the language code ready and replace them in the syntax’s specific sections.

You only have to replace the language code in the syntax and the crawlers will automatically identify the country. The codes are only two letters long. For instance, the code for Germany is de and Japan is ja. The extensive list of codes is easily available online as well.

If you want to show a webpage in English in Japanese, the code will look something like this:

rel=”alternate” href=”(URL)” hreflang=”ja”

Apart from this, you could also target specific speakers of a language in a specific region. For instance, if you want to target speakers who speak British English in the US, you could replace en to en-gb and the page will automatically adapt to the language. An entire list of codes for this exists as well

Benefits of Hreflang

From an SEO perspective, a question that often comes up is what is Hreflang’s advantage? There are 2 primary benefits of using Hreflang, which are:

  • Better User Experience

Hreflang is a very beneficial tool in terms of enhancing user experience. Using Hreflang, you can direct the users to a page you have optimized with their preferred language and location. It helps in improving the user’s absorption capacity of information  on the webpage. Moreover, it also leads to a decrease in the users who would just bounce back to the search results to find another option that fits their needs. 

  • Prevents the Issue of Duplicate Content

Hreflang tags are helpful in indicating to the search engines that a URL represents the master copy of your webpage. For instance, if you have a website with the same content in a language like English in different URLs, which are aimed at different English-speaking countries like Australia, UK, etc., the difference in the content of these pages would be minimal. Hreflang tags indicate to search engines that the content is almost the same on these pages, but is optimized for different geographies.

Effects of Hreflang on Rankings

Serving up the right content for the searches of users is the main goal of using Hreflang. Its attributes might not be helpful in increasing the traffic on your website but will surely help in retaining the users and offering them exactly what they are searching for on the web. Hreflang codes help the search engines in finding the right version of your webpage on the SERP, based on metrics like the user’s language preferences, location, etc.

Difference between Hreflang & canonicalization

Canonicalization and Hreflang have quite a similar theme but differ from each other. Canonicalization is used for highlighting the main URL (from a pool of URLs with the same content) to the search engine for avoiding any duplicate content issues. 

Hreflang is a code that helps search engines in determining which URL of the various others with the same content should be shown to the users, based on their language preference or location. This difference is crucial in understanding what is international SEO for people.

Scenario and Annotations of Hreflang 

You can use hreflang in one of the three scenarios for your website. 

Hreflang Usage Scenarios

  • Same Country, Different Language

< Link rel = “alternate” hreflang = “en-us” href= “https://www.xyz.com” /> 

<Link rel = “alternate” hreflang = “es- us” href = “ https://www.xyz.com/es /> 

Here,

Link rel = alternate tells the search engine an alternate version of the web page is available

hreflang = “en-us”, indicates the search engine that this language page should be shown when a user from the USA with English as his language settings searches the web 

hreflang = “es-us”, communicates to the search engine to show Spanish version of the web page when a user from the USA with Spanish as language settings, searches the web.

Proper language and country codes should be defined to avoid implementation error. Google recommends using ISO 639-1 standard for language abbreviation and ISO 3166-1 Alpha 2 standard for countries.

  •   Same Language, Different Country 

< Link rel = “alternate” hreflang = “en-us” href =” https://www.xyz.com” / > 

<Link rel = “alternate” hreflang = “en-gb href = “ https://www.xyz.com/en-gb” /> 

<Link rel = ”alternate” hreflang = “en-ca” href = “https://www.xyz.com/en-ca” /> 

Some places have gTLD available. There you can assign a separate domain for the targeted region.

You can use the subfolder to host content for different countries. 

Code for the gTLD

<Link rel= ”alternate” hreflang = ”en-us” href = “https://www.xyz.com/ “> 

<Link rel = “alternate” hreflang = “en-gb href = “ https://www.xyz.co.uk” /> 

<Link rel = ”alternate” hreflang = “en-ca” href = “https://www.xyz.co.ca” /> 

  •  Different Language, Different Country 

<Link rel=”alternate” hreflang=”en-en” href = “https://www.xyz.com/” > 

<Link rel= “alternate” hreflang=”es-es” href= “ https://www.xyz.com/es” /> 

Placement of Hreflang Tag?

Hreflang Placement

Google Support recommends implementing Hreflang in one of the three places mentioned below; the most recommended one is with:

  • In the Head section 

Placing the hreflang attribute in the HTML is simple and easy. If you are implementing for the first time, it may be the right one to choose. The hreflang attribute is used with a link tag and goes inside the head element of HTML Markup.

Example :

<Head> 

<link rel= ”alternate” hreflang= ”x-default” href=”https://www.page.com” > 

<link rel= ”alternate” hreflang=”en-gb” href=”https://www.page.com/gb” >

 <link rel=”alternate” hreflang= “de-de” href=”https://www.page.com/de” > 

</head>

  • HTTP Header

Hreflang in the HTTP header, i.e., whenever Google requests for a page, the server in its response sends all the information about the page and presence of its variant version proactively. This way of implementing Hreflang is mostly for .pdf pages where the HTML markup is missing.

 Example :

 Link: <http://example.com/file.pdf>; rel=”alternate”; hreflang=”en”, <http://www.example.com/de/file.pdf>; rel=”alternate”;hreflang=”de-ch”, <http://www.example.com/de/file.pdf>; rel=”alternate”; hreflang=”de”.

  • In the XML Sitemap

Implementing hreflang in the sitemap seems to be the most complex one, but it has its advantages, such as dealing with a single file. For any update on an addition or deletion of language or region, specific code can be placed without actually disturbing code on the website. 

Example : 

We have to add an XHTML child tag which will list all the language variant nested inside <loc> tag we often use with the sitemap. 

<?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/english/page.html </loc> 

<xhtml:link rel= “alternate” hreflang=”de” href=”http://www.example.com/deutsch/page.html”/> <xhtml:link rel= “alternate” hreflang=”en” href=”http://www.example.com/english/page.html”/> </url> 

<url> 

<loc>http://www.example.com/deutsch/page.html</loc

<xhtml:link rel= “alternate” hreflang=”en” href=”http://www.example.com/english/page.html”/> <xhtml:link rel= “alternate” hreflang=”de” href=”http://www.example.com/deutsch/page.html”/> </url> 

</urlset> 

Rules to follow while implementing Hreflang 

  • Self-Referencing

Google documentation recommends every language version must contain a self-reference tag along with all the language and regional variants the site is targeting. Self- referencing tags should be followed by all URL present in hreflang annotation.

A British based e-commerce website “Prettylittlething” targeting different countries have used it to perfection.

Self Referencing Tags

  • Bi-directional Reference

Each language version must point to each other, i.e. Bi-directional relationship. Suppose a language version ‘A’ is pointing to another version “B” then “B” should point back to “A” otherwise the hreflang would not work. 

E-Commerce website “Prettylittlething” USA based websites have bi-directional to UK website.

Bi-Directional Reference

  • Use X- Default for Good Practice

Usage of X-Default value for hreflang attribute is not mandatory, but a good practice. This version is also called a Default or Fallback version. Sometimes Google shows this version when a user visits from a country whose language is not present in the Hreflang attribute or if the implementation for the language version is wrong. 

Common Errors and Troubleshooting 

It is always necessary to audit your hreflang implementation from time to time to uncover any issue with it. Some of the most common errors we can find are mentioned below, along with ways to fix it.

  •  Self-reference Annotations missing 

It is mandatory for all pages with hreflang annotations to self-reference themselves. Failing to do so can trigger a warning for it, or worst, the pages may be ignored and would not show in the search result.

FIX – Review the affected pages, then add a self-referencing hreflang tag to each of them.

  • Bi-directional link missing 

Every page variant should link back to all the pages that are present in the hreflang tag. Only then a relationship between the pages is established and understood by Google. Otherwise, there is a high chance Google may not consider these pages and will fail to show local content in a specific geography. 

FIX – All the pages that are missing bi-directional links should be found, and changes should be made to solve the error.

  •  Hreflang annotation invalid 

This error may appear due to the invalid language code or maybe due to invalid country code. 

FIX – Run a crawl in Screaming Frog tool to check for the invalid hreflang pages and use appropriate language and country code.

  •  Hreflang Linking to Broken page 

This error is triggered when href attribute links to the broken page in hreflang annotations. Broken links might lead to a dead page which Google may overlook and not show to the user.

FIX – Find pages by running site crawl with the help of Screaming Frog. Check hreflang report to see all the non-200 URLs to check for broken pages and replace them with the live pages. 

  • Page referenced for more than one language in Hreflang 

Hreflang error occurs when one of the pages is referenced for more than one language, i.e., two different language versions are referencing the same. Such an implementation page creates confusion for search engines. In a state of confusion, the search engine would choose such directives and may consider both the pages for the search result.

FIX – Go through every page where hreflang annotations are present and check for href attribute value to find an error and fix the right URL. 

  •  Hreflang and HTML Lang mismatch 

Errors could happen when there is ambiguity between the declared hreflang and HTML language attribute. Google does not rely much on HTML language attributes, but some search engines and browsers may look at both the places for confirmation. 

FIX – Find the affected pages, change the HTML lang attribute for affected pages for consistency. 

Tools to Create Hreflang 

  1. Alyeda Solis hreflang Generator tool 
  2. Sistrix hreflang tool 

Tools to Test Hreflang Implementation 

  1. Hreflang.org 
  2. Merkle SEO hreflang testing tool

Right from its introduction, to date, we have come so far in terms of its usage. It surely has become an integral part of International SEO. It may not look easy, but it is relatively simple and using the same can have a great SEO benefit. Following the best practices can always yield the best results. Still, one should remember that practising and learning is the best way to master an art like hreflang. 

Popular Searches

Best SEO Company  |  Search Engine Optimization in Bangalore  |  Search Engine Optimization in Delhi  |  SEO Company in Mumbai  |  Best SEO Agency  |  SEO Consultants Services  |  Internet Marketing Services  |  Ecommerce SEO Services India  |  Website Audit Services  |  SEO Penalty Recovery Services  |  Local SEO Services in India  |  PPC Services in India  |  ASO Services in India  |  Conversion Rate Optimization Company  |  Link Building Services  |  Content Marketing Agency  |  SEO Services in India  |  Digital Marketing Overview  |  What is Google Algorithms  |  Reverse Image Search

Leave a Comment

Related Posts

Copy link
Powered by Social Snap