Multi-language web design

Multilanguage Website vs. Automatic Translation

These are two completely different things. An automatic translation can lead to big misunderstandings between users and visitors or customers. It should be avoided.

An English website can’t be easily read by a Chinese speaker and vice versa. Although online translators and browser translation features abound, it’s better to let users decide if they want to use these tools. If you offer an automatically translated version of your website or web page, users may assume that the content has been properly written by you (the website owner or company), which can lead to some perplexities:

• Why is it so badly written?
• Why can’t I understand it easily?
• Why is the content so confusing?

If the user/customer applies a non-human translation themselves, they will be aware that possible mistakes and misunderstandings can occur.

Especially in descriptions of products and details of a service, an automatic translation can lead the user to abandon the page due to not understanding the products. The same sad result can happen with a confusing path to a payment gateway.

On the other hand, if the visitor uses Google Translate or other browser translation systems, they will not give too much importance to the translation errors, as they will believe that any mistakes are due to the online translator.

Human translation is better. Although human translations can have some spelling, grammar, and verb conjugation errors, the message and the content will not be misunderstood.

Each Page to Each Page

When creating a website, it is very important to consider the links to the other language. The web design should link each page to its exact counterpart in the other language.

For example, if you are on the “Contact” page of an English website and you click the link to switch to Thai, you should land on the “Contact” page in Thai, not the Home page in Thai! Many websites make this mistake, which is very annoying for users. They are forced to navigate the website all over again.

Imagine a user who found a page from a search engine result, navigated through various links, and sees their preferred language is available. After clicking the link, they land on the home page with different content and images. They will likely feel disoriented and might go back to the search results, possibly thinking, “Ugh! Ufff!”

Moreover, this unfriendly user interface mistake is also considered unfriendly by Google for three main reasons:

1. Mistake in URL structure: from contacts.php (for example), the page goes to index.php (home page).
2. The anchor text of the link is probably not congruous with the content of the page.
3. The content of the page is absolutely not congruous with the other language counterpart page.

This will negatively affect your SEO performance.

A common way (but not the only one) to create a navigation menu in websites is to include a file (or a file for each language) with all the links using the PHP include file function:

<?php include 'file-with-your-links.php'; ?>

In this way, you can put a link to another language (maybe something like a flag) in the above file that will appear on all pages. But it will point to the same page regardless of which page you are visiting at that moment.
To avoid this, a simple method (note that there are many other ways to achieve it) is to let the link be created by a PHP string that will add an extension (or a folder prefix).
Assuming that your file name is contacts.php and the respective file in Thai is contacts_th.php, in the above part of the file contacts.php, you will add this:

<?php
$path = "https://yourdomain.com/your-website-folder/contacts.php";
?>

And in the language link of the file-with-your-links.php (that will be common to all the pages), modify as follows:

<a href="<?php echo basename($path, ".php"); ?>_TH.php" title="ภาษาไทย">ภาษาไทย</a>

The echo basename function will print the link target corresponding to the file name of the path (see above), remove .php, and add _TH.php. So, on any page, you will have the exact name of the same page modified to point to the other language file.
You can also do the reverse, from Thai to English, by removing _TH.php and replacing it with only .php:

<a href="<?php echo basename($path, "_TH.php"); ?>.php" title="English language">English</a>

You can also provide appropriate titles and anchor text using variables defined in each relative page. If you want to study it, visit the PHP 5 echo and print Statements learning page and run the examples in the Display Variables section.

If your website is in HTML, you can force it to run PHP functions within the HTML file itself. Add this syntax to the .htaccess file in the root of your website (if using PHP 5):

AddHandler application/x-httpd-php5 .html

Or

AddHandler application/x-httpd-lsphp .htm .html

In case the first one does not work.

Missing Pages

If a website is very rich in content, it can happen that some articles don’t have translations yet. So what should you do with the link to the second language?

Never generically link back to the homepage! As described above, it will be an incongruous link.

Never insert the # in the link (# means that after clicking the link, it will not go anywhere, and the visitor will remain on the same page). In both cases, the URL structure of the website will not be uniform. Clicking a link that keeps you on the same page is very confusing. Users might think there are problems with their internet connection, and once they realize the connection is fine, they might think the website is malfunctioning or incompatible with their browser. Or they might simply ugh and ufff again.

The correct way to handle this is to create a page with the same layout as all the other pages, including navigation and other details. In the above-the-fold area, post a correct translation of the title with a short description, and add a note that the page is not yet ready in this language. Place a link back to the page with the content in the original language.

In this way, even from an SEO point of view, the worst that can happen is that the search engine will drop that single, almost empty page from the index. However, it will still consider the website's navigation user-friendly and uniform.

Inclusion of Languages

This is a very common issue.

Example: you have a Thai language page with Thai content and you need to add some English text:

“...เพื่อช่วยพัฒนาเว็บไซต์ให้เจริญเติบโตอย่างรวดเร็วและครอบคลุมทุกพื้นที่ สำหรับเคล็ดลับเว็บโฮสติ้งของเรามี cPanel® แหล่งที่รวบรวมองค์ประกอบหลายสิ่งหลายอย่าง เช่น Attracta® SEO tools, website backup wizard, CloudFlare, password protect directories, parked domain...”

These inclusions are common because many of these words are actually commonly used and recognized in English in many languages.

According to correct HTML syntax, the English part should be included in the following way:

