This article was last updated 167 days ago. The information in it may have developed or changed. If it is invalid, please leave a message in the comment section.

Preface

A few days ago, when I was chatting with a friend, the issue of multi-language support for the website suddenly came up. He said that if the content could be converted to English with just one click, would it be possible to have a larger visitor base?

I never thought about this question before. Can a personal blog that I just want to have fun with go global? But when I think about it, if the blog supports multiple languages, the level will be raised immediately. Does it have the visual sense of the official website of a large company? Moreover, the current Internet environment in simplified Chinese is so poor. The search engines in China, led by Baidu, are very unfriendly to personal blogs (even more unfriendly to those that are not registered). The traffic-driving effect is basically equal to 0. If the website content supports English (or even more languages), and even if it can go a step further and support multi-language SEO (in fact, in many cases, this is more important than the translation of the web page itself, because now the browser itself or through plug-ins can provide full-text translation capabilities of web pages. From this perspective, how to let visitors find the website through search engines is more important), then, you can make full use of the traffic-driving effect of foreign search engines such as Google and Bing, and it can not only be limited to users who use simplified Chinese. The circle of potential visitors will be expanded a lot at once, right? Thinking about it, I am a little excited.

Note 1: In fact, this is the most basic requirement for an independent foreign trade website, and I had never thought of this idea before. As the old saying goes: Every industry has its own barriers, and the ancients were not deceiving me.

Note 2: The implementation of this article has technical barriers. It requires either a scientific or magical environment, or the use of a foreign cloud host. Otherwise, the Google Translate API cannot be used normally.

However, website translation is not a simple task. Depending on the type of website (static or dynamic), the appropriate translation solutions vary.

