This week’s Ask An SEO question comes from a reader facing a common challenge when setting up international websites:
“I’m expanding into international markets but I’m confused about hreflang implementation. My rankings are inconsistent across different countries, and I think users are seeing the wrong language versions. What are the most common hreflang mistakes, and how do I audit my international setup?”
This is a great question and an important one for anyone working on websites that cover multiple countries or languages.
The hreflang tag is an HTML attribute that is used to indicate to search engines what language and/or geographical targeting your webpages are intended for. It’s useful for websites that have multiple versions of a page for different languages or regions.
For example, you may have a page dedicated to selling a product to a U.S. audience, and a different one about the same product targeted at a UK audience. Although both these pages would be in English, they may have differences in the terminology used, pricing, and delivery options.
It would be important for the search engines to show the U.S. page in the SERPs for audiences in the US, and the UK page to audiences in the UK. The hreflang tag is used to help the search engines understand the international targeting of those pages.
How To Use An Hreflang Tag
The hreflang tag comprises the “rel=” alternate code, which indicates the page is part of a set of alternates. The “href=” attribute, which tells the search engines the original page, and the “hreflang=” attribute, which details the country and or language the page is targeted to.
It’s important to remember that hreflang tags should be:
- Self-referencing: Each page that has an hreflang tag should also include a reference to itself as part of the hreflang implementation.
- Bi-directional: Each page that has an hreflang tag on it should also be included in the hreflang tags of the pages it references, so Page A references itself and Page B, with Page B referencing itself and Page A.
- Set up in either the XML sitemaps of the sites, or HTML/HTTP headers of the pages: Make sure that you are not only formatting your hreflang tags correctly, but placing them in the code where the search engines will look for them. This means putting them in your XML sitemaps, or in your HTML head (or in the HTTP header of documents like PDFs).
An example of hreflang implementation for the U.S. product page mentioned above would look like:
<link rel="alternate" href="https://yourstore.com/us/product" hreflang="en-us" />
<link rel="alternate" href="https://yourstore.com/uk/product" hreflang="en-gb" />
<link rel="canonical" href="https://yourstore.com/us/product" />A hreflang example for the UK page:
<link rel="alternate" href="https://yourstore.com/us/product" hreflang="en-us" />
<link rel="alternate" href="https://yourstore.com/uk/product" hreflang="en-gb" />
<link rel="canonical" href="https://yourstore.com/uk/product" />Each page includes a self-referencing canonical tag, which hints to search engines that this is the right URL to index for its specific region.
Common Mistakes
Although in theory, hreflang tags should be simple to set up, they are also easy to get wrong. It’s also important to remember that hreflang tags are considered hints, not directives. They are one signal, among several, that helps the search engines determine the relevance of the page to a particular geographic audience.
Don’t forget to make hreflang tags work well for your site; your site also needs to adhere to the basics of internationalization.
Missing Or Incorrect Return Tags
A common issue that can be seen with hreflang tags is that they are not formatted to reference the other pages that are, in turn, referencing them. That means, Page A needs to reference itself and Pages B and C, but Pages B and C need to reference themselves and each other as well as Page A.
As an example the code above shows, if we were to miss the required return tag on the UK page, that points back to the U.S. version.
Invalid Language And Country Codes
Another problem that you may see when auditing your hreflang tag setup is that the country code or language code (in ISO 3166-1 Alpha 2 format) or language code (in ISO 639-1 format) isn’t valid. This means that either a code has been misspelled, like “en-uk” instead of the correct “en-gb,” to indicate the page is targeted towards English speakers in the United Kingdom.
Hreflang Tags Conflict With Other Directives Or Commands
This issue arises when the hreflang tags contradict the canonical tags, noindex tags, or link to non-200 URLs. So, for example, on an English page for a U.S. audience, the hreflang tag might reference itself and the English UK page, but the canonical tag doesn’t point to itself; instead, it points to the English UK page. Alternatively, it might be that the English UK page doesn’t actually resolve to a 200 status URL, and instead is a 404 page. This can cause confusion for the search engines as the tags indicate conflicting information.
Similarly, if the hreflang tag includes URLs that contain a no-index tag, you will confuse the search engines more. They will disregard the hreflang tag link to that page as the no-index tag is a hard-and-fast rule the search engines will respect, whereas the hreflang tag is a suggestion. That means the search engines will respect the noindex tag over the hreflang tag.
Not Including All Language Variants
A further issue may be that there are several pages that are alternatives to the one page, but it does not include all of them within the hreflang tag. By doing that, it does not signify that these other alternative pages should be considered a part of the hreflang set.
Incorrect Use Of “x-default”
The “x-default” is a special hreflang value that tells the search engines that this page is the default version to show when no specific language or region match is appropriate. This x-default page should be a page that is relevant to any user who is not better served by one of the other alternate pages. It is not a required part of the hreflang tag, but if it is used, it should be used correctly. That means making a page that serves as a “catch-all” page the x-default, not a highly localized page. The other rules of hreflang tags also apply here – the x-default URL should be the canonical of itself and should serve a 200 server response.
Conflicting Formats
Although it is perfectly fine to put hreflang tags in either the XML sitemap or in the head of a page, it can cause problems if they are in both locations and conflict with each other. It is a lot simpler to debug hreflang tag issues if they are only present in either the XML sitemap or in the head. It will also confuse the search engines if they are not consistent with each other.
The Issues May Not Just Be With The Hreflang Tags
The key to ensuring the search engines truly understand the intent behind your hreflang tags is that you need to make sure the structure of your website is reflective of them. This means keeping the internationalization signals consistent throughout your site.
Site Structure Doesn’t Make Sense
When internationalizing your website, whether you decide to use sub-folders, sub-domains, or separate websites for each geography or language, make sure you keep it consistent. It can help your users understand your site, but also makes it simpler for the search engines to decode.
Language Is Translated On-the-Fly Client-Side
A not-so-common, but very problematic issue with internationalization can be when pages are automatically translated. For example, when JavaScript swaps out the original text on page load with a translated version, there is a risk that the search engines may not be able to read the translated language and may only see the original language.
It all depends on the mechanism used to render the website. When client-side rendering uses a framework like React.js, it’s best practice to have translated content (alongside hreflang and canonical tags) available in the DOM of the page on first load of the site to make sure the search engines can definitely read it.
Read: Rehydration For Client-Side Or Server-Side Rendering
Webpages Are In Mixed Languages Or Poorly Translated
Sometimes there may be an issue with the translations on the site, which can mean only part of the page is translated. This is common in set-ups where the website is translated automatically. Depending on the method used to translate pages, you may find that the main content is translated, but the supplementary information, like menu labels and footers, is not translated. This can be a poor user experience and also means the search engines may consider the page to be less relevant to the target audience than pages that have been translated fully.
Similarly, if the quality of the translations is poor, then your audience may favor well-translated alternatives above your page.
Auditing International Setup
There are several ways to audit the international setup of your website, and hreflang tags in particular.
Check Google Analytics
Start by checking Google Analytics to see if users from other countries are landing on the wrong localized pages. For example, if you have a UK English page and a U.S. English page but find users from both locations are only visiting the U.S. page, you may have an issue. Use Google Search Console to see if users from the UK are being shown the UK page, or if they are only being shown the U.S. page. This will help you identify if you may have an issue with your internationalization.
Validate Tags On Key Pages Across The Whole Set
Take a sample of your key pages and check a few of the alternate pages in each set. Make sure the hreflang tags are set up correctly, that they are self-referencing, and also reference each of the alternate pages. Ensure that any URLs referenced in the hreflang tags are live URLs and are the canonicals of any set.
Review XML Sitemap
Check your XML sitemaps to see if they contain hreflang tag references. If they do, identify if you also have references within the <head> of the page. Spot check to see if these references agree with each other or have any differences. If there are differences in the XML sitemap’s hreflang tags with the same page’s hreflang tag in the <head>, then you will have problems.
Use Hreflang Testing Tools
There are ways to automate the testing of your hreflang tags. You can use crawling tools, which will likely highlight any issues with the setup of the hreflang tags. Once you have identified there are pages with hreflang tag issues, you can run them through dedicated hreflang checkers like Dentsu’s hreflang Tags Testing Tool or Dan Taylor and SALT Agency’s hreflangtagchecker.
Getting It Right
It is really important to get hreflang tags right on your site to avoid the search engines being confused over which version of a page to show to users in the SERPs. Users respond well to localized content, and getting the international setup of your website is key.
More Resources:
- Getting Started In International SEO: A Quick Reference Guide
- Google Insights: Can Incorrect Hreflang Tags Hurt SEO?
- The Complete Technical SEO Audit Workbook
Featured Image: Paulo Bobita/Search Engine Journal
