Handling multi-lingual sites for mobile and search

Implementing multiple languages on a web site can be handled in a variety of ways and it usually depends on the circumstances as to which route is taken.

I recently created a single page application, which required 4 different languages, but also needed to be mobile-friendly and good for SEO (probably the case for all sites these days...).

Normally people go for a redirect after detecting a users language by finding their IP addresses location, and Google has been recommending redirects for some time. But using redirects is not very mobile-friendly and neither is waiting for an external service to tell you a users location before you can display any text... I needed a way to detect a users language instantly and I needed to avoid any redirects. When it comes to mobile, the less round trips the better.

Enter the HTTP PECL module. This module contains a method called "negotiateLanguage", which enables you to identify a users preferred language from the headers sent to the server by the browser on initial request. Very quick and very useful!

With this we can find out what language we need to display straight away, if the user has any of your supported languages in their list you can display it, but if not, you can default to your primary language. In my case, this was English.

Note: The HTTP PECL module is not included in PHP by default and needs to be installed on the server. It also has two versions, which are used very differently. Version 1 uses a functions API, where as version 2 uses namespaces. Depending on what you install depends on how you will call this method.

Once the HTTP module is installed on the server and we know what our users' preferred language is, we need to tackle the issue of SEO. We need to make Google (and other search engines of course) understand that there are different languages available for the same page. That way, it will display the correct language for international Google searches. This is achieved by setting a hreflang meta tag in the header for each of your languages and a creating a page for each that forces the language regardless of any headers. This is also a useful feature for users, so we should still put some flags in the header that links to these pages.

Finally, we need to set a cookie that either stores the language we found or the language the user forced, so that on future page loads or visits we know what language to display.

To summarise, the process is this;

  • Whenever a browser hits the site without a cookie, we detect the users preferred language and set a cookie.
  • If the user decides to change this language, we update the cookie.
  • Whenever a cookie is present we discard all of the above and use that language.

This solution is fast, mobile-friendly, SEO friendly and most importantly, user friendly!

Thanks to the PECL HTTP module and the hreflang metatag, there are no redirects or external services, so the page load is fast for mobile devices. And even though Google recommends redirects for this. The site has shot up to the top spot in it's rankings on all international Google search sites.