If you want your business to take the world by storm, you’ll need a website that reflects this ambition. And if you want that website to truly go global, you’ll need it to display its content in multiple languages.

The good news is, multi-lingual websites aren’t as difficult to set up as you might imagine. And if your site has been developed in Umbraco, the even better news is that its out-of-the-box internationalisation features make creating multi-lingual pages as easy as un, deux, trois.

Here we’ll show you how the EdgeThreeSixty development team used Umbraco 7 to create a multi-lingual website for Nittel, one of the largest manufacturer and supplier of container liners in Europe.

How to create a second language in Umbraco 7

Log in to the Umbraco backend, then go to ‘Settings’, click on ‘Languages’, then click the ellipsis (…) and select ‘+ Create’ to produce a new language from a selection presented in a drop-down menu.

Creating a new language in Umbraco 7

As you can see, we developed the site in English for UK, Ireland and US-based customers, as well as in Dutch, French and German.

What’s the difference between a multi-lingual and multi-regional website?

Single-language websites have one homepage that acts as an introduction and central hub from where users can access the rest of the site’s content. A multi-lingual website, on the other hand, needs multiple homepages to cover each of the languages it’s been translated into.

A multi-lingual website is simply one that offers content in more than one language, for instance an English company that does a lot of business in Wales may want to reproduce its website in Welsh for the benefit of its Welsh-speaking customers.

A multi-regional website differs from a multi-lingual site in that it provides region-specific content to specifically targets users in different countries.

Then there are those sites that are both multi-lingual and multi-regional, such as McDonald’s, which has different content for each country, and then within those sites has some that provide multi-lingual content – its Canadian site, for instance, has the same content presented in both English and French.

Creating a multi-lingual website in Umbraco

When it came to creating a multi-lingual site for Nittel, the EdgeThreeSixty team had to essentially create five versions of the website, with one for each territory, and each in the relevant language – British English for the UK and Ireland sites, Dutch for the Netherlands, French for France, and German for Germany.

This multiple homepage set up means you have to consider the URL structure for each, and there are basically three options available:

  • Country-code top-level domains (ccTLDs) – Nittel’s UK site would be nittel.co.uk, its French site would be nittel.fr, its Irish site would be nittel.ie, and so on. This is arguably the most straightforward way to separate sites, and gives customers and search engines a clear indication that sites are geo-targeted, which can help with rankings and back links. On the downside, getting the URL you need can be difficult and expensive, and this set up often requires greater infrastructure.
  • Subdomains – This option would see Nittel’s web addresses prefixed with a ccTLD, so the French site would be fr.nittel.co.uk, and the Irish site would be ie.nittel.co.uk. Again, this is an effective way to separate sites, and one that it easy to set up, but it can lead to confusion as users might not recognise the geo-targeting from the URL alone (is “fr” the language or country?).
  • Subdirectories – This would see the URL structure for the French site change to nittel.co.uk/fr/, while the Irish site would become nittel.co.uk/ie/, and although this can make separation of the sites more difficult, it’s easy to set up and is lower maintenance as sites all have the same host. It also shares the user recognition problem of subdomains.

The old Nittel site used a combination of ccTLD and URL parameters – the UK and Ireland sites were at nittel.co.uk and nittel.ie, while the Dutch site was at nittel.nl. The German site was at nittel.eu, and the French site used a URL parameter from this, and could be found at the messy looking http://www.nittel.eu/index.php?srv=content&doc=/index&_lang=FR_fr.

URL parameters are far from ideal, and not recommended by Google, which highlights the following problems:

  • URL-based segmentation difficult
  • Users might not recognize geotargeting from the URL alone
  • Geotargeting in Search Console is not possible.

A complete overhaul of the old URL structure was required, and it was decided that subdomains of the main nittel.co.uk URL was the best option. This new structure would see the multi-regional Nittel site use the following URLs:

  • UK – nittel.co.uk
  • Netherlands – nittel.co.uk/nl/
  • Ireland -nittel.co.uk/ie/
  • France – nittel.co.uk/fr/
  • Germany -nittel.co.uk/de/

This was achieved by creating a ‘one-to-one’ multilingual website, which involved setting up an English version of each page (essentially the .co.uk site) then creating separate settings for each individual version in the ‘Site Settings Folder’, as below:

Languages in ‘Site Settings’ in Umbraco 7

Content was provided in each language, and the dictionary was updated with key phrases on parts of the site that are hard-coded and aren’t subject to change, such as headers, footers and contact forms, as below:

Different languages for different fields.

To create a dictionary, simply go to ‘Settings’, then click the ellipsis (…) and select ‘+ Create’, as below:

Creating a dictionary in Umbraco 7

This ‘one-to-one’ design structure is ideal for multi-lingual sites where the content is broadly the same across all versions, as it only requires the site to be set up once, and then adapted for other languages as and when required.

If you’re creating a multi-lingual and multi-regional website, it’s more likely you’ll have to set up new versions of each web page to include the relevant content and any varying functionality.

As you can see, setting up a multilingual website in Umbraco is a relatively straightforward process as the majority of the work can be done without having to do any coding at all.

EdgeThreeSixty is an Umbraco Certified partner, and our developers are experts in all things Umbraco – get in touch today to see how we can help build a website to meet the growing needs and demand of your business.

Header image from Pablo by Buffer.