What Is Hreflang and How To Implement It the Right Way
Hreflang is an HTML code that can be added to a website to inform search engines about the intended language and region for a specific web page.
It functions like providing Google with a roadmap to your multilingual content, ensuring the correct language reaches the appropriate audience.
However, it’s crucial to note that hreflang acts as a signal rather than a directive. This implies that while it assists search engines, there’s no absolute certainty they will always present the version you define.
Here’s an example of its functionality:
When hreflang is implemented correctly on a website, users searching from Germany are more likely to encounter the German version of the site in their results. Meanwhile, users in the United States will typically see the English version.
The primary advantages of hreflang tags include:
- Directing users to the most relevant version of the website
- Assisting international versions of pages in ranking for locally relevant keywords
- Helping Google recognize that different page versions aren’t duplicates, thereby reducing duplicate content concerns
To reap these benefits, hreflang must be implemented accurately. However, an Ahrefs study revealed that 67% of websites face issues with their hreflang tags.
Before exploring how to implement hreflang the RIGHT way, let’s examine how to construct a hreflang tag.
How to Build Hreflang Tags
| How to Properly Implement Hreflang in HTML | |||||
|---|---|---|---|---|---|
| Option | Code | Pros | Cons | Best for | Notes |
| Option 1: HTML Head Tags | <head> |
Easy to implement Widely supported Page-specific control No additional files needed Quick to test and debug |
Increases HTML file size Manual maintenance required Prone to human error Difficult to manage at scale |
Small to medium websites Static sites Page-specific language targeting Quick implementation needs |
Must be added to every page Self-referencing required Bidirectional linking needed x-default recommended |
| Option 2: XML Sitemap | <?xml version="1.0" encoding="UTF-8"?> |
Centralized management Clean HTML pages Easier to maintain at scale Can be automated Better for large sites |
Requires XML sitemap setup Must submit to search engines Less immediate than HTML method Requires technical knowledge |
Large websites E-commerce sites When automation is possible CMS-driven sites Enterprise-level implementations |
Valid XML sitemap required Must be submitted to Google Search Console Namespace declaration needed Regular updates required |
| Option 3: HTTP Headers | # Apache .htaccess example |
Works for non-HTML files (PDFs, images) Server-level implementation Clean separation of concerns Can be automated No HTML modification needed |
Requires server configuration access More complex setup Harder to debug Limited hosting support Less commonly used |
Non-HTML content (PDFs, documents) API responses When HTML modification isn’t possible Advanced technical implementations |
Server configuration access required Knowledge of server setup needed Testing tools required May not work on all hosting platforms |
The hreflang HTML attribute is integrated into a webpage’s link element (<link>) within the <head> section or HTTP header.
Hreflang attributes (technically not HTML “tags”) adhere to a specific structure and consist of several essential components:
Hreflang Structure
Let’s break this down further.
link rel=”alternate” : Indicates the presence of multiple versions of the page
href=”https://yourwebsite.com/us/ ” : Defines the absolute URL for the alternate version
hreflang=”en-us” : Specifies the hreflang attribute, signaling the content is for English speakers in the USA
To create your own hreflang tag, knowledge of the relevant ISO 639-1 language codes (and ISO 3166-1 alpha-2 country and region codes, if applicable) is required.
For instance, to target French speakers in Belgium and French speakers in France, the following steps would apply:
For French speakers in Belgium, the language code “fr” and country code “be” would be used:
<link rel=”alternate” href=”https://yourdomain.com/be/ ” hreflang=”fr-be” />
For French speakers in France, it would appear as follows:
<link rel=”alternate” href=”https://yourdomain.com/fr/ ” hreflang=”fr-fr” />
Including both a language and region code isn’t mandatory.
For example, if there’s only one French language version of a webpage for all French speakers, the hreflang tag might resemble this:
<link rel=”alternate” href=”https://yourdomain.com/fr/ ” hreflang=”fr” />
However, if local differences exist in countries sharing the same language (like sneakers vs. trainers in the US vs. UK), region codes can assist in delivering localized webpage versions.
That said, specifying a language code is mandatory.
More best practices will be discussed later. Now, let’s explore how to incorporate hreflang into your website.
Hreflang Best Practices
Hreflang attributes cannot guarantee that search engines will always display your preferred version of a site.
However, they serve as a strong signal to assist search engines in identifying the most relevant version for users based on their location and language.
Follow these best practices to perfect your hreflang implementation:
Include Bidirectional Links
Every version of your website should feature links to all other language or regional versions, along with a link back to itself.
This establishes a two-way connection between all versions. Google must be able to locate the relevant tags on all page versions to verify the relationship between them.
It also ensures that only pages YOU control can reference one another as alternate versions. Without reciprocal links, search engines might disregard 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 " />
Best Practices for Hreflang Implementation
Using hreflang attributes correctly is crucial for ensuring that users are directed to the most relevant version of your website based on their language or region. Below are some best practices to follow when implementing hreflang tags.
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.”
Using absolute URLs ensures that search engines can accurately identify and index the correct page versions without ambiguity.
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:
ASOS UK – hreflang tags
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.
ASOS – Country selection
So, what gives?
Enter “x-default.”
ASOS UK – X-default hreflang
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.”
Semrush – Site Audit
You can play around with the configuration settings, or leave them as their defaults.
Then, click on “Start Site Audit.”
Site Audit – Start
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.
Site Audit – Issues tab
Use the search bar to type in “hreflang.”
This will filter the list to only show hreflang-related issues.
Site Audit – hreflang 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.
Semrush – hreflang issues
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.
Semrush – No hreflang pages
Performing regular audits of your hreflang tags ensures your users are always served the most relevant versions of your pages.
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. When implemented correctly, they ensure that your multilingual or multinational audience is directed to the most relevant content, improving user experience and engagement. However, hreflang is just one piece of the international SEO puzzle.
To truly maximize your site’s global reach, it’s essential to consider other critical factors that influence international SEO performance. This includes optimizing your site structure for different regions, ensuring proper localization of content, and addressing technical aspects like server location and geotargeting settings in Google Search Console.
But are all the other signals for international SEO working in your favor?
For a comprehensive approach to expanding your site’s presence across borders, explore our in-depth guide to international SEO. It covers everything from crafting region-specific strategies to avoiding common pitfalls that could hinder your success. By aligning hreflang implementation with broader international SEO best practices, you can position your website to thrive in global markets and connect with audiences worldwide.
Don’t leave your international SEO to chance—take control today and unlock the full potential of your multilingual and multinational digital presence.
Partner with our Digital Marketing Agency
Ask Engage Coders to create a comprehensive and inclusive digital marketing plan that takes your business to new heights.
