A Complete Guide to Building a Multilingual Ecommerce Website
So, you’ve reached the research point and you’re keen to know whether a multilingual eCommerce website is a credible option for your online business?
You’ve come to the right place.
Within this comprehensive guide to all the considerations of designing and building a multilingual eCommerce website, we’ll show you the importance of localization in everything you do, spanning:
- Choosing the right CMS
- Technical issues
- User experience (UX)
Choose a CMS
A CMS is pivotal to any eCommerce platform, especially those without web development knowledge. Just make sure your chosen platform is able to translate your system and content into all the languages you need.
Intuitive “What Your See Is What You Get” (WYSIWYG) platforms like the highly popular WordPress make it possible to edit text, create new landing pages, drag and drop designs and so on.
If you anticipate selling your services across a multilingual platform, it’s vital that your chosen CMS is designed to accept transactions in a plethora of currencies as WooCommerce does.
The best way to translate content is by integrating a translation management system (TMS). This allows your digital marketing team to transfer files quickly and efficiently via pre-scheduled batches.
If you want people to find your eCommerce website organically via multiple search engines, you’ll also need to invest time and effort in a multilingual SEO strategy. This will require you to optimize the content on your website’s landing pages for different languages, helping consumers in existing and prospective nations to find you more easily in the search engine results pages (SERPs).
By making your eCommerce website available to consume in multiple languages, targeting specific regions in the process, you can achieve two main objectives:
- You immediately enhance your target audience
- Your brand’s chances are greatly improved for ranking for competitive search terms across multiple languages and regions
Multilingual SEO – make sure each page is translated and targets the necessary revenue-driving search terms. Sounds easy, doesn’t it? The reality is that multilingual SEO is a real minefield to overcome. Poor implementation of a multilingual SEO strategy could cost you severely in the SERPs across multiple languages and regions.
That’s largely due to the threat of duplicate content, which is a known bugbear of leading search engines like Google. If your multilingual e-commerce website displays almost identical content on your website on multiple location-specific pages, the search engines will struggle to know which page to rank in their SERPs. You’ll end up having multiple pages saying the same thing to different people, competing with one another – nightmare.
Contextually, you’ll need to put in a lot of research when translating your content from the mother tongue to additional languages. Some words have different meanings or connotations in certain countries or regions. That’s why it’s always best to employ a professional to undertake a thorough translation of your website’s content into alternate languages, preventing your brand from making embarrassing and potentially costly errors that lose you custom.
In technical terms, multilingual SEO strategies require you to consider the following steps for your website:
Tagging and coding
A clever way to ensure that Google and other major search engines know what language you are using on a specific landing page is to use hreflang tags. These tags make it clear to search engines, enabling them to serve the right landing page for users searching for your goods or services in that language.
Hreflang attributes make it possible to show a clear distinction between one landing page and the next, particularly those displaying the same content in different languages. It helps multilingual brands to overcome the hurdle of duplicate content and provide the best possible user experience to your targeted regions.
These hreflang signals have been in existence since the back end of 2011, providing a clear signal to a search engine that a user searching in language “y” will want to see this result, as opposed to a landing page with similar content in language “x”. Google and Yandex are leading the way with hreflang signals, while Bing uses its own form of signals in the form of language meta tags.
Let’s take a look at Google’s basic hreflang tag used for an example landing page:
Let’s say your new multilingual website wants to reach out to a French demographic. You’ll no doubt rewrite the original content of your US English homepage in French, but in order for the likes of Google to overlook it as duplicate content, you would need to incorporate a “French” hreflang tag e.g. link rel=”alternate” href=http://website.com hreflang=fr” ?>
It’s a hugely effective multilingual SEO technique that makes it much easier for multinational retailers to target specific users geographically, providing regionalized currency, shipping, and cultural references.
Of course, it’s important to reinforce before we change tac that hreflang tags are merely a signal as opposed to a directive for search engine crawl bots. This means that without aligning other SEO factors to your hreflang tags, these may override the hreflang code and result in your landing page ranking in the wrong language for the wrong users.
URL and Domain structure
Of course, not all duplicate content is deemed detrimental by the major search engines, but those websites with duplicate content within multiple URLs will often experience penalties such was greatly reduced rankings or even total deindexing from a search engine.
Fortunately, Google has offered a remedy for multilingual retailers, providing a “best practice” guide to using “dedicated URLs” that incorporate a language indicator to the search engine’s crawl bots.
The indicator is used to denote the nation or language that a particular landing page or website section is catered for. For instance:
|Tip: Aside from using subdirectories, you could also use two other dedicated URL or domain structures to help provide clarity to Google over regionalized landing pages:|
It’s still worth noting that even using language indicators for each specific landing page or website section can still result in Google misinterpreting your multilingual website and penalizing it for duplicate content. The key is to make sure that each specific page is targeted for localized, contextual SEO terms, making it crystal clear which page is written for which demographic.
Of course, your chosen multilingual CMS should be able to assist you in the creation of subdomains or subdirectories, should you wish to go down either route.
Although English remains one of the world’s most popular languages globally, there is thought to be almost 7,000 different languages spoken worldwide. Some of them are even more commonly spoken than English, like Chinese and Spanish.
Furthermore, some of your target customers are likely to be bilingual, with the ability to read and interpret data and information in multiple languages as opposed to their mother tongue.
That’s why it’s a good idea to find a CMS that offers an in-built language switching mechanism, capable of allowing website visitors to alternate between languages at the touch of a button.
There are CMS platforms that offer in-app functionality for language menus, allowing users to be shown the content in the correct language based on the location and language of their web browsers, but also giving them the flexibility to alternate and translate the copy back into another language.
Tip: Let first-time visitors to your website select their preferred language. So many online retailers still don't offer this functionality, instead of forcing users to switch regions when all they want is to change the language of the on-page content.
The art of localization
Let’s say for example that you already have a successful, thriving eCommerce website that generates plenty of sales and revenue for you in the US. It has a solid backlink profile and domain authority, ensuring solid rankings in the major search engines among US-based users.
However, you’re thinking of selling to a broader audience. If you’ve noticed that your traffic numbers are lower than they should be from other nations overseas, the chances are your website is not localized enough for each specific region.
Without localization, users will be immediately turned off when they land on your site and will bounce quickly to a competitor that’s more local and culturally relevant to them.
Design pages that suit the culture of the nation or language
The aesthetics of a landing page are just as important as the words on the screen. When you are designing a multilingual eCommerce website, you must ensure that the images and icons used are interpreted the way they should be. It’s also important that a brand can be relevant to specific demographics. For instance, the use of Western models on an eCommerce landing page targeting users in the Far East is unlikely to resonate as well as one with Asian language models used.
Cultural sensitivity is incredibly important. Be sure to empower a team or department within your business to undertake research to find what’s culturally appropriate; and whenever you’re in doubt, always play it safe to avoid losing prospects and doing damage to your brand reputation.
We’ve already touched upon the fact that images can be interpreted differently depending on where people come from and it’s the same with colors too. That’s why multilingual eCommerce sites need to think carefully about culturally appropriate colors when designing location-specific landing pages to resonate with their target demographic.
In the Western world, red is a color that’s synonymous with passion and love – as well as danger. In the Far East, red is a symbol of good fortune and luck, while some African nations associate red with aggression.
Again, if you’re keen to make a good impression on everyone, it’s a good idea to use “safe” colors that are most commonly accepted around the world. Blue is a very popular color in these circumstances as it is more calming than brighter colors like red and yellow. Blue is also a very popular color used by high-street banks and lenders, so many consumers will know that blue conveys integrity and trust.
Tip: If you want to design landing pages that convert, consider the 60-30-10 rule - dedicate 60% of color to your landing page background, 30% to your 'base' i.e. the second-most prevalent color on the landing page, and 10% to your accent color e.g. the color of your call-to-action button.
It might be tempting to keep some text on landing pages the same across different languages. For instance, some eCommerce sites may have translated the main body of a landing page in the past but kept the navigational text in the brand’s original language.
However, this is considered a lazy move on the retailer’s part. Utilizing multiple languages on the same landing page could certainly dilute a user’s experience, posing more questions than answers. In the example above, an overseas user might be attracted to buy from your website after reading the translated main body of text, but once they try to navigate to other categories or sections of your site in another language they are immediately turned off.
Some eCommerce sites will also display user-generated reviews and feedback on their goods or services. However, if these reviews are displayed in different languages, the power of this feedback can lose its meaning and context in the eyes of prospective buyers. Try to use a CMS or API solution that can immediately detect where a user is browsing from and translate all on-page copy into their native language.
Handling images with text on them
It’s important to remember that a fully translated multilingual eCommerce website won’t just translate words on-screen, but images too.
There are plugins available within many CMS platforms that allow your sites to translate existing imagery, displaying more relevant, engaging imagery to specific demographics using image metadata.
Furthermore, these plugins and apps can also translate the original overlaid text so that it remains contextual and relevant to overseas users.
There are several other technical issues when it comes to the look and feel of your multilingual eCommerce website that must be up to scratch from your date of launch.
Primarily, these technicalities relate to how potential consumers are used to reading and navigating around websites.
You might be surprised to know that certain languages translate longer and shorter than others. Furthermore, some on-screen fonts will require support for different scripts than others and some users will be used to reading screens from right-to-left instead of left-to-right.
Your website typography
According to W3C, all websites – multilingual or otherwise – should specify the encoding of their web pages within their metadata. The use of UTF-8 ensures that all special characters can be adequately displayed, regardless of what language the page is translated into down the line.
You can declare the use of UTF-8 in your metadata using the following HTML code:
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
It’s also important to make sure that any fonts you choose for your multilingual website are compatible with all the languages you need to translate into, particularly those non-Latin languages. While most fonts will support Latin languages, some don’t support Cyrillic or RTL, so be sure that your favored Webfont supports the languages you need before choosing a specific font package.
If you are planning on targeting consumers in the Middle East, the chances are your multilingual eCommerce website will also need to cater to users that read from right-to-left, as well as left-to-right.
Even the biggest websites have had to invest time and money in mirroring their web designs for right-to-left demographics, which can be a big change in terms of page layout, calls-to-action, menus, and navigation.
There are some CMS platforms that will support the use of right-to-left languages and using basic CSS markup it’s possible to alter the layout of a multilingual eCommerce website to accommodate languages such as Hebrew, Persian, and Arabic. You can add any rules you need in the CSS markup, whether it’s alterations to the size of the font, line height, and many other features to make sure all right-to-left languages fit your chosen design.
|Tip: On-page elements of your landing page linked to the management of media content i.e. "Play" on an embedded video player, don't need to be mirrored in an RTL design.|
Language line length
When it comes to the technicalities of your eCommerce design and the translation of texts from language into another, a schoolboy error some brands make is failing to take into account that the size of the original text can be longer – or smaller – after translating it into another language. This can make your web design layout look cluttered or, at the other end of the spectrum, somewhat too sparse.
You’ll need to do your research as to the target languages you want to translate your website in, and which ones are shorter or longer than others. Typically, Japanese and Chinese characters take up less space, as they can be used to convey multiple words in one symbol.
Common European languages such as German, Italian and Greek can translate up to 30% longer than American English and other languages like Chinese, Japanese and Arabic. To be forewarned is to be forearmed!
To account for text expansion due to translations, the W3C recommends the need for adaptive elements of your website’s user interface. Input fields, buttons, and descriptive text fields shouldn’t be fixed width, allowing “text to reflow” naturally.
The bottom line for any multilingual eCommerce website is that you must optimize the user journey to avoid missing out on sales revenue that could potentially cripple your business long-term. It doesn’t matter what you’re selling, you must make sure users are aware that the site is translated into their native tongue within a matter of seconds of their arrival.
Make language buttons highly visible or, better still, ensure that an auto redirection feature is enabled so that users don’t even have to switch to their native language themselves.
The less work your visitors have to do to find the products and services they need on your site, the greater the likelihood of them staying and making an all-important purchase.
Which one is better: a large multilingual website or a brand with multiple websites in several languages?
If you are merely planning to localize the content on your original website for specific languages and regions, a larger multilingual website is a sensible option. You can separate the pages and give each one an identity using hreflang tags and it will reduce the dilution of your brand’s backlink profile too.
On the other hand, if you are operating in a niche industry with limited resources, separate sites per region or language may be preferable, particularly for demographics that prefer very “native” user experiences.
If you don’t think of all these factors involved with designing and operating a multilingual website in advance, you could severely hamstring your eCommerce business and its bottom line.
Be sure to put localization at the heart of your design and SEO strategy, particularly if you are looking for sales further afield in the future.