If understanding and using hreflang isn’t already in your technical bag of tricks, this might be the time to add it. Hreflang is an HTML attribute that helps Google factor a user’s language and location into the decision of which pages will show up in search. While hreflang is a simple HTML attribute, it can be challenging to grasp and implement.
So why bother? Here’s why: hreflang is possibly the single most important facet of creating SEO content for sites with similar content in multiple languages. So, rest assured: the payoff will exceed any pain associated with the process — plus it will get you noticed. What’s not to love about that?
What Are Hreflang Tags?
Hreflang is code — specifically, an HTML attribute — that specifies all the URLs on a site that utilize the same content. The hreflang attribute was introduced by Google over a decade ago and allows users to show the relationship between multiple web pages in various languages. This proves useful when content is created for a specific audience. For companies with multiple versions of the same webpage in different languages, the hreflang tag tells search engines about these variations and helps deliver the correct version to users.
For example, if someone Googles “Ikea” in the U.S., they’ll see this result:
While the same query by a searcher in Canada, would return this result:
Why all the fuss? The hreflang tag helps deliver results to users based on their country and language preference, making the hreflang tag’s meaning invaluable: it optimizes user experience and leads to improved search rankings. How’s that for a win-win?
Why Does Hreflang Matter for SEO?
It all boils down to personalized results. All the hard work of translating a web page into multiple languages is lost if a user isn’t directed to the results tailored for them. In short, hreflang SEO allows Google to provide the most appropriate version of a company’s web page to users based on their language and location. Got a page that’s optimized for a user’s particular preferences? Not only do you want them to land there, but you also want them to linger — for a handful of reasons — and hreflang tags SEO is how to do it.
Implementing this practice improves user experience, minimizes bouncing back to the search results, and yields higher rankings. (If at first you don’t succeed, try, try again is not necessarily a helpful proverb when navigating web-based searches). The goal here is not getting increased traffic, rather serving the right content to the right users, who want quick, reliable returns. Hreflang tags are the key to achieving these nuanced results.
Need another reason? Using a hreflang eradicates the issue of duplicate content. Imagine your company offers the same content in English on different URLs aimed at the US and Canada; the differences are likely minute and reflected in currency details (USD versus CAD) and lingo (imperial versus metric system).
A hreflang tag tells search engines how to recognize and understand the relationship between these pages — and the distinct audience for whom each was created. Without hreflang, Google might be inclined to see these pages as duplicate content and return just one in search results; with hreflang, it is very clearly communicated to the search engine that although the content is (largely) the same, it’s optimized for different populations. How’s that for a feather in your cap (or touque, for our Canadian friends)?
These details matter, so read on to learn more.
What Do Hreflang Tags Look Like?
Hreflang tags are simple, consistent, and use the following syntax:
<link rel=“alternate” hreflang=“x” href=“https://www.example.com/new-page” />
This format communicates that the linked page is an alternate version of the current page, appearing in language “x.” Hreflang tags serve as signals for search engines, not directives. In other words, the hreflang attribute signals to Google that a user who queries using language “x” will prefer this result over a page with largely similar content in language “y.” Another difference between signals and directives? Google may not recognize hreflang attributes if deemed inaccurate — resulting in other SEO factors overriding the hreflang attribute, causing an alternate version of your company’s page to rank higher than the best version.
Using Hreflang HTML
For websites that have been translated into multiple languages, constructing a link rel alternate hreflang tag is as simple as 1-2-3. Each of these steps uses the syntax mentioned above (<link rel=“alternate” hreflang=“x” href=“https://www.example.com/new-page” />) as the foundation.
- The hreflang attribute must contain a valid value that consists of the language; this information is communicated in a two-letter code called ISO 639-1 format. If you wanted to translate the example page into Portuguese, for example, it would look like this:
<link rel=“alternate” hreflang=“pt” href=“https://example.com/portugese-version” />
The region is optional and, if being used, should be in ISO 3166-1 Alpha 2 format. Here are two different tags you could utilize to target Portuguese speakers in Portugal and Brazil, respectively:
PT-PT: <link rel=“alternate” hreflang=“pt-pt” href=“https://example.com/pt/our-page” /> PT-BR: <link rel=“alternate” hreflang=“pt-br” href=“https://example.com/br/our-page” />
Regional codes are not necessarily as intuitive as language and country codes (the code for the UK is “gb” not “uk”), so double check! Use this list to verify accurate language codes before before embedding the wrong information across your site.
- Each URL needs to return links to every other URL, all of which should point at the canonical, or preferred version of a given website. The more languages you have, the more html hreflang link elements you’ll need; while it might be tempting to limit them, it’s impossible to avoid this step.Furthermore, rel=”alternate” hreflang=”x”markup and rel=”canonical” can and should be used together. Every language should have a rel=”canonical” link pointing to itself. Starting from the example.com homepage, that would look like this:
<link rel="canonical" href="https://example.com/"> <link rel="alternate" href="https://example.com/" hreflang="pt" /> <link rel="alternate" href="https://example.com/pt-pt/" hreflang="pt-pt" /> <link rel="alternate" href="https://example.com/pt-br/" hreflang="pt-br" />
For more about canonicals, read, Canonical Tags & URLs: A Simple Guide For Beginners.
- The final step to successful hreflang construction is rooted in self-links. A hreflang attribute on each page requires a reference to itself and any pages that serve as an alternate for it. Google highly recommends setting an “x-default” page that establishes a single URL as the default version that does not target a particular language or region for visitors that fall outside what is specified.If one visited the pt-pt page, only the canonical would change:
<link rel="canonical" href="https://example.com/pt-pt/"> <link rel="alternate" href="https://example.com/"hreflang="pt" /> <link rel="alternate" href="https://example.com/pt-pt/"hreflang="pt-pt" /> <link rel="alternate" href="https://example.com/pt-br/"hreflang="pt-br" />
It’s a lot to digest! But you made it this far, which means you’re ready for the next step: learning how to implement hreflang tags.
Implementing Hreflang Tags
There are three ways to implement hreflang tags, and it all boils down to placement:
1 – Implementing Hreflang Tags Using HTML:
For those new to hreflang, utilizing basic HTML tags is the easiest and quickest way to get going. Simply add any appropriate hreflang tags (see above) in the <head> tag of your web page.
Example: The web admin of example.com wants to make their homepage accessible to English-speaking and Spanish-speaking users in the United States; using the following annotations in the <head> of their site’s HTML accomplishes this:
<link rel="alternate" href="https://www.example.com" hreflang="en-us" /> <link rel="alternate" href="https://www.example.com/es" hreflang="es-us" />
If they wanted to show the homepage to Spanish-speaking users in Venezuela and Mexico, the hreflang annotation would look like:
<link rel="alternate" href="https://www.example.com/ve" hreflang="es-ve" /> <link rel="alternate" href="https://www.example.com/mx" hreflang="es-mx" />
The single biggest drawback of this method? Hreflang HTML can become messy and time-consuming rather quickly. Also, remember there’s a difference between the <head> and <header> elements; the <head> contains elements that will not appear on the page, in this case, the hreflang attribute.
2 – Implementing Hreflang HTTP Headers:
For PDFs and non-HTML content on your website, use HTTP headers to implement hreflang. The name is a bit misleading: implementation is not done on-the-page via <head> or <header>. Instead, it’s all done on the backend of a site. Using HTTP headers not only specifies the relative language of document variants but also optimizes this content.
Example: To identify a PDF document on your site in English and French versions, the link appearing in the HTTP header will look like this:
Link: <https://en.example.com/document.pdf>; rel="alternate"; hreflang="en", <https://fr.example.com/document.pdf>; rel="alternate"; hreflang="fr"
The biggest drawback to this method of implementation? Using HTTP headers adds overhead to each request made on your site, which can slow down the user’s browsing experience.
3 – Implementing Hreflang In Your XML Sitemap
The final option for implementing hreflang is using XML sitemap markup; this uses the xhtml:link attribute in XML to add the annotation to every URL.
While there’s more than one way to implement hreflang into your XML sitemap, we recommend something like this:
Alternatively, you could use some of the examples below.
A word of caution: the markup needed for a single URL with a pair of language/location variables will appear lengthy! That said, read on for the benefits. (There are many!)
Example:
<url> <loc>https://www.example.com/uk/</loc> <xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/" /> <xhtml:link rel="alternate" hreflang="en-au" href="https://www.example.com/au/" /> <xhtml:link rel="alternate" hreflang="en-gb" href="https://www.example.com/uk/" /> </url>
Notice the third URL is self-referencing; this specifies the particular URL is meant for en-gb, and it specifies two other language/location combinations. Now, implementing both of those URLs into the sitemap would look like this:
<url> <loc>https://www.example.com/</loc> <xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/" /> <xhtml:link rel="alternate" hreflang="en-au" href="https://www.example.com/au/" /> <xhtml:link rel="alternate" hreflang="en-gb" href="https://www.example.com/uk/" /> </url> <url> <loc>https://www.example.com/au/</loc> <xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/" /> <xhtml:link rel="alternate" hreflang="en-au" href="https://www.example.com/au/" /> <xhtml:link rel="alternate" hreflang="en-gb" href="https://www.example.com/uk/" /> </url>
Assuming you’re able to look past the sea of text, you’ll notice only the URLs within the <loc> element are being changed—everything else stays the same! Whew. This method relies on each URL having a self-referencing hreflang attribute and returns links to other URLs.
Looks like a lot of work, right? On the one hand, yes, this method is lengthy and requires quite a bit of output when doing this for many URLs. That said, the benefit is simple: normal users won’t be bothered by this markup; there is no extra page weight added, and generating this kind of markup doesn’t require a lot of database calls on page load.
Finally, implementing hreflang through the XML sitemap comes with a major benefit—everything is defined in a single file. This eliminates the need for editing multiple HTML documents each time a page is changed or deleted. Plus, zero site slowdown. In other words, there’s a lot to like!
Still not sure which mode of implementation to choose? For more tips on website architecture and site structure, visit technical SEO best practices.
Finding & Fixing Hreflang Issues
Now that you’ve successfully implemented hreflang on your website (insert virtual high five here!), maintenance is a must. Running a regular audit of your chosen implementation will ensure it’s set up correctly. Communicating with individuals in your company who deal with site content will go a long way—you want them to know about hreflang, so they don’t unintentionally break your implementation!
Two critical points bear mentioning here: If a page is deleted, check whether its counterparts have been updated; when a page is redirected, change the hreflang URLs on its counterparts. Assuming you and your team do these things consistently and audit regularly, it should be smooth sailing.
In the meantime, here is a quick rundown of the most common hreflang mistakes and how to fix them:
1 – Self-reference hreflang annotation missing
What’s the big deal?
It’s important to use a self-referencing hreflang tag each time you add a hreflang tag to a web page. Remember Google states, “each language version must list itself as well as all other language versions.”
How to fix it:
Review any affected pages and add a self-referencing hreflang tag to the original language version using your chosen method of implementation.
2 – Hreflang annotation invalid
What’s the big deal?
Search engines ignore invalid hreflang tags, which leads to alternate versions of your web page being overlooked.
How to fix it:
Review affected pages and remove invalid hreflang tags and replace with those that use valid language/location code formats.
3 – Page referenced for more than one language in hreflang
What’s the big deal?
Each piece of content is designed to serve a single language/language-location. Two or more conflicting references will confuse search engines and cause the hreflang attributes to be ignored.
How to fix it:
Review affected pages and inspect URLs that reference a particular page in their hreflang attributes for errors. Remove any incorrect hreflang attribute and leave only one correct attribute per language.
4 – Missing reciprocal hreflang (no return-tag)
What’s the big deal?
Hreflang tags are bidirectional (if page A links to page B in hreflang annotations, page B must link to page A in return).
How to fix it:
Review affected pages and add bidirectional hreflang tags where needed. Note: the international targeting report in Google Search Console (found under the “language” tab) will flag all instances of missing return tags.
For example:
5 – Hreflang to non-canonical
What’s the big deal?
Rel=“alternate” hreflang=“x” instructs search engines to display the translated (localized) version of a page; rel=canonical attribute will flag that this isn’t the authoritative (canonical) version. These contradicting attributes will confuse search engines.
How to fix it:
Review affected pages and modify hreflang annotations, so they point to canonical URLs only. If you stumble upon a page with an invalid canonical tag, remove it. This ensures the hreflang attribute is properly understood and followed by the search engine.
6 – Hreflang & HTML language mismatch
What’s the big deal?
Search engines (other than Google) become confused when there’s an inconsistency between the declared hreflang and HTML language attribute for one or more URLs; it’s important to keep these two attributes consistent with one another.
How to fix it:
Review affected pages and change the HTML language attribute to ensure it remains consistent with the declared hreflang attribute.
7 -Hreflang to a broken page
What’s the big deal?
Google can’t return content that does not exist! Therefore, hreflang attributes that point to dead pages will be overlooked.
How to fix it:
Review affected pages and change hreflang annotations to ensure they link to working pages.
8 – More than one page for the same language in hreflang
What’s the big deal?
When one or more URLs reference two or more pages for the same language (or language-location) in hreflang annotations, the search engine becomes confused.
How to fix it:
Review affected pages and remove one of the hreflang annotations, so a single page is referenced for each language.
9 – X-default hreflang annotation missing
What’s the big deal?
While x-default hreflang attributes are optional, they are recommended as an SEO best practice for all hreflang annotations.
How to fix it:
Review affected pages and ensure each has an “x-default” hreflang attribute set that points to a page NOT specific to a particular language or location.
Still have questions? Check out the Core Web Vitals algorithm update, which outlines additional tech SEO practices you’ll want to be up-to-date on this year.
Issues Google May Ignore
You’ve done your part in following best practices—still, there are going to be times when search engines ignore certain issues. This primarily happens when a search engine sees the same issue repeatedly and believes it can be accounted for on their end. Don’t sweat it! This is actually super helpful. Here are a handful of hreflang tag issues that Google actually “fixes” for you:
- Underscore instead of a dash: This is a common error, and Google accounts for it. Every. Single. Time.
- Using en-UK instead of en-GB: We talked about this earlier…the fact that regional codes are not necessarily intuitive. Rest assured, Google’s got you covered: the UK is a reserved code, which means Google corrects for this common issue.
- Hreflang not having a self-reference: Google has recently stated that the self-referencing hreflang is optional; that said, it remains good practice.
- Relative versus absolute URLs: While both canonical and hreflang can use relative paths, absolute is more absolute! Hence the recommendation to use it when possible.
Redirecting Users: A Word of Caution
In many cases, websites will redirect users based on a combination of cookies, IP address, and/or browser language; beware the redirect! For users, this can translate to a frustrating (read sub-par) experience; for search engines, trying to index your content becomes problematic. Furthermore, redirecting users can break the established connections needed for your hreflang tags.
Here’s what Google has to say about the practice:
Do not use IP analysis to adapt your content. IP location analysis is difficult and generally not reliable. Furthermore, Google may not be able to crawl variations of your site properly. Most, but not all, Google crawls originate from the US, and we do not attempt to vary the location to detect site variations. Use one of the explicit methods shown here (hreflang, alternate URLs, and explicit links).
Treat search engine crawlers as you would a user from any location. Treating the search engine bot differently than you would a user is considered cloaking—the practice of presenting different content or URLs to human users and search engines—is a violation of Google Search Essentials.
Want an approved fix that provides users with the results they expected? Use the same detection logic to suggest a better version of the page for the user on a small banner. The one caveat is, if it’s too large, it could be seen as an interstitial (causing content to be fully or partially obscured for the user).
Hreflang Pro Tip
There’s a Google Chrome extension that automates the process of checking a site’s hreflang deployment. Get the inside scoop about this and other SEO Chrome add-ons that can help you manage daily SEO maintenance.
Conclusion
Understanding, utilizing, and troubleshooting hreflang is a requirement for today’s SEO. Want to be sure you’re doing everything you can to boost your site’s visibility in every corner of the world? Victorious digs deep to discover local cultural tendencies and buying patterns that influence search to determine the best strategy for your international SEO campaign.
Ready to get started with an SEO agency? Sign-up for your Free SEO Consultation today—and let Victorious guide you through the process.
