Friday, December 16, 2016

Hreflang Attribute

Hello Friends, Have you ever wondered:
  • How does Google or any other search engine identify the language of any blog or website?
  • How does the users get tailored search results (language and region specific website URLs) based on their language and region?

The answer to all these question is : hreflang

In this article, we would discuss:

What is hreflang?
When should we use the hreflang?
What’s the SEO benefit of using hreflang?
How does we implement hreflang?
hreflang tag examples on Facebook

What is hreflang?

The hreflang attribute (also referred to as rel="alternate" hreflang="x") tells Google and other search engines about the language of our blog or website. Based on the hreflang attribute, Google and other search engines serve the correct language or regional URL in Search results.

Let’s understand it by an Example:
Suppose we have a website that have similar content in multiple languages (say German & English ). Now as a site owner, we obviously want search engine to point user to the most appropriate website version. Say if a user is German then we would like Google or other search engines to show the German version of our website in the search results for that user.

When should we use the hreflang?

Let's discuss the scenarios to understand when should we use hreflang. We should use it if:
  • Our site content is fully translated. It means we have the same content in multiple languages. For example, we have both German and English version of each page.
  • Our site content has small regional variations with similar content in a single language. It means content targeted at different geographic regions, but in the same language. For example, we might have English language content targeted for the US and UK.

What’s the SEO benefit of using hreflang?

  • Increase the page ranking and decrease the bounce rate
    But How? If we deliver the properly optimized version of our website (pages as per users language and location ) to the user then it improves their experience and which in turn leads to fewer people bouncing back to the search results. Fewer people bouncing back to the search results leads to higher rankings.
  • Prevents the duplicate content problem
    Let’s see how? If a page on a website exists as a duplicate in English for the UK, US and Ireland then providing hreflang tags to inform search engines that these pages are not duplicates but intended for different audiences. In this way, it also helps us to prevent a duplicate content penalty.

How does we implement hreflang?

There are three ways to implement hreflang: using HTML link element in the header i.e. <head>, using HTTP header or using an XML sitemap.

Let’s discuss these separately.
  1. HTML link element in header
    In the HTML <head> section, we need to add a link element. Example of the hreflang tag implementation for the Spanish version of webpage at http://es.example.com/ 
    <link rel="alternate" hreflang="es" href="http://es.example.com/"/>
    Example for English speakers in Ireland (en-ie)
    <link rel="alternate" href="http://example.com/en-ie" hreflang="en-ie" />
    Explanation of the above markup:
    • The rel=”alternate” markup tells the search engines/Google to consider all these pages as the alternate version of the same page
    • In hreflang=”en-ie”, the first two letters indicates the language and the next two indicates region of an alternate URL.
    • The href indicates the our website URL.
  2. HTTP header
    HTML link element work nicely for HTML pages but not for non-HTML content like PDFs. If we would like to publish non-HTML files (like PDFs), we can use an HTTP header to indicate a different language version of a URL:
    Link: <http://es.example.com/>; rel="alternate"; hreflang="es"
    If we would like to specify multiple hreflang values in a Link HTTP header, then we need to separate the values with commas like
    Link: <http://es.example.com/>; rel="alternate"; hreflang="es",
    <http://de.example.com/>; rel="alternate"; hreflang="de"
  3. Sitemap
    Instead of using markup, we could also submit language version information in a Sitemap.

hreflang tag examples on Facebook

Facebook is very popular social networking site. Users from all around the world use this. What do you think, whether facebook use the hreflang tag or not? The answer is Yes, Facebook also use the hreflang tags in their site.


Thank you for reading this article. Hope you would like it. If you have any suggestion or have any question do let me know in the comments. Happy Learning!!

No comments:

Post a Comment