Preface
A few days ago, while chatting with a friend, the topic of multi-language support for websites suddenly came up, wondering if converting the content to English with one click could attract a larger audience of visitors.
I had never thought about this question before. A personal blog just for fun, could it really go global? But on second thought, if the blog supports multiple languages, the class of it immediately goes up, giving it the vibe of a major company's official website, right? Besides, the current Simplified Chinese internet environment is so poor, and domestic search engines led by Baidu are very unfriendly to personal blogs (even more unfriendly to unregistered ones), with traffic generation effects basically equal to 0. If the website content supports English (or even more languages), and if it can go a step further to support multi-language SEO (actually, in many cases, this is even more important than the translation of the webpage itself, because nowadays browsers themselves or through plugins can provide full-text translation of webpages; from this perspective, how to let visitors find the website through search engines is actually more important), then we can fully leverage the traffic generation effects of foreign search engines like Google and Bing, and not be limited to users of Simplified Chinese. The circle of potential visitors would suddenly expand a lot, wouldn't it? It's actually a bit exciting to think about.
Note 1: Actually, this is the most basic requirement for foreign trade independent websites, yet I had never even thought of it before. As the old saying goes: "Different trades are like different worlds." The ancients truly did not deceive me.
Note 2: The implementation in this article has a technical threshold. You either need a scientific or magical internet environment, or you must use a foreign cloud host; otherwise, you cannot use the Google Translate API normally.
However, website-side translation is not a simple matter. Depending on the type of website (static or dynamic), the suitable translation solutions vary.
Website Translation (Administrator's Perspective)
Translation of Static Websites
Modern static websites (such as those built purely with HTML, CSS, and JavaScript) are quite troublesome to translate, with disadvantages mainly reflected in the following aspects:
Scattered Content
• Scattered across multiple files: The content of static websites is often distributed across multiple HTML files (or multiple JS scripts). Each page (or JS script) may have independent content, requiring you to locate and translate the content of each page (or each JS script) one by one.
• Embedded in code: The text content of static websites is usually directly embedded in HTML files (or JS scripts) rather than centrally managed, making text extraction and translation more complex.
Manual Management
• No automation tools: Unlike dynamic websites (such as those using a CMS), static websites do not have a built-in content management system to handle translation and multi-language management, requiring manual creation and maintenance of pages in different language versions.
• Tedious updates: Every time content is updated, pages of each language version must be manually synchronized, increasing the maintenance workload and the possibility of errors.
Links and Navigation
• Link adjustment: Translated page links need to be adjusted accordingly to ensure correct navigation and internal/external links. For example, adjusting 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 seamlessly between different language versions.
SEO
• Multi-language SEO: Ensure that each language version of the page has the correct metadata, title, and description, so that search engines can correctly index and display pages of different language versions.
• hreflang tags: Need to add hreflang tags to inform search engines of the language and geographical targeting of each page, helping search engines understand and correctly display content in different languages.
User Experience
• Language switching: Need to design and implement a user-friendly language switching mechanism to ensure users can easily switch language versions without affecting their browsing experience.
• Consistency: Ensure that the translated page remains consistent with the original in design and layout, avoiding styling and typesetting issues caused by differences in language length and habits.
Precisely because there are many things to consider, manual processing is unrealistic. Therefore, for static sites, it is best to choose a mature static site generator solution with good multilingual support (such as Next.js, Nuxt.js, Hugo, Jekyll, Gatsby, Eleventy, etc.). In this way, multilingual support can be obtained through its built-in multilingual support features or plugin extensions.
Translation of Dynamic Websites
Compared to the difficulty of translating static websites, translating dynamic websites (such as those built with CMS or frameworks) is much simpler, with advantages mainly reflected in the following aspects:
- Centralized Content Management：
• Database Storage: Content is typically stored in a database and can be centrally managed, making it easy to extract and translate collectively.
• CMS Integration: Many CMSs (such as WordPress) offer built-in or plugin-based multilingual support, which can simplify translation difficulty and the management of multilingual content. - Automation and Tool Support：
• Plugins and Modules: Dynamic websites can utilize 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, allowing integration with third-party translation services to achieve automatic translation and synchronization. - Real-time Updates and Version Control：
• Content Updates: Once content is updated, it can be automatically synchronized to all language versions, ensuring consistency and real-time updates.
• Version Control: Version control systems (such as Git) can be used to manage and track changes in translated content. - User Experience：
• Dynamic Switching: Users can switch languages directly through the interface without having to navigate to different pages.
• Multilingual SEO Optimization: Dynamic websites can use hreflang tags and other SEO techniques more flexibly to optimize search engine indexing of multilingual content.
As luck would have it, my blog is a typical dynamic website built with WordPress. Isn't that right up my alley? Happy days! So, this article will use my blog's WordPress as an example for demonstration.
Choosing WordPress Translation Plugins
There are many translation plugins to choose from on WordPress (which increasingly proves how wise I was to choose the most popular WordPress to build my blog in the first place~), such as: WPML, Polylang, Weglot, GTranslate, TranslatePress, etc. These plugins each have their own pros and cons. There are many comparison articles online, so I won't introduce them one by one. I will only judge based on the support level of the ”free” version of the plugins for the 3 features needed by personal bloggers: 1. Multilingual support 2. Automatic translation 3. Support for manual modification of translated content.
Note: Many websites that need translation plugins are commercial websites related to multinational businesses (which have plenty of money), so the paid versions of translation plugins are basically charged monthly. For example, GTranslate's cheapest paid version costs $9.99/month:
As can be seen from the image above, for the free version, GTranslate does not support features like multilingual SEO (Search engine indexing in the image above). Of course, other translation plugins are similar.
Another example is the price of TranslatePress paid version, where the cheapest personal version costs 8.25 Euros/month:
So, for average individual webmasters, using translation plugins through regular paid methods is not very realistic; the cost is too high.
After messing around for a while, based on the support for the above 3 features as the criteria, I finally selected 2 target translation plugins: GTranslate and TranslatePress.
Automatic Translation Section
GTranslate Plugin
Pros and Cons of GTranslate Plugin
Pros:
1. Automatic Translation: Uses the Google Translate API to automatically translate website content, supporting multiple languages (compared to TranslatePress's automatic translation, GTranslate does not require setting up a Google Cloud account to automatically use the Google Translate API without limits, which is extremely convenient—10 out of 10!).
2. Easy Installation: Easy to set up, configuration can be completed in just a few minutes.
3. Language Switcher Widget: Provides a widget (language switcher) where users can select the language they want to translate, making it convenient and fast.
4. Broad Support: Supports almost all WordPress themes and plugins.
Cons:
1. Translation Quality: The quality of automatic translation depends on Google Translate and may not be accurate enough. In theory, it requires manual proofreading and modification, but unfortunately, the free version of GTranslate does not support manual modification... So for the free version, even if you see poorly translated content, you can't change it. It's all about leaving the translation quality to fate~.
2. Multilingual SEO: As mentioned earlier, the free version does not provide multilingual SEO features (this is the same for all plugins, so it's not really a disadvantage).
3. Customizability: The free version has limited customization options and does not allow customizing the appearance and position of the language switcher button (actually, you can still set the position using widgets and shortcodes, and as for the appearance, it can be changed if you are familiar with CSS, but CSS has always given me a headache, and I really have no talent for appearance design~).
4. Caching Issues: In some cases, caching issues may occur, causing translations not to update in a timely manner.
Visual Effects of GTranslate Plugin Language Selector
The GTranslate plugin provides 2 ready-made ways to display the language selector: the language selector displayed on the menu (attached to the menu) and the floating language selector (with 4 positions to choose from: top-left, bottom-left, top-right, bottom-right), as shown in the image below:
The translation effect when selecting English looks okay:
Language selector expansion effects in two ways:
I feel the floating language selector in the bottom left is more harmonious~. The language selector on the top menu is stuck in the middle, which makes me, as someone with OCD, feel very uncomfortable. So generally, just keeping the floating language selector in the bottom left corner is enough. Crucially, it is also clearly visible on mobile browsers, similar to the effect shown in the red box below (using TranslatePress's effect to fake it, though it's actually about the same anyway):
Tip: You can also use WordPress widgets and shortcodes ([gtranslate]) to deploy the language switcher in various positions on the site.
GTranslate Plugin Settings
The settings for the free version of the GTranslate plugin are very simple, with only one page in total and fewer than 10 options:
GTranslate Plugin Summary
Overall, it supports 2 of the 3 features mentioned above very well: multi-language support and automatic translation. However, for the 3rd feature: supporting manual modification of translated content, the FREE version of GTranslate does not support it, which is not very friendly for friends who strive for perfection. But then again, for average lazy webmasters, they probably don't have the energy to modify it manually anyway~.
Therefore, for average personal webmasters, if you only need the website to support multiple languages (just hoping to use it as a facade to make the website look more high-end) and don't care about multi-language SEO features, then the simplest and most useful plugin is GTranslate. It is easy to install and configure, the FREE version supports all languages, and it supports full-text automatic machine translation with no word count or page limits, which is very generous. You actually don't need to read the rest of the article because it's too much hassle, but some ambitious personal webmasters can continue reading.
Note: The GTranslate FREE version uses real-time web page translation (so it is understandable that it does not support manual revision). That is, every time a page is loaded, the plugin calls the Google Translate API in real-time to translate the website page. Therefore, the speed of website translation depends on the quality of communication between the site and the Google Translate API. If the communication quality is low, it may affect the loading speed of the site pages (Note: If the site is built in China, you don't have to worry about the communication quality with the Google Translate API at all, because the communication is extremely stable: it doesn't connect at all). Moreover, the real-time translation method is not conducive to achieving multi-language SEO (but this doesn't matter, because the free versions of all translation plugins do not support multi-language SEO, which is fair~). However, the paid version of GTranslate is different; it supports storing translated content in the database and also supports multi-language SEO.
TranslatePress Plugin
Pros and Cons of TranslatePress Plugin
Pros:
1. Visual Translation Interface: Provides a front-end real-time visual editing interface, allowing you to translate directly on the page (supported in the free version), what you see is what you get. As shown in the figure below, 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 control the translated content more precisely (such as the content in the red box in the image above).
- Support for Multiple Types of Translated Content: Can translate text from pages, posts, plugins, and themes, offering a lot of customization space
- Local Storage: All translated content is stored in the local database and does not depend on third-party services (this is a feature of GTranslate's paid version. That is to say, compared to GTranslate's free version which constantly relies on the Google Translate API, TranslatePress's free version is like GTranslate's paid version: it only needs to communicate with the Google Translate API during translation. Once the translation is complete and saved to the database, it no longer needs to communicate with the Google Translate API. This is very important and is the reason why I ultimately chose TranslatePress).
Cons:
1. High Barrier to Automatic Translation: If the free version's automatic translation engine wants to use Google Translate v2, it needs to obtain a Google Translate API key, and API calls will incur fees (this is quite troublesome and might deter many people. There is bad news and good news: the bad news is that you need to register a Google Cloud account first, and registration requires a VISA credit card for verification; the good news is that if you are a newly registered Google Cloud user, you will get a $300 cash voucher~, so the fees are basically non-existent). Compared to GTranslate, where the automatic translation feature can automatically use the Google Translate API without limit after installation, TranslatePress's automatic translation feature has too high a barrier to entry. Therefore, if you only need multi-language translation features, just choose GTranslate, and you don't need to consider the free version of TranslatePress.
Note: Of course, TranslatePress's automatic translation engine is not limited to Google Translate v2; you can also choose DeepL and TranslatePress AI:
However, DeepL uses the DeepL Free API, which also requires some hassle and is prone to account bans (since registration is not possible in China, you usually have to buy an account on Taobao, which is highly risky); while using TranslatePress AI requires a paid membership, which is at least 8.25 euros a month~~. Therefore, overall, if you want to use TranslatePress, registering a Google Cloud account to get a Google Translate API key to use Google Translate v2 is actually the most cost-effective way, though it requires some hassle—I spent half an hour on it...
- Language Switcher Options: The free version only provides limited language switcher button styles and position options (same as GTranslate's 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 the paid version (this is quite a drawback compared to GTranslate's free version, but for personal webmasters who just want to put up a facade, English seems basically enough~).
Visual Effects of TranslatePress Plugin Language Selector
Unlike GTranslate, the TranslatePress menu method does not show a ready-made effect just by checking a box. Instead, it provides a separate menu item in the WordPress backend under ”Appearance” - “Menus”, so you need to manually create the menu item yourself:
The final effect is as follows:
Menu item expansion effect (different display methods are determined according to the setting parameters of the ”General” - “Language Switcher” option in the TranslatePress plugin):
Floating language switcher expansion effect in the bottom left corner (different display methods are determined according to the setting parameters of the ”General” - “Language Switcher” option in the TranslatePress plugin):
TranslatePress Plugin Settings
In this section, I will first briefly list the key pages. Some of the content later will involve them, so you can just skim through.
General Options:
Automatic Translation:
Add-on Features (not available in the free version, the enable options on the far right are all grayed out):
TranslatePress Plugin Summary
Overall, comparing from the perspective of automatic translation in the free version, TranslatePress and GTranslate are completely incomparable: it only supports up to 2 languages, and automatic translation requires a lot of effort. So why do I still waste energy introducing TranslatePress? Actually, the key reason is that the free version of TranslatePress stores translation data in the database, which is the most basic condition for implementing multi-language SEO.
Multi-language SEO Section
Related Knowledge Extension: Client-Side Rendering, Server-Side Rendering, and SEO
Earlier, when comparing the differences in translation behavior between the free version of GTranslate and the free version of TranslatePress, and thinking about the relationship with multi-language SEO, I kept having a sense of déjà vu. Suddenly, at some point, I remembered: isn't this just the relationship between Client-Side Rendering (CSR), Server-Side Rendering (SSR), and SEO?
Server-Side Rendering refers to generating complete HTML pages on the server side and then sending the HTML content directly to the browser for display. Since the page content has already been generated as static HTML on the server side, search engines can crawl and index all the content of the page more easily.
Client-Side Rendering refers to using JavaScript in the user's browser to request data via APIs, and dynamically generating and displaying content on the client side. Since the rendering of page content needs to wait for JavaScript to load and execute, the initial load time may be longer. Traditional search engine crawlers usually wait for JavaScript execution to complete when crawling pages, but not all search engines can fully understand and process JavaScript-rendered content. Therefore, compared to Server-Side Rendering, Client-Side Rendering is unfavorable for SEO (unless search engine crawler capabilities are upgraded to support JavaScript more perfectly).
This content 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 Core Web Development Concepts Starting from Ajax Cross-Origin Issues (Non-Programmer's Perspective).
The free version of GTranslate works by using JavaScript to load real-time translated content in the visitor's browser (similar to client-side rendering), which is inherently not suitable for SEO. On the other hand, the free version of TranslatePress directly translates the content and stores it in the local database (similar to server-side rendering, equivalent to pre-generating content). Therefore, the way the free version of TranslatePress works is very suitable for SEO (it's just that the multilingual SEO feature is restricted; theoretically, a special method can be used to temporarily bypass this restriction to get a fully functional ”beta version”). I'll stop here and won't elaborate, as long as everyone understands. The main purpose is to test the actual effect of multilingual SEO. Once I have money in the future, I will definitely support the official version.
TranslatePress Full Version Features
Once TranslatePress temporarily lifts the functional restrictions, the following differences appear.
Multilingual Support:
All Add-ons Enabled:
The advanced version has an additional ”Automatic User Language Detection”, which can display a pop-up to prompt users whether they need to switch languages:
Multi-language SEO Effect Verification
As I mentioned earlier, compared to the automatic translation feature, I am more concerned about the multilingual SEO functionality and whether it is useful for individual bloggers like us. I enabled the full version of TranslatePress around August 3rd, and by today, August 6th, I can roughly observe whether multilingual SEO is effective. Looking at the statistics from my blog's web traffic monitoring system, Umami (for Umami installation, see the article:Home Data Center Series: Detailed Setup Tutorial for the Latest Version of Umami (2.11.3)), theoretically, if multilingual SEO is effective, the number of source countries for access requests before installing the TranslatePress plugin and enabling multilingual SEO should be significantly fewer than the number of source countries for access requests after installing the plugin.
The Umami source country statistics for August 2nd (the day before installing the TranslatePress plugin and enabling multilingual SEO) are as follows (11 countries):
As of 4:30 PM on August 6th, the Umami visitor country statistics are as follows (24 countries):
At least from the perspective of the number of visiting countries, the effect after enabling multilingual SEO is very obvious.
Afterword
Three days is really too short to fully prove the effectiveness of multilingual SEO (after all, SEO takes time to take effect), so I will observe for a while longer and update the results if I find anything.
Note 1: The DeepL engine for TranslatePress automatic translation can actually be used directly in China; it doesn't seem to be blocked at the moment. However, the key issue is that domestic credit cards cannot be used to register and activate the DeepL API. Therefore, you need to spend tens of yuan on Taobao to buy a lifetime free API, though there is a risk of account suspension.
Note 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 again (why did I say "again"??), you can consider using any Hong Kong address instead and verify it with a domestic credit card that supports VISA. Once verified, you will receive a $300 USD credit (or the equivalent in HKD if registered with a Hong Kong address), valid for 3 months:
There are many tutorials online on how to register a Google Cloud account, create a project, and obtain a Google Translate API key. If you need them, you can search online yourself; I won't write a separate post for it.