What Is Hreflang and How To Implement It the Right Way
Written by Yongi Barnard
Hreflang is code you add to your website to tell search engines about different language versions of your pages.
It’s like giving Google a map of your multilingual content to show the right language to the right users.
However, it’s important to understand that hreflang is a signal, not a directive. This means while it guides search engines, there’s no guarantee they’ll always display the exact version you specify.
Here’s an example of how this works:
When you properly implement hreflang on your website, someone making a search from Germany is more likely to see the German version of your site in their search results.
While someone in the United States would most likely see the English version.
The main benefits of hreflang tags are:
- Your users are directed to the most relevant version of your website
- They can help the international versions of your pages rank for locally relevant keywords
- They help ensure Google understands that the different versions of the page aren’t duplicates, minimizing duplicate content issues
To get these benefits, you need to implement hreflang correctly. But an Ahrefs study found that 67% of websites have issues with their hreflang tags.
Before we look at how you can implement hreflang the RIGHT way, let’s talk about how you can build a hreflang tag.
How to Build Hreflang Tags
The hreflang attribute is added to a webpage’s link element (<link>) in the <head> section or HTTP header.
Hreflang attributes (technically not HTML “tags”) follow a specific structure and are made up of a few key elements:
Let’s break that down.
- link rel=”alternate”: Signals that there are multiple versions of the page
- href=”https://yourwebsite.com/us/”: Specifies the absolute URL for the alternate version
- hreflang=”en-us”: Indicates the hreflang attribute specifying the content is for English speakers in the USA
So, to build your own hreflang tag, you’ll need to know the relevant ISO 639-1 language codes (and ISO 3166-1 alpha-2 country and region codes, if you’re specifying them).
For example, if you want to specify pages that should be shown to French speakers in Belgium and French speakers in France, you would do the following:
For the French speakers in Belgium, you’d use the language code “fr” and country code “be”:
<link rel="alternate" href="https://yourdomain.com/be/" hreflang="fr-be" />
And for the French speakers in France, it would look like this:
<link rel="alternate" href="https://yourdomain.com/fr/" hreflang="fr-fr" />
You don’t need to include both a language and a region code.
For example, if you only have one French language version of your webpage for all French speakers, your hreflang tag might look like this:
<link rel="alternate" href="https://yourdomain.com/fr/" hreflang="fr" />
But if there are local nuances in countries that speak the same language (like sneakers vs. trainers in the US vs. UK), region codes can help you serve localized versions of your webpages.
But you DO need to specify a language code.
We’ll talk about more best practices later. Now, let’s look at how you can actually add hreflang to your website.
How to Properly Implement Hreflang in HTML
You can add the hreflang attribute to your website in a few different ways:
Option 1: Add Hreflang to Your HTML
Directly embedding hreflangs in each page’s HTML <head> section is fairly straightforward.
For example, here’s how Jeep’s website incorporates hreflang in the <head> section to manage language and regional targeting of their many website variations:
As you can imagine, it can be tricky for larger websites to keep hreflang attributes consistent and accurate throughout hundreds (or thousands) of pages.
Because every version of every page needs to include a list of every other version with hreflang tags. Including one for itself (more on that later).
For example, if Jeep decided to launch its website in a new country, it would need to update all the pages on every version of the site to include the new country as a variation.
Option 2: Add Hreflang to Your Sitemap
Alternatively, you can add hreflang annotations in your sitemap.
It’s an efficient way to handle hreflang, especially for sites with extensive content across multiple languages (like the Jeep example above).
This method centralizes management, simplifies updates, and declutters the HTML head section—potentially speeding up page load times. (Although this is generally only a potential issue for sites with lots of hreflang tags.)
Below is an example of hreflang attributes in a sitemap for a website targeting US shoppers, along with English and French speakers in Canada.
<url> <loc>https://yourwebsite.com/english-page-us/</loc> <xhtml:link rel="alternate" hreflang="en-ca" href="https://yourwebsite.com/english-page-ca/" /> <xhtml:link rel="alternate" hreflang="fr-ca" href="https://yourwebsite.com/french-page-ca/" /> <xhtml:link rel="alternate" hreflang="en-us" href="https://yourwebsite.com/english-page-us/" /> </url> <url> <loc>https://yourwebsite.com/english-page-ca/</loc> <xhtml:link rel="alternate" hreflang="en-ca" href="https://yourwebsite.com/english-page-ca/" /> <xhtml:link rel="alternate" hreflang="fr-ca" href="https://yourwebsite.com/french-page-ca/" /> <xhtml:link rel="alternate" hreflang="en-us" href="https://yourwebsite.com/english-page-us/" /> </url> <url> <loc>https://yourwebsite.com/french-page-ca/</loc> <xhtml:link rel="alternate" hreflang="en-ca" href="https://yourwebsite.com/english-page-ca/" /> <xhtml:link rel="alternate" hreflang="fr-ca" href="https://yourwebsite.com/french-page-ca/" /> <xhtml:link rel="alternate" hreflang="en-us" href="https://yourwebsite.com/english-page-us/" /> </url>
You’ll notice that it specifies each version of the page for English and French speakers in Canada, as well as for English speakers in the US. And this configuration is repeated for each targeted version.
Option 3: Add Hreflang to Your HTTP Header
For non-HTML files, like PDFs, you can use the HTTP header to specify hreflang attributes.
This method involves tweaking your web server configurations and might be a bit complex. And the specific process varies based on your web server—whether it’s Apache, Nginx, IIS, or other.
You need to add configuration rules to include the correct link headers for each piece of content.
For example, if your content is available in English (US), English (UK), German, and Spanish, here’s how you’d format the HTTP headers:
<https://yourwebsite.com/en-us/example.pdf>; rel="alternate"; hreflang="en-us", <https://yourwebsite.com/en-gb/example.pdf>; rel="alternate"; hreflang="en-gb", <https://yourwebsite.com/de/example.pdf>; rel="alternate"; hreflang="de", <https://yourwebsite.com/es/example.pdf>; rel="alternate"; hreflang="es"
Some Notes on Implementing Hreflang Tags
Before we get into tools, best practices, and mistakes with hreflang attributes, here are a few things to note:
Firstly, you can add hreflang attributes in any order.
So you can place them before the link destination:
<link rel="alternate" hreflang="en" href="https://yourwebsite.com/en" />
Or after:
<link rel="alternate" href="https://yourwebsite.com/en" hreflang="en" />
It doesn’t matter. Search engines will understand it either way.
Next, hreflang is case insensitive.
Uppercase is often used to represent the country or region codes in documentation, but it doesn’t actually matter how you write them for hreflang. As search engines will still understand them.
Google’s own guidance on the topic even references both uppercase and lowercase examples.
Tools for Hreflang Implementation
Here are a few tools that can make it easier to implement hreflang on your website:
CMS Plugins
Many content management systems (CMS) have plugins designed for hreflang management.
For WordPress users, check out the “Hreflang Manager” plugin.
Shopify store owners can use a similar tool tailored to their platform with the GWA Hreflang Manager.
Dedicated Hreflang Tools
Beyond CMS-specific options, there are several tools that can help you with proper hreflang implementation.
Like Relgrowth’s hreflang generator:
Or the hreflang tool from Aleyda Solis.
It lets you easily implement hreflang through HTML or your XML sitemap.
AI Tools
You can also use AI tools like ChatGPT to help generate hreflang attributes for your pages. Although we always recommend double checking for accuracy.
You can then copy these into your HTML:
Or generate an XML sitemap:
And even for HTTP header implementation on files like PDFs:
You can tailor your prompts to your specific needs. And you may need to play around with it a little to get it to work effectively at scale.
Further reading: ChatGPT for SEO: Ultimate Guide, Tips & Prompts
Hreflang Best Practices
Hreflang attributes can’t guarantee that search engines will always show your preferred site version.
But they’re a strong signal that helps search engines identify the most relevant version for users based on their location and language.
Follow these best practices to nail your hreflang implementation:
Include Bidirectional Links
Every version of your website should include links to all other language or regional versions. Along with a link back to itself.
This creates a two-way connection among all versions. Google needs to be able to find the relevant tags on all versions of the page to confirm the relationship between them.
It also ensures that only pages YOU control can reference each other as alternate versions. Without the reciprocal links, search engines may ignore the hreflang attributes.
For example, if a specific page on your site has versions in English (US) and German, both pages should include identical hreflang tags like this:
<link rel="alternate" hreflang="en-us" href="https://yoursite.com/en-us/apple-watch" /> <link rel="alternate" hreflang="de" href="https://yoursite.com/de/apple-watch" />
Use Absolute URLs
Always use full URLs like “https://backlinko.com/google-analytics-4” to avoid any confusion for search engines.
Avoid relative URLs such as “/google-analytics-4.”
Apply Hreflang Attributes on All Relevant Pages
Don’t limit hreflang attributes to the homepage or a few select pages. Implement them across every page that has a language or regional alternative.
Also, include hreflang on both desktop and mobile versions of your site. This will serve users the right page versions, regardless of their device.
Include the “x-default” Hreflang Attribute
The x-default hreflang attribute sets a default page version for languages and regions you don’t specify.
Let’s take a look at one of ASOS’s category pages as an example. Starting with the UK version:
This is a fairly standard hreflang cluster, but it only covers 11 alternate versions of the page.
When you browse their website, you’ll notice you can pick from a wide range of countries to shop from, not just the ones listed in the hreflang cluster.
So, what gives?
Enter “x-default.”
The “x-default” value provides a fallback URL for visitors whose location or language does not match any specified in the hreflang cluster.
You structure it like this:
<link rel="alternate" href="https://yoursite.com" hreflang="x-default" />
For a shopper in Singapore, a region not explicitly covered by the hreflang cluster, the “x-default” setting ensures they access a general version of the site.
Use the “x-default” value for users with languages not specifically targeted by hreflang tags so you direct them to a general version of your site.
Regularly Monitor Your Hreflang Attributes
Once you have implemented your hreflang tags, you need to stay on top of them to prevent issues in the future. Especially if you start expanding to new languages and regions.
You can use a tool like Semrush’s Site Audit to find and fix common hreflang errors.
Here’s how:
Start by entering your website URL. Then, click on “Start Audit.”
You can play around with the configuration settings, or leave them as their defaults.
Then, click on “Start Site Audit.”
The tool will then begin to crawl and audit your site.
When the audit is complete, you’ll be presented with a detailed report outlining all the discovered issues.
But you want to click on the “Issues” tab.
Use the search bar to type in “hreflang.”
This will filter the list to only show hreflang-related issues.
As you can see, Backlinko doesn’t have any hreflang issues.
But if you find an issue on your site, you can click on the linked number next to each one for a detailed report.
This will take you to a list of URLs containing that specific issue.
You can also click on the “Why and how to fix it” link next to each issue for more information on how to address the issue.
Performing regular audits of your hreflang tags ensures your users are always served the most relevant versions of your pages.
Note: A free Semrush account lets you audit up to 100 URLs. Or you can use this link to access a 14-day trial on a Semrush Pro subscription to audit up to 20K URLs at a time.
Common Hreflang Mistakes to Avoid
Even with careful planning, it’s easy to run into issues when using hreflang tags.
Here are some of the most common hreflang mistakes:
Omitting Self-Referential Hreflang Attributes
Every page must include a self-referencing hreflang tag to indicate its targeted language and region.
For example, let’s say you have a webpage on red sneakers with three different versions: English (US), English (UK), and French (France).
Each of these pages should have an hreflang tag that points to itself, alongside tags for the other versions.
This means the US English version of the page should include all three hreflang tags:
<link rel="alternate" hreflang="en-us" href="https://yourwebsite.com/en-us/red-sneakers" /> <link rel="alternate" hreflang="en-gb" href="https://yourwebsite.com/en-gb/red-sneakers" /> <link rel="alternate" hreflang="fr-fr" href="https://yourwebsite.com/fr/red-sneakers" />
And never omit the self-referencing hreflang tag, like so:
<link rel="alternate" hreflang="en-gb" href="https://yourwebsite.com/en-gb/red-sneakers" /> <link rel="alternate" hreflang="fr-fr" href="https://yourwebsite.com/fr/red-sneakers" />
Using Incorrect Language or Country Codes
Language and country codes can be tricky because they’re not always intuitive.
For example, the correct code for the United Kingdom is “GB” (not “UK”). And for targeting Hong Kong, you use “zh-HK” instead of “zh-CN,” which is for mainland China.
To avoid mistakes, always double-check these codes for accuracy. Refer to the official lists of language and country codes to make sure you’re doing it right.
Incorrectly Using Canonical Tags and Hreflang Attributes Together
Canonical tags and hreflang attributes should both be present on your HTML page when you have different versions of a page.
The hreflang tags tell search engines the language and regional targeting of a page. While the canonical tag specifies the primary version for indexing.
For example, if you have two versions of a page—like a page in English for the United States and another in Spanish for Mexico—each page should include a canonical tag pointing to its respective URL.
So don’t just do this:
<link rel="alternate" hreflang="en-us" href="https://yourwebsite.com/en-us/" /> <link rel="alternate" hreflang="es-mx" href="https://yourwebsite.com/es-mx/" />
Add the canonical link element, too.
For the US version:
<link rel="alternate" hreflang="en-us" href="https://yourwebsite.com/en-us/" /> <link rel="alternate" hreflang="es-mx" href="https://yourwebsite.com/es-mx/" /> <link rel="canonical" href="https://yourwebsite.com/en-us/" />
For the Mexico version:
<link rel="alternate" hreflang="en-us" href="https://yourwebsite.com/en-us/" /> <link rel="alternate" hreflang="es-mx" href="https://yourwebsite.com/es-mx/" /> <link rel="canonical" href="https://yourwebsite.com/es-mx/" />
Pointing Alternative Versions of a Page to the Same URL
Each version of a page should have its own unique URL.
So when you’re adding hreflang attributes, each hreflang link element must be a different URL.
Don’t mistakenly point different versions to the same URL:
<link rel="alternate" hreflang="en-ca" href="https://yourwebsite.com/page" /> <link rel="alternate" hreflang="en-au" href="https://yourwebsite.com/page" />
Instead, each version should point to its specific URL:
<link rel="alternate" hreflang="en-ca" href="https://yourwebsite.com/en-ca/" /> <link rel="alternate" hreflang="en-au" href="https://yourwebsite.com/en-au/" />
Boost Your Site’s International Reach with Hreflang
Hreflang attributes provide a signal to Google and other search engines about which versions of your pages they should serve to users.
But are all the other signals for international SEO working in your favor?
Find out with our in-depth guide to international SEO.