...หลายสิ่งหลายอย่าง เช่น <span lang="en">Attracta® SEO tools, website backup wizard...</span>

However, this can sometimes be very time-consuming.

The suggestions are:

• When inserting a domain name, such as webdee-seoservice.com, don’t use the <span lang> tag; search engines will recognize it as a domain.
• For acronyms, don’t use the <span lang> tag.
• In other cases, try to use it.

Using the correct language indication in the HTML code ensures that the English inclusion is intentional and that the web page is not mixing up languages.

Moreover, and probably even more importantly, people with visual impairments use screen readers to read websites. The <span lang> tag will indicate which language to read and pronounce the content of that span. A visually impaired-friendly website gets a boost in SEO!

To ensure a screen reader works correctly, you must state the language in the head of the HTML document:

<meta http-equiv="Content-Language" content="en">

or

<html lang="en">

Privacy and Terms of Service Pages

These pages are also called legal pages. You shouldn’t attempt to translate them directly as they may lose their legal value in another language, even if the translation is perfect.

Instead, create a general translation of your main privacy policy and terms of service in short. State that the translated page is not intended to be legally binding and for more precise information, rely on the original language, which will prevail. Add a link to the original legal page.

Google

And other search engines don’t like websites that mix languages inconsistently. Users don’t either. Imagine reading a webpage in a language you understand, following a link, and landing on a page in a different language. Not good!

Some exceptions can be tolerated if the link is to another domain or an external website. In that case, the source may not have a version available in the user's preferred language, but the content is valuable and still worth sharing. Please indicate in the anchor text that the target page will be in a different language.

However, within the same domain/website, avoid linking to content in different languages as much as possible.

Technically, you can give an indication inside the meta tag of the head section of the page to link to the same page in another language. An example syntax:



If this is getting too complicated, you can read a specific article on International optimization.

If you are not sure about this, just ignore it and stick to perfect links: each one to the exact corresponding page in the other language. This approach will be very user-friendly and therefore Google-friendly.

Easy to Find Language Switching

"How do I change the language?" This is often the first thought for anyone landing on a webpage in an unfamiliar language.

Strangely, many major websites, including Google itself, make this user-unfriendly mistake. Ironically, the most challenging way to change the language is often found on Google Translator itself!

The language switch should be an anchor text that is visible and written in the language of the target, not in the current language! For example, if I am an English speaker visiting a touristic website about Moscow in Russian, the "English link" should be clearly written in English ("for English click here"), not in Russian ("для английского нажмите здесь"). This seems obvious, but as seen in the examples below, this mistake is common on many websites:


In the last example, the website offers 5 languages with easily identifiable language names. Thai and Russian use different alphabets, and users appreciate finding the language name in those characters.

Did you notice something? If the page is in English, there is no English flag. Of course, if you're already viewing the page in English, why would you need to switch to English again? In other language versions, you'll find the English flag.

This technique prevents people with visual impairments from repeatedly hearing "link to English language" while using a screen reader. Clicking the link would just return them to the English version unnecessarily.

A flag can be visually appealing and easy to locate, but it's not friendly for people with visual impairments. In such cases, the flag file should be properly renamed (e.g., english-language-link.jpg) and include an alt attribute for the reader to interpret.

If you prefer not to load an image for a flag due to bandwidth concerns, consider using the HTML symbol instead. This can be particularly useful for smartphones on slow internet connections, although not all browsers may render it properly. You can explore options on EmojiPedia.

The best solution is always an anchor text that is visible and written in the language of the target:


Auto Detecting Language

Automatic language detection systems redirect or serve webpages in a specific language based on various parameters:

• User's location (IP address)
• Browser language settings
• Previous visits (cookies)
• User settings in sessions requiring login
• Others

These systems are commonly used by large websites operating in multiple countries, such as Google, Yahoo, and Amazon.

While useful for presenting content in a user's preferred language without requiring manual selection, they can be a nightmare for travelers or expats in countries with different alphabets (e.g., Thailand, Russia, Arab countries). Users may struggle to find their way back to English because everything, including the word "language," is presented in an unfamiliar script: ไทย, русский, عربى!

Therefore, if implementing an auto-detecting language system, always include a visible link written in Latin characters for switching languages, possibly supplemented with flags.

Another issue with auto-detecting language systems is that users may unexpectedly revert to the country's language during navigation, even during critical tasks like credit card transactions on e-commerce sites.

Before implementing such a system, think not just twice, but ten times over!

If your website supports only a few languages, it's often best to avoid using an auto-detecting language system. Instead, default to the main language of the website's country and provide a visible language switch. This approach is generally more appreciated by users.

Pricing

Determining the cost for creating a multilanguage or multilingual website depends on two main factors:

1. Do you need the structure only in two languages, with content provided by you?
2. Do you also need translation services?

Between these points, if you opt for just the structure (including flags and appropriate links between pages), will you provide the anchor text in both languages, or do you also require translations of the anchor texts?

To provide you with a starting indication:
The cost to add a second language to a website that we design, which you purchase from one of our offers (up to 10 pages), is 3,000 THB in addition to the website cost. This price does not include translation services; you must provide the translated content.
If you also require translation (limited to titles, descriptions, and intros), the price is 6,000 THB.

For comprehensive translation services, please contact us to discuss pricing in advance.

You can find more information about prices for various websites and services on our pricing page.