For enterprise businesses that span multiple countries and cultures, providing content in your audience’s desired language isn’t optional.
Implementing the right language Optimization designation can be the difference between a successful and failed content strategy. Delivering the right HTML attribute for language, known as hreflang, helps Google understand what content to deliver to a user.
Hreflang isn’t a difficult concept to understand, but many webmasters struggle to implement it correctly.
Today, we cover the basics of what hreflang is, how to implement it correctly and how to avoid some common mistakes with hreflang attributes.
- What is hreflang?
- What does hreflang look like?
- How to implement hreflang attributes
- How many hreflang tags does a page need?
- Common hreflang mistakes
What is hreflang?
Hreflang is an HTML attribute used by Google to specify the language Optimization and geographical targeting of a webpage. This allows webmasters to help search engines serve up the correct version of a page in different languages.
For example, if you have a version of a page in both English and Spanish, you are able to designate which page Google should display based on a user’s geographic location and preferred language.
Hreflang attributes may only be critical for international companies, but they are still an important concept for all SEOs and webmasters to understand.
Why is hreflang important for SEO?
The hreflang attribute tells Google which language Optimization and country you are targeting for a specific page, creating a better user experience for users searching in that specific language and country.
For SEOs, the hreflang tag ensures that the search result is delivered in the native or preferred language rather than a different one.
Hreflang tags are a signal for search engines, but not directive, so Google may not use them if they deem them inaccurate. As an SEO you want to ensure that you are sending the right signals and helping Google understand your site when they are indexing and ranking your pages.
Does Bing use hrelfang?
Another important fact to keep in mind is that Bing and other search engines don’t use hreflang, so you will have to do additional optimization if you want traffic from those search engines.
What do hreflang attributes look like?
Here is an example of what a correct hreflang tag looks like:
<link rel="alternate" hreflang="de" href="https://example.com/blog/de/article-name/" />
If this looks intimidating, don’t worry! Hreflang tags are simple to understand because they can be broken down into three easy parts:
link rel=“alternate”: Telling Google the link in this tag is an alternate version.
hreflang=“x”: Specifies the language and how it is different from the original version.
href=“https://example.com/alternate-page”: The alternate page can be found at this URL.
Language Optimization: Hreflang example
<link rel="alternate" hreflang="de" href="https://example.com/blog/de/article-name/" />
- The blue part of this code is specifying that the link in the tag is a different version.
- The green part of the tag tells Google what language the page is in that makes it different from the original.
- The red section specifies where the language specific page can be found.
Additionally, you may want to specify a particular geolocation in your HTML attribute if there is a difference in regional dialect.
For example, Canada is mostly bilingual, with both English and French spoken in different regions of the country. In this case, you would want to specify both:
<link rel="alternate" hreflang="en-ca" href="https://example.com/blog/en/article-name/" />
<link rel="alternate" hreflang="fr-ca" href="https://example.com/blog/fr/article-name/" />
If you aren’t sure which codes or locations you need to use, you can find the complete list of ISO 639-1 codes Wikipedia.
Pretty straightforward and easy to understand, right?
So why is it so tricky for webmasters to implement?
How to implement hreflang attributes
There are three recommended ways to implement the hreflang attribute for any site:
- HTML tags
- HTTP headers
- Sitemaps
Any of these can work, although some are easier to implement than others. Let’s take a deep dive into each of these and see which implementation is right for your site.
How to implement Hreflang using HTML
The first strategy for implementing hreflang is putting HTML hreflang link elements in the <head> section of every page.
While this may seem like an easy way to implement hreflang, there are some downsides to this kind of implementation:
- It can be very time consuming because whenever you add a new variation of a page, you have to go back and make sure you’ve added the appropriate tagging to every variation of the page.
- This method can create unnecessary increases in page load time due to how a page is fetched by Google.
- Most likely means you will need to do manual implementation for Bing as well
How to implement Hreflang using HTTP headers
For any non-HTML content on your site (PDFs etc.) you can use HTTP headers to specify languages.
They will look something like this:
The downside to using HTTP headers is that they can also add a lot of page weight to your site, ultimately slowing down the user’s experience.
How to implement Hreflang using XML Sitemaps
The third option to implement hreflang is using XML sitemap markup. This is arguably the best way to ensure all of your hreflang is correct and accounted for – if you don’t believe us, take a look at what Google’s John Mueller had to say.
In this strategy, you use the xhtml:link attribute to specify the hreflang of a page and its variants, making your sitemap look something like this:
<url>
<loc>http://www.example.com/</loc>
<xhtml:link rel=”alternate” hreflang=”en” href=”http://www.example.com/” />
<xhtml:link rel=”alternate” hreflang=”en-au” href=”http://www.example.com/au/” />
<xhtml:link rel=”alternate” hreflang=”en-gb” href=”http://www.example.com/uk/” />
</url>
<url>
<loc>http://www.example.com/au/</loc>
<xhtml:link rel=”alternate” hreflang=”en” href=”http://www.example.com/” />
<xhtml:link rel=”alternate” hreflang=”en-au” href=”http://www.example.com/au/” />
<xhtml:link rel=”alternate” hreflang=”en-gb” href=”http://www.example.com/uk/” />
</url>
The major benefits that come with this kind of implementation are:
- Easier to automate
- Doesn’t add page weight for your users
- Don’t have to edit multiple HTML documents each time you delete a page
How many Hreflang attributes does a page need?
There are no limits on how many hreflang elements you can have on a page, but you only want to use attributes you have content for and only use languages that make sense for your business.
If your content, products or services aren’t relevant to other countries, don’t add them to your site!
Common hreflang mistakes
There are a few technical mistakes that can trip up some webmasters if you aren’t careful.
When implementing hreflang:
- Make sure to include self-referencing hreflang, i.e. one that points back to itself so search engines understand what language the page is in
- Make sure all the variations of the pages are included in your hreflang to ensure no variations are missed and to ensure they are bidirectional (each point to each other)
- Use hreflang x‑default tags to tell Google what language a page is in when no other language variant is appropriate
- Make sure you are canonicalizing the page to itself
Not following the steps above can quickly derail your international SEO efforts.
How Botify can help you with canonical tags
If you’re a Botify customer, our platform can help you audit your content and ensure your hreflang tags are set up correctly.
You will be able to take control of your international SEO by:
- Seeing what pages don’t have hreflang on them or if the language is not defined
- Quickly assessing what pages have the wrong hreflang tags on them
- Identifying if your hreflang is pointing to a non-indexed or missing page
- Seeing keyword rankings (in BotifyAnalytics), broken into different countries to see how your optimization efforts are paying off.
- And much more!
