eBabel Blog

Make a website

Multilingual website navigation

31 March 2010

A multilingual website needs to take several issues into consideration when it comes to navigation:

  1. Browsing content in a single language without the translations getting in the way
  2. Switching language when landing on a page deep within a multilingual website
  3. Making it simple the website is multilingual without being obtrusive

1. Single language

A user may want to browse a multilingual website in English without having the French translation getting in the way. The best way to achieve this is to list only the content in the current language and having a single link to switch language. This can be done with either a "world homepage" at the root of the multilingual website or by detecting the browser prefered language automatically:

World homepages

Wikipedia world homepage

One way to direct users to the webpages in the appropriate language is to first ask them which language they prefer on the homepage. I don't believe this is a good idea, unless the multilingual website has very different content based on the language, like the wikipedia multilingual homepage.

It's not a good idea to do this because a user may not come to a multilingual website directly on the homepage, since search engines will index all pages and most of the time the relevant content tends to be deep within a website rather than on the homepage. Moreover, such a homepage is a hurdle for users who have very little time and want to go straight to the content that interests them.

For a website with the same content across all pages, it makes more sense not to use a "world homepage" and instead to have a single homepage that picks up the browser prefered language automatically.

Detect the browser language automatically

Browser language preference

The eBabel website, for example, automatically detects which language the browser prefers to use. A user whose browser language preference is set to French, for example, would get the French homepage of the eBabel website, whereas a user whose browser is set to have English as its prefered language would get the English homepage.

When to ignore the browser prefered language

For search engine's sake, it should also be possible to index multilingual webpages in a given language without any automatic detection. In the case of the eBabel multilingual website, this is achieved by URL. If there is no indication of language preference in the URL, it's the browser prefered language setting that is used. However, if the URL clearly states which language should be used, then the browser prefered language is ignored.

For example, browsing to the root of the eBabel website http://www.ebabel.eu/, doesn't indicate which language should be used in the URL, therefore the setting of the browser prefered language is used. However, browsing to the "About us" page http://www.ebabel.eu/en-GB/about-ebabel clearly states the language should be "en-GB", i.e. British English; therefore the browser prefered language is ignored.

2. Switching language

When a user selects a different language, I don't think it's a good idea to lose his position in the multilingual website by sending him back to the homepage in that language. Instead, the user should stay on the same webpage and get the translated version of that page.

It's better to stay in the same webpage but in a different language because the user position within the website will be lost otherwise. The user may have searched for a webpage in a search engine and has found the right content, just not in his prefered language. When that happens, the multilingual website shouldn't waste the user's efforts in finding the right content.

3. Simple multilingual navigation

There are several ways to switch language. A browser dropdown with some javascript is sometimes used, but I personally don't like doing this because it damages the search engine indexing potential of a website.

It's far better to use simple links to other webpages. The text of the link should be the name of the language of the page it's linking to, to make it obvious that the content is the same and only the language is different.

Search engine optimization to consider in language navigation

For search engine optimization purpose, it's a good idea to populate the title tag of the language links with the page title of the page it's linking to. For example, the link may read "French" on the "About us" page, to link to the French translation of the page, but the title tag, which is read by search engine crawlers, should read "A propse de nous", which is French for "About us".

If you liked this blog post, you may want to subscribe to my news feed in your RSS reader.