Often, the best practices of SEO don’t give us a direct ranking signal boost from Google, although they help drive significant traffic to our website.
Herflang tags are a perfect example of this.
While Gary Illyes has stated that hreflang tags don’t serve as a ranking signal in the algorithmic sense, in a cluster, a group of similar content pages in different languages share the same ranking authority.
In our pursuit of optimizing user intent and experience, writing content for different geographic locations and languages provides tremendous value to our website.
That’s where the magic of the hreflang tag comes in.
Rather than having the same webpage competing for users in Australia and France, you could have alternate pages that pop up at the top of SERPs optimized for that country’s language, currency, and privacy laws.
However, hreflang tags are one of the most complicated parts of technical SEO.
Unfortunately, you could do a lot more harm than good by improperly implementing this tag attribute across your website.
That’s why I want to provide this refresher course on everything you need to know about hreflang tags and the best practices to get started with international SEO using these incredibly granular tags.
What Is An Hreflang Tag?
Hreflang tags are a link tag attribute in HTML that enables websites to serve content specifically for users in different countries and languages.
If you view the page source of any given web document, the first tag you’ll often see is this:
<html lang=”en”>
The language attribute specifies this webpage employs English text for an English-speaking audience over search.
However, if a website wanted to target French-speaking users in France, they could use an hreflang attribute in the head of their HTML, which would look something like this:
<link rel=”alternate” href=”https://fr.example.com” hreflang=”fr-fr” />
Let’s break this down for easier understanding.
Basically, an hreflang string consists of three critical components:
- rel=alternate attribute: This tag specifies this webpage is an alternate version of the original web page, not the canonical.
- href= attribute: This tells Google the original URL of the alternate web page.
- hreflang= attribute: This tag specifies the language and country this web page is targeting.
In the above example, the alternate tag specified that URL https://fr.example.com was the primary English web page’s alternate.
In addition, the end of the tag also specified that the webpage was for French speakers in France.
In addition, webmasters could also create an alternate page for English speakers in France by adjusting the hreflang attribute to hreflang=”en-fr” which means this page is for English speakers in France.
Thorough hreflang implementation allows you to become more granular with geotargeting and serve up local content to people all across the globe.
What’s not to love from an SEO or content marketing perspective?
Why You Need Hreflang Tags
We can do more with hreflang tags than optimize for different languages.
In fact, hreflang tags enable us to do three critical things with our website:
- Optimize webpages for the same language in the same country (Ex. “fr-fr”).
- Optimize webpages for different languages in that same country (Ex. “de-fr”).
- Optimize webpages for different languages in different countries (Ex. “de-us”).
But why not just create broad English web pages for people in the UK and across the world?
Well, creating alternate web pages for English users in the UK and elsewhere enables customers overseas to purchase products on your website in pounds and localizes content specifically for their interests.
Furthermore, creating clusters of content also accumulates more SEO value for our website and web pages as a whole.
Another benefit of hreflang tags is that website owners can create specific web pages that conform to international laws and tax codes to avoid legal trouble.
Ultimately, proper hreflang tags benefit your website in many key ways, including:
- Localizing content for users across the globe.
- Gaining access to global markets.
- Allowing users to pay in native currencies.
- Preventing alternate web pages from competing with each other.
- Keeping websites organized.
At this point, I bet that hreflang tags sound like all peaches and cream for your web strategy.
Now, here comes the hard part: Setting up your tags.
I’ll walk you through several different strategies, so you have a solid understanding of how tags work in practice and how to implement them on your website.
First, let’s discuss some of the challenges you’ll encounter along the way if you are new to using hreflang tags.
Common Challenges Setting Up Hreflang Tags
Avoiding Duplicate Content
Improper hreflang tag implementation will result in duplicate content errors.
While Google doesn’t directly punish duplicate content, you don’t want an English page designed for Americans outranking a page meant for English speakers in France.
Segmenting Content Between Different Language And Country Codes
Hreflang tags require time, money, and commitment to properly organize each web page for a specific language and country.
You’ll also need to look up every country and language’s specific HTML codes.
Keeping Hreflang Tags Organized As You Add New Content
This challenge only compounds as you continue to add more content to your site.
Again, think of large-scale ecommerce sites and what they go through daily trying to add new products for customers across the globe.
Hreflang Tags Are Not A Directive
Unfortunately, hreflang tags are not an absolute directive. Mostly, hreflang tags serve as a hint for Google or Yandex to prioritize certain content, but nothing is guaranteed.
Hreflang Tags Work Differently Between Google And Bing
Search engines like Bing barely even look at these tags.
Instead, Bing uses meta tags like the <html lang=”en”> tag, which I showed in the beginning to organize and display content.
Hreflang Principles
We need to understand the relationship between different web pages and HTML to get started.
When implementing hreflang attributes, we want to remember two principles:
Hreflang Tags Need To Be Self-referential
In the past, Google has recommended that every webpage have a self-referential hreflang tag that points back to the original.
For example say your original URL is https://example.com/us. Then your hreflang attributes will be ordered like so:
<link rel=”alternate” href=”https://example.com/fr” hreflang=”fr” />
<link rel=”alternate” href=”https://example.com/us” hreflang=”en” />
So for every alternate webpage you create, you must never forget to include a link attribute for that webpage.
For example, a French webpage should have an href attribute for the French URL.
It may feel a tad redundant, but it cuts down on confusion from Google’s end and helps avoid duplicate content errors.
Hreflang Tags Need To Be Bi-directional
This second principle is absolutely required and will eliminate any lost SEO value from clustering your web pages and transferring those awesome metrics between the two.
So let’s take the above example and say that the homepage has an alternate version translated into French for French visitors from France.
We need to implement a tag on the French page that points back to the main U.S. page and self-references itself.
It’s not as confusing as it sounds! Simply just swap them around like this:
<link rel=”alternate” href=”https://example.com/us” hreflang=”en” />
<link rel=”alternate” href=”https://example.com/fr” hreflang=”fr” />
If you have dozens of different languages and countries, don’t sweat.
All you need to do is have the original URL listed as self-referencing at the bottom and ensure that every page has tags set up for every language and region, not just your original English page.
Bonus
I also recommend using an X-default page for situations when Google can’t extract their language or region from a user’s browser or IP address.
An x-default page asks visitors what language they prefer and sends them to the appropriate alternate page. The tag will look something like this:
<link rel=”alternate” hreflang=”x-default” href=”https://example.com/” />
Now that we know how the HTML code works and how to set them up, we just need to learn how to set hreflang tags up.
Setting Up Hreflang Tags
You generally have three great options available to set up hreflang tags and implement them at scale.
HTML/HTTP Headers
Setting up HTML tags is the simplest but most time-consuming method. I recommend this for websites without a sitemap, although you should definitely invest in a sitemap, especially if you have a ton of content or products!
Going through what we’ve discussed so far, set a <link> tag to the alternate version of your page in the header of the HTML to look something like this:
<link rel=”alternate” hreflang=”en-us” href=”https://example.com/home” />
From there, make sure each tag is self-referential and bi-directional.
In addition, if you want to create alternate pages for .pdf files without HTML, you’ll need to implement the same tags in the HTTP header of each page.
Fortunately, the link will look the same and you can apply the same rules for easy implementation.
Of course, you can see how hard this can be to scale, especially if you serve customers in dozens of countries in dozens of languages.
Generally, changing the HTML or HTTP is fine when you need to adjust a few pages over time, but this method won’t serve you well in the long run if you’re dealing with thousands of URLs.
XML Sitemap
I recommend using your XML sitemap to implement all of your tags in a single file and optimize your website at scale.
This method is pretty straightforward.
All you need to do is add <xhtml:link to the front of your URL and add all alternative versions of the page underneath.
<url>
<loc>https://example.com/link</loc>
<xhtml:link rel=”alternate” hreflang=”en-us” href=”x-default”
<xhtml:link rel=”alternate” hreflang=”en” href=”https://example.com/link/” />
<xhtml:link rel=”alternate” hreflang=”fr” href=”https://example.com/lien/” />
Using this method, you can add all of your relevant tags in one file instead of manually adding link attributes to the HTML of every webpage.
Once completed, submit an updated sitemap to Google Search Console.
Of course, there are several ways to automate this process by using a spreadsheet to copy and paste all of your URLs from a sitemap under separate languages and regions.
There are also several hreflang generation tools available online, although I’d recommend doing your research before you end up causing more harm than good to your website.
Common Mistakes Setting Up Hreflang Tags
Based on how meticulous hreflang tags can be, you’ll likely run into several issues during setup. As a result, many of these mistakes will spell duplicate content in the eyes of Google and sour your rankings. Don’t worry because the solutions are pretty straightforward.
Not Making Hreflang Tags Self-Referential
A missing hreflang self-referencing attribute can be holding back one of your pages from ranking.
Fortunately, multiple site audit tools, including Screaming Frog, SEMrush, and Ahrefs, check for proper hreflang implementation, including self-referencing attributes.
Scan for pages missing this attribute and fix issues in real-time.
No Return Tag
Additionally, it’s easy to violate our second principle of hreflang tags by failing to employ bi-directional tags.
You can spot this error in the International Targeting and Language tab in Google Search Console.
Simply go into your sitemap or adjust the header tag of your webpage to link back to the original or canonical webpage.
Incomplete Or Improper Tags
This issue could arise for several reasons, including human error or your hreflang generator tool.
Some of the most common issues related to improper tags include using the wrong language or country codes or simply inputting improper values in your HTML code.
Fortunately, your crawler will spot any incomplete hreflang tags and alert you so you can have it fixed in no time.
Blocked Or No Index Pages
One of any website’s most common and overlooked issues is no-indexing errors.
For example, Javascript, iFrames, and several additional services are notorious for blocking or no-indexing valuable web pages without our knowledge.
To begin addressing this issue, check your robots.txt file to see if you have any pages blocked that should not be in your file.
Next, check your Javascript and CMS to ensure you don’t have the no-index tag checked off.
I’d also run a crawl and look through your spreadsheet to see what URLs are no-indexed.
Finally, go into your HTML and insert your hreflang tag in the header, above the noindex tag, to prevent Javascript or iFrames from blocking these pages.
Linking To Redirected Pages
As your site grows and matures, you’ll often employ redirects to new content to give your website fresh SEO value.
However, hreflang tags must reference a canonical webpage.
Therefore, if your tag references a redirected web page or comes back with an HTTP response code, Google will simply ignore the entire hreflang tag and decide what content it wants to display.
To fix this, you’ll need to adjust the URL in the hreflang tag to reflect the new canonical webpage.
Double-Check Your Tags
Finally, I feel it’s best to reinforce the need for periodic site audits to ensure you’ve correctly implemented your hreflang tags and that aging international content is still ranking.
A crawler is a good source to determine whether or not your new hreflang tags have any issues or that any aging content on your website needs adjusting.
For example, Screaming Frog allows you to crawl an XML sitemap and then check for the following issues with your hreflang tags in its dropdown menu:
- Non-200 hreflang URLs.
- Missing X-Default.
- Missing Self Reference.
- Inconsistent Region and Language Confirmation Links.
You will also be warned of any improper hreflang implementation in Search Console through its International Targeting tab based on declining traffic analytics.
Many enterprise companies often ask me whether or not hreflang tags are truly worth the hassle.
As Google’s search algorithm becomes more developed, it has become better at spotting and serving the correct web pages for different languages and regions.
Additionally, the investment to manage hreflang tags across thousands of webpage is expensive and tedious.
However, if we want to get the most SEO value out of clustering and localizing content by region/language, then implementing hreflang tags is necessary.
Furthermore, multilingual ecommerce sites can gain a massive return out of proper hreflang implementation.
The central issue truly comes down to practice, as human and machine errors can cause more headaches than they solve.
With the right knowledge, tools, and help, managing hreflang tags can be easy.
Hopefully, in this guide, you’ve acquired the knowledge required to get started with implementing and maintaining hreflang tags across your multi-language website.
More resources:
- Hreflang Implementation: The 10 Biggest SEO Misconceptions
- Getting Started In International SEO: A Quick Reference Guide
- Advanced Technical SEO: A Complete Guide
Featured Image: liravega/Shutterstock
