家庭数据中心系列 WordPress站点实现多语言自动翻译及多语言SEO最佳实践(GTranslate及TranslatePress)
本文最后更新于 182 天前,其中的信息可能已经有所发展或是发生改变,如有失效可到评论区留言。

前言

前几天在和一个朋友聊天的时候,忽然提到网站多语言支持的问题,说如果可以一键变成英文内容,那是否可以有更大的访问者群。

我之前从来没想过这个问题,一个折腾着玩的个人博客,难道还想走向世界不成?不过转头一想,如果博客支持多种语言,这档次一下子就上去了啊,大厂官方网站的即视感有没有?况且,现在简中互联网环境这么差,国内以百度为首的搜索引擎,对于个人博客而言非常不友好(未备案的更不友好),引流效果基本等于0,如果网站内容支持英文(甚至更多语言),甚至如果更进一步还能支持多语言SEO的话(其实,很多时候这个反而比网页本身的翻译更重要,因为现在浏览器本身或者通过插件都可以提供网页的全文翻译能力,从这个角度来说,如何能让访问者通过搜索引擎找到网站反而更重要),那么,就可以充分利用Google、bing等国外搜索引擎的引流效果,且可以不仅仅局限于使用简体中文的用户了,潜在访问者的圈子一下子就扩大了好多有没有?想想还有点小激动呢。


注1:其实这是外贸独立站最基础的需求,而我之前居然完全没有生起这个念头,老话说得好:隔行如隔山,古人诚不欺我也。

注2:这篇文章的实现有技术门槛,要么需要有科学或者魔法的环境,要么使用的是国外的云主机,否则无法正常使用Google Translate API。


不过,网站端的翻译并不是一件简单的事,根据网站类型的不同(静态类型或者动态类型),适合的翻译方案各有不同。

网站翻译(管理员视角)

静态类型网站的翻译

现在的静态类型的网站(如纯 HTML、CSS 和 JavaScript 构建的网站),如果想要翻译的话会比较麻烦,劣势主要体现在如下几个方面:

1. 内容分散
分散在多个文件中:静态网站的内容往往分布在多个 HTML 文件中(或者多个JS脚本中),每个页面(或者JS脚本)可能都有独立的内容,需要逐一定位和翻译每个页面(或者每个JS脚本)的内容。
嵌入在代码中:静态网站的文本内容通常直接嵌入在 HTML 文件中(或者jS脚本中),而不是集中管理,这使得提取和翻译文本更加复杂。
2. 手动管理
无自动化工具:与动态网站(如使用 CMS 的网站)不同,静态网站没有内置的内容管理系统来处理翻译和多语言管理,需要手动创建和维护不同语言版本的页面。
更新繁琐:每次更新内容时,都需要手动同步各个语言版本的页面,增加了维护的工作量和出错的可能性。
3. 链接和导航
链接调整:翻译后的页面链接需要相应调整,以确保导航和内外部链接正确。例如,从 /about.html 到 /es/about.html 的调整。
导航菜单:需要为每个语言版本单独调整导航菜单,以便用户能够在不同语言版本之间无缝切换。
4. SEO
多语言 SEO:确保每个语言版本的页面都有正确的元数据、标题和描述,以便搜索引擎能够正确索引和显示不同语言版本的页面。
hreflang 标签:需要添加 hreflang 标签,以告知搜索引擎每个页面的语言和地理定位,帮助搜索引擎理解和正确显示不同语言的内容。
5. 用户体验
语言切换:需要设计和实现用户友好的语言切换机制,确保用户可以轻松切换语言版本而不影响浏览体验。
一致性:确保翻译后的页面在设计和布局上与原版保持一致,避免因语言长度和习惯差异导致的样式和排版问题。

