How to reach out to your global audience? Your website has to speak the same language with people, so you should translate your content into a targeted language. But while it is great for users, it can be a stumbling block for search engines.
Let’s say you publish translated content on different URLs. How will Google understand your website’s structure and connections between these links? There is a simple solution, and it’s called the hreflang tag.
But here’s the thing: even one small implementation mistake can result in lost rankings and the duplicate content issue. Let’s see what problems you should focus on.
Why Do We Write About Hreflang?
We’re beginning with an example from our team’s experience. RankActive is an international platform, and it was decided to create another version of our website. Basically, we needed to track organic traffic from the Netherlands.
The main question: if users appear on the page https://rankactive.com and then select the Dutch version https://nl.rankactive.com, how does Google translate this action? Does it understand where the user came from? Here we’re talking about three types of traffic: referral, organic, and direct.
For such cases, SEOs set up the hreflang tag, but it was discovered that we didn’t have it in our website’s source code. Visitors could select English language only from the main page and not from other website versions. Imagine how harmful it is for SEO and user experience. Fixing this issue is our priority at the moment.
A Piece of Theory: What Is the Hreflang Tag and When to Use It
The hreflang attribute is an element that helps search engines understand what language and geolocation you’re targeting. If you use this tag, the right website version would appear when users select a language on your web platform.
You need to implement hreflang if you deal with one of these situations:
- Your content is adapted to regional versions of one language (for example, en-us and en-gb).
- You have content translated into several languages (en, fr, and de).
- There is a mix of several languages and their regional variations.
It looks like this in the source code:
<link rel="alternate" href="https://example.com" hreflang="en-us" />
At the same time, hreflang is not the cure for everything. Other SEO factors can make your website’s versions rank higher. It means the more best practices of international SEO you use, the clearer picture Google gets about a platform.
Google first introduced hreflang in 2011. Although it helped marketers to increase the visibility of their websites, errors of hreflang implementation appeared here and there. Years have passed, and now we know the most common issues and how to cope with them.
Mistake 1: Using Wrong ISO Codes
ISO codes are combinations of letters which indicate a country and a language you’re targeting. There are complete lists of ISO codes for both countries and languages, but confusions still take place.
The simple rule you should remember: a language goes first, and a country goes next. Not the other way around. If you mix the two, there is a big chance Google won’t be able to read any data, and your efforts will lead nowhere.
This is the right order:
<link rel="alternate" href="https://example.com" hreflang="en-us" />This is a confusion:
<link rel="alternate" href="https://example.com" hreflang="us-en" />Another mistake is to repeat the language’s code in the country’s field. Note that the language part is mandatory, while the country (regional) code is optional.
Some developers want to put at least something in the country field, and they believe that doubling the language code is the best option. But, on the contrary, it may cause problems. If the country code doesn’t match the language code, it confuses Google and makes hreflang useless.
And finally, you should carefully check the language codes for different locations. One of the common mistakes is adding en-uk instead of en-gb.
Mistake 2: Neglecting Correct Punctuation
You know what codes to add and in which order, now you have to remember two simple punctuation rules.
- The code must be separated by hyphens. You can add only a language code without a country, but you should always add hyphens (“fr”, “fr-be”).
- Do not use underscores. Hyphens are the only way to separate language and country codes.
Even though these rules are simple, you can’t entirely rely on the Search Console to detect them. It’s better to check the basic spelling and punctuation mistakes before checking more complex code errors.
Mistake 3: Incorrect Canonical Tag Implementation
Self-referential canonical tags are as important as self-referential hreflang tags.
The canonical tag is implemented to show search engines which page is the main one and which ones are alternatives and should not be indexed.
The hreflang tag shows which page is the main one, but it doesn’t block other pages’ indexation.
To provide an easy crawling for Googlebot, developers and webmasters should use both types of tags. If a canonical tag leads to another page and hreflang is set up, it sends a controversial signal to Google: to index and not to index the main page at the same time. The outcome is unexpected: Google either chooses what page to index or ignores indexing completely.
The correct implementation:
- There should be a canonical tag on the main page pointing to this page:
<link rel=”canonical” href=”https://www.example.com/gb” /> - Other website versions should include hreflang tags:
<link rel=”alternate” href=”https://www.example.com/gb” hreflang=”en-gb” /><link rel=”alternate” href=”https://www.example.com/us” hreflang=”en-us” />
Mistake 4: Combining Canonical and Hreflang Tags
As you’ve noticed from the previous point, canonical and hreflang tags are strongly connected, but it doesn’t mean that you can mix them up in one code line.
This is another commonly found SEO misconception:
<link rel=”canonical” hreflang=”en-IE” href=”https://www.example.com/ie/”/><link rel=”alternate” hreflang=”es-AR” href=”http://www.example.com/ar/”/>It doesn’t work this way. You should separate the two tags if you want them to serve your indexing well.
The correct coding would look like this in our example:
<link rel=”canonical” href=”https://www.example.com/ie/”/><link rel=”alternate” hreflang=”es-AR” href=”https://www.example.com/ar/”/>And below, you can add any number of alternative versions that include only hreflang.
Mistake 5: Using X-Default Only on the Main Page with Country Selectors
The x-default hreflang attribute was introduced by Google in 2013. It shows Googlebot that a web page does not target any specific language or location and that this is a default page.
Some SEO experts believe this attribute should be used only for home pages with country selectors. We’re going to clarify this statement.
X-default applications
The main page does not target any location. Companies similar to Ikea have a huge selector where visitors can pick their location or language.
This web page is suitable for users from any country, so x-default is used to show this specific page for any location.
The main page targets the global audience as well as a specific location. For example, the US version is at the same time an international one. In this situation, you need to add two variations to the source code: the one with x-default and the other with the “en-us” combination.
<link rel=”alternate” hreflang= “x-default” href = ”https://www.example.com/><link rel=”alternate” href “en-us” href =”https://www.example.com”/>Mistake 6: Not Including Hreflang Tag in Every URL
Hreflang attribute should be added to every URL you have on your website, be it the main page or a blog post. It means that you should first map out what ISO codes you need for each page. Usually, it looks like a table with a link, a language code, and a location code. Next, you can pick the way to implement the tag.
Google recommends three methods to use hreflang:
- HTML tags
- HTTP headers
- Sitemap.
You can find instructions for each of them in these Search Console guidelines as well as general recommendations and precautions for all methods.
Mistake 7: Trying to Save Some Space in the Code
If your website has lots of alternative versions, your code will contain lots of similar entries with the hreflang tag. In this case, it’s tempting for webmasters to save some space and efforts. The outcome may look like this:
<xhtml:link rel=”alternate” hreflang=”es-ES;fr;fr-BE;pt;it;it-CH;de-CH;de;en-GB;en;en-US”>
Even though it looks more straightforward, it won’t do any good for SEO. The golden rule is to create a separate code line for each alternative URL.
Mistake 8: Incorrect Links
Now let’s figure out what links should not be added to code entries. These are the three most important issues:
- Redirected pages. If a redirected page appears along with the hreflang tag, Google may not index this page or even not show it in SERPs.
- Pages with errors. 4xx or 5xx pages will be ignored by Google, so you should check if the page is relevant.
- Relative links. Always use absolute links with the hreflang tag, i.e., the ones that include the domain name of the website:https://www.example.com/blog/hreflang-implementation-mistakes
but not /blog/hreflang-implementation-mistakes
Bonus: Hreflang Issues to Handle with Care
These issues are not particularly mistakes, but you should double-check your code and final results in these cases:
- You target minority languages. As this is not a common practice, you should check SEO metrics more carefully.
- You target several script variations of the same language: for example, there is traditional and simplified Chinese on your website. The right ISO code and careful testing will help you succeed.
- You use Google Tag Manager to implement hreflang. Although there are guides on how to do it properly, not all developers or webmasters would take this risk. SEO audits will show if this method is reliable for your website in the long run.
Small Mistakes – Big Consequences
As you’ve noticed, some of the common hreflang implementation mistakes are easy to fix. At the same time, even one of them can dramatically impact the website’s indexing.
You should focus on the right spelling and combination of the ISO codes, structure and punctuation of the code entry, and links added to the entry. Keeping all that in mind, you get the most effective way to target any number of locations and languages.