Hreflang

Does your website served similar content with the multiple language?

If yes, how to tell the search engine to send the content to the people with the correct language?

Hreflang is the technical solution for this.

In this module, you’ll learn what is Hreflang and how to use them properly.

What is Hreflang?

Hreflang is the method or technique to mark certain pages that have similar content but aimed for different languages or regions.

There are 3 method of doing Hreflang:

Content with regional variations like en-us and en-gb.
Content in different languages like en, de, and fr.
A combination of different languages and regional variations.

You might be asking this question in your mind: isn’t that search engine will show the result based on the search term language? So, what is the usage of hreflang?

With millions of search term on the web, some of them are using the brand’s own unique term that applicable to everyone. And this, created a problem.

For example, when Apple brand firstly publish their site, this is how the search result when everyone searching for the search term “Apple”.

As the company grows to enter different countries, they use Hreflang to solve this. And here’s how it looks when the spain people searching for the term “Apple”:

In fact, the usage of Hreflang is also commonly used to target different regions that use the same language.

For example, if you want to differentiate between Germany and Austria or The US and the UK regions.

Hreflang in SEO

There are two main benefits of using hreflang in SEO, especially if you own a site that produce similar contents to target different languages.

1. Higher Ranking From High UX

First, you’ll have the higher engagement and lower bounce rate if you have optimized a specific content based on the user’s language and regions.

Showing the correct language and location’s specific will definitely increase the user experience as they’ll find your content are created for them.

As the result, your ranking will get boosted.

2. Prevent Duplicate Content

Let’s say if you have the similar content that target UK, US, and Australia, the search engine might detect these pages as duplicate content.

The reason is the search engine don’t understand what you’re trying to do and find a minor difference between the pages.

With Hreflang, you make it clear to the search engine that these contents are made to target different people and not duplicated.

Hreflang Tag Components

Hreflang represent in a code that have a consistent syntax.

Here is the basic of Hreflang tag:

For example, let’s say we want to add the German version of our page, here is the Hreflang tag:

All you need to do is just simply change the language code and the content URL that represent that language.

Regions Targeting

As we mentioned earlier, Hreflang is also available if you want to target specific regions with the same language.

The concept is the same as the basic hreflang above, just that you’ll need to change the language code into two-letter code syntax.

The two letter code syntax here is “language-country”. You can check the full list here.

For example, if let’s say we want to target English speakers that located in the UK, here is the Hreflang tag:

In this example, the code syntax en-gb is the english language and The UK regions.

Hreflang Tag Concept

Hreflang tag components are reasonably simply to understand, and same goes to the concept.

There are some concept or rules that you’ll need to remember when doing Hreflang.

1. Hreflang Tags Works in Pair

If you add Hreflang from an English page to the German page, then the german page must return in favor with a hreflang pointing to the English page.

This is a signal to the search engine that you have control for both pages.

It’s similar to setting a relationship status on social medias. You could easily declare yourself as in a relationship with Jennifer Aniston or Brad Pitt, but unless they do the same, nobody is going to believe you.

2. Self-Referential in The Attribute

Google states that “each language version must list itself as well as all other language versions.”

It means, whenever you do the hreflang tag to another page, you must include the one that pointing to the page itself.

For example, if we want to add Hreflang between our english page (https://searchenginementor.com/en) and our german page (https://searchengiementor.com/de).

Both of the pages should have the following hreflang tags:

The first one indicates that the alternate German version of the page, and the second one indicates the self referring that point back to the page itself.

Similarly, the German page also require to have both tags: one to the English version and one to the German page itself.

3. X-Default Version

The x-default tag specifies the default or fallback page that gets shown to users when no other language variant is appropriate.

When the search engine can’t find any code that match with the language, the X-default is telling the search engine to return to the x-default version.

It look something like this:

How to Implement Hreflang Tag?

There are three ways to add or implement hreflang tags on your site:

HTML tags
HTTP headers
Sitemaps

1. HTML Tags

Placing HTML tags is probably the easiest way to implement hreflang tag.

In order to do that, simply just by adding the appropriate hreflang code in the <head> of every pages.

This method could be time consuming since you need to add for each pages html and it also could lead to the slower page load if your site have many languages variation.

2. HTTP Readers

Not all of the pages in a website are built by HTML. For example, PDF pages are not supported with HTML.

In such case, you can still implement Hreflang tags on the HTTP readers:

HTTP/1.1 200 OK
Content-Type: application/pdf
Link: <https://searchenginementor.com/seo-guidance.pdf>; rel=”alternate”;hreflang=”x-default”,
<https://searchenginementor.com/seo-guidance.pdf>; rel=”alternate”;hreflang=”en”,
<https://searchenginementor.com/de/seo-guidance.pdf>; rel=”alternate”;hreflang=”de”,

3. Sitemaps

Sitemaps can include relevant markup to specify the hreflang of a page and its variants. For this, you can use the xhtml:link attribute.

It will look something like this:

<url>
<loc>https://searchenginementor.com/en</loc>
<xhtml:link rel=”alternate” hreflang=”x-default” href=”https://searchenginementor.com/en” />
<xhtml:link rel=”alternate” hreflang=”en” href=”https://searchenginementor.com/en” />
<xhtml:link rel=”alternate” hreflang=”de” href=”https://searchenginementor.com/de/” />
</url>
<url>
<loc>https://searchenginementor.com/de</loc>
<xhtml:link rel=”alternate” hreflang=”x-default” href=”https://searchenginementor.com/de” />
<xhtml:link rel=”alternate” hreflang=”de” href=”https://searchenginementor.com/de” />
<xhtml:link rel=”alternate” hreflang=”en” href=”https://searchenginementor.com/en/” />
</url>

This might be the most efficient options to implement Hreflang tags since it all maintained in a single file.

There’s no need to edit multiple HTML documents each time you make a slight change or delete a page.

Hreflang

What is Hreflang?