正因为需要注意的事项较多,手动处理不现实,所以对于静态类型的站点,最好是选择成熟的、且对多语言支持较好的静态站点生成器方案(比如Next.js、Nuxt.js、Hugo、Jekyll、Gatsby、Eleventy等),这样一来,就可以通过其内置的多语言支持功能或者插件扩展来获得多语言的支持能力。

动态类型网站的翻译

相对于静态类型网站的翻译难度,动态类型网站(如使用 CMS 或框架构建的网站)的翻译就要简单多了,优势主要体现在如下几个方面:

  1. 集中管理内容
    数据库存储:内容通常存储在数据库中,可以集中管理,便于统一提取和翻译。
    CMS 集成:许多 CMS(如 wordpress)提供内置或插件式的多语言支持,可以简化翻译难度和管理多语言内容。
  2. 自动化和工具支持
    插件和模块:动态网站可以利用各种插件和模块(如 WPML、Polylang、GTranslate、TranslatePress等)来自动化翻译工作流程,减少手动工作量。
    API 支持:许多动态网站框架提供 API 支持,可以集成第三方翻译服务,实现自动翻译和同步。
  3. 实时更新和版本控制
    内容更新:内容更新后可以自动同步到各个语言版本,确保一致性和实时性。
    版本控制:可以使用版本控制系统(如 Git)来管理和追踪翻译内容的变更。
  4. 用户体验
    动态切换:用户可以通过界面直接切换语言,无需跳转不同页面。
    多语言SEO 优化:动态网站可以更灵活地使用 hreflang 标签和其他 SEO 技术,优化搜索引擎对多语言内容的索引。

好巧不巧,我的博客用的就是wordpress搭建的典型的动态类型的网站,这不是撞到我的枪口上了吗?开心,所以本篇文章就以我博客的wordpress为例进行演示了。

wordpress翻译插件的选择

wordpress上有众多翻译插件可以选择(越来越证明我一开始就选择用的人最多的wordpress来搭建博客是多么英明~),比如:WPML、Polylang、Weglot、GTranslate、TranslatePress等等,这些插件各有优劣势,网上有很多对比的文章,我就不一一介绍了,我只从插件的"免费"版对个人博主需要的3个功能的支持程度来判断:1、多语言支持 2、自动翻译 3、支持手动修改翻译内容


注:需要翻译插件的网站,很多都是跨国业务相关的商业网站(不差钱),所以翻译插件的付费版本基本都是按月收费,比如GTranslate,最便宜的付费版本都要9.99美金/月:

image.png

从上图中可以看到,对于免费版本而言,GTranslate是不支持多语言SEO之类的功能的(上图中的Search engine indexing),当然,其他翻译插件都类似。

又比如TranslatePress付费版价格,最便宜的个人版都要8.25欧元/月:

image.png

所以,对于一般的个人站长而言,采用正规付费的方式来使用翻译插件不太现实,成本太高了。


折腾了半天,按照对上面3个功能的支持为判断依据,最终选定了2个目标翻译插件:GTranslate和TranslatePress。

自动翻译篇

GTranslate插件

GTranslate插件的优缺点

优点:

  1. 自动翻译:利用Google Translate API自动翻译网站内容,支持多种语言(和TranslatePress的自动翻译相比的话,GTranslate不需要设置google cloud账号就能自动无限量使用Google Translate API,非常方便,满分10分!)。
  2. 安装简便:易于设置,只需几分钟即可完成配置。
  3. 语言切换小工具:提供一个小工具(语言切换器),用户可以选择要翻译的语言,方便快捷。
  4. 广泛支持:支持几乎所有WordPress主题和插件。

