HREFlang – it’s fairly straightforward, but also fairly complicated, so that’s fun! 

I know that sentence doesn’t make a lot of sense at the moment, but it will do once you’ve read on a little further…

So, HREFlang tags – what are they? What do they do? What are they used for? 

HREFlang attributes were introduced by Google way back in 2011. What they allowed us to do was to show search engines the relationships between multiple pages of duplicated content that were in different languages. 

They can also be used to target specific countries.

Probably the most important thing to remember about them is that they are signals NOT directives (similarly to canonical tags which used to direct Google but now are just a signal Google can choose to follow).

A signal is something that Google will look at and say ‘cool, thanks for telling us, but we also want to make our own decision’. Essentially, other things can override a HREFlang tag (a different html language code for example). 

To explain this a bit more, let’s pretend we’ve written a webpage in French. In the html for the page, we’ve got html language ‘fr’ for French. Then in the HREFlang tags we’ve told Google that the page is in English.

Google will know that it can’t be in English because of the html language being ‘fr’ so they’ll override the HREFlang tags and stick to French. 

HREFlang sounds really simple – you’re literally just telling Google ‘this page is French, this page is German, this page is Spanish’ etc etc. However, sometimes the things that look the simplest turn out to be the trickiest to get right. 

In a 2018 Tweet, Google’s John Mueller said ‘TBH HREFlang is one of the most complex aspects of SEO (if not the most complex one). Feels as easy as a meta-tag, but it gets really hard quickly’. 

One of the difficulties arises as soon as you try to do this on scale and use more than a couple of languages. It can become exceptionally complex and difficult to get it right. 

But what exactly is a HREFlang Attribute?

It’s an HTML attribute that specifies the language or the country that a webpage is targeting. If you have multiple pages with the same content on the but in different languages, the HREFlang will tell Google and other Search Engines about them. 

This is what it might look like if you went looking for it in the code. In the middle column in blue (after it says hreflang) you can see the lower case letters are the language e.g. ‘en’ for English, and ‘es’ for Spanish etc. The upper case letters directly next to these are the country, e.g. ‘AU’ for Australia, and ‘NZ’ for New Zealand. 

A reason for targeting different countries who all speak English with different webpages could be if it’s e-commerce and you want to talk about Australian Dollars, New Zealand Dollars, English Pounds etc. Apart from that the content could be 100% duplicated but you’re telling Google ‘look, if they’re just English give them this page, if they speak English AND they’re based in Australia, give them this page’ etc etc. 

But what does any of that actually mean? 

All it really means is that the link rel=’alternate’ part of the code means it’s an alternate version of the original page. 

How does HREFlang impact a website’s search engine rankings? 

In short, as far as Google is concerned, they don’t. But in reality, they do. 

They might not directly affect rankings and as far as we are aware they are not a ranking signal that Google will look at but they do allow search engines to present the right content to the right people whilst also sharing any ranking benefits the duplicated pages have. 

What are the best practices for SEOs to follow?

You’ve got to make sure you self-reference. Each language version must list itself along with all other language versions of the page.

So, even in the code for the English version of a page, you still need to reference that English version, in a list with all the other versions. Self referencing means you can say ‘this is the main page and these are all the other versions’. 

I’d recommend using X-default tags.

They used to be a must have, and it basically meant that you’d say to search engines ‘if one of your users doesn’t have any language or country or anything like that set up in their browser settings, show them this page’. 

It is often a .com page, and Apple actually used to use a page with lots of flags on it for that user to then click on the right flag to go through to the content in their language.

You need to remember that HREFlag tags work in pairs. For example if I mentioned the Spanish version of an English page in the HREFlang tag on the English page, then I would need to mention the English version on the Spanish page.

Basically, every page needs to point at every other page – which is where it can get very complicated if you’re using more than two or three languages. 

How do you implement HREFlang tags? 

There are three ways to do this: 

  1. HTML tags,
  2. HTTP headers,
  3. Sitemaps.

HTML Tags

HTML tags go in the header of your HTML code and they are just a list of all of the other examples of pages and it might look something like this with the English page followed by the German version:

<head> <link rel="alternate" hreflang="en" href="https://example.com/hreflang-attributes/" /> <link rel="alternate" hreflang="de" href="https://example.com/hreflang-das-attribut/" />

HTTP Headers

HTTP headers are what you’d use if the page in question isn’t in HTML – like a PDF for example. This requires a slightly different set up, but not by much. 

HTTP/1.1 200 OK Content-Type: application/pdf Link: <https://example.com/hreflang-attributes.pdf>; rel="alternate";hreflang="en", <https://example.com/de/hreflang-das-attribut.pdf>; rel="alternate";hreflang="de"

XML Sitemap

Potentially the easiest way for a developer to implement HREFlang tags is via an XML sitemap.

You simply create one document, and they get uploaded as is. It also makes life easy to add new HREFlangs when required, otherwise you have to go into the actual HTML code and mess around with that so depending on your level of coding skill or access to the back end of the website, this is usually the easiest way. 

<url> <loc>https://www.example.com</loc> <xhtml:link rel="alternate" hreflang="en" href=https://www.example.com" /> <xhtml:link rel="alternate" hreflang="de" href=https://www.example.com/de/" /> </url>

How do I create HREFlang tags?

It’s all well and good me telling you the three ways of doing it, but how do you create them easily? You can, of course, write them manually.

But this is painful and takes a long time.

It’s probably not the best use of your time. 

There are lots of automated tools out there now that can help – I have a Google Sheet set up to create them quickly. 

I always mention Aleyda Solis in my talks on this, she has created an amazing HREFlang tag generator (Google even reference it in their own docs now) but on her site you can copy and paste an entire CSV upload if you want to and it will give you all the country codes and you just have to go through them.