# What is hreflang? The HTML attribute for multilingual websites If you want to internationalize your website and offer it in different languages, there are a few things you need to take care of, including [optimizing the different language versions for search engines](https://www.ionos.com/digitalguide/online-marketing/search-engine-marketing/optimizing-multilingual-websites-for-search-engines/). Only by using language or country-specific SEO measures is it possible for the search engine [crawlers](https://www.ionos.com/digitalguide/online-marketing/search-engine-marketing/what-is-a-web-crawler/) to correctly label the different language versions of the website and later display them to the appropriate audience. One of the most effective tools available for this purpose is the link attribute hreflang. ## What is hreflang? In December 2011, Google introduced *hreflang* as a simple and effective solution to inform search engines about the **relationships between alternative website variants**. The attribute signals to search application crawlers that the current page’s content is available in different language versions. To do this, the attribute is set within a link element in the HTML document, including the respective language abbreviation. For example, if you want to label a Spanish website, you use the country code “es”. The complete element looks like this: ```html ``` If this element were to be integrated into an English language page, for example, the search engine would automatically identify users with Spanish speaking **IP addresses** and send them to the relevant language version of the site. hreflang can also be used to distinguish variants of a single language. In this case, the attribute is simply extended by **specifying the target region**. For the previously mentioned Spanish variant, it is possible to divide users into regional categories such as Spain (`"hreflang="es-ES"`) and Mexico (`"hreflang="es-MX"`). The list of possible language and regional abbreviations can be found in the [ISO 639](https://www.iso.org/iso-639-language-codes.html "List of all possible language codes according to ISO standards (639)") and [ISO 3166](https://www.iso.org/iso-3166-country-codes.html "International standard for country codes: ISO 3166") standards. ## Why is hreflang relevant for SEO? The main argument for using attributes such as [canonical](https://www.ionos.com/digitalguide/online-marketing/search-engine-marketing/canonical-tag-how-to-avoid-duplicate-content/) or hreflang is to avoid [duplicate content](https://www.ionos.com/digitalguide/online-marketing/search-engine-marketing/duplicate-content/) in multilingual web projects. The aim is to serve multiple markets without fundamentally changing the content – except with the actual translation. For countries where the same language is spoken, the situation is a bit more complicated because a **few changes** due to cultural or regional differences (vocabulary, currency, contact information, etc.) need to be made, but apart from that the content is **otherwise identical**. Since the same domain is generally used, it important to let the search engines know the situation to prevent a decrease in rankings. While the canonical attribute declares a URL to be the dominant variant and prevents all alternative versions from being indexed, the hreflang attribute signals which version should be displayed to a specific target group (language and/or country). For this reason, HTML markup is always a good idea if you want your website to be successful internationally and offer corresponding multilingual content. Even if the attribute has no direct influence on the search engine ranking, using it correctly will pay off in the long term because both crawlers and users in different countries will be able to understand your website better. Fact Not all search engines utilize the hreflang attribute. For example, Bing works out the language version of a webpage by using the content-language attributes found in the [meta tags](https://www.ionos.com/digitalguide/websites/web-development/the-most-important-meta-tags-and-their-functions/). ## How is the hreflang tag structured? Wondering how hreflang works? The link hreflang tag link is based on the HTML link element. The link element `` is a *blank element* and is simply intended to be used for implementing the corresponding attributes. It can only be used in the head area, but **as many times as necessary**. In order to link the different language versions with hreflang, the two attributes rel and href are required in addition to the hreflang attribute. Here is the function of the three different components: - **rel**: `rel` specifies the relationship between the underlying document and the linked document. The value `alternate` tells the search engine that the external document contains an alternative version of the website. - **hreflang**: `hreflang` itself describes the language that the linked document is written in and can sometimes also indicate which country it is particularly relevant to. A clear listing of all possible combinations can be found at [lingoes.net](http://www.lingoes.net/en/translator/langcode.htm "Online overview of ISO country and language codes on lingoes.net"). - **href**: The `href` attribute specifies the URL of the alternative language version by default. Fact The optional regional abbreviation is usually given in uppercase letters. However, Google also accepts lowercase letters, which means you’re not really restricted when writing. The following hreflang example illustrates this: ```html ``` If users are not assigned to a suitable language version, the **ranking** decides which of the language variants should be displayed. In this case, you may end up losing potential readers after just a few seconds if they land on the wrong language version. However, with `"x-default"`, Google provides an option which you can use to diffuse the situation. This element lets the search engine know that the linked URL is the **default option** for all users who do not have an explicitly named language version. Here is an example: ```html ``` The element is discussed in more detail in [Google’s blog post on introducing “x-default hreflang” for international websites](https://developers.google.com/search/blog/2013/04/x-default-hreflang-for-international-pages "Google Search Central blog"). Tip Do you have an international [target group](https://www.ionos.com/digitalguide/online-marketing/online-sales/what-is-a-target-audience/)? The [IONOS Website Builder](https://www.ionos.com/websites/website-builder "Website Builder - Your own website with IONOS") helps you speak to your visitors properly thanks to the website translator. In just a few clicks, your entire website can be translated using modern AI technology. Over 100 languages are available. The plugin is included in the Plus and Pro plans. ## How do you implement hreflang? The hreflang link attribute can be implemented in three ways. The most common way is by including it in the **head area** of the respective HTML document. For documents that are not in HTML format (e.g. PDF files), the element can alternatively be used in the [HTTP header](https://www.ionos.com/digitalguide/hosting/technical-matters/http-header/). Last, but not least is the option of including the language or country-specific attribute in the [sitemap](https://www.ionos.com/digitalguide/websites/website-creation/sitemap/). **Adding it to the HTTP header** works in principle in the same way, as all existing language versions must also be referenced here. There are only a few minor differences in the syntax: ```html Link: [http://exampledomain.com/es/downloads/manuals.pdf/](http://exampledomain.com/es/downloads/manuals.pdf/); rel="alternate"; hreflang="es" ``` Implementing the hreflang attribute within an XML sitemap serves as a particularly effective strategy for managing large-scale, international web projects, compared to the standard practice of marking each page individually. If you offer multilingual content on a large scale, the effort involved in the implementing HTML would be relatively high. In a sitemap, all language versions must also be listed individually by specifying the respective URL. Each URL is additionally specified by an `xhtml:link element` that references the other available variants: ```xml http://exampledomain.com/ ``` You must then repeat the `` tag in the same way for each language version of your article. A certain characteristic of the attribute is very important for understanding how hreflang works. This is the fact that it links two or more documents bidirectionally and not unidirectionally, as is the case with a redirect. This means that it’s not enough for the English-language website to simply link to the Spanish-language version, because the Spanish-language version has to link back to the English-language page. The search engine can only recognize your website’s structure and adapt the results for searchers accordingly if the hreflang HTML annotation is set up in all documents in all possible directions (language versions). The following hreflang example code for the website `example company.com` with the English, Italian, Spanish and German language versions would therefore have to be entered in the header of all four HTML documents: ```html ``` ## Frequent errors when embedding the hreflang tag The hreflang examples listed for HTML show that implementing practical, automatic user assignment for multilingual websites is by no means rocket science. However, they also illustrate the effort involved and the **potential for error that should not be underestimated when dealing with so many reciprocal references**. This occasionally results in minor or major errors, some of which only affect individual pages, but some of which also jeopardize the functionality of hreflang for the entire website. For this reason, we have summarized some of the most common sources of error below: ### hreflang not being implemented at the URL level Since the hreflang attribute is always linked to a specific URL, it must always be created at that level. In other words, if you only mark the output URL of your different language versions with the hreflang attribute, the automatic user assignment will only work for these start pages, and not for the entire website. It is therefore your task to **implement the link element individually for all multilingual URLs**, or alternatively, to work with the sitemap variant as previously mentioned. ### One or more of the language versions do not reference themselves Many site owners correctly label the URLs of other language versions with the hreflang attribute but forget that the respective page must also refer to itself. This means that the **linking structure** is incomplete and cannot be interpreted by Google and other search engines. Don’t forget to specify a **default page** using `hreflang x-default`, otherwise you will leave some optimization potential untapped. ### Incorrect ISO codes When it comes to country and language codes, many website operators tend to become creative when it comes to SEO. However, this often doesn’t work and can lead to incorrect hreflang code being implemented. The **combination** “en-uk” looks correct if the content of the page is targeted to the UK public – however, the correct link is actually “en-gb”. Always check the country abbreviations you’re using against the ISO standard 639-1. ### Reference to old, or non-existent URLs A common cause of incorrect hreflang tags is using URLs that no longer exist. This primarily happens when the attributes are automatically integrated on all subpages, but not all of these pages are available in every offered language version. Outdated URLs logically occur whenever you make changes to the URL structure and do not transfer these changes to the link elements. ### Contradictory use of the canonical and hreflang tag Many international websites use the canonical tag so that search engine crawlers do not index pages with the same content twice. Although this approach is a great option in terms of working around the **duplicate content issue**, it is not compatible with the hreflang attribute. If a page contains both tags, the search engines get contradictory information and will **ignore both signals**. You should therefore only use the hreflang markup for pages that **do not link to other pages via a canonical attribute**. ### Settings in Google Webmaster Tools send conflicting signals Anyone who logs into Google’s Webmaster Tools (Search Console) can define the **international orientation** of a domain or URL, provided that top-level generic domains are used. In country-specific transmissions, Google even does this itself. There is no doubt that you, as a website operator, can benefit from this feature. Google uses this information to **categorize your site as best as possible**. So it’s definitely worth [informing Google about localized versions of your site](https://developers.google.com/search/docs/specialty/international/localized-versions "Tell Google about localized versions of your page"). However, you should never forget to include these settings in your SEO measures. If you add additional pages with the hreflang attribute, there should be no contradictions or mistakes. For example, it can easily happen that a page is only assigned a language attribute with no regional specification, while at the same time, a specific country has been assigned in the Webmaster Tools. Tip Search engine optimization involves many complex technical mechanisms and strategies, and can sometimes be somewhat unclear. With the [SEO Checker](https://www.ionos.com/tools/seo-check "IONOS SEO Checker") from IONOS you can quickly check how your site is performing from an SEO perspective. ## Useful hreflang tools It has already become clear that integrating the hreflang tag into all relevant HTML pages does require a certain amount of effort, and a lot of code. The more **complex** your multi-lingual website is, the more likely mistakes will creep into the hreflang implementation, even if you are aware of the potential errors and keep them in mind the entire time. For this reason, it is recommended to use tools **to create the tags and check their functionality** at regular intervals. Helpful tools can be found in the following list: - [SISTRIX hreflang Generator](https://www.sistrix.com/hreflang-guide/hreflang-generator/ "Online generator for hreflang-link element markup: SISTRIX"): With the free hreflang generator from SISTRIX, you can easily create link elements with a hreflang attribute for the HTML header of your multi-lingual content. To do this, you simple specify the URLs, language and region, and the code with be automatically generated. It is also possible to define a default page. - [SISTRIX hreflang Validator](https://www.sistrix.com/hreflang-guide/hreflang-validator/ "hreflang verification with SISTRIX online validator"): If you have implemented references for different language versions in your web project, the SISTRIX hreflang validator may be useful to you. The free web service checks whether the set hreflang tags are correct for a given URL. - [Google Search Console](https://search.google.com/search-console/welcome?hl=en&utm_source=wmx&utm_medium=deprecation-pane&utm_content=home "Google Webmaster Tools: the comprehensive tool collection for website optimization"): Signing into Google makes your site easier to track for the search engine, but also allows you to access various analysis tools to optimize your web project. In the “international orientation” section, the dashboard also provides information on the used tags, including a list of missing backlinks. - [Hreflang Checker](https://hreflangchecker.com/ "Hreflang Checker by Dan Taylor"): With this hreflang checker, you enter a URL and get the hreflang attributes presented to you quickly and in a clear way. The tool even indicates which source the hreflang attributes were taken from (HTML, HTTP, etc.) and suggests how you could improve your hreflang implementations. Tip You can easily create your [AI website](https://www.ionos.com/websites/ai-website-builder "IONOS Website Builder") with IONOS. Artificial intelligence can write texts, determine the color palette or generate images in a matter of seconds. Thanks to AI-supported search engine optimization, your website will also be easy to find on Google and other search engines. Choose the AI website generator from IONOS to help you get started. This is a markdown version of: [https://www.ionos.com/digitalguide/online-marketing/search-engine-marketing/hreflang-basics-examples-and-common-errors/](https://www.ionos.com/digitalguide/online-marketing/search-engine-marketing/hreflang-basics-examples-and-common-errors/) for AI/LLM consumption.