如何使用JavaScript实现HTML页面内容的翻译？

我有React Native开发经验，在RN里习惯用{t('routes.aboutPage')}这类方式实现文本翻译。现在做HTML项目，当前的实现是给元素加data-key属性，再结合JS代码完成翻译：

当前实现代码 #

HTML代码 #

<p data-key="paragraph-1">Hello world</p>
<p data-key="paragraph-2">This is a translated text!</p>

<div>
  <a data-key="aboutPage" href="about.html">About</a>
</div>

JavaScript代码 #

const translations = {
  "es": () => ({
    "title": "¡Hola mundo!",
    "subtitle": "¡Este texto ha sido traducido!",
    "routes": {
      "aboutPage": "Sobre",
    }
  }),
  // 其他语言配置...
}

const t = _.memoize(
  (
    scope,
    language = getNavigatorLanguage() ?? DEFAULT_LANGUAGE,
    fallbackLanguage = DEFAULT_LANGUAGE,
    fallbackText = ""
  ) => {
    const formattedLocale = language.split(/[-_]/)[0]; // 简化为"en"、"es"这类短格式

    const translation = 
      (translations[formattedLocale] ?? translations[fallbackLanguage])();

    return (
      _.get(translation, scope) ??
      _.get(translations[DEFAULT_LANGUAGE](), scope, fallbackText)
    );
  },
  (...args) => JSON.stringify(args)
);


$(() => {
  $("*[data-key='paragraph-1']").text(t("title"));
  $("*[data-key='paragraph-2']").text(t("subtitle"));
  $("*[data-key='aboutPage']").text(t("routes.aboutPage"));
});

现在我不确定直接在HTML里用下面这种方式是否符合SEO等最佳实践：

<p>
  <script>
    document.write(t("title"))
  </script>
</p>

想请教：是否必须用选择器来翻译所有内容？有没有更优的实现建议？

解答 #

1. 直接用<script>输出文本的问题 #

你提到的这种脚本直接输出的方式，搜索引擎爬虫的处理能力参差不齐：

• 部分现代爬虫能执行简单JS并抓取内容，但老旧爬虫或专注静态内容的爬虫会忽略脚本内容，只看到空的<p>标签，导致页面被判定为内容缺失，影响SEO权重。
• 还会导致页面渲染闪烁：先显示空标签，脚本执行后才填充内容，用户体验差。

所以这种方式不推荐作为主要翻译方案。

2. 是否必须用选择器？ #

不是必须，但当前的data-key+选择器方案是相对稳妥的实现，不过可以优化：

• 优化选择器性能：别用*[data-key]这种全局选择器，给需要翻译的元素统一加类名（比如js-translate），用.js-translate[data-key]选择，缩小DOM查询范围。
• 批量处理翻译：不用逐个元素调用.text()，遍历所有目标元素批量处理，新增翻译元素时只需加类和data-key，不用改JS：

  $(() => {
    $('.js-translate[data-key]').each(function() {
      const key = $(this).data('key');
      $(this).text(t(key));
    });
  });
  

3. 更优实现建议 #

方案一：服务端渲染预填充翻译内容

如果项目支持服务端渲染，优先根据用户请求的Accept-Language头，直接在服务端输出对应语言的文本，完全避免前端JS依赖：

<!-- 服务端渲染示例 -->
<p><?= t('title') ?></p>
<a href="about.html"><?= t('routes.aboutPage') ?></a>

这种方式对SEO最友好，爬虫直接抓取完整翻译文本，也没有前端渲染闪烁问题。

方案二：静态多语言页面

如果是纯静态项目，直接生成多语言版本的HTML文件（比如index.html、index-es.html），通过语言切换按钮引导用户进入对应版本，这种方式SEO表现最佳，完全不需要前端JS处理翻译。

方案三：改进前端翻译体验

如果必须用前端JS翻译，除了优化选择器，还可以：

• 在HTML里保留默认语言文本（比如英文），作为JS加载失败时的降级内容，既保证用户能看到内容，也给爬虫提供基础文本。
• 把翻译逻辑放在DOMContentLoaded之前，或用async/defer加载翻译脚本，减少渲染等待时间。

内容的提问来源于stack exchange，提问作者Raul