Hreflang for Beginners ‑ Harnessing Global SEO
Hreflang can play a major role in the success of your international SEO strategy. Hreflang tags help search engines understand which international page variation they should send users to.
But getting hreflang wrong can lead to several issues: Google may rank the incorrect page version for the language or region or may choose to not rank the page until the hreflang signals are correctly defined.
The source of this problem? Poor hreflang implementation and that's rooted in the fact that hreflang tags can not only be tedious to implement but also difficult to understand. That's why my goal is to help you learn, step by step, what hreflang is, why it's used, and how to use it.
All that said, there's a lot of information here, so I won't take up any more time. Let's begin.
Hreflang 101
What is Hreflang?
Hreflang tags signal to search engines which is the best page language variation based on a searcher's language settings.
If your site has the following page variations: "site.com/en" and a "site.com/cn", hreflang tags will help search engines understand which of those pages are, in fact, the English version and the Chinese version. As a result, Google will correctly return the appropriate language version of those pages in the search results: the English variation will display to English speakers in the U.S, the Chinese variation will display to Chinese speakers in China.
Do I Need Hreflang Tags?
If you have multiple localized page versions on your site, then it is strongly recommended that you use hreflang tags. Without hreflang tags, Google may confuse which alternate URLs should be returned to your international audiences in the search results. I've seen that happen many times: UK pages ranking in the U.S., English pages ranking in Spanish-speaking countries, etc. The problem becomes even more amplified the more alternate URLs there are on your site.
Google does say that even without using hreflang tags, they still might find alternative language versions on your site. While that is true, it is not guaranteed. That's why it's better to avoid any mix-up and just tell Google outright which alternate language versions are for which international targets; in fact, Google recommends it: "it is usually best for you to explicitly indicate your language- or region-specific pages."
How Do Hreflang Tags Work?
Google "reads" your hreflang tags and from that assessment directs your target audience to the appropriate page variation in the search results.
Hreflang tags can be used in any of the following ways:
- The
<head>section of your HTML document - By returning an HTTP header with your page's GET response
- Or (what I prefer) in an XML sitemap
More details on how to use each can be found in Google's hreflang guide.
ISO Language and Country Codes
Hreflang tags must label each of your international page variations with an internationally recognized language format that Google recognizes and supports: a two-letter abbreviation associated with a language and country. These codes are found in the following resources; this one's for languages: ISO 639-1 and this one's for countries: ISO 3166-1 Alpha 2. These Wikipedia sources can be a bit overwhelming to sift through, so feel free to use this hreflang code source, which is much more user-friendly.
So, for example, let's say you wanted to target English speakers using, naturally, English pages, you would use the following value in your hreflang attribute:
"en"
Alternatively, if you wanted to target Spanish speakers using your Spanish page variations, you would use: "es"
Here's what the hreflang tags would look like:
For English users:
hreflang="en"
For Spanish users:
hreflang="es"
Should Hreflang Tags Still Be Applied If the Page is Already Translated?
Although Google can detect the language of your page and can sometimes correctly serve up the page to your international targets, you shouldn't leave it up to Google to manage this, especially if you own a large site with many localized pages. As I've stated before, I've seen Google rank the wrong pages across countries plenty of times for sites with bad hreflang or no hreflang.
As a best practice, use hreflang tags to explicitly tell Google which international page variations should be served up to which international audiences. That way, you prevent your alternate language versions from being ranked incorrectly or not indexed at all.
Basic Hreflang Syntax
Although this article aims to help you understand hreflang tags at a basic level, you should know at least some of the basic syntax surrounding hreflang tags, as you will encounter them as you advance in your understanding of hreflang.
They are:
hreflang- signals to search engines the target language and region of a pagehref- specifies the URL of a pagerel -"alternate" - indicates an "alternative page"<link>- defines a link in an HTML document<xhtml:link>- defines a link in an XML document<url>- the "parent" tag for each URL entry in an XML document<loc>- specifies the absolute URL in an XML document
For now, it's not critical to know all of this, but be mindful of them as you grow in your knowledge of hreflang.
How to Target Languages and Countries Using Hreflang
Now that you know what hreflang tags are and what ISO code is, and that you need to use ISO code in the form of a two-letter abbreviation within your hreflang attribute, we can talk about how to build hreflang tags to target a list of page variations.
Remember: you can implement hreflang in any of the following ways:
- In the
<head>section of your HTML source code - Using HTTP headers
- In an XML sitemap
You should reference Google's hreflang doc to decide which to use, but from my experience, implementing hreflang using an XML sitemap, as opposed to doing it in HTML, has been the easiest to implement, test, and monitor. I have yet to use HTTP headers, but I do know that there are particular use-cases for those that are beneficial, like if you want to use hreflang for non-HTML files like PDFs. You can find out more information about that here.
An Example of How to Use Hreflang on Two Page Variations
Let's say you have two page versions: one targeting English speakers in the U.S., the other targeting Spanish speakers in Mexico.
Step one would be to find the two-letter abbreviation designated for English and Spanish speakers as well as the two-letter abbreviation designated for the United States and Mexico; you can use this hreflang table to find that; it's based on ISO format code. In our case, the table shows the following abbreviations for our particular use-case:
English --> "en"
Spanish --> "es"
United States --> US
Mexico --> MX
Now that we have that figured out, we can use the above ISO codes for our page versions in the form of hreflang tags (with the additional hreflang syntax required).
Here's what this would look like:
Using hreflang in HTML:
Using hreflang in an XML Sitemap:
(To view how to format hreflang tags via an HTTP header response, check out Google's hreflang HTTP header guide. As I mentioned earlier, I have not used this particular format, so the above resource will be more helpful.)
The biggest takeaway from the above screenshots is this: two-letter abbreviations (in ISO format code) are contained in the hreflang attributes "hreflang" and are used to identify both the language and country of each URL version: "en-us" for the English page targeting English speakers in the U.S. and "es-mx" for the Spanish page targeting Spanish speakers in Mexico. Google will understand these signals and will be able to return the correct page versions on search engine results pages to the respective target audiences.
The surrounding syntax you see in the screenshots (rel …<loc>...<url>), which I highlighted earlier in the article, is not too important to know for now. What matters at least is to know that, depending on which hreflang format you use, (HTML, XML Sitemap, or HTTP Response Header), it will require integrating different syntax elements into your hreflang environment; otherwise, the href and hreflang attributes remain the same across the formats.
Adding "Return links" - You MUST Get This Right
This part of the article cannot be overstated, and it's the biggest issue I've seen in hreflang work done by clients. If you do not get this right, there's a high chance that Google will not process the tags correctly or they may ignore them altogether. In fact, here's what Google has to say about it: "If two pages don't both point to each other, the tags will be ignored."
So, What Are Return Links, Anyway?
There's really no clear definition for this in the SEO community, and Google's definition is rather obscure: "If two pages don't both point to each other, the tags will be ignored”…elsewhere: "If page X links to page Y, page Y must link back to page X."
What exactly does Google mean by pages linking back to each other? Well, what Google means is this: page versions must link back to each other within their respective <link> infrastructures in the designated hreflang environment (my definition). That still may sound confusing to you, so here's an illustration showing proper "return links" to show you what I mean.
Above, both formats target three page versions, but only one is correct.
The "incomplete" version, although it addresses each page version correctly using hreflang tags, lists only one page version within an <url> element. In contrast, the "complete" version correctly contains every page version within its own <url> element; every page version also includes its respective hreflang tags. In short, the complete version hosts all the page versions, which "link back to each other" within their respective hreflang infrastructures. That is what is meant by "return links." I hope that is clear!
If that's still confusing, I've illustrated what a correct "return link environment" would look like in an XML sitemap based on Google's sitemap guidelines for hreflang, using an XML sitemap:
Going the HTML source code route would be similar except that the hreflang tags would be placed within the HTML source code of each individual page version. Also, HTML format requires only <link> elements, as opposed to a sitemap's <url>, <loc>, and <xhtml:> elements.
Here's what a correct "return link environment" would look like in the HTML source code for each alternate page, based on Google's HTML guidelines for hreflang:
Page Versions (In the HTML Code) Should Use a Self-Referencing Canonical Tag
Notice the "canonical" tags in the above screenshot. Each page version canonicals to itself. Make sure each page version canonicals to itself to avoid potential duplication issues, incorrect targeting, and even de-indexation.
What Is X-Default?
X-default is an hreflang signal that tells search engines the preferred URL to display to users on a search engine if no other language on your site matches the user's language setting on their browser. So let's say you have only English and Spanish versions on your site but a user, who speaks Italian, finds one of your pages on Google.
What do you do?
Well, if you're like me, I like to set the English page versions on my site as the x-default, as English is rather a globally recognized language, and international users will at least be able to understand some English on the site once they land (is what I hope when I set English pages as the x-default). It's either that or leave it up to Google to "guess" the best page option for you. Your choice.
Taking a look at the image below, the x-default tag is telling Google that out of the three page versions, "Page version A" should be the default page to display in the search results if no other language matches a user's language setting.
Keep in mind, x-default is optional, but I do like to use it as a last resort if my site has no language option for the user. It will be totally up to you to decide which localized page version you’d like to set up as your "x-default" or if you’d like to leave it out altogether.
Common Mistakes
Assuming Hreflang Tags Support Global Site Navigation
Hreflang will have nothing to do with that.
Not Including Return Links
Refer to my thesis above on return links.
Positioning the Language Code Last In the Hreflang Attribute
In the hreflang attribute, the language code should go first, followed by the region code.
Example of targeting English speakers in the U.S.
Incorrect example:
hreflang="us-en" />
Correct example:
hreflang="en-us" />
Relying on Localized URL Descriptors Instead of Hreflang Tags
Don’t rely on local descriptors in the URL as a sort of hreflang substitute.
Example:
www.site.com/es/mexico
Without hreflang tags, Google cannot assume the above URL should be intended for Spanish speakers in Mexico based on the URL structure. In fact, here's what Google has to say about it: "We don't use any code-level language information such as lang attributes, or the URL."
Overall, there's a reason why Google has gone out of its way to provide extensive documentation on how to build hreflang tags—that's because Google needs it!
On Page Translation
Admittedly, Google can know what a page's language is and may even correctly serve up the page variation. I've seen it. Still, there's a higher chance that without hreflang tags, Google will serve up the incorrect page versions to your audiences. I've seen that happen way more times. The issue becomes even more problematic the more page versions you have on your site.
In short, don't rely only on page translation as the only targeting method. Instead, couple your efforts by using hreflang tags to tell Google explicitly what to do with your alternate URLs.
Using "uk" Instead of "gb" to Target the United Kingdom
Do not use "uk" to target the U.K. It is not recognized by Google. Instead, use "gb" (as it stands for "Great Britain"). Here's the incorrect and correct way to target, for example, English speakers in the U.K.
Incorrect:
<link rel="alternate" href="site.com/uk" hreflang="en-uk" />
Correct:
<link rel="alternate" href="site.com/uk" hreflang="en-gb" />
Using Country Codes Alone In Hreflang Tags to Target Countries
Let's say you want to target Mexico. In this case, you can't just use hreflang=. Instead, here's how you would target Mexico:"mx"
Incorrect:
<link rel="alternate" href="site.com/spanish" hreflang="mx" />
Correct:
<link rel="alternate" href="site.com/spanish" hreflang="es" />
OR
<link rel="alternate" href="site.com/spanish" hreflang="es-mx" />*
Google assumes that a single ISO code as your hreflang value means you are targeting a language. So in the above case, there would be no language code for "mx."
The correct way to target Mexico, then, would be to use both the language code followed by the country code or...
* …by only using the language code "es" in your hreflang tag. In this case, using only the language code "es" will target any Spanish speaker globally (and obviously including those in Mexico).
A Special Note About Using Hreflang to Target Spanish Speakers
Although there are differences in dialect across Latin America as well as Spain, the Spanish language is generally understood the same way, with few literary differences. Therefore, if you have Spanish page versions and you want to simplify your hreflang efforts, you can just use "es" which will target any Spanish speaker worldwide. That said if you have the infrastructure to target Spanish-speaking audiences across their differences in dialect, in terms of locale, then go for it!
Non-Hreflang Targeting Methods (Geo-Targeting)
Other international targeting methods not requiring hreflang tags are available to use. However, there are pros and cons to each and they should be taken into careful consideration. A good source with more information on which to use can be found here and here. That said, the prevailing wisdom is that, in terms of cost and SEO value, using hreflang tags within a single domain can be the most effective way to scale your international targeting efforts. That said, if you'd still like to explore other options, here's a general breakdown of what's available:
Country-code top-level domains: Best for targeting countries, as these use country codes in the TLD (site.cn for China, for example). This tells search engines that you explicitly want to rank in China. However, ccTLD's can be costly to maintain and carry additional SEO risk (example: loss of link equity between your alternative site versions).
International targeting report: You can use Google's international targeting report to indicate which country you'd like to target. However, this action is limited to targeting only one country per site. In contrast, with hreflang tags, you can target numerous countries as much as you can correctly apply the hreflang tags across your multiple language page versions.
Monitoring Progress
Once you have your hreflang tags live (or on a testing server that is crawlable by Google), you can check for issues inside of Google Search Console under "Legacy Tools and Reports," in the international targeting menu. This will let you know what tag issues there are and where they're located. Most commonly, in these reports, I tend to see return tags that are missing, or "return links," which I talked about earlier. So be prepared for that.
Congratulations! You Passed Hreflang 101
Hreflang is a tough subject, but once you understand the basics, it will be easier to spot any glaring issues and confidently communicate those issues to development teams.
After reading this article, generally, you should know how to:
- Assign the correct ISO format codes within the
hreflangattributes across your page variations. - Choose whether to apply the tags in an HTML source code, XML sitemap, or HTTP header response.
- Ensure all the page variations are cross-linking within their respective
<link>elements. - After implementation, check your progress in Google Search Console under "Legacy Tools and Reports," in the international targeting menu.
Until then, happy optimizing!
