What is hreflang?
Hreflang is a reserved HTML attribute for websites that have different language versions. It informs Google about the language used on a specific page, allowing the search engine to display the page to users in that particular language.
An example of hreflang:
link rel=”alternate” href=”http://example.com” hreflang=”en-us” />
Hreflang is used for the geographic direction of a website. Without it, Google may show the US version of a website to users living in the UK when they enter a general English phrase.
- Search result after entering the phrase “coca cola” with region settings for United States
- Search result after entering the phrase “coca cola” with region settings for the United Kingdom
How to create a correct hreflang?
Basic hreflang with language version
Hreflang supports any two-letter ISO 639-1 language code. All you need to do is find the code for your chosen language and fill in the tag – the page: https://hreflang.org/list-of-hreflang-codes/ can help you with this.
<link rel=”alternate” hreflang=”en” href=”https://anchor.team/image-optimization-search-engine-optimization-of-images-how-to-optimize-images-for-google-images//” />
Targeting language and region
Optional region targeting is also useful on multilingual sites. In this case, you should use ISO 3166-1 alpha-2
People speaking English in the UK:
<link rel=”alternate” hreflang=”en-gb” href=”https://example.com/uk/hello” />
People speaking English in the USA:
<link rel=”alternate” hreflang=”en-us” href=”https://example.com/us/hello” />
Where to place hreflang attributes?
Hreflang attributes should be placed in at least one of the three mentioned places. However, the optimal practice is to apply them in all three places.
HTML tags
Placing hreflang attributes using HTML tags is the easiest and fastest way to implement them. Simply add the appropriate hreflang tags in the <head> section of each page.
<link rel=”alternate” hreflang=”en” href=”https://example.com/en/blog/best-gifts-ideas/” />
<link rel=”alternate” hreflang=”de” href=”https://example.com/de/blog/beste-geschenkideen/” />
<link rel=”alternate” hreflang=”es” href=”https://example.com/es/blog/mejores-ideas-regalos/” />
HTTP headers
If an element of the page is not built on HTML, hreflang can be added using HTTP headers. This allows to apply hreflang to unusual parts of the page.
HTTP/1.1 200 OK
Content-Type: application/pdf
Link: <https://amazon.com/blog/best-gifts-ideas.pdf>; rel=”alternate”; hreflang=”x-default“,
<link rel=”alternate” hreflang=”en” href=”https://example.com/en/blog/best-gifts-ideas/” />
<link rel=”alternate” hreflang=”de” href=”https://example.com/de/blog/beste-geschenkideen/” />
<link rel=”alternate” hreflang=”es” href=”https://example.com/es/blog/mejores-ideas-regalos/” />
Sitemap
Hreflang attributes can also be placed in the sitemap, which increases their effectiveness and makes it easier for Google bots to detect.
<url>
<loc>https://example.com/blog/best-gifts-ideas/</loc>
<xhtml:link rel=”alternate” hreflang=”x-default“
<xhtml:link rel=”alternate” hreflang=”en” href=”https://example.com/en/blog/best-gifts-ideas/” />
<xhtml:link
rel=”alternate” hreflang=”de” href=”https://example.com/de/blog/beste-geschenkideen/” />
<xhtml:link rel=”alternate” hreflang=”es” href=”https://example.com/es/blog/mejores-ideas-regalos/” />
</url>
Good practices related to hreflang attributes
When implementing hreflang attributes, it is worth adhering to a few rules:
Hreflangs must point to each other
If you add a hreflang tag to an English-language page pointing to a Greek version, the Greek version should have a hreflang tag pointing to the English page.
Each language version should have hreflang pointing to itself
Each page should have a self-referential hreflang tag – i.e., one that points to itself.
Using X-default is recommended
The hreflang x-default tag defines the default or fallback page that is displayed to users when no other language variant is suitable. This is a kind of emergency hreflang, which is worth having in case of more unusual situations.
<link rel=”alternate” hreflang=”x-default” href=”https://example.com/” />
Understanding and properly applying hreflang attributes is crucial for the correct optimization of website translations in terms of SEO and UX. Proper use of hreflang helps Google understand the structure of your website and deliver the most relevant content to users, regardless of their preferred language.
