Do you have a multilingual or international website? If so, you need to be utilizing hreflang tags to ensure your content reaches the right audience and delivers an optimal user experience.
In this comprehensive guide, we‘ll dive deep into everything you need to know about hreflang tags – what they are, why they matter, how to implement them, and best practices to follow for maximum SEO impact in 2024 and beyond.
Hreflang tags are HTML attributes that specify the language and optionally the region of a webpage‘s content. They are used to tell search engines like Google about localized or translated versions of a page so the appropriate version can be served to users in different locations and language settings.
For example, if you have an English and Spanish version of the same page, you would use hreflang="en" and hreflang="es" to differentiate them. You can also combine language and region codes, like hreflang="en-us" for English speakers in the United States vs hreflang="en-gb" for those in Great Britain.
Here‘s what a set of hreflang tags looks like in a webpage‘s :
Hreflang tags work together in clusters, with each version specifying all the alternate language/region versions, including itself, in a fully-connected network. Tags need to be bi-directional – if page A links to page B, page B also needs to link back to page A.
Hreflang tags have two key benefits:
-
They help search engines serve the most appropriate version of your content to international users in their local language and region. This provides a better user experience and can reduce bounce rates from people landing on pages they can‘t read or that have irrelevant information.
-
They indicate that localized pages are parallel in content rather than duplicate. Duplicate content can dilute your SEO equity and rankings, but hreflang tags signal these are legitimate alternates, consolidating their value.
As Aleyda Solis, International SEO Consultant & Founder at Orainti explains:
"If you have a multilingual or multi-country website and you‘re not using hreflang annotations, you‘re missing out. Hreflang helps search engines identify the most relevant version for their users according to language and location. This is key to strengthening your international SEO and avoiding common issues that can hinder your growth."
Hreflang tags aren‘t just a nice-to-have in 2024 – they are essential for any site trying to attract a global customer base and compete in international markets. Neglecting them means potentially missing out on significant search traffic.
Implementing Hreflang Tags: A Step-by-Step Guide
There are three main ways to implement hreflang tags:
- HTML link elements
- HTTP headers
- XML sitemaps
Let‘s go through each method:
HTML link elements
Adding hreflang tags to your HTML is the most common approach. You simply include a set of tags in the section of each page with an alternate version:
Note the use of x-default for the default or fallback page version. Every cluster should include this.
Make sure to include a tag referencing the current page as well. Google will look for a confirmation link back from specified pages.
HTTP headers
For non-HTML files like PDFs, you can use HTTP headers to specify hreflang information when these files are requested by browsers or crawlers:
Link: https://example.com/en-us/document.pdf; rel="alternate"; hreflang="en-us", https://example.com/es/documento.pdf; rel="alternate"; hreflang="es"
This tells crawlers that the English version of document.pdf is located at the first URL, while the Spanish version is at the second URL. Use commas to separate multiple link header values.
XML sitemaps
Instead of adding hreflang tags directly on pages, you can submit language/region alternates in your XML sitemap using markup:
https://example.com/
https://example.com/es/
Each entry lists its alternate versions. Like with HTML tags, these need to be bi-directional, with each language listing all other alternates.
According to Google, all methods are treated equally, so choose the one that works best for your setup and workflow. Whichever you use, be consistent and thorough in your implementation.
Hreflang Best Practices & Common Pitfalls to Avoid
Hreflang tags may seem straightforward, but there are a number of best practices to keep in mind and common errors to watch out for:
Use the correct language and region codes
Hreflang values need to use valid ISO 639-1 language codes and optionally ISO 3166-1 Alpha-2 region codes. You can find complete lists on Wikipedia:
Languages: https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
Regions: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
Some examples:
en – English
es – Spanish
zh – Chinese
de – German
fr – French
ja – Japanese
And with regions:
en-us – English, United States
en-gb – English, United Kingdom
es-es – Spanish, Spain
es-mx – Spanish, Mexico
zh-cn – Chinese, China
zh-tw – Chinese, Taiwan
Make sure to use lowercase letters and include the hyphen for region-specific codes.
Be specific with region codes only if needed
Only use region codes if you have content specifically localized for that country. If you just have a generic Spanish version for example, use "es" alone rather than "es-es". Specifying a region unnecessarily can exclude relevant users.
Include a default or x-default version
It‘s a good idea to have a default or fallback version that can be shown if no language matches the user‘s browser settings. Specify this with the reserved value "x-default":
Ideally, this page should use the language most of your users speak or include a way for users to select their preferred language.
Avoid mixing methods
Google recommends using only one of the methods described earlier (HTML, HTTP headers, or sitemaps) for each URL. Mixing methods can cause unexpected behavior.
One of the most common mistakes is failing to include reciprocal tags. If page A links to page B via hreflang, page B must also link back to page A, otherwise the tags may be ignored.
Use absolute URLs
Always use full absolute URLs (https://example.com/page) rather than relative paths (/page) in your hreflang links to avoid any resolution issues.
Keep an eye out for errors
Use tools like Google Search Console‘s International Targeting Report or hreflang tag validators (see the resources section below) to monitor your implementation and quickly spot any errors or warnings that need fixing.
As Bastian Grimm, CEO & Director Organic Search at Peak Ace AG notes:
"One of the biggest issues I regularly see with hreflang is a lack of bi-directional confirmation links. It happens when you specify a hreflang on one page but forget to add the reverse link on the other version. Google has been very clear that without a confirmation link back, they may ignore the hreflang cluster entirely, so make sure to always double-check your implementation."
Hreflang Tags vs Language (Lang) Tags
A common point of confusion is the difference between the hreflang attribute and the HTML lang attribute. While they both relate to language, they serve different purposes:
- lang specifies the main language of the current page content
- hreflang specifies the language (and optionally region) of other alternate versions of the current page
Every page should have a lang attribute on the tag to indicate its content language:
This is used by browsers and assistive technologies like screen readers to determine the proper language for rendering the page. It‘s important for accessibility.
Hreflang in contrast doesn‘t impact the current page but rather points to other versions for SEO purposes. A page can have both a lang and hreflang (or multiple hreflangs).
In most cases, you‘ll want to use both – lang for the current page content and hreflang for any translated/localized alternate versions.
Useful Hreflang Tag Tools & Resources
There are a number of tools that can help you generate, validate, and monitor your hreflang tags:
Hreflang Tag Generators
- Merkle‘s hreflang Tags Generator: Input page URLs and language/region data to bulk generate hreflang tag code.
- Geo Targetly hreflang Generator: Simple tool for generating hreflang link tags one at a time.
- Aleyda Solis‘ hreflang Tags Generator Spreadsheet: An Excel/Google Sheets template for bulk generating hreflang tags from a list of URLs and language/region codes.
Hreflang Validators & Testing
- Merkle‘s hreflang Testing Tool: Crawl a domain to check for valid hreflang tags, missing confirmations, errors, etc.
- Sistrix hreflang Validator: Another crawler-based tool for validating a site‘s hreflang implementation and detecting issues.
- Hreflang Testing by Zeo: Test individual URLs for hreflang validity and possible errors.
Further Reading & Guidelines
- Google‘s guidelines on multi-regional and multilingual sites
- Google Search Central documentation on hreflang tags
- Yoast‘s ultimate guide to hreflang
- DeepCrawl‘s hreflang guide for marketers
- Search Engine Journal‘s advanced hreflang guide
Hreflang Tag Implementation Case Studies
Implementing hreflang tags can have a significant impact on a site‘s international SEO performance. Here are a couple case studies that demonstrate their value:
Asos – Fashion Ecommerce
Asos, a leading online fashion retailer, operates localized sites for various markets worldwide. However, they found many international users were landing on the wrong versions through search.
By adding comprehensive hreflang tags across all versions and markets, Asos saw a 100% increase in international search traffic and a 2x faster average page load time for international users landing on the correct pages.
HolidayCheck – Travel Reviews
German travel site HolidayCheck offers content in several languages but discovered Google was often showing the German versions to users in other countries, leading to high bounce rates.
After auditing and cleaning up their hreflang implementation, organic search traffic to the international pages increased by 20% and bounce rates decreased accordingly, resulting in more engagement and conversions from international visitors.
These examples show the concrete business impact proper hreflang tags can deliver by ensuring users reach the most relevant content for them. For websites with an international presence, investing the time to implement hreflang is well worth it.
Key Takeaways for Hreflang Tag Success in 2024
As we‘ve seen, hreflang tags are a crucial tool for any website targeting multiple languages or regions in 2024 and beyond. To recap, here are the key things to keep in mind:
-
Hreflang tags tell search engines the language and intended audience of different versions of a page, helping them serve the most appropriate one to each user.
-
You can implement hreflang in the HTML , HTTP headers for non-HTML files, or in XML sitemaps. Choose one method and use it consistently.
-
Always use correct ISO language and region codes, be as specific with regions as needed, and include a default (x-default) version.
-
Ensure tags are bi-directional, use absolute URLs, and avoid mixing implementation methods to prevent issues.
-
Use hreflang alongside the lang attribute – lang for the current page language and hreflang for alternates.
-
Take advantage of tag generation tools and validation checkers to simplify implementation and catch errors early.
By following these guidelines and monitoring your hreflang setup regularly, you can make sure your international SEO is firing on all cylinders and your localized content is reaching its full global potential.
Neglecting hreflangs means selling your site short in international markets and providing a subpar experience to global visitors. Don‘t let that be the case in 2024 – make sure you‘re giving your international users the royal hreflang treatment!
