Michael Gearon

Link hreflang in HTML

Michael Gearon

Last updated on

The HTML5 logo

Introduced by Google in 2011, the hreflang tag specifies the language of the text in the linked document. This could be useful in websites that have more than one language for example where I live in Wales quite a few websites have both English and Welsh versions of their websites. The reason why the hreflang is useful is that it can assist search engines such as Google:

Google uses the rel="alternate" hreflang="x" attributes to serve the correct language or regional URL in Search results.

An example could be a user that has the IP address which the search engine believes is in France, the results would return the French version of the website rather than the English. By doing this it will reduce the bounce rate and increase conversions as you serving the user the correct version of the website.

HTML

<link href="tag_link.asp" rel="parent" rev="subsection" hreflang="en">

In our example we have three links which are Welsh, English and x-default attribute which indicates that doesn’t target any specific language. You can place the hreflang either in the HTTP header, sitemap or on the on page markup.

Does this effect your rankings?

No, although it may not effect your rankings it can decrease your bounce rate as the user will be pointed to the correct language version for them in the search results for example if the user searched in Welsh it will show them the Welsh version of the website. For more information about country code top-level domain (ccTLD) take a look at this external post: Moz – ccTLDs 

More HTML guides

Further Reading

Michael Gearon

Written by
Michael Gearon

Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.