Hreflang Attribute: Setup and Correct Application
The Hreflang attribute informs search engines about similar pages in different languages. Google and Yandex use it to display the correct URLs in search results based on the country and language preferences of the user conducting the search. Hreflang is an indispensable attribute for specialists promoting multilingual websites. It should contain the correct language/region code and the URL of the page in the specified language version. According to a SEMrush report, about 75% of multilingual sites have poorly implemented hreflang or do not use it at all. This can cause some issues with indexing and site rankings in search engines. Read our article on how to use hreflang correctly.
What is the rel = “alternate” hreflang attribute?
When working in an international e-commerce environment, you have to deal with different language versions of a website. From a usability perspective, it’s necessary to ensure accurate translation and, in some cases, adapt the appearance to trends prevailing in a particular market. Users should be able to navigate the site comfortably if you care about conversions. However, from a positioning standpoint, you must ensure that search engines correctly indicate which language version should be displayed for a particular internet user. Hreflang is used to indicate to search engines that the website or page has different language versions aimed at users speaking other languages or from different regions.
How does this work in practice? The user enters a phrase of interest into the search engine. Then the search engine checks their language preferences and performs a search through its index, matching pages with the query while paying attention to hreflang attributes. The search engine presents the search results, and the user views pages that are thematically and linguistically relevant to the phrase.
Is it worth using hreflang in SEO?
Hreflang is not a ranking factor, at least this hasn’t been officially confirmed by either Google or Yandex. However, its use helps increase CTR, which is a ranking factor. Let’s look at a few examples that highlight the importance of hreflang.
Google and Yandex consider the user’s language, that’s a fact. Besides, thanks to the multilingualism implemented on a website, it’s possible to retain a visitor for a longer time.
Pages interconnected through the hreflang attribute will not be considered duplicate content. This might happen if separate pages, for example, for the US and UK, contain identical text, where the only difference is the currency. With hreflang, you inform the search engine that this is the same content targeted at different audiences.
Advice! We strongly recommend using hreflang for multilingual or regional websites. SEO specialists point out that implementing the attribute itself will not benefit you in terms of higher ranking, but it will help in obtaining more targeted traffic.
When should you use language version markup?
- The entire content of the online resource is translated into multiple languages.
- It’s necessary to display the page for multiple regions (even in the case of a similar language, such as British English and American English), which helps avoid content duplication.
Why should you care about this? As Google itself states in official sources:
- Localized versions of the page are considered duplicates only if the main content remains untranslated;
- Duplicated content worsens the quality of the site.
Here are 3 examples where using hreflang is recommended:
- The main content is presented in one language, while the site’s template is translated into different ones (footer, navigation, elements in side panels). This approach can be seen in user-generated content websites.
- Published texts differ only due to regional adaptation, for example, a German website targeting the German, Austrian, and Swiss markets.
- The entire site is fully translated into several languages, and the offer is aimed at users from different regions.
The biggest advantage of using hreflang on a website is the prevention of content duplication. If you operate in different markets where users speak the same language and the content differences are minor, the search engine might perceive this as duplicated content. Hreflang attributes can eliminate this risk.
Lang HTML and hreflang Attribute
In HTML, you might see a tag called lang, which indicates the language of the created document, i.e., the website. However, this attribute is not considered by Google, as stated by John Mueller. To indicate the language version, you need to use hreflang.
How to Properly Specify the hreflang Attribute on a Website
Google recommends 3 ways to implement hreflang, namely:
- In the HTML page code
- In the HTTP header
- In the Sitemap.
Note! You can try to implement attributes through Google Tag Manager. This method is recommended only for those site owners who have encountering issues making changes to the site. Google Tag Manager adds hreflang using JavaScript, which Google cannot interpret immediately.
Adding hreflang in HTML
Add hreflang attributes in the page code related to all pages with different language versions. The correct syntax for a single tag is as follows:
<link rel="аltеrnаtе" hreflang="region-language-code" href="url" />
- Language code, optional region code – the marking should comply with the ISO 639-1 and ISO 3166-1 Alpha 2 format (we will discuss detailed instructions below).
- URL – the full address of the page in another language version.
Example:
The site operates in the Russian, British, and Austrian markets, with the main version of the site being Russian. Properly implemented hreflang will look like this:
<head> <link rel="аltеrnаtе" hreflang="ru" href="https://my-site.com/" /> <link rel="аltеrnаtе" hreflang="en-gb" href="https://my-site.com/en/ "/> <link rel ="аltеrnаtе" hreflang=" de-at "href="https://my-site.com/de/ "/> </head>
Implementation in the HTTP Header
An HTTP header is additional information attached to requests sent by servers (such as cookie headers). This method is useful for files that do not have an HTML format, such as PDF files.
The header should be in the following format:
<url-1>; rel="alternate"; hreflang="language_code_1-region_code_1", <url-2>; rel="alternate"; hreflang="language_code_2-region_code_2", …
Language and region codes are the same as for HTML tags. Each version of the page must have the same set of headers. Remember to separate the following parameters with commas. You should also include a parameter that refers to the current page.
Example:
A PDF file is prepared in Russian, British, and Austrian versions. The HTTP header looks like this
Link:
<https://my-site.com/files.pdf>; rel = "аltеrnаtе"; hreflang = "ru", <https://en-gb.my-site.com/files.pdf>; rel = "аltеrnаtе"; hreflang = "en-gb", <https://de-at.my-site.com/files.pdf>; rel = "аltеrnаtе"; hreflang = "de-at"
Applying hreflang in a Sitemap
Language versions of a page can be specified for search engines in the XML sitemap of the website. This is done using the tag, indicating the URL with language versions. Then each page is marked with tags for languages and regions.
Template for page markers in two language versions:
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="https://sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="https://www.w3.org/1999/xhtml"> <url> <loc>https://my-site.com/ru/</loc> <xhtml:link rel="alternate" hreflang="en" href="https://my-site.com/en/"/> <xhtml:link rel="alternate" hreflang="ua" href="https://my-site.com/ua/"/> <xhtml:link rel="alternate" hreflang="ru" href="https://my-site.com/ru/"/> </url> <url> <loc>https://my-site.com/en/</loc> <xhtml:link rel="alternate" hreflang="ru" href="https://my-site.com/ru/"/> <xhtml:link rel="alternate" hreflang="ua" href="https://my-site.com/ua/"/> <xhtml:link rel="alternate" hreflang="en" href="https://my-site.com/en/"/> </url> <url> <loc>https://my-site.com/ua/</loc> <xhtml:link rel="alternate" hreflang="ru" href="https://my-site.com/ru/"/> <xhtml:link rel="alternate" hreflang="en" href="https://my-site.com/en/"/> <xhtml:link rel="alternate" hreflang="ua" href="https://my-site.com/ua/"/> </url> </urlset>
General recommendations for using hreflang with all the listed methods
- All language versions of the pages should include themselves and versions in other languages.
- Use the full URL of the page with HTTPS or HTTP protocol.
- Language versions can be available on different domains, subdomains, or located in directories of the root domain.
- If two language tags of a page do not point to each other in hreflang, the attributes will be ignored by Google.
- Hreflang should reflect the same pages, just in another language. Do not direct them to the homepage.
- Users for whom there is no suitable language on the site should be sent to the main version (using the English version is recommended for international resources). To do this, use the x-default attribute, which is used to designate a page that does not have its own language versions.
The x-default value is used in the hreflang attribute when no language version matches the given page. For example, with home pages where you can choose the language version of the website that suits you.
Example:
<link rel = "аltеrnаtе" href = "https://my-site.com" hreflang = "x-default" />
Language and region codes that can be used in hreflang
As mentioned above, when specifying the language code, use the ISO 639-1 format, and when defining the region code, use the ISO 3166-1 Alpha 2 format.
Example:
- en: pages for English speakers, regardless of the region,
- en-gb: pages for users from Great Britain,
- en-au: pages for users from Australia.
Using region markup is optional, but if a website is adapted for users from a specific country, it’s worth indicating this to Google and Yandex bots. However, you should not use the country code itself, as the search engine will not automatically recognize the language based on it.
Most Common Issues with hreflang and Site Language Version Creation and Verification Tools
Proper use of hreflang attributes is challenging to implement. If a site is large and has many language versions, it’s easy to get confused. We recommend using programs that help set the attributes correctly and detect errors.
- International targeting report in Google Search Console: all issues related to hreflang attributes can be found in a list prepared by Google itself,
- Hreflang tag generator tool by Aleyda Solis – helps in preparing and modifying hreflang attributes.
- Screaming Frog – identifies all correctly and incorrectly implemented hreflangs.
- Html Checker Validator.
With the above tools, you can eliminate the following errors:
- incorrect language/region code;
- hreflang attribute related to the page is missing;
- lack of reciprocal hreflangs in different language versions of the site;
- marking URLs that result in a server response different from code 200, etc.
Most errors and issues with hreflang usually arise due to a lack of understanding of how to properly implement a multilingual website. Executing correct technical SEO is not easy, but with extensive support from Google/Yandex and the expertise of specialists, you can effortlessly manage proper markup for the language versions of the site.