Website Translation (Administrator's Perspective)

Translation of static type websites

It is more troublesome to translate current static websites (such as those built with pure HTML, CSS and JavaScript). The disadvantages are mainly reflected in the following aspects:

1. Content fragmentation
• Spread across multiple files：The content of a static website is often distributed in multiple HTML files (or multiple JS scripts). Each page (or JS script) may have independent content, and the content of each page (or each JS script) needs to be located and translated one by one.
• Embedded in code: The text content of static websites is usually embedded directly in HTML files (or in JS scripts) rather than being centrally managed, which makes extracting and translating text more complicated.
2. Manual management
• No automated tools: Unlike dynamic websites (such as those using CMS), static websites do not have a built-in content management system to handle translation and multilingual management, and pages in different language versions need to be created and maintained manually.
• Update cumbersome: Every time the content is updated, the pages of each language version need to be manually synchronized, which increases the maintenance workload and the possibility of errors.
3. Links and Navigation
• Link Adjustment：The translated page links need to be adjusted accordingly to ensure that the navigation and internal and external links are correct. For example, from /about.html to /es/about.html.
• Navigation menu: The navigation menu needs to be adjusted separately for each language version so that users can switch between different language versions seamlessly.
4. SEO
• Multilingual SEO: Make sure each language version of the page has the correct metadata, title, and description so that search engines can correctly index and display the different language versions of the page.
• hreflang tag: You need to add hreflang tags to inform search engines of the language and geographic location of each page, helping search engines understand and correctly display content in different languages.
5. User Experience
• Language Switching: A user-friendly language switching mechanism needs to be designed and implemented to ensure that users can easily switch language versions without affecting their browsing experience.
• consistency： Ensure that the translated page is consistent with the original version in design and layout, and avoid style and layout problems caused by differences in language length and habits.

Because there are many things to pay attention to and manual processing is unrealistic, for static sites, it is best to choose a mature static site generator solution with good multi-language support (such as Next.js, Nuxt.js, Hugo, Jekyll, Gatsby, Eleventy, etc.). In this way, you can get multi-language support through its built-in multi-language support function or plug-in extension.

Translation of dynamic type websites

Compared with the difficulty of translating static websites, the translation of dynamic websites (such as websites built with CMS or frameworks) is much simpler. The advantages are mainly reflected in the following aspects:

Centrally manage content:
• Database storage: Content is usually stored in a database and can be centrally managed, facilitating unified extraction and translation.
• CMS Integration: Many CMS (such as WordPress) provide built-in or plug-in multilingual support, which can simplify the translation and management of multilingual content.
Automation and tool support:
• Plugins and modules: Dynamic websites can take advantage of various plugins and modules (such as WPML, Polylang, GTranslate, TranslatePress, etc.) to automate translation workflows and reduce manual workload.
• API Support: Many dynamic website frameworks provide API support, which can integrate third-party translation services to achieve automatic translation and synchronization.
Real-time updates and version control:
• Content Updates: After the content is updated, it can be automatically synchronized to each language version to ensure consistency and real-time.
• version control: You can use a version control system (such as Git) to manage and track changes to translation content.
user experience:
• Dynamic Switching: Users can switch languages directly through the interface without jumping to different pages.
• Multilingual SEO Optimization: Dynamic websites can use hreflang tags and other SEO techniques more flexibly to optimize search engines' indexing of multilingual content.

As luck would have it, my blog is a typical dynamic website built with WordPress. Isn’t this right up my alley? So this article will use the WordPress of my blog as an example for demonstration.

WordPress translation plugin selection

There are many translation plugins available on WordPress (it is increasingly proving how wise it was for me to choose WordPress, which is the most popular platform, to build my blog from the beginning~), such as WPML, Polylang, Weglot, GTranslate, TranslatePress, etc. These plugins have their own advantages and disadvantages. There are many comparative articles on the Internet, so I will not introduce them one by one. I will only judge from the degree to which the "free" version of the plugin supports the three functions that personal bloggers need: 1. Multi-language support 2. Automatic translation 3. Support for manual modification of translation content

Note: Many websites that need translation plugins are commercial websites related to cross-border business (not short of money), so the paid versions of translation plugins are basically charged on a monthly basis. For example, GTranslate, the cheapest paid version is 9.99 US dollars/month:

As you can see from the picture above, for the free version, GTranslate does not support functions such as multilingual SEO (Search engine indexing in the picture above). Of course, other translation plugins are similar.

Another example is the price of the paid version of TranslatePress. The cheapest personal version costs 8.25 euros per month:

Therefore, for general individual webmasters, it is not realistic to use translation plug-ins in a formal paid manner, as the cost is too high.

After a lot of trouble, I finally selected two target translation plug-ins based on their support for the above three functions: GTranslate and TranslatePress.

Automatic Translation

GTranslate plugin

Pros and Cons of GTranslate Plugin

advantage:

Automatic translation：Use Google Translate API to automatically translate website content, supporting multiple languages (compared with TranslatePress's automatic translation, GTranslate can automatically and unlimitedly use Google Translate API without setting up a Google Cloud account, which is very convenient, full score 10!).
Easy installation: Easy to set up and can be configured in just minutes.
Language Switcher Widget: Provides a small tool (language switcher) that allows users to select the language to be translated, which is convenient and quick.
Widespread support: Supports almost all WordPress themes and plugins.

shortcoming:

Translation Quality：The quality of automatic translation depends on Google Translate, which may not be accurate enough. In theory, it needs manual proofreading and modification, but the free version of GTranslate does not support manual modification. So for the free version, even if you see poor translation, you can't change it. The main feature is that the translation effect is left to chance.
Multilingual SEO: As mentioned before, the free version does not provide multilingual SEO functionality (all plugins are the same, so this is not really a disadvantage).
Customizability: The free version has limited customization options, and you cannot customize the appearance and position of the language switch button (in fact, you can still set the position based on widgets and shortcodes. As for the appearance, you can also change it as long as you are familiar with CSS. It’s just that I have always had a headache with CSS, and I really have no talent for appearance~).
Cache Issues: In some cases, there may be caching issues that prevent translations from being updated in a timely manner.

GTranslate plugin language selector visual effects

GTranslate plugin provides 2 ready-made language selector display modes, the language selector displayed on the menu (attached to the menu) and the floating language selector (4 positions can be selected, top left, bottom left, top right, bottom right), as shown below:

The translation effect of selecting English looks OK:

There are two ways to expand the language selector:

I feel that the floating language selector on the lower left corner is more harmonious. The language selector on the top menu is neither up nor down, which is very uncomfortable for me as a person with obsessive-compulsive disorder. Therefore, I usually only keep the floating language selector on the lower left corner. The key is that it can also be clearly seen on mobile browsers, similar to the effect shown in the red box in the figure below (using the effect of TranslatePress to pretend, but it is actually similar):

Tips: You can also use WordPress widgets and short codes ([gtranslate]) to deploy language switchers in various locations on the site.

GTranslate plugin settings

The free version of GTranslate plugin is very simple to set up, with only one page and less than 10 options:

GTranslate plugin summary

In general, GTranslate supports two of the three functions mentioned above: multi-language support and automatic translation. However, the third function: manual modification of translation content is not supported in the FREE version of GTranslate, which is not very friendly to friends who demand excellence. However, for ordinary lazy webmasters, I guess they don’t have the energy to modify it manually.

Therefore, for general individual webmasters, if they just need the website to support multiple languages (just want to use it to show off and make the website look more upscale), and don’t care about the multi-language SEO function, then the simplest and most user-friendly plug-in is GTranslate. It is easy to install and configure. The FREE version supports all languages, and supports full-text automatic machine translation, and there is no limit on the number of words and pages. It is very conscientious. In fact, you don’t need to read the content after the article because it is too troublesome. Some ambitious individual webmasters can continue reading below.

Note: GTranslate FREE version uses real-time translation of web pages (so it is understandable that it does not support manual revision function), that is, every time a page is loaded, the plug-in will call Google Translate API in real time to translate the website page, so the speed of website translation depends on the quality of communication between the site and Google Translate API. If the communication quality is not high, it is likely to affect the loading speed of the site page (Note: If the site is built in China, there is no need to worry about the communication quality with Google Translate API, because the communication is very stable: it is not connected at all), and the real-time translation method is not conducive to the realization of multi-language SEO (but this does not matter, because all free versions of translation plug-ins do not support multi-language SEO, fair ~), while the paid version of GTranslate is different, it supports storing the translated content in the database and also supports multi-language SEO.

TranslatePress Plugin

Pros and Cons of the TranslatePress Plugin

advantage:

Visual translation interface：Provides a real-time visual editing interface on the front end, which allows you to translate directly on the page (supported by the free version). What you see is what you get. As shown in the following figure, you can intuitively see the content that needs to be modified on the page translated into English:
Manual Translation: Supports manual translation, allowing users to more accurately control the translation content (such as the content in the red box in the above picture).
Support for multiple translation contents: You can translate the text of pages, posts, plugins and themes, with a lot of customization space
Local Storage：All translations are stored in the local database and do not rely on third-party services (this is a feature of the paid version of GTranslate. That is to say, compared with the free version of GTranslate, which always relies on Google Translate API, the free version of TranslatePress is the same as the paid version of GTranslate. It only needs to communicate with Google Translate API when translating. After the translation is completed and the translated content is saved in the database, it is no longer necessary to communicate with Google Translate API. This is very important and the reason why I finally chose TranslatePress).
shortcoming:
Automatic translation has a high threshold：If you want to use Google Translate v2 with the free version of the automatic translation engine, you need to obtain the Google Translate API key, and API calls will incur fees (this is more troublesome and may discourage many people. There is a bad news and a good news: the bad news is that you need to register a Google Cloud account first, and a VISA-supported credit card is required for verification when registering; the good news is that if you are a new Google Cloud user, you will receive a cash voucher worth $300~, so the fees are equivalent to nothing). Compared to GTranslate, which can automatically use the Google Translate API indefinitely after installation, the automatic translation function of TranslatePress has a too high threshold for use, so if you only need the multi-language translation function, just choose GTranslate and don't need to consider the free version of TranslatePress.

Note: TranslatePress's automatic translation engine is of course not limited to Google Translate v2. You can also choose DEEPL and TranslatePress AI:

However, DEEPL uses DEEPL Free API, which is also very time-consuming and easy to be blocked (because it cannot be registered in China, and generally can only be purchased on Taobao, which is more dangerous); and using TranslatePress AI requires a paid membership, which is at least 8.25 euros a month. So in general, if you want to use TranslatePress, registering a Google Cloud account to obtain a Google Translate API key to use Google Translate v2 is actually the most cost-effective way, but it requires a lot of time, and I spent half an hour on it. . .

Language switch option: The free version only offers limited language switch button style and position options (same as GTranslate free version, so it’s not really a disadvantage).
Multi-language support: The free version only supports up to 2 languages. If you need more languages, you need a paid version (this is a bit tricky compared to the free version of GTranslate. However, for personal webmasters who just want to show off, English seems to be basically enough~).

TranslatePress plugin language selector visual effect

Unlike GTranslate, the TranslatePress menu mode does not produce ready-made effects by checking the box, but provides a separate menu item in the "Appearance"-"Menu" of the WordPress background, so you need to create the menu item manually:

The final effect is as follows:

Menu item expansion effect (different display modes are determined by the setting parameters of the "General"-"Language Switch" option in the TranslatePress plugin):

The expansion effect of the floating language selector in the lower left corner (different display modes are determined by the setting parameters of the "General"-"Language Switch" option in the TranslatePress plug-in):

TranslatePress Plugin Settings

In this part, I will simply list the key pages. The content will be covered in the following parts, so you can just go over them.
General options:

Automatic translation:

Additional features (not available in the free version, the ones on the far right are grayed out):

TranslatePress Plugin Summary

In general, from the perspective of the free version of automatic translation, TranslatePress and GTranslate are completely incomparable: they only support up to 2 languages, and the automatic translation is also laborious, so why should I waste my energy introducing TranslatePress? In fact, the key reason is that the free version of TranslatePress stores the translation data in the database, which is the most basic condition for the realization of multilingual SEO.

Multilingual SEO

Related knowledge extension: Client-side rendering, server-side rendering and SEO

When I compared the differences in translation behaviors between the free version of GTranslate and the free version of TranslatePress, and thought about their relationship with multilingual SEO, I always had a sense of déjà vu. Suddenly, at some point, I remembered that this is the relationship between client-side rendering (CSR), server-side rendering (SSR) and SEO.

Server-side rendering means generating a complete HTML page on the server side, and then sending the HTML content directly to the browser for display. Since the page content has been generated as static HTML on the server side, search engines can more easily crawl and index all the content of the page.

Client-side rendering refers to using JavaScript in the user's browser to request data through an API, and dynamically generating and displaying content on the client. Since the rendering of page content requires waiting for JavaScript to load and execute, the first load time may be longer. Traditional search engine crawlers usually wait for JavaScript to execute when crawling pages, but not all search engines can fully understand and process JavaScript-rendered content. Therefore, compared with server-side rendering, client-side rendering is not conducive to SEO (unless the search engine crawler function is upgraded to support JavaScript more perfectly).

This aspect is related to the concept of Ajax. If you are interested, you can refer to my other article:Home Data Center Series: A review of the core concepts of current Web development starting with the Ajax cross-domain issue (from a non-programmer's perspective).

The working method of GTranslate free version is to use JavaScript to load real-time translation content in the visitor's browser (similar to client-side rendering). This method is not suitable for SEO. The free version of TranslatePress directly translates the content and stores it in the local database (similar to server-side rendering, which is equivalent to generating content in advance). Therefore, the working method of TranslatePress free version is very suitable for SEO (it's just that the function of multi-language SEO is limited. Then, in theory, you can use special methods to temporarily skip this limitation and get a "beta version" with complete functions). I'll stop here and won't elaborate on it. You can understand it. It is mainly for testing the effect of multi-language SEO. When I have money in the future, I will definitely support the official version.

TranslatePress Full Version Features

When TranslatePress temporarily lifted its functional restrictions, the following differences emerged.
Multi-language support:

Additional features fully enabled:

Advanced has an additional "Automatic User Language Detection" function, which will prompt the user whether they need to switch languages:

Multilingual SEO effectiveness verification

As I mentioned before, I am more concerned about the multilingual SEO function than the automatic translation function, and whether it is useful for personal bloggers like us. I started using the full version of TranslatePress around August 3, and as of today, August 6, I can roughly observe whether multilingual SEO is effective, based on the statistics of umami, the website traffic monitoring system of my blog (for the installation of umami, see the article:Home Data Center Series The latest version of umami (2.11.3) detailed construction tutorial), theoretically, if multilingual SEO is effective, then the number of countries from which access requests came before installing the TranslatePress plugin and enabling multilingual SEO should be significantly less than the number of countries from which access requests came after installing the plugin.

The umami source countries on August 2 (the day before installing the TranslatePress plugin and enabling multilingual SEO) are as follows (11):

As of 16:30 on August 6, the statistics of countries visited by umami are as follows (24):

At least from the perspective of the number of visiting countries, the effect of enabling multilingual SEO is very obvious.

Afterword

Three days is too short to fully prove the effectiveness of multilingual SEO (after all, SEO takes time to take effect), so I will observe it for a while and update the results if I find anything.

Another 1: The Deep engine of TranslatePress automatic translation can actually be used directly in China, and it does not seem to be blocked at present. However, the key problem is that domestic credit cards cannot register and activate the DeepL API, so you need to go to Taobao to spend dozens of yuan to buy a free API that is valid for life. However, there is a risk of being blocked.

Another 2: If you choose Google Translate v2 as the automatic translation engine, you need a Google Cloud account to create a Google Translate API key. If you don’t have one, you need to register a new one. However, since the country region does not support mainland China (why do I say again??), you can consider using any Hong Kong address instead and pass the verification with a domestic credit card that supports VISA. After passing, you will receive a credit worth US$300 (if you register with a Hong Kong address, it will be converted into the equivalent amount of Hong Kong dollars), which is valid for 3 months:

There are many tutorials online on how to register a Google Cloud account, how to create a project and obtain a Google Translate API key. If you need it, you can search it online yourself. I will not write it separately.