How to localize your website language for visitors

Last Updated Feb 26, 2021
Emma Jagger

Engineer, maker, Google alumna, CMU grad

When the people visiting your website or using your web application come from diverse countries and speak different languages, it can be interesting to allow your web pages to be displayed in various languages. Implementing such a feature broadens your audience and reassures your prospects.

How to translate the content of my website pages?

Even today, there is no automatic translation mechanism that is flawless and generates a perfect version of your pages in another language. The translation must be done manually, and the resulting sentences stored in what is called resource files in your web server. The back-end coding is out of the scope of this article. Still, rest assured that most, if not all, server-side technologies include mechanisms to select sentences from the resource files that correspond to your visitor language and display them to build in the pages to be displayed. Those mechanisms are called Internationalization or Localisation. Once your sentences are translated, and your resources files are correctly organized, you will need to implement a mechanism to detect and select your visitor's language.

How to determine which language to display to each visitor?

We must consider two cases: visitors who arrive on our website for the first time and those returning. For a user arriving on your website for the first time, your website must make his best guess on which language to display. There are two main ways: get the information from your visitor's web browser, or identify from its IP address.

Determine your visitor's default language from the information shared by his web browser.

If you are trying to get your visitor's language from on the server-side, you will need to analyze the Accept-Language request HTTP header. This header field contains a list of locale identifiers along with a factor-weighting value. Keep in mind that the user has no control over the content of the Accept-Language header and may not correspond to his real language in some cases. If your script is located on the client-side and you need to get the client's language, you can inspect the javascript properties navigator.language. It is not an ideal solution to rely on JavaScript, though, as the value can sometimes be null, and not all browsers are compatible with this property.

Use your visitor's IP address to know his location and deduct his favorite language.

The fastest and cheapest way is to call a real-time IP Geolocation API with the visitor's IP address. The API will match the IP address with the corresponding country, and then you can deduce the language. The quality of detection depends on the precision of the API you will be calling. Abstract provides an accurate IP geolocation service, accessible for free. You only need to create an account, no credit card required, to obtain your API key.

Don't forget to allow your visitor to select your website language manually.

You must provide your users with a system that allows them to manually change the language, such as a list of flags or language names placed in the header of your pages. Note that various flag images, including emojis, are available in Abstract's IP Geolocation API. There are other IP Geolocation API's that you can use for this as well. Once a visitor makes his selection, your website must refresh the current page in the targeted language and memorize it using a cookie. When he returns to your website, the language previously selected will be automatically used for display.

Related articles