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:
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:
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 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:
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:
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:
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 tag to the alternate version of your page in the header of the HTML to look something like this:
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
Comments (0)