What are Hreflang Tags?
Hreflang tags are an explicit signal for Google to indicate the location and language of a URL’s intended audience. They can be implemented as a link in the HTML <head>, XML sitemaps, or HTTP header.
Google introduced hreflang tags in 2011 to help search engines understand the internationalization of a page – specifically the location and language (ex: a page should be returned for French Canadian queries or UK English queries). While the hreflang tags are often butchered in their implementation and disregarded, they are Google’s solution to understanding international targeting.
Previously, Google relied on other, less definitive, indications to guess when a URL is relevant to a query. To do this Google would look at indications such as:
- Subdomain: .ca.site.com
- URL structure: site.com/uk/en/
- Server location
- Location targeting in Google Search Console
As Google was working off of inferred information, there were a lot of problems – you would see results from a non-relevant website in Spain ranking for a query in Mexico. While there are still a lot of internationalization problems, properly implemented hreflang tagging helps.
How Does Hreflang Work?
There is a lot of confusion about what hreflang tags do and what they don’t do. Hreflang tags will help you rank the appropriate version of your content. Ex: If you have two versions of your page, site.com/us/page-a and site.com/uk/page-a and Google is currently ranking site.com/us/page-a for a query on google.co.uk, hreflang tags will help site.com/uk/page-a rank inplace of site.com/us/page-a.
Hreflang will not help you rank in another country. Ex: if site.com/us/page-a ranks #1 in google.com, implementing hreflang tags will not magically make site.com/uk/page-a rank #1 google.co.uk.
Where to Implement Hreflang Tags
Google gives you three different ways to implement your hreflang link tags:
- HTML <head>
- XML Sitemaps
- HTTP Headers
Implementation in the HTML <head> and XML sitemaps are the most common solutions. There is no best hreflang implementation method. The first step in deciding which implementation method to use is to talk to the development team who will be implementing the hreflang tags. You should ask a) if any implementation methods are not possible and b) if there is a difference in the level of effort associated with the different methods.
These constraints may inherently select your implementation method for you. If not, there are a few considerations:
HTML <head>
If you have a lot of language and country permutations, you could end up with a very extensive list of hreflang tags. While typically minimal. this could add to the page size – if site speed is a critical issue for your organization, an HTML <head> implementation might not be the right fit. Despite the added page load, I typically advocate for implementing hreflang tags in the HTML <head> section as it is the easiest to verify – you can simply look in the source code. Additionally, this implementation can be picked up by more tools like Screaming Frog.
XML Sitemaps
Implementing hreflang tags in your XML sitemaps won’t add to your page load time, but it is more difficult to verify proper implementation. If you have large XML sitemaps, they can take a long time to load. Additionally, if the linked pages are in a different sitemap (ex: site.com/us/sitemap.xml and site.com/ca/sitemap.xml), you will have to load both of these sitemaps and then search to find the specific URL that should be linked. All of this makes it a more tedious process to review and verify the hreflang implementation.
HTTP Headers
Any tag (hreflang, noindex, canonical, etc) in the HTTP headers is significantly more likely to be overlooked by SEO’s. When reviewing a page, many SEO’s will look at the source code but not the HTTP headers. As such, I don’t recommend implementing hreflang in the HTTP headers unless this is the only viable implementation method.
Hreflang Example Markup
The hreflang tag is implemented as an “alternate” link tag specifying the language then location:
<link rel="alternate" hreflang="language-location" href="https://site.com/page/" />
Always use the two digit ISO code for your hreflang markup (ex: en, fr, ca, gb). With the hreflang tag, you have two specification options:
- Language only (hreflang=”en”)
- Language and location (hreflang=”en-gb”)
If you try to only specific a location (ex: hreflang=”en”), your hreflang will break and Google will not use your hreflang tags. If you only specify a location which also happens to match an ISO abbreviation for a language (ex: hreflang=”de”), Google will associate that page with the language regardless of the country.
HTML <head> Hreflang Example
<link rel="alternate" hreflang="en-ca" href="https://site.com/en-ca/page/" />
XML Sitemap Hreflang Example
<url> <loc>https://site.com/en-ca/page/</loc> <xhtml:linkhreflang="en-ca" href="https://site.com/en-ca/page/" rel="alternate"/> </url>
Pro Tip
If you’re looking at an xml sitemap and it looks incoherent, try checking the source code, often this will be readable.
HTTP Header Hreflang Example
Link: <https://example.com/en-ca/page/>; rel="alternate"; hreflang="en-ca"
Keep reading to see the fully implemented example.
What is the x-default Hreflang Tag?
The x-default hreflang tag is used to specify the default version of your page for searches outside of your specified hreflang tags. Ex: If you specify hreflang tags for en-us, en-ca, and en-uk, but Google thinks your page is relevant for an English query in Australia, specifying the x-default tag will tell Google which page variant they should send users to.
X-default hreflang example
<link rel="alternate" href="https://site.com/" hreflang="x-default" />
Note: the x-default tag is optional. You won’t break your hreflang tags if the x-default is not there.
How to Implement Hreflang Tags
Still with me? There are a few more rules for properly implementing your hreflang tags.
Reciprocal linking
If you have pages /us/en/, /uk/en/ and /ca/en/, all of these pages must contain your hreflang tagging. You can’t just put hreflang tags on one of your pages. In order for Google to properly pick up the hreflang tags, every single variation must include hreflang tags.
Self Referencing
Your hreflang tags must be reference not only the variations, but you must also reference the page itself. Example, on /us/en/, you would not only reference /uk/en/ and /ca/en/ but also /us/en/.
Implement on Every Internationalized Page
Hreflang is implemented on the page level, not the domain level. This means that you can’t just add hreflang tags to your homepage but you must add them to every page that you want to specify hreflang alternates for.
302 if you are going to do IP detection
If you do IP redirection to get users to the right variation (ex: if a user types in site.com and you want to redirect them to site.com/us/en/), use a 302 redirect. This is counter intuitive for most SEO’s as we are almost always trying to implement 301’s but this is the way to do it.
Fully Loaded Hreflang Example
Ok, now that we’ve gone through how to implement hreflang, proper formatting and rules, here is an hreflang tag example. Scenario: You have 4 versions of your page that you want to localize. Three of these versions are for specific locations. One version is for all French language visitors. You want the English version to be the default for all other visitors. You also have a Canadian French page that you want to target not only Canadian French users, but all French speaking users with. Pages:
- site.com/us/en/page-a
- site.com/ca/en/page-a
- site.com/ca/fr/page-a
- site.com/uk/en/page-a
- site.com/es/page-a
HTML <head> Hreflang Example
<link rel="alternate" hreflang="en-us" href="https://site.com/us/en/page-a" /> <link rel="alternate" hreflang="en-ca" href="https://site.com/ca/en/page-a" /> <link rel="alternate" hreflang="fr" href="https://site.com/ca/fr/page-a" /> <link rel="alternate" hreflang="en-gb" href="https://site.com/uk/en/page-a" /> <link rel="alternate" hreflang="es" href="https://site.com/es/page-a" /> <link rel="alternate" hreflang="x-default" href="https://site.com/us/en/page-a" />
How to Generate Hreflang Tags
Fortunately for you, Aleyda made this hreflang tags generator that can help you generate the proper hreflang markup for your site >>> link
.
I don’t want country code to be added in hreflang how can we remove that, by default it adding country code even though we didn’t mentioned in code.
ok, only the language is required for hreflang. Country is optional so just don’t put in the country value. From the example above:
Hi Geoff,
Our .com currently autoredirects based on either geo-ip or previous preference to the users location. We have setup .com/en/ as the x-default for all other locations outside of our key regions Aus, NZ, UK and USA. So, technically we don’t have a .com – there is nothing there.
In this case, would you still have the .com (and all subsequent URLs) as the x-default? Or exclude it altogether from hreflang tags and have the /en as x-default (Which is currently is).
The only case in which people would see a .com is via social media, or through email correspondence. They shouldn’t be ranking in any SERPs.
Look forward to your thoughts,
Thans, Wes
I assume your other regions are being targeted on the same site (ex: .com/au/). In this case, I’d probably leave as is with x-default pointing to .com/en/. If there isn’t any content then there isn’t a reason to include it in the hreflang tags.
I’d probably also change the social share URLs to be the actual URLs people are sharing rather than the .com version. I’d rather build up any social signals / discovery with the actual URLs rather than the .com.
Hi Geoff,
Nice article. I want to use this tag. Then I need different url for different country.
pls help me
yes