Running an international site may seem easy until you remember that not everyone understands English.
Targeting non-English speakers with an English-only site wastes money and frustrates potential customers.
International SEO strategies incorporate tactics that ensure all users, regardless of language and location, receive an almost identical experience on your website. You need to know your audience finds and engages with the most relevant version of your site, which you’ve made specifically for them.
One way to do this is by using hreflang – a concept many SEO professionals are likely familiar with but not confident in.
So, what are hreflang tags and why should you care?
What is hreflang?
The hreflang tag is an HTML attribute that specifies the language and regional targeting of a page. Introduced by Google in 2010, it helps websites with multiple versions of a page signal the correct one for users based on language and location.
For example, if you target English speakers in the US and UK and French speakers in France, hreflang tags will tell search engines which version to show users. This would prevent your French users from landing on an English page for the US.
Here’s what that looks like in HTML:
<link rel=”alternate” href=”https://example.com/en-us” hreflang=”en-us” /> <link rel=”alternate” href=”https://example.com/en-gb” hreflang=”en-gb” /> <link rel=”alternate” href=”https://example.com/fr” hreflang=”fr” /> |
In this example:
- en-us targets English speakers in the US
- en-gb targets English speakers in the UK
- fr targets French speakers
But let’s look at a real example from Edgard & Cooper – a company producing pet food and snacks. Here’s how a real page looks like in SERPs for one of their target keywords:
When you click on the result, the collection page URL now shows this:
The /en/ tells users (and search engines) that this page is in English and meant for people who have English as their preferred language.
The same page is also available in other languages, like French:
With this URL:
And Spanish:
With this URL:
The hreflang attribute improves user’s experience by ensuring they see the most appropriate version of your content in search results.
However, an hreflang tag is a hint, not a directive.
This means other ranking factors may override it and rank another version of your page. So, hreflang alone isn’t an international SEO strategy; it needs support beyond language and location.
Although Gary Illyes, a Google analyst, believes that search engines may rely less on hreflang and more on automatic language detection in the future, for now, the tag is our best bet.
Note: Not every search engine supports hreflang tags. Here’s a list of the major search engines and how they handle hreflang:
- Google: Google supports hreflang tags to show users the most relevant content based on their language and location. For Google to read the tag, it needs to be in the page’s HTML, HTTP headers, or the XML sitemap.
- Bing: Bing supports and recommends the use of hreflang tags for regional and language targeting, but not directly. It does not give them as much weight compared to Google. Fabrice Canal from the Microsoft Bing team said on Twitter that the tag is “a far weaker signal than content-language at Bing,” so your best bet is to use the content-language meta tag to specify the language of your page for Bing to read it. The tag looks like this:
<meta http-equiv=”content-language” content=”en-us”>
- Yandex: Russia’s most popular search engine also supports hreflang tags. It uses them for improved indexing in regions with different languages and even recommends the implementation of x-default tags.
- Baidu: Baidu doesn’t support hreflang tags and does not use them. Baidu uses its own signals, primarily the content-language tag Bing uses, to determine which website version targets which customers. Unlike most search engines, Baidu doesn’t allow you to specify the geographic target because it only supports Chinese.
- Yahoo: Yahoo uses Bing’s search technology and supports hreflang tags in the same way as Bing. It prioritizes the correct content version based on language and region settings and is guided by Bing’s standards and webmaster tools.
Why is hreflang important for SEO?
So, hreflang is just an attribute that changes the language on a page – what’s the big deal?
Well, if you use hreflang tags correctly, you can boost the success and visibility of your site and make it easier for users to find what they’re looking for – and find it on your page.
Some benefits of hreflang include:
- Improved relevance and international rankings
- Prevented duplicate issues
- Better user experience
Let’s take a look at them one by one.
a) Improved relevance and international rankings
Hreflang tags ensure that the right version of your page show up in front of the right users in search results, based on their language and location.
For example, let’s take a site for English-speaking and French-speaking Canadians. If you use hreflang attributes, particularly hreflang=”fr-ca” for French-speaking and hreflang=”en-ca” for English-speaking Canadians, you can target two distinct groups in the same country.
As a result, you can present each group with content that’s relevant and easy to understand, which directly impacts your site’s relevance and international rankings, as Gary Illyes has already mentioned. Without hreflang, Google might serve the wrong language version to users – like an English speaker in Canada being shown the French version of your page, leading to confusion and a high bounce rate.
What’s more, if you correctly mark your pages with hreflang tags, they can form a “cluster” of related pages across different languages and regions. This interconnected grouping allows the pages to share other important ranking signals, which can, in turn, improve the overall authority of the content.
By having authoritative content, you can improve rankings in both local and international search results and drive more relevant traffic to your site.
b) Prevented duplicate issues
An hreflang tag prevents duplicate content.
If you have identical pieces of content, search engines may struggle to discern which one deserves a higher spot.
If you sell socks in the US and Canada, you’ll need two similar product pages in English, differing mainly in price and other minor localizations like spelling. Let’s take a look at something more tangible though – examples of product pages for monitors in 2 different languages:
For search engines, these pages are duplicates because there’s not enough difference to tell them apart. Google might even split the SEO value and lower your rankings.
With hreflang tags, you tell search engines these pages are intended for different audiences in different locations. Although the content is similar, Google will understand that each page serves a unique user base. So, instead of penalizing you, Google will index and rank each version.
c) Better user experience
Hreflang tags help search engines direct users to the right version of your page, which improves user experience.
When users land on content in their language or tailored to their region, they interact more easily and are less likely to leave. Since they understand the content on your page, you’ll have lower bounce rates.
Take for example an e-commerce website for the US market in both English and Spanish. Without hreflang tags, the English-speaking user from the US may stumble on the Spanish version of the page if it’s better optimized. Since they don’t understand the language, they won’t find value in the site and will exit quickly (bounce).
But if you pay attention to hreflang attributes, your users will see content that matches their preferences and improves their experience. Since they’ve found what their looking for (and can understand it), they’re less likely to leave the page.
Let’s illustrate this with an example that shows how SERPs differ for different locations that target the same keyword.
We used the free Mangools Google Location Changer, chose our keyword “wireless headphones,” and clicked to see results for the US and Australia, like this:
Our search brought up 2 SERPs that showcase how a person in the US would see it and how another in Australia would. We then found the same website with similar content in both locations:
SERP for the US
SERP for Australia
Then, we did a little digging in the HTML of the pages, and found the hreflang tags that send these signals to search engines. They looked like this:
Hreflang tags for the US and Australian pages
Like all of Google’s guidelines, hreflang exists to improve user satisfaction and ensure searchers find what they need.
Consequently, when a user has a positive experience on your site, they’re more likely to stick around, which may nudge them toward becoming paying customers.
What is the difference between hreflang and canonical tag?
The hreflang tags and canonical tags sound similar (and may even overlap sometimes), but they serve distinct roles in SEO.
- Hreflang tags are used to display the appropriate version of a webpage, with content tailored for specific languages or regions, shows up for the appropriate audience in search engine results. If you have multiple languages for a page, you’ll also have multiple URLs containing the same informational content. So, hreflang will help serve the correct page based on the user’s language and location.
- Canonical tags, on the other hand, address duplicate content issues by indicating which version of a page is the authoritative one. When multiple pages contain identical or near identical content, the canonical tag tells search engines which URL to index and rank, which ensures that only one version appears in the search results, regardless of language and location. The other related URLs simply don’t show up in SERPs.
Sometimes, you’ll only need one, but in others, you’ll need both to properly guide users and search engines. Here’s a simple example to clarify the difference in URLs:
- Hreflang tags: You have 2 different language versions of a product page, in English and French:
- /en-ca/product (English version for Canada)
- /fr-ca/product (French version for Canada)
With an hreflang tag, you would include the following in the HTML of each page:
- For the English page
(/en-ca/product):
<link rel=”alternate” href=”https://example.com/en-ca/product” hreflang=”en-ca”> <link rel=”alternate” href=”https://example.com/fr-ca/product” hreflang=”fr-ca”>
- For the French page
(/fr-ca/product):
<link rel=”alternate” href=”https://example.com/fr-ca/product” hreflang=”fr-ca”> <link rel=”alternate” href=”https://example.com/en-ca/product” hreflang=”en-ca”>
- Canonical tags: Here, you have a product page for dresses available under multiple URLs:
- /dresses/black-dresses
- /dresses/black-dresses?color=black (with a query parameter)
- /dresses/black-dresses?ref=homepage (with a tracking parameter)
You want https://example.com/dresses/black-dresses to be the canonical URL that search engines prioritize. So, on the duplicate pages’ HTML head, you’ll place the canonical tag, and preferably, a self-referencing canonical tag on the preferred page.
How does hreflang work?
The hreflang attribute is a string of commands that indicate language and region. Each component of hreflang plays a specific role in serving the correct page to the users.
An hreflang tag looks like this:
Where:
- rel=”alternate” defines the link’s relationship to the current page. Here, it indicates that the linked page is an alternate version of the current one meant to serve users in another language or location.
- hreflang=”en-us” specifies the language and optional region for the linked page. It’s divided into language code (en) and region code (us) that tells search engines that the page targets English speakers in the US, where:
- The language code indicates the primary language, like “en” for English
- The region code specifies the country or region variant of the language, like “us” for the United States
Each language has a two-letter and three-letter lowercase abbreviation, standardized
in ISO 639 and covering natural and macrolanguages.
- href=”https://example.com/en-us/” is an example URL for the alternate version of your page. The href attribute points to the page that targets a different language/location, while the latter part is for the US-targeted, English-language version.
Note: You don’t have to include a language and a region code to target all speakers of a language. If you don’t want to specify whether your French page is for speakers in France or Canada, you can use only the language code.
Yet, if there are nuances in countries with the same language (as with English), it’s best to address those and serve localized versions.
Here’s an example of hreflang tags with region codes:
- Spanish version for the US: https://example.com/es-us/product
- Spanish version for Spain: https://example.com/es-es/product
- Spanish version for Argentina: https://example.com/es-ar/product
And without region codes:
- Generic Spanish version: https://example.com/es/product
1. Bidirectional hreflang tags
Hreflang tags work in pairs. If you have a page in English that points to a version in French, the French version should also point back to the English version.
So, you’d have this on the English page:
<link rel=”alternate” hreflang=”en” href=”https://example.com/en” /> <link rel=”alternate” hreflang=”fr” href=”https://example.com/fr” />/> |
And this on the French page:
<link rel=”alternate” hreflang=”fr” href=”https://example.com/fr” /> <link rel=”alternate” hreflang=”en” href=”https://example.com/en” /> |
Note: There are no region codes in this example, the tags specify only the language.
This reciprocity tells search engines that the two pages are connected and that you control both.
If you don’t have reciprocity, it’s like telling people you’re best friends with someone who says they don’t even know you. Awkward.
Without bidirectional tags, users may land on the wrong page or see the title of the correct URL but linked to an incorrect version of the page in SERPs. This mismatch causes Google to associate the wrong page with a specific language or region and leads to a confusing user experience.
2. Self-referencing hreflang tags
According to official Google guides, each language version of a page must reference itself along with the other language versions. This means that every page should have a self-referencing hreflang tag that points back to itself.
This practice helps search engines confirm that the page is an intentional version for the specified language and region.
We already used this before in our example for bidirectional tags, but let’s see it again:
<link rel=”alternate” hreflang=”en” href=”https://example.com/en” />
<link rel=”alternate” hreflang=”fr” href=”https://example.com/fr” />
As you can see, before the English version references the French version, it references itself.
3. X-default tags
This attribute comes in clutch for pages that serve as the default version for users whose language or location doesn’t match any hreflang tags.
The x-default tags help search engines send users to a fallback page for situations where no language or region variation of the content is available. It helps search engines understand which URL to display when they can’t determine the user’s language or location preferences.
Typically, this page is a general page, most often the English version or a homepage that ensures users have at least one relevant option.
Here’s what they look like:
<link rel=”alternate” hreflang=”x-default” href=”https://example.com/” /> |
While x-default tags are optional, Google recommends using them, so it won’t hurt if you do. But it might cause an issue if you don’t. Google says there are other ways the x-default tag can help you, including:
- It can be used for URL discovery
- It may increase your conversions, as your pages would be optimized for various users
How to implement hreflang tags?
There are three main ways to implement hreflang tags on your pages:
While all methods are equally valid, based on some quirks, you may decide to use one over the others.
Let’s go over them.
Implementation via HTML
The most basic way to implement hreflang tags to your page is by adding them in the <head> section of each page with multiple versions.
All you need to do is manually input hreflang tags for each version of your page and ensure you have a catch-all page for users in regions without a specified version.
Let’s say you have three versions of a page:
- One in English targeting the UK
- One in Italian targeting Italy
- One in German targeting Germany
To implement your hreflang tag, you’d need to add this code to the <head> section of each of your pages, i.e. all versions must have this:
<head> <link rel=”alternate” hreflang=”en-gb” href=”https://example.com/uk” /> <link rel=”alternate” hreflang=”it” href=”https://example.com/it” /> <link rel=”alternate” hreflang=”de” href=”https://example.com/de” /> <link rel=”alternate” hreflang=”x-default” href=”https://example.com/global” /> </head> |
This approach is more suitable for smaller sites where you can manage each page’s HTML manually. If your website is large with many language and regional variations, it would be very time-consuming, messy, and virtually impossible to use this method.
Implementation via HTTP headers
If you have non-HTML pages on your site, such as PDFs or spreadsheets, you won’t be able to implement hreflang in the <head> of the HTML because it doesn’t exist.
In such cases, since you can’t directly modify the code, you need to set hreflang tags on a server level.
Let’s take the content from the three versions of our page in English, Italian, and German and convert it into PDFs. Then, in the HTTP header of each, input the following:
HTTP/1.1 200 OKContent-Type: application/pdfLink: <https://example.com/manual-uk.pdf>; rel=”alternate”; hreflang=”en-gb”, <https://example.com/manual-it.pdf>; rel=”alternate”; hreflang=”it”, <https://example.com/manual-de.pdf>; rel=”alternate”; hreflang=”de”, <https://example.com/manual-global.pdf>; rel=”alternate”; hreflang=”x-default” |
Remember to indicate a set of <url>, rel=”alternate,” and hreflang tags for each version of the page and separate them by a comma.
This method facilitates localization for downloadable assets and ensures users access the most relevant version of a document on your site.
Implementation via XML sitemap
Your XML sitemap is a structured file that helps search engines understand, crawl, and index the pages so that they appear in search results.
The sitemap also allows you to change any attributes, including hreflang. It presents an easily readable list of alternate URLs and their hreflang attributes and saves you the time and effort of updating multiple files every time you add a translation.
To use this method, add a <loc> element for each URL and <xhtml:link> entries for every language and regional version of the page.
We’ll use the same example, so our sitemap will have three entries related to those pages, i.e. one for each URL. Then, each entry will have three identical listings, like this:
<url> <loc>https://example.com/uk</loc> <xhtml:link rel=”alternate” hreflang=”en-gb” href=”https://example.com/uk”/> <xhtml:link rel=”alternate” hreflang=”it” href=”https://example.com/it”/> <xhtml:link rel=”alternate” hreflang=”de” href=”https://example.com/de”/> <xhtml:link rel=”alternate” hreflang=”x-default” href=”https://example.com/global”/> </url> <url> <loc>https://example.com/it</loc> <xhtml:link rel=”alternate” hreflang=”en-gb” href=”https://example.com/uk”/> <xhtml:link rel=”alternate” hreflang=”it” href=”https://example.com/it”/> <xhtml:link rel=”alternate” hreflang=”de” href=”https://example.com/de”/> <xhtml:link rel=”alternate” hreflang=”x-default” href=”https://example.com/global”/> </url> <url> <loc>https://example.com/de</loc> <xhtml:link rel=”alternate” hreflang=”en-gb” href=”https://example.com/uk”/> <xhtml:link rel=”alternate” hreflang=”it” href=”https://example.com/it”/> <xhtml:link rel=”alternate” hreflang=”de” href=”https://example.com/de”/> <xhtml:link rel=”alternate” hreflang=”x-default” href=”https://example.com/global”/> </url> |
This centralizes the hreflang implementation and enables you to add or modify localized pages by updating a single file, especially for large websites. It also reduces the risk of errors, as all language-region specifications are visible in one place.
How to add hreflang tags to web pages?
There are three ways to add hreflang tags to webpages (by add, we don’t mean implement, we’ve already covered that):
- Adding them manually
- Using an SEO plugin
- Using an hreflang tag generator
Here’s a brief overview of each:
Adding hreflang tags manually
To add hreflang tags the traditional way, insert them directly into the HTML, the HTTP header, or the XML sitemap.
Adding tags manually is great to ensure you’ve got an eagle eye on all your pages and prevent any errors. Yet, it’s usually best for smaller sites where you can easily manage updates one by one.
For larger sites, maintaining the tags across all pages will have you drowning in work.
SEO plugin
If you don’t want to add hreflang tags by hand, use an SEO plugin on your CMS.
Since most hreflang plugins work similarly, let’s go over one of the most popular: the hreflang manager for WordPress. This plugin helps you configure language, geographic location, and x-default directives of alternate pages from one dedicated menu.
Here’s how you set it up:
- Install the plugin from the Plugin tab
- Activate the plugin
- Upload your hreflang data from a CVS file
Source: Hreflang Manager
- Sync your entire network of sites
Source: Hreflang Manager
- Select the pages you need and add codes for the alternate versions
- Verify your implementation on the front-end pages
- Check for errors and test
Hreflang tag generator
If you want as little friction as possible, we recommend using a bespoke hreflang tag generator that does the job for you. For example, you can try the free hreflang generator from GeoTargetly and generate tags in a few steps:
- Input your global page URL without countries and languages associated
- Input the page URL and determine the language and country you want to target
- Copy your generated hreflang tags and place them in your HTML
How to check and evaluate hreflang tag issues
After implementing your hreflang tags, you need to monitor them for any errors. Of course, you can’t keep an eye out for issues all the time, so use tools to help you, such as:
- Google Search Console
- Screaming Frog
- Mangools SERPWatcher
Let’s talk about these in more detail:
Google Search Console
GSC is one of the most popular tools for evaluating hreflang tag issues. To check for errors, follow these steps:
- Find the website property on GSC for which you want to check and resolve issues
- Open the international targeting report in Legacy Tools and Reports > International Targeting
- Under the Language section, you’ll see common hreflang issues like missing return tags, incorrect language codes, and invalid URLs
- Review the errors you’ve found by clicking on each type and viewing the affected pages and associated problems
- Go to your website’s HTML and fix the hreflang issues
- Test and validate the amendments
- Use Google’s URL inspection tool if needed to check individual pages and reveal their relationship with other language versions
Screaming Frog
You can also use Screaming Frog’s SEO Spider to check hreflang implementation and fix any issues. You’ll need to download the tool and own a paid license to work with it, so plan ahead.
If you choose this route, here’s what you’ll need to do:
- Select Crawl and Store Hreflang under the Config>Spider>Crawl
Source: Screaming Frog
- Select Crawl Linked XML Sitemaps (if you’re using sitemaps), if not, skip this step
- Crawl the website you wish to see the hreflang issues for
- Navigate to the Hreflang tab to see all URLs found in the crawl along with hreflang annotations
Source: Screaming Frog
- Go to Crawl Analysis>Start to populate hreflang filters
Source: Screaming Frog
- Go to Hreflang to see the populated filters you can use for filtering various issues and scroll down to see the specific errors found
Source: Screaming Frog
If you need more detailed information about the SEO Spider, follow Screaming Frog’s user guide.
Mangools SERPWatcher
Lastly, you can also use the Mangools SERPWatcher to track how pages with hreflang tags perform in various localized search results.
The tool offers rank-tracking across multiple locations and languages, so you can check if your URLs appear in the right SERPs for each language and location. In turn, this helps you monitor the effectiveness of hreflang tags and their alignment with user intent in each market.
Here’s how you can get this information:
- Input the URL of your website into the SERPWatcher and click Start tracking
- Set up the domains you want to track, the locations you’re targeting, and the search platforms you’re interested in
- Enter the keywords you want to track for your site and location
- Now, you can see which pages with hreflang tags are performing for local keywords
It’s best to use a combination of a few tools for a 360-degree view of your international SEO strategy. By doing so, you’ll identify regions that may require different efforts.
8 common SEO hreflang issues
While hreflang is a simple attribute, its implementation is less so.
In fact, implementing a herflang tag can be a daunting task for SEOs, which is why up to 31% of international sites contain hreflang errors.
But which are the most common hreflang SEO issues?
We’ve got them all here (along with tips on how you can fix them):
Missing self-referential annotations
Each language version of a page must reference itself alongside other language versions. Without a self-referential annotation, search engines might struggle to properly index and show the correct version of the page to a user. Of course, this could lead to potential traffic loss.
Luckily, this is an easy fix – just add the self-referential hreflang tag to each affected page. For example, for a page in French and English, the HTML for both should include the following:
<link rel=”alternate” hreflang=”en” href=”https://www.example.com/en/” /> <link rel=”alternate” hreflang=”fr” href=”https://www.example.com/fr/” /> |
You can use a tag-testing tool to check if your tags are correct before you implement them.
Invalid hreflang annotation
Invalid hreflang tags are invisible to search engines and can impact your SEO and ruin the user experience. This occurs on pages with invalid language and locale annotations, like using “en-uk,” instead of “en-gb.”
Start by reviewing the affected pages and identifying the invalid hreflang tags. Use the ISO 639-1 format we mentioned previously and make sure to follow the abbreviations. For locale attributes, you need to follow the ISO 3166-1 Alpha 2 format.
Don’t separate the language and country code with an underscore – you must use a dash. Additionally, remember that you always have to use a country code in combination with a language code.
Page referenced for more than one language
If different languages are announced for one page, search engines may ignore them completely or interpret them incorrectly. Using one URL for multiple languages confuses search engines and may misdirect users.
To fix the issue, you should make some changes to the pages that send hreflang tags to the faulty URLs. Make sure that one language version of a page references one language only.
You can use Ahrefs to solve this issue – just go to the list of pages that link to the URL from the hreflang annotations and click on the “No. of hreflang inlinks:”
Source: Ahrefs
Here, you’ll see where the problems are:
Source: Ahrefs
Missing reciprocal hreflang tag
Hreflang tags must be bidirectional. If a tag points to a page, that page must also have a tag that points back to the first page. If it doesn’t you may reduce your indexing efficiency. Plus, Google might ignore your tags.
Fortunately, this is an easy issue to fix – go to the affected pages and ensure all alternate pages link to each other with hreflang tags. For a page with English and French translations, you’ll need to ensure both tags are present in both versions, i.e.:
<link rel=”alternate” hreflang=”en” href=”https://example.com/en” /> <link rel=”alternate” hreflang=”fr” href=”https://example.com/fr” /> |
Hreflang tag pointing to a no-index page
In some cases, you might accidentally noindex a few alternative pages you’ve referenced in your hreflang tags. When this happens, search engines won’t follow the tag on the page and won’t follow the return link on the page that references the alternative versions.
As a result, Google will ignore the tags on all versions of that page and reduce your reach.
When you add hreflang tags, ensure they all point to indexable and crawlable pages. Check which tags are causing the issues and rectify them by making sure the pages they’re pointing to are live.
Hreflang tag pointing to a non-canonical page
If you add a hreflang tag to let search engines know that a URL is the best option for certain visitors, but then point to a non-canonical page (that tells search engines it shouldn’t be indexed).
This issue will pop up in an error report in any tool, so it’s hard to miss. For example, Sitechecker will highlight the issue under the Localization category. When you view the issue, you’ll see which pages were affected and get other deeper insights.
Source: Sitechecker
From there, you can either canonicalize the URLs the tags are pointing to or correct the hreflang tags to point to another URL.
Missing x-default tag
While optional, an x-default tag ensures users in undefined regions see a version of a page that would help them in their journey. This tag tells Google that this particular page is the default option for people who don’t have a preferred language or region, or when the website doesn’t have a version that matches their preference.
If you don’t have a default page and skip this tag, you’ll lose control over which version of your page search engines show, which could lead to severe mismatches.
So, heed Google’s advice and use x-default tags to specify the default pages, like this:
<link rel=”alternate” hreflang=”en” href=”https://example.com/en” /> <link rel=”alternate” hreflang=”fr” href=”https://example.com/fr” /> <link rel=”alternate” hreflang=”al” href=”https://example.com/al” /> <link rel=”alternate” hreflang=”x-default” href=”https://example.com/” /> |
Hreflang pointing to multiple pages with the same language
An hreflang tag pointing to multiple pages for the same language (or language-location) is confusing for search engines. And as we know, this confusion means Google will likely ignore your tags, which will bring up other accompanying issues.
To fix this, review all the pages that came up with this issue in the report. Then, edit the hreflang annotations on these pages to ensure that only one is referenced per language. If you’re using the language-location code, though, you can reference multiple pages for the same language, for example:
<link rel=”alternate” hreflang=”en-gb” href=”href=”https://example.com/en/” /> <link rel=”alternate” hreflang=”en-us” href=”href=”https://example.com/” /> |
These would be valid.
Hreflang tags best SEO practices
Before we send you off to implement your hreflang tags, we’ll tell you some best practices to help you with your efforts.
To ensure you’re doing everything right, you should:
- Include bidirectional links
- Use absolute URLs
- Add hreflang tags to all relevant pages
- Include x-default tags
- Interlink language pages between each other
Let’s talk about how each one works.
Include bidirectional links
Using bidirectional hreflang links ensures that multiple versions of a page are mutually connected and tells Google they’re owned by you.
Whenever you add a hreflang tag to one page, don’t forget to do the same for the other version to create a loop. Without this, search engines may disregard the association as unreliable, which can cause issues in ranking.
Use absolute URLs
If you want to cover your bases, use absolute URLs (full URLs that include the domain, like https://example.com/en/) instead of relative URLs (partial URLs that only include the path, like /en/).
By doing so, you provide search engines with unambiguous references and reduce the risk of indexing errors in cases where pages are served through multiple subdomains or CDN configurations.
Add hreflang tags to all relevant pages
Each language or region-specific page should have hreflang tags linking to all its variations, as in our implementation section. Each version should contain hreflang tags for all other versions available, not just the original one.
So, if your site has English, French, and German versions, make sure each page contains an hreflang tag for the two other versions, as well.
Include x-default tag
It’s unlikely you’ll ever create page versions targeting all languages and regions. In some cases, you’ll need to give Google an indication of what do to when a given location or language isn’t available or doesn’t exist. An x-default tag will be the URL that Google displays.
The x-default tag is a catch-all that shows up for users who haven’t specified a location or come from regions not explicitly targeted by other hreflang attributes. With this tag, you’ll avoid situations where search engines randomly select a version that makes users bounce.
Interlink language pages between each other
To make sure visitors navigate between language or regional versions of a site, include links in the header and footer of each page and allow them to switch to their preferred language or region.
Sometimes, even though you’ve created a well-functioning tag, users may still land on the wrong version. In such cases, easy-to-access links help them find the content they need, as seen here:
Plus, by including language links, users don’t need to search or use external navigation to find what they need.
Conclusion
Long story short – hreflang in SEO isn’t a good-to-have, it’s a must-have if you want functioning pages in multiple languages.
After reading this guide, we hope you have a better understanding of what hreflang is, why you need it, and how you can implement it.
Don’t complicate your work needlessly and stick to the best practices for better results.