缺点:

  1. 翻译质量:自动翻译的质量取决于Google Translate,可能不够准确,理论上需要人工校对和修改,不过偏偏GTranslate的免费版不支持人工手动修改。。。所以对于免费版而言,就算看到翻译不佳的内容也改不了,主打的就是一个翻译效果随缘~。
  2. 多语言SEO:如前面提到的,免费版本不提供多语言SEO功能(所有插件都一样,所以其实这个倒不算劣势)。
  3. 定制性:免费版的定制选项有限,不能自定义语言切换按钮的外观和位置(其实还是可以基于小工具和短代码的方式来设置位置的,外观嘛,只要CSS熟悉的话也可以改变的,只不过我对CSS一直很头大,外观什么的我是真的没啥天赋~)。
  4. 缓存问题:在某些情况下,可能会出现缓存问题,导致翻译不及时更新。

GTranslate插件语言选择器视觉效果

GTranslate插件提供2种现成的语言选择器显示方式,菜单上显示的语言选择器(依附于菜单)和浮动语言选择器(可选择4个位置,左上、左下、右上、右下),如下图:

image.png

选择英文的翻译效果,看起来还行:
image.png

两种方式的语言选择器展开效果:
image.png

感觉左下方的浮动语言选择器更和谐一些~,顶部菜单上的语言选择器不上不下的,看得强迫症患者的我很难受,所以一般只留左下角的浮动语言选择器就行了,关键手机浏览器上也能很明显的看到,类似下图红框所示的效果(用TranslatePress的效果来冒充下,不过其实本来也差不多):

image.png


小窍门:还可以使用wordpress的小工具以及短代码([gtranslate])的方式在站点各个位置部署语言切换器。


GTranslate插件设置

GTranslate插件免费版设置很简单,总共就一页,不到10个可选项:

image.png

image.png

GTranslate插件总结

总的来说,对上面提到的3个功能中的2个:多语言支持、自动翻译都支持得很好,不过对第3个功能:支持手动修改翻译内容,GTranslate的FREE版不支持,对于有精益求精需求的朋友就不太友好了。不过,话说回来,对于一般的懒人站长而言,估计也没那么好的精神去手动修改吧~。

所以,对于一般的个人站长而言,如果只是需要网站支持多语言(只是希望用来充充门面、让网站看起来显得更有档次),而对多语言SEO功能无所谓的话,那么,最简单好用的插件就是GTranslate了,安装配置简单,FREE版就支持所有语言,而且支持全文自动机器翻译,并且没有字数和页面的限制,非常的良心,文章后面的内容其实都不需要看了,因为太折腾了,部分有野心的个人站长可以继续往下看。


注:GTranslate FREE版是使用的网页实时翻译的方式(因此不支持手动修订功能也可以理解),也就是说,每次加载页面时,插件都会实时调用Google Translate API对网站页面进行翻译,所以网站翻译的速度取决于站点和Google Translate API通信的质量,在通信质量不高的情况下,很可能影响站点页面的加载速度(注:如果站点是建立在国内,那就完全不用担心和Google Translate API的通信质量问题了,因为通信非常稳定:压根就不通),且实时翻译的方式也不利于实现多语言SEO(不过这个无所谓,因为所有翻译插件的免费版都不支持多语言SEO,公平~),而GTranslate的付费版就不同了,支持将翻译内容存储在数据库中,也支持多语言SEO。


TranslatePress插件

TranslatePress插件的优缺点

