What is 'hreflang' and how to use it
byKinga Wojciechowska・Last updated: February 03, 2021・5 min read
In every web application, website or project, when you open a code editor, it all starts with the definition of the language used for your page which is very important for good SEO results. You are probably familiar already with a <lang> attribute in HTML but let me explain it to distinguish two similar (at first sight) terms. Lang determines the linguistic content of the page and the content recipient country (this one is optional). At the same time it is making it easier for crawlers to assign a page to a particular language version. But what is hreflang, and how to use it?
What is hreflang and how it is used?
Hreflang is a tag in HTML <link> attribute used to define content language and localization with a specific language
indicator in the URL.
It may also be used to indicate a specific region, not only country. Hreflang indicates to crawlers that the
page has different language versions, depending on the used language code.
There are three places where you can use hreflang in your code. The most popular one is hreflang tag used in <link>
attribute in <head> section of the page. Have a look at the example below.
<head>
<link rel=”alternate” hreflang=”en” href=”http://simplelocalize.com/"/>
<link rel=”alternate” hreflang=”es” href=”http://simplelocalize.com/es-ES/"/>
<link rel=”alternate” hreflang=”es” href=”http://simplelocalize.com/es-CL/"/>
</head>
In the example we determined language versions on our website. The first part of the tag is a language code, and the second part represents a region code (both must conform to ISO 639-1 and ISO 3166-1 Alpha 2 format). The main language is English, but we translated the website also to Spanish in two versions: Castilian for European use and localized for Chile. It works the same way for subpages, we add links referring to specific language:
<head>
<link rel=”alternate” hreflang=”en” href=”http://simplelocalize.com/contact"/>
<link rel=”alternate” hreflang=”es” href=”http://simplelocalize.com/es-ES/contacto"/>
<link rel=”alternate” hreflang=”es” href=”http://simplelocalize.com/es-CL/contacto"/>
</head>
It's crucial to put the links of all language versions in each webpage. This way crawlers can read and display the correct language version for the user. Any error in implementing hreflang tags will make Google ignore them completely. Make sure they are added correctly on all webpages to provide localized content for your audience.
Hreflangs should be added in the <head> of the page before scripts that could cause the section to close prematurely,
before crawlers can read them.
Why is hreflang important?
When optimizing and then positioning a website in Google, using hreflangs will be one of the ranking factors that will add points to the website. The tag provides crawlers with a linkage between different language versions of the same page. In other words, hreflang tags are treated by Google as a ranking signal. They improve SEO by showing the right language version to specified language users.
Another but not less important fact is that using hreflangs you do not duplicate the content. Instead of creating multiple, different pages with separate domains for each language version, you create one website or application and indicate the right version to crawlers.
FAQ about hreflangs usage
Should I use hreflang in one language app/website?
No, if your website is designed for one country/area audience, then you don't need to use hreflangs.
Correct indicators in <lang> attribute will do their job in this case.
How it works when my domain is not generic but region specific, for example .it or .me?
In such cases it's good to use hreflangs if you target to another language audience. .it ending is country specific, so crawlers will be positioning your content as Italian. To improve that, ad hreflangs to correct language versions or indicate that the language is, for example, English.
What are rel="alternate" and rel=”canonical”? Are those required while using hreflangs?
Rel=alternate indicates to search engines that there is another URL with the same content but in a different form, like language or mobile version. It points that there in an alternative page for a given URL.
Rel=canonical indicates to crawlers that that given URL is a master copy of a page, its most representative version. It should be used when you have many pages with similar content, like in the case of e-commerce stores.
Both tags are essential for hreflang correct usage and they are required for the correct page optimization. Note that the hreflang attribute and the canonical URL must match and both need to be defined. For example, we have a website in English which is also available in Spanish Castilian and regional for Chile. In this case, the default fallback will be the English home page.
<head>
<link rel=”canonical” href=”http://simplelocalize.com/"/>
<link rel=”alternate” hreflang=”es” href=”http://simplelocalize.com/es-ES/"/>
<link rel=”alternate” hreflang=”es” href=”http://simplelocalize.com/es-CL/"/>
</head>
What x-default value in hreflang tag does?
X-default value is used for unmatched languages, in case some languages are not translated. It is optional, but recommended by Google, to control the page when no language versions match. Using X-default you define a fallback page in such cases. It's a good practice to always set x-default value if using hreflangs.
Hrefalngs help you with localization of your website so it's designed and adjusted to the specific language group of users. Adjusting the content of your pages to a specific audience, help you improve customer satisfaction, increase customer base and improve your SEO. Check how you can start with localization of your website with SimpleLocalize, start with a free access right now!
