You’ve worked hard to create incredible multilingual content that engages readers across the globe—but what happens if they can’t find it because you aren’t using hreflang tags?
High-quality content shouldn’t go to waste, which is why the technical side is so vital to a multilingual blog’s success. You want to use every tool in your SEO toolkit, and that’s where hreflang tags come in.
If you’ve never heard of hreflang tags before, don’t worry. This guide will answer a few important questions about this technical topic, including why they matter and how to add them to your website.
See also: 5 best practices to improve your multilingual website SEO
What are hreflang tags?
Hreflang tags are an attribute that tells Google and other search engines that your website has more than one language. When a user begins a search, Google will quickly determine the top results and which language version of the website best fits the reader.
The primary goal of these tags is to help search engines quickly identify which language version of your website to show a user.
Providing localized content on your website in a user’s native language has demonstrated success, with 55% of internet users preferring to buy in their own language. Thanks to hreflang tags, your audience will quickly find the appropriate language version of your website.
The result? Improved international SEO rankings, increased time spent on your website and lower bounce rates—everything we want from a multilingual website.
How do hreflang tags work on multilingual websites?
Google determines a user’s preferred language based on their IP address and the search query language. For example, if they’re in a Spanish-speaking country, Google will try to provide Spanish results.
When international real estate platform Spotahome partnered with VeraContent, we tailored their content for six different European markets—the UK, Spain, Germany, France, Italy and Portugal.
They have six language versions of their website, each with its own dedicated URL:
- www.spotahome.com
- www.spotahome.com/es
- www.spotahome.com/de
- www.spotahome.com/fr
- www.spotahome.com/it
- www.spotahome.com/pt
See the language indicators at the end of the URL? Since Spotahome is marketing across different countries, they need unique versions for each language market. The dedicated URLs allow search engines to successfully crawl, index and rank these versions.
For more on dedicated URLs and how to structure them, read 5 best practices to improve your multilingual website SEO.
Once the language versions were created and each version given a dedicated URL, Spotahome could then insert the hreflang tags into the header of the page’s source code or submit them through a Sitemap.
Dedicated URLs, while containing country codes, are not the same thing as hreflang tags. Hreflang attributes tell Google what language the page is in and the region the page is intended for.
We’ll get more into how to implement hreflang attributes below. First, let’s look at a generic example to break down hreflang tags and how they work.
Here’s what a hreflang tag actually looks like:
The hreflang attribute is this:
rel=”alternate” hreflang=”x”
Here, the rel=“alternate” tells Google that this page is an alternative version of the original source page. The “x” is where the country and language code goes.
An hreflang tags example code in HTML looks like this:
<link rel=”alternate” href=”http://example.com” hreflang=”en-us” />
“en” tells Google that the page is in English. The “us” shows that it’s meant for US audiences.
Let’s take a look at examples of different English hreflang tags:
Generic English version:
<link rel=“alternate” href=”http://www.example.com” hreflang=“en” />
UK:
<link rel=“alternate” href=“http://www.example.co.uk” hreflang=“en-gb” />
US:
<link rel=“alternate” href=“http://us.example.com” hreflang=“en-us” />
Australia:
<link rel=“alternate” href=“http://www.example.com/au/” hreflang=“en-au” />
Ireland:
<link rel=“alternate” href=“http://www.example.com/ie/” hreflang=“en-ie” />
Why do different anglophone countries require their own version?
Couldn’t we just use one English version for all of the US, the UK, Canada or Australia?
Sure, sometimes language variants have little to no difference and some might even be identical. But sometimes they’re not.
Here’s an example of why we would want localized versions for anglophone countries:
A US-based online retailer wants to start selling products in the UK. Their website content is already in English, but they want their UK website version to show all prices in pounds, while their US version should show USD.
They might also consider changing their product name from “fanny packs” on the US page to “bum bags” on the UK page—“Fanny” in British English is slang for female genitalia. This is just one example of how localizing content requires more than just simply translating content. It takes transcreation, which is the recreation of brand messaging with an understanding of a local market’s culture, language and emotion.
See also: Cultural marketing: Going beyond simple translations
The reverse can also be true, and sometimes you might need two or more variants for the same country. For example, Canada has two official languages: English and French. As of 2019, over 22% of Canadians speak French—which is a sizable market that would get ignored if the Canadian variant is only available in English.
Multiple hreflang tags can be added to the same page if it’s meant for multiple pages. Taking the example above, if the English version is appropriate to use for both the UK and the US (i.e. no currencies, etc.), then you could insert both the UK and US hreflang tags into the same English page to tell Google that this page is suitable for users from both markets.
Now let’s look at why these tags are so important for technical SEO—and why not having them could prove disastrous for building traffic.
Want to hear the latest conversations from our localization and marketing experts? Subscribe to our newsletter for monthly inspiration on localization, global marketing and international SEO best practices.
How hreflang tags improve your international SEO rankings
Introduced in 2011 by Google, hreflang tags have become a vital part of technical SEO.
“I always encourage people to learn a lot about SEO, because I feel like you dip into both of those sides pretty regularly. It comes down to being on the technical side and also being aware of the content (the more human side).” – Jake Peterson, content and SEO specialist at Atiba.
What is the risk of not including hreflang tags?
The necessity of hreflang tags goes deeper than organizing your localized content for your audience.
Hreflang tags tell Google to know when something is canonical—that is, whether it’s original content. So the real danger is, without hreflang tags, if you have two language versions that are overwhelmingly similar (think British English and US English versions), Google might flag them as duplicates. And it’s common SEO practice to avoid duplicate content at all costs.
This could lead to these pages on your site competing with each other for rankings or, worse, being penalized and not showing up in searches at all.
That’s really bad news.
According to Google’s Gary Illyes, “pages in a cluster…should be able to use each other’s ranking signals.”
He clarifies that this doesn’t mean that every page in a cluster will rank the same. Just because your English version does well in an English market doesn’t mean it will automatically perform the same way in a Spanish one.
However, it does tell search engines that the pages are equivalent, and they can start sharing ranking signals. It might even help a page get indexed, if not already.
These ranking signals can help promote versions of the page—and build traffic, increase time spent on the page and lower bounce rates. Great news!
See also: Top 8 localization tools to optimize all your digital content
How to add hreflang tags in WordPress: 3 steps
We can break down adding hreflang tags on your multilingual website into 3 steps.
Step 1: Are you using a CMS?
Confirm whether or not your website is using a content management system (CMS) that allows you to have different language versions and a shared database. We recommend using WordPress for your website’s CMS.
Step 2: Create more than one language version of your content
Create localized versions of your blog with dedicated URLs. As with Spotahome, your homepage, landing pages, blog posts, etc., should have unique localized versions for your target markets.
This is easier said than done. An agency that understands multilingual SEO content is instrumental in ensuring that users encounter all the right cultural nuances and tone they want in their web user experience.
Step 3: Choose your implementation method: plugin, HTML or Sitemap
Once you’ve localized versions of your pages, it’s time to implement hreflang tags.
“Hreflang is one of the most complex aspects of SEO (if not the most complex one). Feels as easy as a meta-tag, but gets hard really quickly” – John Meuller, Google’s expert on hreflang.
There’s a debate about which method is best, but most experts agree using plugins or adding hreflang tags with HTML is probably the easiest way to do it if you’re a beginner.
Plugins
One way to implement hreflang tags in WordPress is using a plugin. Experts recommend Screaming Frog Spider Tools or HREFLANG Tags Lite to quickly generate and implement hreflang tags.
See also: 8 best tools for running an effective multilingual blog
HTML
Let’s say you have several language variants you want search engines to know about. Using an example from Google, you have:
- https://en-gb.example.com/page.html (the English UK version)
- https://en-us.example.com/page.html (the English US version)
- https://en.example.com/page.html (the English non-specified location version)
- https://de.example.com/page.html (the German version)
- https://www.example.com/ (the default, non-specified location or language version)
Under a page’s <head> section, you will add the hreflang attributes for each version. This example includes a default attribute, which would direct all non-specified language users to a generic page (of your choosing).
<head>
<title>Example Company Name</title>
<link rel=”alternate” hreflang=”en-gb”
href=”https://en-gb.example.com/page.html” />
<link rel=”alternate” hreflang=”en-us”
href=”https://en-us.example.com/page.html” />
<link rel=”alternate” hreflang=”en”
href=”https://en.example.com/page.html” />
<link rel=”alternate” hreflang=”de”
href=”https://de.example.com/page.html” />
<link rel=”alternate” hreflang=”x-default”
href=”https://www.example.com/” />
</head>
You can add as many hreflang tags to a page as you need. There’s no limit.
We recommend consulting Google’s guide for a more technical deep-dive on implementing hreflang tags manually.
Sitemaps
XML Sitemaps are a newer way to implement hreflang tags. Some experts believe this is a better method as it’s all contained in a single file, reducing clutter in your pages’ code or the need to update the HTML if you delete a page.
To tell Google what language and regional variants you have, you will add a <loc> element indicating the URL to the sitemap, with child “<xhtml:link rel=”alternate” hreflang=”example supported language code here”> for every alternate language version you have.
If you have six language variants, you will add six entries. You will then upload the sitemap to a directory on your website.
Google’s instructions on how to use sitemaps for this purpose have a more detailed breakdown, including examples of how to build out each language version entry.
5 common mistakes people make when adding hreflang tags
Implementing hreflang tags can get quite complicated, but it’s important to get them right. To ensure you’re applying hreflang tags best practices, make sure to avoid doing all of the below.
1. Not self-referencing
Each web page must list itself. So be sure to add a self-referencing hreflang tag to every page.
2. Forgetting to link all versions to each other
All hreflang versions must have a reciprocal relationship. If you link to an alternative version, then the alternative version must link back. This demonstrates to search engines that you own both web pages, and that they have a relationship to each other. Just like real life relationships, it has to go both ways.
3. Dedicated URLs/ccTLDs aren’t enough
One of the most common mistakes with hreflang tags, according to Search Engine Journal, is believing dedicated URLs or ccTLDs (country code top level domains such as “co.uk”) are enough to tell Google what language/region a page is intended for. It’s not, and this can be especially confusing when a country has different languages, like Canada and Switzerland. You still need hreflang tags.
4. Using the wrong codes
You need to use ISO language and country codes in your hreflang attributes. It won’t recognize regional codes like EU, EEUU, etc.
While you don’t need to memorize all potential country codes when working with hreflang, be sure to double check the codes for which alternate versions you’re targeting. They’re not always intuitive.
For example, the UK is “gb” and not “uk.” Many companies try to input “es-la” for their Spanish language Latin American site. While actually, LA is the code for Laos, so you’re telling Google that the page is suited for Spanish speakers in Laos.
For help with generating tags correctly, we recommend Aleyda Solis’s online tool.
You also can’t merge regions into one hreflang, for example, “en-us-gb-au.” Instead, you must write the tag out for each language version. If you want to provide a catch-all URL for unspecified geographical English users, Google says you could point them to a generic “en” page, as we showed above.
5. Hreflangs aren’t a directive
Nothing is guaranteed with hreflang tags. They’re a signal, not a directive, which means that other SEO forces can override what they tell Google. Still, research by SeerInteractive shows that, if implemented correctly, they can significantly increase website impressions.
What comes next?
According to SEMRush, over 75% of websites have hreflang implementation errors. So it’s important to check, and check again! Whether you’re using HTML or Sitemaps, Merkle’s tool is effective for validating hreflang tags on a live page.
John Meuller, Google’s specialist on hreflang tags, described these meta-tags as one of the most complex facets of SEO. When prompted for a video explanation, he said, “it feels more like a multi-semester course than a 5-minute video to me.”
Between multiple languages, dozens or hundreds of product categories and pages, or pagination, implementing hreflang tags can quickly become more of a headache than you want to deal with.
That’s why many companies seek the right agency who understands their international SEO needs. An agency can take the complexity of hreflang tags off your hands while ensuring your company connects with new audiences worldwide.
At VeraContent, we specialize in helping brands effectively develop their international and multilingual SEO strategy. Our experts understand both the creative and technical side of SEO. To learn more about our expertise and services, reach out to us today.
Download our interactive worksheet to help you adapt your content strategy to local markets:
