If your brand does business in more than one language you need to know about hreflang tags and how they impact SEO. We’ll break down what hreflang tags are, why they’re important for SEO and how to use them in your marketing strategy.
Hreflang tags are html attributes that indicate different languages for a website or webpage. If you have your site in more than one language, hreflang tags let Google know which one to display to users based on their location.
A tag for a Spanish version of your site would look like this: hreflang="es".
Hreflang tags do more than distinguish between languages, they also specify regional variations and dialects. Think ‘en-us’ and ‘en-gb’, for example. Both pages are in English but with their respective spelling differences. The same goes for let’s say Spanish spoken in Spain, versus Mexico. The code in hreflang tags redirects users to a version of your site based on where they are.
An hreflang tag for Spain hreflang="es-es" versus Mexico hreflang="es-mx".
There are a number of reasons to implement hreflang tags in your content. They make sense from a user experience perspective and from an SEO standpoint. While hreflang tags don’t necessarily increase traffic, they are important for keeping it. Here are the key reasons for using hreflang tags if you do business in more than one language:
If you’ve read this far it’s likely you have pages in multiple languages/locations or would like to create them. Adding hreflang tags does take effort and you’ll need to invest some time to do it right. That being said, using hreflang tags isn’t terribly difficult and is well worth the work involved. Let’s go through a step by step process of adding hreflang tags, starting with 3 tips.
Regional variations are the tricky part and where mistakes are most often made. Codes need to be in the ISO 3166-1 Alpha 2 format.
Let’s say we have an English page: https://woop.com/one
And a German page: https://woop.com/ein
Each page should contain both of these hreflang tags:
<link rel="alternate" hreflang="de" href="https://woop.com/eins" />
<link rel="alternate" hreflang="en" href="https://woop.com/one" />
The easiest way to implement hreflang tags. Just add your chosen hreflang tag into the <head> tag of your page. Depending on how many language variations you’re working with, this can become quite time consuming as each variation needs to link to every other variation. For larger sites with many languages it’s not the best choice as it will slow down load times.
Using our earlier example, this time with an English page with three variations:
<link rel="alternate" href="https://www.woop.com/" hreflang="en" />
<link rel="alternate" href="https://www.woop.com/en-gb/" hreflang="en-gb" />
<link rel="alternate" href="https://www.woop.com/en-au/" hreflang="en-au" />
Another option for implementing hreflang tags uses XML sitemap markup. To do this you use the xhtml:link attribute in XML sitemaps for inserting the tag into every URL. And while it might look the worst in terms of complications, it has its advantages. For one, it’s a single file unlike HTML files which would need to be edited individually every time you make a change. Also, the slowdown experienced because of extra code using the other two methods, does not apply when adding hreflang tags via XML site map.
<url>
<loc>https://www.woop.com/uk/</loc>
<xhtml:link rel="alternate" hreflang="en" href="https://www.woop.com/" />
<xhtml:link rel="alternate" hreflang="en-au" href="https://www.woop.com/au/" />
<xhtml:link rel="alternate" hreflang="en-gb" href="https://www.woop.com/uk/" />
</url>
<url>
<loc>https://www.woop.com/</loc>
<xhtml:link rel="alternate" hreflang="en" href="https://www.woop.com/" />
<xhtml:link rel="alternate" hreflang="en-au" href="https://www.woop.com/au/" />
<xhtml:link rel="alternate" hreflang="en-gb" href="https://www.woop.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>
This is the method to use when adding hreflang tags to content that isn’t HTML based. This includes documents like PDFs but can also work for regular HTML pages if you like. Like adding HTML elements this method also adds a lot of code if you have many variations. Let’s say for example we want to have PDF versions of our site in Spanish, Italian and Hungarian. Our tags would look like this:
Link: <https://es.woop.com/document.pdf>; rel="alternate"; hreflang="es",
<https://it.woop.com/document.pdf>; rel="alternate"; hreflang="it",
<https://hu.woop.com/document.pdf>; rel="alternate"; hreflang="hu"
A very important attribute that you should know about and implement. Hreflang x-default shows users a default version of the page if their location and or browser settings don’t match up with any of your available variations. Hreflang x-default looks like this:
<link rel="alternate" href="https://www.woop.com/" hreflang="x-default" />
There are a number of tools which can help you with hreflang implementation. Here we’ll share two of them, the Hreflang tag generator tool and the Hreflang XML sitemap generator.
Created by Aleyda Solis, this tool helps generate link elements for you, saving you both time and effort in creating your hreflang tags.
Developed by Erudite, the XML sitemap tool is a god send. Simply add in a CSV file with the URLs for each language and this tool will create the XML sitemap for you. Make sure to include an x-default URL in your CSV, too.