For enterprise businesses that span multiple countries and cultures, providing content in your audience’s desired language isn’t optional.
Implementing the right language 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.
Jump to:
Hreflang is an HTML attribute used by Google to specify the language 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.
The hreflang attribute tells Google which language 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.
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.
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.
<link rel="alternate" hreflang="de" href="https://example.com/blog/de/article-name/" />
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?
There are three recommended ways to implement the hreflang attribute for any site:
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.
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:
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.
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:
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!
There are a few technical mistakes that can trip up some webmasters if you aren’t careful.
When implementing hreflang:
Not following the steps above can quickly derail your international SEO efforts.
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:
If you are interested in growing your organic search traffic, set up a demo with us today!
