Qoding: Improving organic traffic experience on multilingual websites

Ji Pattison-Smith | 02 Feb 2017

The web is a world-wide place, and if your business operates in multiple regions then you’ll want your website to be global too. Whether you sell products in multiple currencies, offer events in different countries, or translate your site into a number of languages, you want to make sure users can find the appropriate version of a page for them quickly and easily.

One of the best ways of doing this is using hreflang tags - metadata on a web page which lets search engines know that a page is specifically for those in a particular culture.

Quba’s Head of SEO, Chris Ebbs, agrees:

“On sites where content varies for users from different countries, it's essential to use hreflang so that search engine listings in each country take users to the correct content. Landing search visitors on the wrong content can seriously hamper the user’s experience and therefore the effectiveness of your website. This is particularly important on multi-territory e-commerce websites. Imagine the negative effect of showing UK search visitors $ pricing.”

What’s an hreflang?

You might remember Ji’s Pies from my previous blog posts, which sells a range of delicious pastry wares, and recently went global. These tasty treats are now available in the USA, Sweden, and Germany, as well as the UK, so the website has expanded too, and is now available in 3 languages (English, Swedish, and German) and a regional variation (US English). Hreflang tags will be crucial for ensuring users finding us through their favourite search engine arrive on the right page for them.

Let’s dive straight in then. Here’s what our hreflang tags look like for the pies list page:

link is an HTML meta-tag which specifies a relationship between two web pages/documents. It’s not displayed to the user but is a hint to your browser or a search engine crawling your site. The rel attribute defines what type of relationship. In this case, it’s an alternate version of a page; other options include stylesheet and shortcut icon. href is the location of the linked document (the URL of the page). And finally, the hreflang attribute tells us which language or region this page variation is aimed at.

The rules

So individual tags aren’t difficult to write, but when you put them together it’s easy to go wrong. Here’s what you need to watch out for:

Each and every version of a page should be referenced in each and every version of a page. This set of tags will be exactly the same for all 4 variations of the pies page.
This includes the page that you’re on itself! There should always be a self-referencing hreflang tag.
Make sure the language and region codes you’re using are correct. Look them up if you’re not sure - you should be using ISO 639-1 for languages (https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes#Partial_ISO_639_table) and ISO 3166-1 alpha 2 for regions (https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Decoding_table). Note that you can’t reference a region by itself. It must be either just a language or language plus region.
You can reference a page version multiple times. For example, you might want the growing Canadian customer base to be directed to US pages, so you add the following: <link rel=”alternate” hreflang=”en-ca” href=”http://www.jispies.co.uk/en-us/pies” />
Watch out when you have multiple URLs which display the same version of a page. For instance, I have /en-gb/pies and /pies show exactly the same content to the user. I already have <link rel=”canonical” href=”http://www.jispies.co.uk/pies” /> on the page, so that’s the only URL which should be referenced in hreflang tags.

Ji’s Pies isn’t a static site, though, where we can just add these tags into the HTML. It’s built on a CMS, where pages are generated automatically. This is actually great news because it means that once the code is set up to create these tags, all the maintenance will be done for us automatically.

Implementation

How can this be achieved, then? I’m going to answer this using a .NET web forms approach since our Sitefinity and Kentico sites are mostly built in that way. However, you should be able to use the principles involved in the platform/technology of your choice.

We’ll start by creating a new user control which will sit in the header on our master page. The control is very simple: it just contains a repeater.

<asp:Repeater runat="server" ID="hreflangTags" OnItemDataBound="hreflangTags_OnItemDataBound" />

In the code behind, set the repeater’s data source as the set of languages (CultureInfo objects) the page is available in, and bind the data.

hreflangTags.DataSource = SiteMapBase.GetActualCurrentNode() .AvailableLanguages; // Sitefinity; see code sample download for Kentico hreflangTags.DataBind();

In the hreflangTags_OnItemDataBound method, we need to add a new literal control for each language, find the URL of the page in that language, and then set the Text property of the Literal to be the link meta-tag.

protected void hreflangTags_OnItemDataBound(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType != ListItemType.Item && e.Item.ItemType != ListItemType.AlternatingItem) return; var culture = (CultureInfo) e.Item.DataItem; var regionName = culture.Name.ToLower(); var hreflang = regionName; var href = GetCultureSpecificPageNodeUrl (SiteMapBase.GetActualCurrentNode().Id, culture);

AddTag(e.Item.Controls, hreflang, href); }

private static void AddTag(ControlCollection controlCollection, string hreflang, string href) { controlCollection.Add( new Literal { Text = string.Format( "<link rel=\"alternate\" hreflang=\"{0}\" href=\"{1}\" />{2}", hreflang, href, Environment.NewLine) }); }

The details of GetCultureSpecificPageNodeUrl() will differ depending on which CMS you are using. Download the sample code for Sitefinity and Kentico implementations. As you can see, there’s really not much to it!

Improvements

There are a few improvements we could make. First of all, we want the default English culture to be en-gb. That’s why we have <link rel=”alternate” hreflang=”en” href=”http://www.jispies.co.uk/pies” /> rather than <link rel=”alternate” hreflang=”en-gb” href=”http://www.jispies.co.uk/pies” />. But the code above doesn’t account for this.

Secondly, we might want additional regions which don’t have their own site version (en-ca) to be pointed at another site version (en-us).

Finally, we’ll usually want to have the homepage referenced by the site domain name only, rather than using “/homepage” or something.

See the code sample for solutions to all of these problems.

I’m sure you can think of many other improvements we could make to account for other circumstances.

Testing

The primary aim of adding hreflang tags is to improve search listings for different cultures, but since search engines will not index your shiny new tags immediately, it’s important to use a testing tool to make sure you’ve not made any silly errors.

There are plenty of tools out there, and they will all give slightly different results/recommendations, so don’t necessarily take their word as gospel - they’re more a useful guide to make sure you’ve not forgotten to self-reference your pages and your language and region codes are correct.

A couple that I’ve found helpful are:

Other implementation methods

There are other methods of implementing hreflang tags. You can do it in the HTTP headers (useful for documents which are not web pages, e.g. PDFs) and in the sitemap.xml. My preference is doing it in the head tag due to the ease of implementation, but each method follows the same principles.

Conclusion

hreflang tags are crucial on multilingual websites for improving user experience and increasing your chance of organic traffic sticking around. They can be tricky, but by remembering a few simple rules and implementing a self-maintaining solution they’ll keep working behind the scenes for you.