优点:

  1. 可视化翻译界面:提供前端的实时可视化编辑界面,可以直接在页面上进行翻译(免费版就支持),所见即所得,如下图,可以在翻译成英文的页面上直观的看到需要修改的内容:

    image.png

  2. 手动翻译:支持手动翻译,允许用户更精确地控制翻译内容(如上图红框中的内容)。

  3. 多种翻译内容支持:可以翻译页面、帖子、插件和主题的文本,自定义空间很大

  4. 本地存储:所有翻译内容存储在本地数据库中,不依赖第三方服务(这个是GTranslate付费版的功能,也就是说,和GTranslate免费版的时刻依赖Google Translate API相比,TranslatePress的免费版和GTranslate付费版一样,只有翻译的时候需要和Google Translate API通信,翻译完成并将翻译内容保存到数据库中后,就不再需要和Google Translate API通信了,这点非常重要,是我最终选择TranslatePress的原因)。
    缺点:

  5. 自动翻译门槛高:免费版本的自动翻译引擎如果要使用谷歌翻译v2的话,需要获取Google Translate API密钥,并且API调用会产生费用(这个比较麻烦,可能会劝退不少人,有一个坏消息和一个好消息:坏消息是需要先注册Google Cloud账号,并且注册的时候需要支持VISA的信用卡用来验证;而好消息是,如果是Google Cloud新注册用户,会送价值300美金的现金抵用券~,所以费用什么的当于没有)。相较于GTranslate安装后自动翻译功能可以自动无限量使用Google Translate API,TranslatePress的自动翻译功能使用门槛太高了,所以如果只需要多语言翻译功能的话,直接选择GTranslate就对了,TranslatePress免费版就不需要考虑了。


注:TranslatePress的自动翻译引擎当然不止谷歌翻译v2一个选择,还可以选择DEEPL和TranslatePress AI:

image.png

只不过DEEPL使用DEEPL Free API,也要折腾,且容易封号(因为国内无法注册,一般只能淘宝上买号,危险性较高);而使用TranslatePress AI需要付费会员,也就是最低8.25欧元一个月~~。所以综合来说,如果要使用TranslatePress,注册Google Cloud账号获取Google Translate API密钥来使用谷歌翻译v2反而是最划算的方式,就是需要折腾,我都折腾了半小时。。。


  1. 语言切换选项:免费版仅提供有限的语言切换按钮样式和位置选项(和GTranslate免费版一样,所以其实也谈不上缺点)。
  2. 多语言支持:免费版本只支持最多2种语言,如果需要更多语言,需要付费版本(这个和GTranslate免费版比就比较坑了,不过,对于只是想充充门面的个人站长而言,一个英语貌似也基本够用了~)。

TranslatePress插件语言选择器视觉效果

和GTranslate不同,TranslatePress菜单方式不是勾选就出现现成的效果,而是以在wordpress后台"外观"-"菜单"中提供一个单独的菜单项的方式,所以需要自己手动创建菜单项:

image.png

最终效果如下:
image.png

菜单项展开效果(不同的显示方式根据TranslatePress插件中"通用"-"语言切换"选项的设置参数确定):
image.png

左下角浮动语言选择器展开效果(不同的显示方式根据TranslatePress插件中"通用"-"语言切换"选项的设置参数确定):
image.png

TranslatePress插件设置

这部分我先简单的把重点页面罗列下,后面部分内容要涉及到,大家过一下就行。
通用选项:

image.png

image.png

自动翻译:
image.png

附加功能(免费版本不可用,最右边的启用都是灰色的):
image.png

TranslatePress插件总结

总的来讲,从免费版的自动翻译这个角度来比较,TranslatePress和GTranslate完全没有可比性:只支持最多2种语言,且自动翻译也要费力折腾,那我为什么还要浪费精力介绍TranslatePress呢?其实关键原因在于,TranslatePress免费版是把翻译数据存放在数据库中,这是多语言SEO最基本的实现条件。

多语言SEO篇

相关知识扩展:客户端渲染、服务器端渲染以及SEO

前面在比较GTranslate免费版和TranslatePress免费版的翻译行为差异,并思考和多语言SEO之间关系时,一直有似成相识的感觉,忽然某一刻想起来,这不就是客户端渲染(CSR)、服务器端渲染(SSR)和SEO之间的关系嘛。


服务器端渲染是指在服务器端生成完整的HTML页面,然后将HTML内容直接发送给浏览器展示。由于页面内容在服务器端已经生成为静态HTML,所以搜索引擎能够更方便地抓取和索引页面的所有内容。

