Strategies for a Multilingual Website
Having a website just in English may be okay for most businesses. In fact, even if you occasionally need to reach foreign visitors, you can expect that whoever is interested in your services has enough knowledge of English to clearly understand what you are offering. But if you sell something abroad or if you run an international business, the mere translation of the core website is not enough and one must venture into the process of website internationalization. Internationalization or localization? Internationalization and localization; these are the most spoken words when it comes to making a website multilingual. Developers often note them respectively as i18n and L10n. There is always a bit of confusion about these two terms; we could say that localization is actually part of the internationalization process. We start with planning internationalization, the process of designing software so that it can potentially be adapted to various languages without re-engineering. This is basically our strategy which includes understanding the culture and habits of the countries/languages we want to target. Once we have defined the internationalization strategy, we proceed with the localization for every single language/country: translating text, adapting the images, adapting the date/time format etc. Choosing a site structure The steps of an internationalization strategy need not be taken in a fixed order, but managing the multiple domains to be set up can be a good start. Basically, we have four options: Country-coded top-level domains (www.example.fr, www.example.de, www.example.jp)Subdomains in a single global top-level domain (france.example.com, germany.example.com, japan.example.com)Subfolders in a single global top-level domain (www.example.com/france, www.example.com/germany, www.example.com/japan)URL parameters Using different top-level domains for each language is probably the most brilliant solution but is not without drawbacks: it’s the most expensive in terms of money and resources, and it splits link-authority over several domains. Subdomains are easy to set up, but they share the same problem of splitting link-authority. Organizing the structure in subdirectories is probably the easiest solution which also requires very little maintenance, but may not look professional though. Please note that both subdomains and subfolders give a weaker signal to Google’s crawler, compared to top-level domains. Using URL parameters is not recommended anymore and, as Google says: “Overly complex URLs, especially those containing multiple parameters, can cause problems for crawlers by creating unnecessarily high numbers of URLs that point to identical or similar content on your site. As a result, Googlebot may consume much more bandwidth than necessary or may be unable to completely index all the content on your site.” A cautionary tale of duplicate content Having duplicate content on a website causes a ranking penalty. You may have some small differences on some pages, like date or currency values, and still Google might see them as duplicate content. To avoid this effect on a multilingual website, we should use hreflang. This code lets you specify all the different URLs on your site that have the same content; in a different language, or with the same language but targeted to a different region (United Kingdom, Australia, United States …). hreflang instructs the search engine that it’s almost the same content, just optimized for a different audience, and you should use it whenever you have the same content in multiple languages or in the same language but targeted to different regions. There are three ways to implement hreflang: using link elements in the <head>, using HTTP headers, or using an XML sitemap. The first two methods are easy to implement but, in case of a large website with multiple languages, they will become hard to maintain. Also, they are a potential source of sluggishness. On the other hand, the XML sitemap has a more complicated setup but its easy maintenance makes it the best choice for large websites. You definitely need a plan When it comes to actually building the website in another language, simply translating the existing main pages may not work, especially on a large website with a local shopping system. There are a lot of cultural differences between countries and languages; some are obvious, like the writing direction for Japanese or Arabic, but some others may not be, like the date format differences between the United States and all European countries (Great Britain included). Local currencies must be used as much as possible, and units must be converted into the standard metric system; the more you adhere to the local language and culture, the better the results you get in terms of trust and confidence. Here's a quick (but nevertheless important) list of what you should check when planning a multilingual website: Keywords Simply translating the original keywords to the target language is not an appropriate approach. Some English words are, in some languages, more commonly used than the local equivalents, so they must be included in the keyword list. Also some super-up-to-date English keywords may sound outdated or odd in another language, even if the translation is formally correct. When choosing the keywords, the help of someone who is really in touch with the real language is invaluable. Date, number and unit formats A quick and simple tip but a real must; without these conversions the website looks unprofessional. Language chooser option Many websites redirect users to the localized version, depending on their IP address or the browser language, assuming that they are proficient in the language of the country from which they're accessing the website. Case in point: think of people living in a country with a language and even an alphabet they don't understand, usually for working, who are automatically redirected to a website they can't read. Give them a manual language choice at least, please. Different languages for different countries If you want to start a business in Canada, you can't ignore the fact that the country is actually bilingual and a French website must be coupled to the English one. That's not an isolated case: Switzerland, Belgium and India are just some other examples. If one country is crucial to your business, you should cover all its official languages. That may seem overzealous, but consider that in most bilingual (or multilingual) countries, the language belongs to the national identity which carries a very high level of importance. Check hrefLang tags It may seem strange, but regional codes are often misspelled. That's because most people typically remember the most used ones by heart, but if you check the official list, you will find some surprises. In fact, the right code for English in the United Kingdom is en-gb and not en-uk, as many people think (this error is so common that Google now accepts even the wrong spelling). In a nutshell Internationalization is a process that requires utmost attention, for two good reasons: it is strictly connected to SEO, and it is a process required usually by big companies (i.e. very important clients not to be lost). An accurate website translation with proper SEO keyword research will generate far better results and thus a corresponding revenue increase than a standard one. As a general rule, the bigger the business, the more costly mistakes can be; gathering and leveraging proper information is always the best insurance we can have for our business.
More great blog posts from Alessandro Loverde
Tighten Your CMS Security
A small investment early in the deployment phase can go a long way to creating a secure environment. Fine tuning permissions Every CMS allows administrators to set permissions for different users or groups and, for the sake of better security, one should check that editors can only do what they...
Image Optimization: A Comprehensive Roundup - pt.1
In the beginning, the World Wide Web was all about optimization. Standard speed was around 3 kb per second, and hosting space larger than 5 MB was expensive. Then broadband became available for everyone, and web designers grew less and less obsessed with image optimization. Nowadays, younger web...
Video Tutorial: Building a React App - pt5: Working with External Data
In the previous part of this tutorial we explored components: the distinctive React feature. We did no magic because we wanted to focus on the basic structure of components, but now the time has come to explore the advantages of generating code employing external data. Replacing hard-coded with...
Five Quick Tips Before You Start Your Next SaaS Project
There are many web apps around, some good, some bad, some are kind of life-changing while others lay almost forgotten, but making a SaaS app is something definitely bigger; a good programmer and a talented designer are not enough. The concept of Software as a Service looks far ahead and...
HTTPS and SEO: How to Cover your Assets and Avoid Common Pitfalls
Back in 2014, Google started to consider making the use of a secure connection (HTTPS) a parameter in their search algorithm. It began with just a 1% weight over all the other factors, but they pushed it further and further; and now, in 2018, every professional website must be served through a...
WordPress and SEO; Costly Missteps to Avoid
WordPress is often a popular choice for a website builder and it is appreciated by many because it gives the users a lot of freedom regarding tools and plugins. Unfortunately, this approach is not good for your SEO because WordPress does not offer many SEO tools out of the box and, if you don't...
Video Tutorial: Building a React App - pt3: Code Components
In the previous part of this tutorial we have converted an existing HTML page into a React app, but we have not seen much interactivity so far. In this new chapter we start exploring one of the most interesting React features, the components. Let's build something dynamic We are going to create...
Rising Stars and Falling Comets in the CSS Universe
CSS is our friend; the relationship between it and web designers has been a bit turbulent over time, but near the end of the first decade of the new millennium, it settled down with mutual love and respect (in the meantime Internet Explorer has met its fate but nobody mourns the loss, right?)....
A Bit of SASS Magic: Automatic Text Color in CSS
We already talked about SASS and how it can revolutionize your approach to writing CSS. We talked about variables and indenting; powerful features but easy to handle nevertheless. We mentioned that SASS has more advanced functions, and in this article we are going to explore a handy one. The SASS...
This Is How We Do It - The TROX Case Study
TROX understands the art of handling air like no other company. It’s a dynamic firm and, through research and development, TROX became a global leader of innovation in ventilation systems. A business can be efficiently run only with efficient tools and TROX has chosen Scrivito to manage over 70...
How to Up Your UX Best Practices for Mobile Apps - pt2
One central guideline for a designer is to have a clear understanding of the medium, the way users will interact with our design. It can be a television, a computer, a book, or any number of things: design is everywhere. A mobile phone is not just a small computer; it has its own unique features...
DOM Filtering with jQuery - What You Need to Know
We have already given an introduction to the jQuery library, showing how useful it can be for web designers and developers: it simplifies the JavaScript syntax for lots of useful DOM-related tasks and it can dramatically speed up the routines to select DOM elements. Now it’s time to expand your...
How to Up Your UX Best Practices for Mobile Apps - pt1
The concept of mobile apps has greatly evolved: with the first apps, developers tried to replicate the same experience of a desktop but, given the limited resources, the results were pretty different and, in some cases, disappointing. A more modern approach is to create mobile apps that offer the...
Video Tutorial: Building a React App - pt2: Installation
In the first post of this video tutorial series, the basics of React.js were covered. Now it’s time to move a bit forward: we will install React.js and configure it. Eventually, the web page of the standard web application will show up in the browser. The installation process The very first step...
Obscure HTML 5 Features That May Make Your Day
Stumbling into one of those popular, so called “cyber cafès” means that nowadays you will probably find tables occupied by hipster-like web designers, delighting themselves into glorifying the moment when they embraced SASS, React.js, jQuery, Node JS, Ember, Bootstrap, Angular and others. Well...
You Asked For It - Scrivito Features & Benefits
The web is changing at a truly fast pace! New technologies break into the market more rapidly than before. The period of caution and skepticism grows shorter, as the IT world has finally understood the impact of being stuck for too long on technologies which are reliable but outdated. The time to...
Getting Sassy with SASS - Your First Steps
CSS is great and there would be no web without it: if you have been involved enough to remember the state of the web in the late nineties, you will immediately get the point (probably, along with a couple of shivers). Unfortunately, CSS has its limitations and they are not easy ones; that’s why...
DOM Traversing with jQuery - What You Need to Know
The Document Object Model (DOM) is an object-oriented representation of a web page which can be modified with a scripting language, like JavaScript: we can think of the DOM as a representation of an HTML page in a way JavaScript can understand. JQuery is a very popular JavaScript library that...
Tips & Guidelines for A Better Mobile UX - pt2
Mobile websites are not just a trend; they meet the user’s demand for a better and more rational use of their time. If we are already out of the office and need to check if the product we want to buy is effectively in the store we are confidently heading to, it’s nice to be able to check this on...
Tips & Guidelines for A Better Mobile UX - pt1
When the iPhone came out it started the mobile web revolution: for the first time, we could browse web pages on a mobile phone in a decent and usable way. As soon as people had started to do that, the limits of the resizing technology used became evident, accompanied by a high demand for a...
Five Quick Tips to Learn JavaScript Faster
JavaScript has been around quite a while now and we can almost consider it part of the ”old wide web”. But the JavaScript we use now has evolved immensely since its first days. We could better say that what really evolved were the projects that had JavaScript as their core and that made the web...
Video Tutorial: Building a React App - pt1: Introduction
Anybody interested in Javascript development has likely stumbled on MVC frameworks, a term that is pretty much going strong recently and defines a library built according to the “model - view - controller” design pattern. React.js is a Javascript library that acts as the “view” part of an MVC...
Traditional, Headless or Decoupled: The New State of CMSs
Headless CMS is a term that has been on everybody’s lips recently, along with Content as a Service and Decoupled CMS. Actually, these three concepts are very closely related; you can’t talk about any of them without citing the others as well but, for a better insight on the topic, talking about...