What is Hreflang?
Hreflang, or hypertext reference language, is an HTML attribute that is used to specify the language and regional targeting of a webpage. This helps search engines serve the correct version of a webpage to users based on their language and geographical location.
Here is the basic anatomy of an hreflang attribute:
<link rel=”alternate” hreflang=”en-gb” href=”https://www.example.com/uk/” />
<link rel=”alternate” hreflang=”en-fr” href=”https://www.example.com/fr/” />
<link rel=”alternate” hreflang=”en-es” href=”https://www.example.com/es/” />
You have the language value, in this case, “en” which is the English language, then the country value “fr” and the indexable URL, https://www.example.com/es/, which is the URL that is live and visible to the user, pointing them to the relevant country.
In our example, we have:
- English for the United Kingdom region, with the UK targeted URL
- English for France region, with the French Targeted URL
- English for Spain region, with the Spanish Targeted URL
What this means is that we have 3-page variations that should be visible in English, in the United Kingdom, France, and Spain respectively.
P.S “Lang” is not the same as hreflang, so if you are just defining the language for your single variation website, that is not hreflang. The “lang” attribute is used to specify the language of the content within an element,
- lang=”en” is an HTML attribute used to declare the language of the content within a specific HTML element, such as a paragraph or an entire page.
- Hreflang tags are used in the <head> section of your HTML to specify the language and regional targeting of alternate versions of a page for search engines.
You can also have structures that target the same country in multiple languages:
1.1 English in Spain, Spanish in Spain
<link rel=”alternate” hreflang=”en-es” href=”https://www.example.com/en-es/” />
<link rel=”alternate” hreflang=”es-es” href=”https://www.example.com/es-es/” />
1.2 English in Switzerland, Italian in Switzerland, French in Switzerland, German in Switzerland
<link rel=”alternate” hreflang=”en-ch” href=”https://www.example.com/en-ch/” />
<link rel=”alternate” hreflang=”it-ch” href=”https://www.example.com/it-ch/” />
<link rel=”alternate” hreflang=”fr-ch” href=”https://www.example.com/fr-ch/” />
<link rel=”alternate” hreflang=”de-ch” href=”https://www.example.com/de-ch/” />
It’s worth noting that hreflang tags are signals and not directives, so they act as a recommendation to search engines on which page is most relevant for each location, so the search egnine can choose other pages that it sees as more appropriate. There is also no requirement to have translated language pages, a lot of the time, when we refer to ‘translated versions’ of a webpage, we refer to regions rather than language.
There are a plethora of websites that target English speakers in multiple countries which has ‘translated’ pages that are all in English, but targeting countries like Hong Kong, Singapore, the United Kingdom, and Belgium, which would otherwise have different language versions, but they are for English speakers only.
Of course we can also have variations of language per country, which would look something like this:
<link rel=”alternate” hreflang=”en-gb” href=”https://www.example.com/uk/” />
<link rel=”alternate” hreflang=”fr-fr” href=”https://www.example.com/fr/” />
<link rel=”alternate” hreflang=”es-es” href=”https://www.example.com/es/” />
We can assume that most French people in France would search in French, and most Spanish people in Spain would search in Spanish, so we now have our hreflang set up to specify to Google that we have a page for France, in the French language, a page for Great Britain (UK), in the English language, and a page for Spanish speakers within Spain.
When is hreflang used?
- (1) When you have a fully translated site version
For a website with English and French versions targeting Canada:
<link rel=”alternate” hreflang=”en-ca” href=”https://www.example.com/en”/>
<link rel=”alternate” hreflang=”fr-ca” href=”https://www.example.com/fr”/>
- (2) When you have different versions in the same language, targeting different countries
For a website with English versions targeting the UK and the US:
<link rel=”alternate” hreflang=”en-gb” href=”https://www.example.com/uk” />
<link rel=”alternate” hreflang=”en-us” href=”https://www.example.com/us” />
- (3) When you have versions in different languages, targeting the same country
For a website with both English and Spanish versions targeting Mexico:
<link rel=”alternate” hreflang=”en-mx” href=”https://www.example.com/en-mx” />
<link rel=”alternate” hreflang=”es-mx” href=”https://www.example.com/es-mx” />
The difference between use case 1 & 3
In case (1) where there is a fully translated site version, different versions of the site are in different languages, but each language version targets the same country. For example, English and French versions of a site for Canada. This approach is used when you want to provide content in multiple languages for the same region, and is useful for multilingual countries like Canada, Singapore, Switzerland, etc.
In the case (3) of “Different Versions in Different Languages, Targeting the Same Country” , different languages are used for the same country, but the content may be tailored to different language speakers within that country. For example, providing both English and Spanish versions of a site for Mexico. This approach is used when the same region has multiple linguistic communities.
Case 1 is about offering fully translated content for a single country, while case 3 involves serving different languages to diverse language speakers in the same country, adapting to cultural nuance of each language spoken.
Addressing regional language nuance with the hreflang attribute
It also addresses regional variations in language, like British English versus American English (this is actually super important!).
Hreflang is essential for multilingual websites, ensuring that users see the appropriate version of a page, whether it is a fully translated version, different versions in the same language targeting different countries, or different language versions targeting the same country.
For example, platforms like Reddit utilise hreflang to offer user-generated content (UGC) in multiple language options.
The importance of hreflang
Hreflang is the best thing since sliced bread. Introduced by Google in December 2011, the hreflang attribute allows us to show search engines what the relationship is between web pages in alternate languages.
This has been rather revolutionary for people looking to expand their website’s globally, and helps increase the chances of accurately serving the appropriate language or regional version of a webpage to users based on their language preferences and location, reducing the risks of content duplication and improving user experience by presenting content that is tailored to people’s linguistic and geographic preference.
Duplicate content is an all-round SEO killer, and hreflang helps with overcoming the issue of duplicate content. For example, if you have an English version for the UK and English for the US, in most cases, the content won’t be identical, but it will be very similar, with minor variations in spelling (like colour, color), making hreflang is that invisible link that helps the search engine understand that these pages are just regional variations of one another.
What does this mean for your audience?
Insight by Edward Ziubrzynski, Head of International SEO at Swoop Funding
Having effective Hreflang implemented on your website allows you to serve content in either a native language, or targeted geo-location. This gives you the opportunity to better serve your customer base, with content that is solely relevant to them.
Targeted content, alongside acknowledgements of local authorities and governing bodies, such as GDPR in Europe, and the POPIA in South Africa, you are able to demonstrate higher levels of ‘EEAT’ (experience, expertise, authoritativeness and trustworthines), which is a crucial component of Google’s search ranking algorithm. Making your content targeted, accessible, and in line with the market you are looking to compete in is essential for your strategy, and ultimately, your audience.
While hreflang itself is not a direct signal of EEAT, it can support EEAT indirectly in several ways:
1. Improved user experience
By ensuring that users are directed to content in their preferred language, hreflang enhances user experience. High-quality user experience is a component of EEAT, as it reflects the site’s dedication to meeting user needs.
2. Reduced duplicate content issues
Hreflang helps prevent duplicate content issues by clarifying to search engines that different language versions of a page are not duplicates but localised versions. This clarity can protect the site’s authority and trustworthiness by ensuring that the right content reaches the right audience without penalisation.
3. Better engagement metrics
Users are more likely to engage positively with content in their own language. Better engagement metrics, such as lower bounce rates and longer time on site, can signal to search engines that the content is valuable and authoritative, thereby indirectly supporting EEAT.
4. Enhanced credibility and trust
By providing content tailored to various linguistic and regional preferences, a site demonstrates its expertise and commitment to serving a global audience. This enhances the site’s credibility and trustworthiness, core components of EEAT.
5. Localised search engine rankings
Hreflang helps content rank better in localised search results. High rankings in relevant local searches indicate to search engines that the content is authoritative and trusted within specific regions, reinforcing the overall EEAT of the site.
Ways to implement the Hreflang attribute
There are 3 ways to implement the hreflang attribute:
- In the HTML head section
- Through HTTP Headers
- XML Sitemap
Adding Hreflang via HTML Head Section
You can add your hreflang tags within the <head> tag of your web page, which is a common way of implementing hreflang tags, but can get tricky when it comes to larger websites, increasing time and effort to keep the hreflang tags up to date, consistent and accurate. Adding hreflang tags via the HTML head section of a webpage may also deliver a slower crawling and indexing time, as Googlebot needs to analyse and index multiple pages.
The below website has opted for adding the hreflang tag via the HTML head section.
This method of hreflang implementation is quite time-consuming and can get messy as it requires manual input and updates, so if you have a very large website, this method will end up being quite complex.
Implementing hreflang tags through the HTML <head> section is fine for smaller websites, as it enables easier management and a unified point of reference, so you can see all your tags in one place and edit them whenever necessary. The choice of hreflang attribute implementation depends on the website.
Hreflang through HTTP Headers
Adding your hreflang through the HTTP header is a relevant method for non-HTML files, like PDFs,images or other downloadable content items where you can’t directly modify the HTML structure to include <link> tags for hreflang.
This is essentially so that your non-text content reaches the desired geographical location and audience and requires direct header manipulation as these files do not have a <head> section. The drawbacks of this method are that it is quite inconsistent, as not all search engine support this, so even if Google does, others may not which will result in inconsistent results across search engines. It also isn’t as flexible as the other options and is the most coding intensive out of all of them, it requires server-side configuration.
Here is an example of hreflang being implemented through the HTTP header
HTTP/1.1 200 OK
Content-Type: application/pdf
Content-Length: 123456
Link: <https://www.example.com/en-us/example.pdf>; rel=”alternate”; hreflang=”en-us”,
<https://www.example.com/fr-fr/example.pdf>; rel=”alternate”; hreflang=”fr-fr”,
<https://www.example.com/es-es/example.pdf>; rel=”alternate”; hreflang=”es-es”
This method is not popular, especially considering that not all website’s have necessary non-HTML content that absolutely must be visible in all the regions that the website is targeting, but it is good practice to know this exists and to make sure that any relevant non-HTML content is also regionalised to reach its intended audience
Hreflang via XML Sitemap
Implementing hreflang via the XML sitemap is an effective method for managing multilingual and multi-regional websites, especially when dealing with large sites or those with complex content structures. This approach helps centralise the Hreflang annotations, making it easier to manage and update as opposed to embedding them directly in the HTML <head> section of each page.
This method offers ease of updating, which means you can manage all of your hreflang annotations in one place which is very useful for large websites with many pages. This method is also preferably for most e-commerce websites. It also offers dynamic content handling as XML sitemaps can be generated dynamically, allowing automatic updates as new pages are added or existing pages are modified.
This method also offers reduced site load times as opposed to its counterparts and more efficient crawling, as search engines can easily crawl the xml sitemap and understand the language are regional targeting without having to parse every single page individually. Most enterprise level businesses opt for this method, as it also speeds up the discovery and indexing process.
The implementation method depends on the individual website, and should be analysed individually. Doing tailored research is required before settling on a preferred way to implement the hreflang attribute. At the end of the day it depends on how much skill and resource is available.
The thought process should be to choose an implementation method that is:
- Easiest to manage
- Will not incur too many errors
- Understood by managing team
- Helps reach global expansion goals
- Works to speed up the crawling/indexing process
- Makes the global SEO project easier rather than more complex
- Will not impact website vitals (CDN, Site Speed etc)
This is what xml sitemap hreflang tag attributes look like:
<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″ xmlns:xhtml=”http://www.w3.org/1999/xhtml”>
<url>
<loc>https://www.diaryofanseo.com/en-ca/</loc>
<xhtml:link rel=”alternate” hreflang=”en-ca” href=”https://www.diaryofanseo.com/en-ca/” />
<xhtml:link rel=”alternate” hreflang=”en-de” href=”https://www.diaryofanseo.com/en-de/” />
</url>
<url>
<loc>https://www.diaryofanseo.com/en-de/</loc>
<xhtml:link rel=”alternate” hreflang=”en-ca” href=”https://www.diaryofanseo.com/en-ca/” />
<xhtml:link rel=”alternate” hreflang=”en-de” href=”https://www.diaryofanseo.com/en-de/” />
</url>
Implementing Hreflang across multiple domain names
Insight by Izzy Brand, Freelance International SEO Specialist
Although it is ideal for hreflang to be implemented on the same domain, there might be scenarios where this isn’t possible, requiring an alternative setup:
- Company Compliance: Some clients may have company regulations or policies, requiring specific content to be hosted on local domains
- Local or TLD Value: Certain markets may place more trust in local domains or country-specific TLDs (top-level domains), making it more beneficial to use separate domains for different regions and language variations
- Resources: Limited resources or technical challenges might make implementing hreflang on the same domain impractical and/or expensive, leading to the need for separate domains instead.
In these cases, I recommend implementing hreflang tags in both the <head> sections of each page and in an hreflang XML sitemap. Using both methods provides maximum coverage and acts as a “backup”, so if one implementation encounters issues, search engines can still rely on the other. This approach improves the likelihood of the correct content being delivered to the right audience.
Important Note:
It’s crucial to ensure that the tags in the <head> section match the tags in the sitemap to prevent any conflicts between the two implementations.
Geo-targeted redirect combined with language and region detection
There are many instances of websites that use the automatic redirection feature, which takes the users IP and renders the most relevant content based on IP. This seems like a great idea in theory, however, is full of SEO pitfalls. As Nick Jasuja, the founder of hreflang.org says, “the road to hell is paved with good intentions” (Source, Redirection & International SEO, Nick Jasuja).
The main issue with this type of targeting is that when trying access another regional part of the website, most of the time, the redirection will send the user straight back to the location of where the search was made, which can be inconvenient if the user is after a different version.
This can be confusing for both the human user and GoogleBot. .
When planning to implement automatic redirects, it is important to ensure that there is a separate URL that automatically redirects to a country/language selection page, rather than individual country-specific pages. An example would be a landing page where users can choose their preferred region and language.
Source & Image Credit: Nick Jasuja
It’s best to never automatically redirect a visitor (whether human or bot) that is trying to access a specific language version page that has content.
In the example above, it means never auto-redirecting when the page requested is one of http://www.example.com/en/product.html, /fr/product.html or /es/product.html
A real life example of how this can be an issue is when Googlebot is crawling your website and mainly uses an a United States IP, so the visit will be identified as a visit from a U.S. user.
When Googlebot tries to reach your French page, for example, it will get redirected to the English counterpart version. This makes Googlebot think that the French page isn’t actually a separate page; instead, it views it as a duplicate that points to the English page which will result in Google choosing not to index your French page and could display a “missing return tags” error.
This error occurs because Googlebot couldn’t locate the correct French page that should be linked back to the English one.
Geo-redirects can be useful if they’re implemented correctly, however, they do cause a lot of crawling and indexing errors, and also cause frustration when a user can’t easily access a site selection which falls outside of their IP address. There are instances when this method works, especially when it is used in tandem with a comprehensive hreflang structure:
This pop-up is a convenient way for the user to choose they location that they prefer. Using GEO IP in conjunction with hreflang can be a good option to help direct users to the right pages and help GoogleBot understand the structure of your international website.
Key domain considerations for setting up Hreflang
Insight by Edward Ziubrzynski, Head of International SEO at Swoop Funding
When looking to establish a translated website, it is strongly recommended to apply this to your primary domain, instead of setting up country specific domains. This is to allow you to draw upon the authority your domain has built up over its existence, instead of starting fresh in each new target market you have.
For example:
https://diaryofanseo.com/en-ca/ instead of https://diaryofanseo.ca/.
This means that any new page published in your country coded, translated, subfolder will have a greater chance of being indexed and ranked by search engines, as you have historical authority and trust attributed to the domain, and thus, your new page.
This approach will allow you to enter new markets, or strengthen your position in existing markets at speed, and deliver content and traffic improvements at scale.
Building the hreflang attribute
It’s possible to build these tags manually, use a generator tool, or a CMS plugin that is specially created for hreflang implementation.
Generator Tool
Aleyda Solis created a tool that helps generate hreflang tags easily, by inputting the country and language values:
There is an option whether to generate these to be included within the head tags, or to be created as attributed within the XML sitemap. It is also possible to import it via a CMS file into the generator.
Geotargetly is another tool for generating hreflang tag attributes.
Manually
Some may feel extra adventurous and decide to write their tags manually, it can be done with AI tools like ChatGPT, however, this method isn’t recommended due to the errors that AI can output, as there are major errors in an LLMS understanding of regional ISO codes etc.
Manually writing all the hreflang tags is time consuming, and with the abundance of technology around that can speed up this task, manual input becomes unnecessary.
With the abundance of great tools to build hreflang tags, it’s not recommended to write them manually, however, manual checks are required even when using the most reliable building tools.
CMS Plugins
There are a lot of great hreflang plugins that help with content translation, whether into a different language or just to point at a different geographical location.
WordPress/Woocommerce
WordPress offers an extensive list of plugins that are used by millions of users worldwide and offer an intuitive translation process. Plugins like WPML (WordPress Multi-Language) Weglot, and Polylang are good plugins for this.
Magento
Magento e-commerce also offers a comprehensive multilingual setup to help your e-commerce store be visible internationally. Below is a guide sourced from official Amasty knowledge base documentation for Magento on how to implement your hreflang tags in Magento.
1. To configure your hreflang tags, go to:
Stores > Configuration > Amasty extensions > XML Google Sitemap and open the Hreflang URLs section.
Source: Amasty Knowledge Base (Magento)
2. Navigate to Hreflang URLs Scope section, choose “Website” or “Global”. Global is when you are working between websites, and Website is to work with one website only.
3. Navigate to the language code dropdown and choose the relevant language code.
4. In the Country Code field, choose the region for which you created the content for.
5. In the X-default field, specify which store should be tagged as default.
6. For multi-stores, you can connect CMS pages by ID, Hreflang UUID, and Hreflang URL Key. For this, set the needed option in the Multi-Stores CMS Pages Relation field and save your changes.
You can add hreflang tags within the new sitemap and to your Magento 2 product, category, and CMS pages. Go to Content > SEO Toolkit > XML Google Sitemaps and click Add Sitemap:
Source: Amasty Knowledge Base (Magento)
You can also use the Mageworx SEO extension to manage your hreflang tags which will help you with the following:
- Add hreflang tags for any localized store
- Set hreflang URL scope (website or global)
- Opt to use hreflang tags on product, category, and CMS pages
- Use the language code from the default locale
- Select the language for the alternate URLs manually
- Set the X-default hreflang attribute for non-localised pages
- Connect localized pages of this type using ID, URL key, or an hreflang attribute
- Overview alternate hreflang settings conveniently
- Add alternate URLs to the Mageworx XML sitemap
You can refer to the official Mageworx Magento Hreflang Documentation on hreflang tags for Magento which will guide you through whether you need this extension and how to use it for your international store.
Shopify
Hreflang tags in theme.liquidAnchor link to section titled “hreflang tags in theme.liquid” (Source: Shopify.dev)
An hreflang tag is a link element that identifies a localised URL of a website. You should add a unique hreflang tag for each language or region URL that exists, and they should be included in the <head>, which is commonly found in theme.liquid:
layout/theme.liquid
<head>
<!– head element content –>
<link rel=”alternate” hreflang=”en” href=”your-store.myshopify.com” />
<link rel=”alternate” hreflang=”es” href=”es.your-store.myshopify.com” />
</head>
The following examples show how to add hreflang tags to collection and product pages:
layout/theme.liquid
<head>
<!– head element content –>
<link rel=”alternate” hreflang=”en” href=”your-store.myshopify.com/collections/{collection-name}” />
<link rel=”alternate” hreflang=”es” href=”es.your-store.myshopify.com/collections/{collection-name}” />
</head>
layout/theme.liquid
<head>
<!– head element content –>
<link rel=”alternate” hreflang=”en” href=”your-store.myshopify.com/products/{product-name}” />
<link rel=”alternate” hreflang=”es” href=”es.your-store.myshopify.com/products/{product-name}” />
</head>
Strapi
The Internationalisation (i18n) plugin allows Strapi users to create, manage and distribute localised content in different languages, called “locales”.
The i18n plugin offers users an admin panel to create multiple localised versions of their content and allows developers to build localised projects by fetching and consuming the right content depending on the country/language of the audience.
The i18n plugin does not automatically translate the users’ content nor adapt the admin interface to languages specificities (Source, Strapi.dev).
How to check the presence of hreflang
There are a few simple ways to check if a website has the hreflang attribute implemented, you can do this by getting the Hreflang Tag Checker Chrome extension and using it on any website. If there is any hreflang, you will see it:
Tools to check hreflang
There are also a lot of other great tools and crawling software to use for this:
Online hreflang checker tool: great to use to check the presence of your hreflang and is completely free, it gives you a near instant result.
Fetch & Render: This tool is great for a lot more than just hreflang tag implementation checks
Sitebulb is another great tool (similar to Screaming Frog) which gives a good hreflang presence overview.
Manual Checking
Although the above tools are generally useful, sometimes, website’s have a very unique way of configuring their hreflang, they can also block certain public crawlers from accessing their websites, and some checkers may only read the hreflang that has been implemented via the html <head> tags, in which case it is best to use the traditional ways to check if your hreflang is working.
Via Source Code CTRL + F
1. Go to the target website > ctrl + F > search ‘hreflang’
You should see something like this:
These may look different depending on the way that they were implemented, however, you should be able to see tags in one way or another.
In certain cases, companies opt for cross-domain hreflang, which is most visible when analysing it by looking at the tagging structure.
Sometimes, larger companies opt for GeoIP, or server side geotargeting redirection, or even a Javascript hreflang embed, which might make hreflang discovery and validation slightly more difficult.
I have also found that sometimes, it’s worth a manual validation even if you are using a tool for hreflang checks, as it may give you results that aren’t accurate based on the live versions of these pages.
Keyword Search
At times, the most accurate way to assess hreflang implementation is on a page by page basis, by searching for the keyword or company name that has hreflang implementation in different countries to see if the correct result comes up in search.
Example: www.on.com
- United Kingdom Search (en-gb) English language search
Result: https://www.on.com/en-gb/
- Germany Search (de-de) German language search in Germany
Result: https://www.on.com/de-de/shop/classics/shoes
- Switzerland search (it-ch) Italian language search in Switzerland
Result: https://www.on.com/it-ch/
All the above results render the correct pages that on.com was targeting which means that they have succeeded in signaling the relevant pages per location in this particular instance.
Remember that just because the hreflang tags are being shown within this checker tool, it does not mean that a “no” result means that there is no hreflang implementation, it most likely means that it was implemented in a way that isn’t directly discoverable by this tool.
It is also worth noting that even when the above images show that hreflang is being rendered by the tools you use, manual checks are required on a page by page, country, and language specific level to ensure that you rank accurately in each geographical region you would like to be visible in.
Localisation tips for your international strategy
Insight by Raquel González Expósito, Freelance International SEO Consultant
Before launching your website in different languages or regions, you should follow these guidelines to ensure effective implementation of your localisation and hreflang strategy:
Research your target market
First, you need to understand your potential customers in each market you want to expand into.
Consider that some countries have multiple official languages (like Switzerland), while some languages are spoken across various countries (like Spanish).
Based on your business type and target audience, you’ll need to decide whether to create separate content for regions sharing the same language.
For example, if you’re selling in both Spain and Mexico, evaluate if having a single Spanish version is sufficient, or if you need market-specific content.
This decision will directly impact your hreflang implementation – whether to use a general ‘es’ tag or specific tags like ‘es-ES’ and ‘es-MX’ for each country.
Prioritise the pages to localise
When expanding into various markets, you’ll need to prioritize certain pages due to time, budget, or resource constraints. Remember that you only need to implement hreflang tags on pages that have localised alternatives. Focus on your most valuable pages first, like product, services, and key landing pages, and ensure their hreflang annotations correctly point to all available language/region variations.
Localise your keywords
When localising keywords, don’t simply translate them directly. Instead, conduct local keyword research to discover the specific terms and phrases your target audience uses when searching for your products or services in their language.
Pay attention to local holidays and events, which might be celebrated on different dates. For example, Father’s Day is celebrated in June in the US but in March in the UK and Spain.
Plan your content and promotions to align with these local celebrations to ensure relevance in each market.
Adapt currencies, measurements, and other regional standards
When deciding whether to separate content using specific hreflang country codes (like en-US and en-GB), also consider if you need to differentiate key regional elements.
For instance, if you’re selling products in the US and UK, you might need separate pages due to different currencies (USD vs GBP), measurement systems (imperial vs metric), payment preferences, or legal requirements.
However, if these elements don’t significantly impact your content or user experience, a general language tag (like ‘en’) might be sufficient.
Monitor your performance in each market
Track key metrics and analyse user behavior across different regions to measure the success of your localisation efforts.
If you have your localised versions in subfolders (example.com/es/) or subdomains (es.example.com), add each version as a separate property in Google Search Console. This will allow you to monitor each language or regional version’s performance independently.
A few examples of websites with successful Hreflang attribute implementation
Swoop Funding: https://swoopfunding.com/
Adidas: https://adidas.com/
Jeep: https://jeep.com/
Self referential hreflang attributes
Hreflang tags should include a self-referencing canonical URL, specify the page’s own language version as a self-referencing hreflang tag, and reference all other international versions of the page.
In laymans terms, within the hreflang cluster, the page should reference itself as the canonical version, include itself within the hreflang variations of other regions, and include all its regional counterparts:
<link rel=”canonical” href=”https://www.example.com/en-us/shoes/” />
<link rel=”alternate” hreflang=”en-us” href=”https://www.example.com/en-us/shoes/” />
<link rel=”alternate” hreflang=”en-ie” href=”https://www.example.com/ie/shoes/” />
If the hreflang attribute is incorrect
Hreflang implementation and building can go wrong very quickly, and a quick way to check this would be to use of the extension tools, or conduct a manual check. Before your pages are indexed, you won’t be able to see whether your implementation is correct or not. Ideally, test your hreflang is a staging environment before you send the website/site sections live, so you can troubleshoot in good time.
Crawling tools like Screaming Frog, Sitebulb, DeepCrawl will also give you a good indication of whether your hreflang tags have been implemented correctly.
Here is a list of other checker tools to use for validation of your hreflang tags:
- Fetch & Render SEO hreflang tag testing tool
- Sistrix’s hreflang validator
- Hreflang Checker
- Hreflang Tag Checker Chrome Extension
Checking your hrelfang implementation is imperative for a properly functioning hreflang structure, if there are errors either in your language and country codes, your attribute values, your hreflang URLs referencing the wrong locations will harm the visibility of your international URLs, and crawling & indexing.
You may not explicitly know that your hreflang implementation is incorrect, but there will be signs. Here is an example from the Singapore Ministry of Foreign Affairs:
This is a Brazilian result, which is visible when searching for ‘apply for singapore visa in uk’, which renders a result from Brazil, this hreflang attribute is incorrect and will cause issues for the user, and will later impact the page itself considering how many users will bounce from this page (and is generally a frustration if someone is trying to apply for a visa to Singapore within the UK).
This is a huge inconvenience for ecommerce brands if you can only access an incorrect location, with incorrect currencies, shipping laws etc.
This is another example of hreflang errors, there are results showing for multiple countries at the same time, and one of the country and languages values is completely incorrect (cn-en) as cn represents the country, not the language, and en represents the language, not the country, there is no country attribute “en”, the closest would be “gb”.
Common hreflang attribute mistakes
Reverse placement of language and country codes
The anatomy of an hreflang tag needs to be followed accurately for it to function correctly, and an error that is quite prevalent is mixing up language codes with country codes. For instance, using CA-fr (French for Canada) when you mean fr-CA.
The correct format for hreflang is to specify the language code first followed by the country code if needed. The format should always be language-region (e.g., fr-CA).
Wrong country country or language code used
There are often scenarios where either the country or language code isn’t directly obvious, for example, using the Swiss country code may seem like it should be ‘sw’, but it is ‘ch’, as well as South Africa, it will not be ‘sa’, rather ‘za’.
It’s best to refer to the country and language code formats before trying to guess the language and country codes as some of them are not as straightforward.
There are instances of language codes being used incorrectly, such as “eng-US“, ‘eng’ does not exist, the correct language code being ‘en’, so ‘en-us’. This is not to say that 3 word identifiers do not exist, for example, if you are targeting the Traditional or Simplified Chinese language in China, your attribute would be:
“zh-hant” (Traditional)
“zh-hans” (Simplified)
To make sure that there are no mistakes in your country and language codes, refer to the official langage and country code databases:
- Github country & language codes
- ISO 639 Language Code
- ISO 639 Language Codes – Wikipedia
- Martin Kura Country Codes
Using continents or political regions for country codes
There are instances where political regions are used in place of countries, for example “en-eu” (English in the European Union, or “es-la” (Spanish for Latin America).
Political regions and continents are invalid region code EU stands for the European Union, which is a political region, not a specific country. The hreflang attribute requires the use of specific ISO 3166-1 alpha-2 country codes to specify language-region combinations correctly.
The x-default debate
Opinions on the importance of the x-default attribute are generally split. The x-default attribute is a special value for the hreflang attribute in HTML that signals to search engines which page to serve as the default when a user’s language or regional preferences don’t match any of the specified hreflang attributes.
It helps ensure that users are directed to the most appropriate version of a webpage when no direct match is found. Below is an example of x-default in action:
<html>
<head>
<link rel=”alternate” hreflang=”de” href=”https://de.example.com/”>
<link rel=”alternate” hreflang=”en” href=”https://www.example.com/”>
<link rel=”alternate” hreflang=”x-default” href=”https://www.example.com/”>
<link rel=”alternate” hreflang=”es” href=”https://es.example.com/”>
</head>
<body>
….
</body>
</html>
Is an X-default compulsory?
It’s not ‘compulsory’, but it is recommended. If you’re setting an x-default, all you are doing is letting search engines know that if someone searches for a result and there is nothing that is directly relevant, it outputs the most relevant fallback result.
X-default is preferred in most scenarios, however, is relevant in a difference sense for e-commerce brands.
If x-default is implemented for e-commerce, it’s important to understand the reasons and the region behind the implementation. In this case, region agnostic x-defaults may not work as well.
If your x-default for India is the US, then the shipping information, pricing, and legal considerations are not relevant to india, so either Google will not show that page at all, or show a page that isn’t relevant.
What is important however, is to make sure that in the worst case scenario of your hreflang not showing the correct version, is to at least show the version in the relevant language; to show a Spanish language page in Mexico, or a Chinese page in China.
In the case of e-commerce, automatic geotargeting (geoIP) or manual country selection is a great option to go for if it isn’t x-default.
Hreflang tag changes in real-time based on proximity and relevant content language
AI has been both a blessing a curse for International SEO, but hopes that AI will aide in helping SEOs implement and accurately test hreflang remain. Hreflang implementation is time consuming, prone to errors and with little to no regulation. AI may have the potential to one day automate this process, which will help save time and reduce the number of output errors.
AI has the potential to automatically detect the language on a page and tag the relevant hreflang, so if a page is tagged with the wrong language or region, an AI tool can flag this for correction. These revolutionary ideas of AI input for hreflang will definitely make the process easier, more accurately, and will help businesses connect to their target audience across the globe in less time and with more precision. At the moment, no such tools exist, and even existing popular tools on hreflang checkers are not 100% accurately, so there is still a reliance on human input.
Hreflang for e-commerce
Hreflang is an integral part of a successful international SEO strategy and helps businesses expand globally and target different demographics, this is true for all brands not just e-commerce. Having an e-commerce website that targets the highest-search-volume countries for your products will attract millions of new visitors and help with global expansion. Brands like On, Adidas, Nike, Boohoo and many others have deployed an international SEO strategy and have successfully used hreflang to target multiple countries to sell their products.
Is there going to be a greater dilution by using en-gb and en-us instead of just using en?
No, the purpose of hreflang is to avoid dilution, “en” is also not an hreflang attribute in this case, it is a lang attribute <html lang=”en”>. If you have two page variations example.com/en-gb/ and example.com/en-us/ or any hreflang variations of any international SEO structure, dilution is avoided as the hreflang signals to search engines that these pages are part of one entity but targeting different regions.
If regional specifics are not as crucial, then hreflang implementation is not necessary as the lang <html lang=”en”> attribute will suffice.
Does the canonical tag need to be set to the main site or corresponding subfolder?
Each translated page will have a self referencing canonical
Canonical: example.com/au/shoes/
Credits
This guide has been created with personal knowledge and experience, as well as contributions and existing online resources. This guide uses expertise listed online by Kira Khoroshilova, Aleyda Solis, Backlinko, SISTRIX, Samuel Hurley, John Mueller, and Amsive Digital. The guide also includes expert commentary from Edward Ziubrzynski, Head of International SEO at Swoop Funding.
This guide will continue to evolve with new information based on the most recent SEO trends.