One of the latest trends in web development is the addition of multilingual functionality to websites, which requires the use of the hreflang attribute on the technical side of the site.
Sometimes, a website owner might not even know about this directive until they translate their site into multiple languages and receive a notification from Google Search Console. Let’s break down what hreflang is and how to use it properly. Maximum useful information with no unnecessary details.
What Is hreflang?
Hreflang is a special HTML attribute used to indicate the availability of different language versions of a webpage.
Hreflang tells Google’s robot that this page exists in multiple languages and specifies the URL for the default page when a translation isn’t available.
Example of hreflang in HTML:
<link href="https://holostenko.ua/contacts" rel="alternate" hreflang="ru" />
<link href="https://holostenko.ua/uk/contacts" rel="alternate" hreflang="uk-UA" />
<link href="https://holostenko.ua/contacts" rel="alternate" hreflang="x-default" />
Let’s break down what this means:
- rel="alternate" - This HTML tag attribute tells Google about all language versions of the current page;
- hreflang="language-country code" - Specifies the language of the page and the country it is associated with (language is written in ISO 639-1 format, and country in ISO 3166-1 Alpha 2 format). For Ukraine, hreflang would be written as hreflang="uk-UA";
- x-default - This is the default version of the page, also known as the fallback. It is shown if a user’s preferred language version isn’t available.
* Hreflang attributes must be placed within the <head> section of the HTML page.
Hreflang and SEO
As discussed, hreflang helps Google identify the language version of a website for indexing purposes. Theoretically, this should allow Google to display search results in the language corresponding to the user’s search query if such a page exists. Based on our manual tests, this works well.
But, the main benefit of hreflang in SEO is not only this, but also a solution to the problem of duplicate content risks (“site duplicates”, in the language of SEO).
Duplicate content
Duplicate content refers to the same content being presented on different pages of a website.
For example, let’s say your website serves multiple markets in different currencies but in the same language, such as the UK and the US. You could have multiple product pages that differ only in price and shipping conditions. For Google, this could be seen as duplicate content. However, if you use hreflang tags for the specific language versions, this problem is resolved.
In essence, hreflang is a mandatory attribute for the technical SEO of any multilingual website. Without it, the proper indexing of your site across languages is compromised.
Hreflang in WordPress, Joomla, OpenCart, and Other CMS
From our experience with various websites, if the website has built-in multilingual tools, hreflang is usually automatically implemented. There’s typically no need for additional configuration. This applies to CMS platforms like WordPress, Joomla, and OpenCart.
For smaller HTML websites without a CMS or larger projects built on frameworks like Laravel, hreflang implementation needs to be done manually (as shown in the HTML example above).
Hreflang implementation rules you shouldn't break
➊ Reciprocal linking
If your English-language page links to other language versions via hreflang, the pages in other languages should also include links with hreflang attributes pointing back to the English version.
➋ Self-referencing
Hreflang tags should point not only to other language versions but also to the page itself.
➌ Default page declaration
Although technically optional, Google recommends specifying the x-default version of the page.
➍ No broken links
Hreflang tags must not point to pages that return a 404 status.
➎ Language consistency
The content on a multilingual page should match the language codes specified in the hreflang attributes.
Alternative methods for implementing hreflang
If you are having trouble implementing hreflang in HTML (though this is the most reliable method), there are two alternative methods:
- HTTP Headers – Useful for pages without HTML, such as file download links or installation packages.
- Sitemaps – Hreflang can also be implemented within the sitemap by using the <xhtml: link> tag. This functions similarly to the HTML method, where alternate language versions are specified within the <url> directory.
Example of sitemap implementation:
<url>
<loc>https://example.com/blog/test/</loc>
<xhtml: link rel = "alternate" hreflang = "x-default" href = "https://example.com/blog/test/ "/>
<xhtml: link rel =" alternate "hreflang =" ru" href ="https://example.com/blog/test/ "/>
<xhtml: link rel =" alternate "hreflang ="uk" href =" https://example.com/blog/uk/test/ "/>
</url>
Testing hreflang validity
There are several tools online that allow you to quickly test hreflang implementation. However, you should first check the following:
- If there are any issues, Google Search Console will notify you via the Coverage report or by email.
- For a more specific page check, the most reliable testing tool is app.hreflang.org.
After testing, you should see a positive result:
Your hreflang implementation should pass with a green status. If something is wrong, check the HTML code and correct the errors.
That’s it! We hope this material was useful, concise, and clear. We wish you success in implementing hreflang and multilingual functionality for your website!
Order a service