Hreflang tags are indispensable in international SEO campaigns where different language versions of a website exist. According to Web Almanac 2022 data from the HTTP Archive, 9.6% of websites used hreflang tags in 2022. These figures represented a slight increase compared to 2021, when 9.0% of websites used hreflang tags. There are three common methods to implement Hreflang tags: via the <head> section of the HTML page, link headers or XML sitemaps. The data from the Web Almanac only refers to the evaluation from the <head> area of the HTML page and link headers. XML sitemaps were not taken into account, which is why the value will be slightly higher.
The topic of hreflang implementation always seems to be complicated, especially if you have multiple websites with different URL structures. This guide provides a comprehensive overview and covers all the important aspects of the Hreflang attribute. From an introduction to the topic to advanced strategies, everything needed to successfully implement and optimize Hreflang is included.
Importance of the Hreflang attribute
The Hreflang attribute is an HTML attribute used by search engines such as Google and Bing to identify the geographic target market and language of a web page. It enables website operators to identify different language and country versions of a page and ensure that the correct version is displayed for the respective user in the search results.
Without proper implementation, search engines could display the wrong language or country version of a web page, which can lead to a poor user experience and therefore a failure to fulfill the call-to-action of your target audience. In addition, the hreflang attribute helps to avoid the problem of duplicate content by clearly signaling that similar content in different languages is intended for different target markets.
Relevance for SEO and internationalization
The hreflang attribute becomes important in the internationalization of websites and is one of the factors you cannot ignore in international SEO. If your website provides content in multiple languages or for different countries, the hreflang attribute can ensure that search engines index and display the correct version of the page. This is particularly important for companies that operate in multiple countries and want to maximize their reach by tailoring their content to the respective target groups.
For SEO strategists and web developers, understanding and correctly applying the hreflang attribute is a must to ensure search engine visibility and international user satisfaction. It forms the basis for a successful internationalization strategy and makes a significant contribution to optimizing the positioning of the website in the respective target markets.
Basics of the Hreflang attribute
The following section provides you with a basic introduction to the Hreflang attribute and explains its meaning, syntax and the correct use of language and country codes.
Definition and function
The Hreflang attribute is an HTML attribute that is used in the <link> tags of a website to signal the language and country assignment of your website to Google (and other search engines). This tells search engines which language version of a page is intended for which user group.
The attribute is mainly used to ensure that the correct language version of a page is displayed in the search results. For example, if a user searches from France, the French version of your page will be displayed if the hreflang attribute is implemented correctly.
Syntax and structure
The Hreflang attribute is placed in the <head> area of an HTML page within a <link> tag. The basic syntax is as follows:
<link rel="alternate" href="URL" hreflang="language code-country code" />rel="alternate": This indicates that the linked URL is an alternative version of the current page.
href="URL": This indicates the URL of the alternate language version.
hreflang="language code country code": This parameter specifies the language and country for which the alternative version is intended.
An example for a German and English version of a page could look like this:
<link rel="alternate" href="https://www.example.com/de/" hreflang="de-DE" /> <link rel="alternate" href="https://www.example.com/en/" hreflang="en-US" />In this example, the first link refers to the German version of the page for users in Germany (hreflang="de-DE"), while the second link refers to the English version for users in the USA (hreflang="en-US").
Supported language and country codes
The Hreflang attribute uses language and country codes according to the ISO standard:
- Language code: A two-letter code according to ISO 639-1 that indicates the language (e.g. "de" for German, "en" for English, "fr" for French).
- Country code: A two-letter code according to ISO 3166-1 Alpha-2 indicating the country (e.g. "DE" for Germany, "US" for the United States, "FR" for France).
Common combinations are:
- hreflang="en-US": English for the USA
- hreflang="en-GB": English for Great Britain
- hreflang="fr-FR": French for France
- hreflang="es-ES": Spanish for Spain
- hreflang="de-DE": German for Germany
- hreflang="de-AT": German for Austria
- hreflang="de-CH": German for Switzerland
These combinations help search engines deliver the correct language version of a page to the right users, improving relevance and user experience.
The country code is optional. If you only want to specify one language code, this means that your page is intended for all users of this language worldwide. An example of this would be:
<link rel="alternate" href="https://www.example.com/es/" hreflang="es" />Here, the page would be displayed for all Spanish-speaking users, regardless of their location. We do the same with TutKit.com and only display the language code, without any other country code. In the Search Console, we can then simply filter the pages with URL /es to determine the distribution of clicks and impressions across the different countries.
Areas of application of the Hreflang attribute
Different language versions of a website
The hreflang attribute is particularly useful for websites that offer content in multiple languages. For example, if your website has both an English and a German version of a page, the hreflang attribute helps search engines to understand which version should be displayed for which users. The attribute ensures that users see the page in their preferred language, which significantly improves the user experience.
Example: You run an e-commerce website that could also offer and ship products internationally. You can therefore make your online store available in German as well as English and other languages of your target markets. Hreflang ensures that German users are directed to the German site (hreflang="de") and English-speaking users to the English site (hreflang="en").
Addressing regional target groups
In addition to language differentiation, the hreflang attribute can also be used to target content to users in specific countries or regions. This is particularly important if your website has content that is aimed at different regional markets, even if the language is the same.
An example of this would be a site that has content in English for users in the US and a separate page in English for users in the UK. Although both pages are in the same language, they could be customized due to different legal situations, currencies or cultural differences. Here the Hreflang attribute would look like this:
<link rel="alternate" href="https://www.example.com/en-us/" hreflang="en-US" /> <link rel="alternate" href="https://www.example.com/en-gb/" hreflang="en-GB" />This setup helps to ensure that US users see the page tailored to the US market and UK users see the page optimized for the UK.
Avoidance of duplicate content
With the Hreflang attribute, you are able to counteract the detrimental effect of duplicate content caused by identical pages in the same language on a website. If a website provides similar or identical content in different language or country versions, this could be perceived by search engines as duplicate content. This can have a negative impact on the ranking in search results.
The hreflang attribute signals to search engines that these are alternative versions of the same page that are intended for different target groups. This minimizes the risk of duplicate content and increases the likelihood that the correct version of the page will be displayed in the search results.
Implementation of the Hreflang attribute
The hreflang attribute can be implemented in several ways, depending on the structure and requirements of the website:
- In the HTML code: Simple and direct for static websites.
- In HTTP headers: Useful for non-HTML resources or when HTML code is difficult to access.
- In XML sitemaps: Efficient for large websites, as Hreflang is managed centrally.
- In combination with canonical tags: To avoid conflicts and ensure correct indexing by search engines.
Google itself explained in its podcast SEARCH OFF THE RECORDS on July 25, 2024 that it theoretically does not matter where the Hreflang information is provided, whether in HTML, HTTP headers or sitemaps. See also the embedded video below.
In HTML code
The most common method of implementing the Hreflang attribute is directly in the HTML code of a website. Here, the Hreflang attribute is added within the <head> area of the page. This method is particularly useful for static websites where the content does not change frequently.
A typical example looks like this:
<head> <link rel="alternate" href="https://www.example.com/de/" hreflang="de-DE" /> <link rel="alternate" href="https://www.example.com/en/" hreflang="en-US" /> <link rel="alternate" href="https://www.example.com/fr/" hreflang="fr-FR" /> </head>In this example, a separate <link> tag with the corresponding hreflang attribute is specified for each language and country version of the page. Each version of the page should also refer to all other language versions to ensure a consistent link.
In HTTP headers
A less frequently used but still useful method of implementing the Hreflang attribute is via HTTP headers. This is particularly helpful if access to the HTML code of a page is restricted or if it is a non-HTML resource, such as a PDF file or your website was created entirely via JavaScript.
An HTTP header with Hreflang could look like this:
Link: <https://www.example.com/de/>; rel="alternate"; hreflang="de-DE" Link: <https://www.example.com/en/>; rel="alternate"; hreflang="en-US"However, this method requires access to the server configuration and is therefore more suitable for advanced users or special use cases.
HREFLANG in XML sitemaps
The Hreflang attribute can also be implemented in XML sitemaps, which is particularly advantageous for large websites with many pages. This method is efficient and reduces effort, as the Hreflang information can be managed centrally instead of being integrated into the HTML code of each individual page.
An example of implementation in an XML sitemap:
<url> <loc>https://www.example.com/de/</loc> <xhtml:link rel="alternate" hreflang="de-DE" href="https://www.example.com/en/"/> <xhtml:link rel="alternate" hreflang="en-US" href="https://www.example.com/en/"/> <xhtml:link rel="alternate" hreflang="fr-FR" href="https://www.example.com/fr/"/> </url>This method has the advantage that all hreflang attributes are managed in one place, which makes maintenance and updating easier. In addition, the XML sitemap is processed efficiently by search engines. This is also the main reason why we decided to implement HREFLANG via the XML sitemap with our TutKit.com project. Another reason was that we did not want to overfill the HTML code with the large number of languages (currently 26!). The approach via the XML sitemap requires a one-off implementation and ensuring that all new pages are also integrated. Then it runs automatically by itself. The sitemap should be stored in the Google Search Console so that Google can quickly record the new pages.
This is how it looks for us ... we have a separate sitemap for each language. Each URL references the other language editions. This is the sitemap for the German language:
Using canonical tags in combination with Hreflang
It is important to use the Hreflang attribute correctly in combination with canonical tags to avoid potential SEO problems. A canonical tag signals to search engines which version of a page is considered the "canonical" or primary version. This is particularly relevant when multiple pages have similar content.
The general rule is: If several language versions of the same page exist, each page should refer to itself as well as to the other language versions via hreflang. The canonical tag should refer to the corresponding language version of the page.
Example:
<link rel="canonical" href="https://www.example.com/de/" /> <link rel="alternate" href="https://www.example.com/de/" hreflang="de-DE" /> <link rel="alternate" href="https://www.example.com/en/" hreflang="en-US" />In this case, the German version of the page refers to itself via the canonical tag, while the hreflang attribute refers to the English version of the page.
You can dispense with the use of rel="alternate" Hreflang tags in the HTML code if you have already implemented them in the XML sitemap, as we did in my example above. Nice side effect: This allows you to reduce code bloat. Removing rel="alternate" tags from the HTML code reduces the file size and may make the page load a little faster.
It is important that the sitemap is set up correctly and is accessible. So check whether the Search Console shows the status of the submission as "successful".
Best practices when using Hreflang
To ensure that the Hreflang attribute works optimally, you should observe the following best practices:
- Proper mapping of language and country codes: Use the correct and necessary ISO codes.
- Consistency in implementation: Make sure that all language versions of your site are linked correctly and completely.
- Dealing with transnational and multilingual websites: Adapt your hreflang strategy to the specific requirements of your target markets.
- Avoiding pitfalls: Be vigilant and avoid common mistakes to ensure a clean implementation.
By following these guidelines, you can maximize the effectiveness of the Hreflang attribute and ensure that your website is successful internationally.
Correct mapping of language and country codes
Correct mapping of language and country codes is crucial to ensure that search engines correctly categorize your pages. Mistakes can lead to users being directed to the wrong version of your website, which can affect the user experience. Imagine a Swiss user coming to a German online store and seeing euros as the currency everywhere. They expect Swiss francs and there is a high risk that they will leave the site immediately.
Therefore, use correct ISO codes. Always use the official ISO 639-1 codes for languages and ISO 3166-1 Alpha-2 codes for countries. For example, "de" stands for German and "DE" for Germany, while "en" stands for English and "US" for the United States.
Avoid unnecessary combinations. Only use the language-country code combinations that you really need. If you want your site to appeal to all German-speaking users, regardless of country, hreflang="de" instead of hreflang="de-DE" is sufficient. That's how we do it with TutKit.com. And it works very well with the traffic to the non-German pages, which now exceeds the German-language traffic.
Make sure that you use the Hreflang attribute consistently on all pages of your website. Inconsistencies can confuse search engines and lead to problems. You should therefore rely on an automated solution, which you can achieve either via programming or a plugin. Errors are too easy to make with manual maintenance.
Consistency in the implementation
It is important that you implement the Hreflang tags correctly on each page and ensure that all language versions are linked to each other. If you need help creating the HREFLANG attributes, you can find an online tool HREFLANG Tags Generator here. You can validate your implementation later with an HREFLANG validator. More on this below.
Each language version of your site should link to all other language versions, this is called bidirectional linking. If the German version links to the English version, the English version should also link to the German version.
Make sure that the Hreflang attribute is implemented on all relevant pages of your website, not just on the main pages.
Make sure that your hreflang tags do not link to error pages (e.g. 404 pages) or link to non-existent URLs. This could have a negative impact on your SEO.
Dealing with transnational and multilingual websites
If your website is aimed at users in several countries or with different languages, a well thought-out hreflang strategy is essential from an SEO perspective and to ensure a high user experience. Think carefully about how you organize the content for different target groups. Here are a few recommendations from our experience:
- If possible, use separate URLs for the different language and country versions, e.g. https://www.example.com/de/ for German and https://www.example.com/fr/ for French. This makes it easier to implement and manage the Hreflang attribute. As mentioned above, this is also how we do it with TutKit.com Check out my blog article on URL structure for multilingual projects.
- You should only adjust the hreflang attribute accordingly (hreflang="en-GB" for the UK, hreflang="en-AU" for Australia) if your site is both linguistically and regionally different (e.g. English for the UK and English for Australia). Otherwise, the pure language variant without a region code is sufficient.
- If you cannot offer a specific language or country version for certain pages, provide a general fallback version (hreflang="x-default"), e.g. a globally oriented English page (hreflang="en"). Example: If your Italian user is on a German page and wants to display it in Italian via the website's language switcher, the English version should come up if no Italian page is available. At TutKit.com, we have even solved it so that when you are on a subpage, the language switcher only displays the languages for which a translation is available in the language.
The language switcher only shows the languages for which there is a translated version of this category page.
Understanding and implementing the hreflang="x-default" attribute
The hreflang="x-default" attribute is used to specify a generic, default version of a web page that will be displayed if no specific language or country version of the page is available. It acts as a fallback version and is particularly useful to ensure that users see a relevant page if their language or region is not covered.
The hreflang="x-default" attribute is important because it helps search engines to display a universal version of the website if a more specific version is not available. It ensures that users do not end up on a blank or irrelevant page, but see a page that best suits their needs if a more precise option is not available.
Example: If your website offers a generic English version as the default for all markets not specifically covered, you can use the hreflang="x-default" attribute to ensure that this version is displayed if a specific language or country version is not available.
The hreflang="x-default" attribute is added to the <head> section of your HTML page or used in your XML sitemap. It should refer to the most generic version of your page, which serves as a fallback for all unspecified languages or regions.
HTML example:
<head> <link rel="alternate" hreflang="en" href="https://www.example.com/en/" /> <link rel="alternate" hreflang="de" href="https://www.example.com/de/" /> <link rel="alternate" hreflang="x-default" href="https://www.example.com/" /> </head>XML sitemap example:
<url> <loc>https://www.example.com/</loc> <xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/en/" /> <xhtml:link rel="alternate" hreflang="de" href="https://www.example.com/de/" /> <xhtml:link rel="alternate" hreflang="x-default" href="https://www.example.com/" /> </url>
Make sure that hreflang="x-default" links to a page that is relevant for users from all unspecified regions or with unsupported languages. Use hreflang="x-default" in combination with specific hreflang tags for different languages and regions to ensure comprehensive coverage and better search engine rankings.
Make sure that all language versions and the x-default version are correctly linked to each other. Each page should link to the other language versions and to the x-default version to ensure correct indexing.
Avoid pitfalls and common mistakes
Even though the Hreflang attribute offers many advantages, there are some common mistakes that can be made during implementation.
One of the most common mistakes is using incorrect language or country codes or missing Hreflang tags on certain pages. Make sure that all language and country codes are correct and that each relevant page is tagged with the correct hreflang tags.
It is important that all language versions of your site are linked to each other. If the German page links to the English page, the English page must also link back to the German page. This bidirectional linking is crucial for the Hreflang attribute to work correctly.
Another common mistake is that canonical tags are not set correctly and conflict with the Hreflang tags. Make sure that the canonical tag refers to the appropriate language version of the page and does not work against the hreflang tags.
A faulty head section in the HTML code can also prevent Google from recognizing hreflang tags. This error is particularly tragic because it is not displayed as such in the Google Search Console. If Google does not recognize the tag, there is no reason to assume an international website. Therefore, make sure not to use any elements that deviate from known meta tags.
If the URLs in your hreflang tags are not correct, this will also lead to problems. Check that all URLs are correct and that there are no typos or outdated links. This is particularly important for large websites with many language versions. The system should therefore always set the tags automatically. A few errors are not a problem
If your website has mobile or AMP versions, you should also add hreflang tags to these so that mobile users also see the correct language version.
Hreflang validators
There are special online tools, such as the HREFLANG Validator from Sistrix or Merkle, which have been developed to check the implementation of Hreflang tags. These tools scan your site and give you feedback on possible errors. The tool also shows you whether errors have occurred in the implementation of the hreflang="x-default" tag.
Various SEO tools also offer error reports as part of their crawling. The Audisto SEO tool we use, for example, has the following checks. For us, everything is shown as 0 because - as mentioned above - we control the HREFLANGs via our sitemap. We therefore rely on sitemap validation. Especially if your hreflang tags are set via the source code, such tools are also elementary for monitoring in case errors creep in later due to refactoring or deployments.
Google about HREFLANG
In connection with multilingualism, take a look at the Google documentation on localized pages. Interesting is Google Podcast SEARCH OFF THE RECORD from 25.07.2024, which deals with internationalization and HREFLANG. The core information from it has also been incorporated into this article. A preview was already given that Google is considering automatically recognizing the language and regional orientation. Here is the full episode.
Conclusion on HREFLANG
Thank you for reading this far. I hope you could understand that the Hreflang attribute is an essential tool for international SEO and multilingual websites. It helps search engines to correctly assign and display the relevant language or country versions of a website, improving the user experience for your target groups and optimizing visibility in search results.