Master SEO vocabulary with all essential terms and meanings here.

Hreflang Tag: Know Its Structure and How to Implement It

Last updated: Sep 15, 2022

https://cmlabs.co/en-id/seo-terms/what-is-hreflang-tag

Link copied!

What is Hreflang?

Hreflang Tag is an HTML code that works to tell search engine robots the language and target geography of a page. The tag can help the page be displayed according to the language and geographic location of the target audience.

The role of this code is vital, especially for multi-language websites targeting an international audience. On such websites, one page will usually be available in two or more different languages.

The code will tell search engines that a content has several language variations. That way, search engines can provide a language version that suits the target audience.

The Importance of Hreflang Tag in SEO

The use of tag is very important for multi-language and regional websites because it can improve user experience and prevent duplicate content issues.

Improve User Experience

Audiences tend to be more comfortable looking for website content that is familiar and understandable. If your website uses Hreflang Tags and has several language versions, then search engines can provide content that is appropriate to the location or language of the audience.

This method not only reduces the bounce rate and increases time on page, but also affects traffic because websites with different language versions will increase the opportunity to bring in new audiences from various countries.

Prevent Duplicate Content Issues

Sometimes there are websites that only use one language but target several countries. For example, your website is in English and targets Australia and Singapore. This can potentially cause issues related to duplicate content.

For instance, you have two product pages that are similar in content and sell the same product. However, the first page is made for a Singapore audience at a special price, while the second one is made for an Australian customer at a different price.

By using the tag, search engines will understand that the two pages are intended for audiences from different geographic targets. Hence, the duplicate content issues can be avoided.

Hreflang Tag Structure

How is the Hreflang Tag code structure? The following are examples and explanations for each part of the code:

<link rel="alternate" hreflang="x" href="https://example.com/alternate-page" />

cmlabs

rel="alternate": tell search engines that a main page has an alternative version.
hreflang="x": language or region code used on alternate pages.
href=URL: location or URL of alternative page

You must follow the format specified in ISO 639-1 for language codes and ISO 3166-1 Alpha 2 for area codes. For instance, you should include the 'id' code format for Indonesian and the 'au' code format for the Australian region.

How to Add Hreflang Tags

To install the Hreflang Tag, there are three ways you can do it. The three ways are adding Tags in HTML code, HTTP Headers, and XML Sitemaps.

Adding Tags with HTML

The first way is to put the tag code and put it in the <head> of each page. This method is suitable for websites that only use a few language options. For example:

<head>
<link rel="alternate" hreflang="en" href="https://www.example.com" />
</head>

cmlabs

Implementing Hreflang in HTTP Headers

The next way is to add the tag code in the HTTP Header. This method can be implemented if your website has PDF content, DOC, or other non-HTML files. For example:

HTTP/1.1 200 OK
Content-Type: application/pdf
Link: <https://id.example.com/document.pdf>; rel="alternate"; hreflang="id".

cmlabs

Putting Hreflang in the XML Sitemap

The final way is adding the code through the XML Sitemap. This method is suitable for websites with a large number of language versions. You can attach the tag code to the <loc> element by using the <xhtml:link> attribute. For example:

<url>
    <loc>http://www.example.com/indonesian/page.html</loc>
    <xhtml:link 
               rel="alternate"
               hreflang="en"
               href="http://www.example.com/english/page.html"/>

cmlabs

You can check the validity of your hreflang tags by using the hreflang checker from cmlabs. Try it now for free.