客户端渲染是指在用户的浏览器中使用JavaScript通过API请求数据,并在客户端动态生成并展示内容。由于页面内容的渲染需要等待JavaScript加载和执行完成,因此首次加载时间可能较长,传统的搜索引擎爬虫在抓取页面时通常会等待JavaScript执行完成,但不是所有搜索引擎都能完全理解和处理JavaScript渲染的内容,所以相对服务器端渲染,客户端渲染不利于SEO(除非搜索引擎爬虫功能升级,对JavaScript支持得更完美)。

这方面的内容和Ajax的概念有关,如果大家有兴趣,可以参看我另一篇文章:家庭数据中心系列 由Ajax跨域问题开始的对当下Web开发核心基础概念的梳理(非程序员视角).


GTranslate免费版的工作方式就是使用JavaScript在访问者浏览器加载实时翻译内容(和客户端渲染类似),这种方式本来就不适合SEO,而TranslatePress免费版是直接翻译内容并存放在本地数据库中(和服务器端渲染类似,相当于提前生成内容),所以TranslatePress免费版的工作方式是很适合SEO的(只不过多语言SEO的功能被限制了而已,那么,理论上可以使用特殊方式暂时跳过这种限制,得到有完整功能"测试版"),点到即止,不展开讲,大家明白即可,主要还是为了实测多语言SEO的效果,等我以后有钱了一定会支持正式版的。

TranslatePress完整版功能

当TranslatePress暂时解除了功能限制之后,有了如下不同。
多语言支持:

image.png

附加功能全开:
image.png

高级多了一个"自动用户语言检测",可以弹框提示用户是否需要切换语言:

image.png

多语言SEO效果验证

如我前面提到的,相对于自动翻译功能,我更关心的是多语言SEO的功能,以及是否对我们这样的个人博主有用。我大概是8月3号左右启用的完整版TranslatePress,到今天8月6号,已经可以大概观察一下多语言SEO是否有效,就通过我博客的网站流量检测系统umami的统计数据来看(umami的安装参见文章:家庭数据中心系列 当下最新版umami(2.11.3)详细搭建教程),理论上如果多语言SEO生效,那么相对于安装TranslatePress插件并启用多语言SEO之前的访问请求的来源国家数量,应该要明显少于安装插件之后访问请求的来源国家数量才对。

8月2号(安装TranslatePress插件并启用多语言SEO的前一天)的umami来源国家统计如下(11个):

image.png

在8月6号下午16点30分,umami来访国家的统计如下(24个):
image.png

至少从来访国家数量这个角度而言,启用多语言SEO之后效果是非常明显的。

后话

3天的时间实在太短,其实并不能充分证明多语言SEO的效果(毕竟SEO的生效也需要时间),所以我还是多观察一段时间再说吧,如果有什么发现再来更新一下结果。

另1:TranslatePress自动翻译的Deep引擎其实国内是可以直接使用的,目前貌似没有被屏蔽,但是,关键问题在于国内的信用卡无法注册并开通DeepL api,所以需要去淘宝花几十元买一个终生有效的免费api,不过嘛,有被封号的风险。

另2:自动翻译引擎如果选择谷歌翻译v2,需要有Google Cloud的账号来创建Google Translate API密钥,如果没有的话需要新注册一个,不过由于国家地区又不支持中国大陆地区(我为什么要说又??),所以可以考虑使用任意香港地址替代,并用国内支持VISA的信用卡通过验证,通过之后会获得价值300美金(如果是使用香港地址注册就换算成等值的港币)的抵用金,3个月有效:

image.png

网上关于如何注册Google Cloud账号、如何创建项目并获取Google Translate API密钥的教程很多,大家有需要的话可以自行网上搜索,我就不单独来写了。

博客内容均系原创,转载请注明出处!更多博客文章,可以移步至网站地图了解。博客的RSS地址为:https://blog.tangwudi.com/feed,欢迎订阅;如有需要,可以加入Telegram群一起讨论问题。
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇
       
error:
zh_CN
春节
快乐