HTML头部怎么国际化：元数据工程化控制

作者：袖梨 2026-07-12

document.documentElement.lang 修改不影响 meta 和 title 内容，二者需显式更新；所有可翻译元数据须用 data-i18n 或 data-i18n-content 标记，并同步设置符合 BCP 47 规范的 lang 属性（如 zh-Hans），且 SSR 与前端更新需一致。

document.documentElement.lang 改了但 meta 描述没变

因为 <meta name="description"> 和 <title> 的内容不随根节点 lang 属性自动更新——它们是独立的 DOM 文本节点，必须显式替换。只改 document.documentElement.lang 对 SEO 元数据完全无效。

常见错误现象：<title>Welcome</title> 切换中文后仍显示英文；<meta name="description" content="A great site"> 在百度搜索结果里还是英文摘要。

所有可翻译的元数据都得加 data-i18n：比如 <title data-i18n="page_title">首页</title>
<meta> 标签本身不渲染文本，不能直接加 data-i18n；必须用 JS 更新其 content 属性，对应键名用 data-i18n-content（如 <meta name="description" data-i18n-content="seo_desc">）
<meta charset>、<meta name="viewport"> 这类技术性元数据不翻译，也不加任何 i18n 属性

lang 属性必须同步写进 head 里的语义化标签

浏览器和爬虫解析 <head> 时，会单独读取每个元素的 lang，而不是继承 <html> 的值。如果 <title> 或 <meta> 没设 lang，它就按页面默认语言渲染，但实际文案可能已切为日文——导致标点错位、字体回退异常、语音朗读混乱。

<title lang="zh-Hans">首页</title> ✅ 显式声明，确保屏幕阅读器读中文顿号、搜索引擎索引简体中文
<meta name="description" lang="zh-Hans" content="..."> ✅ 同样需要，尤其当页面混排多语言时（比如英文站点里一段中文摘要）
已有 lang 的 <meta> 不要删——比如 <meta name="author" lang="ja"> 是合法且必要的

动态切换时 meta 标签容易漏更新

多数 i18n 工具默认只遍历 body 下的元素，<head> 里的 <title> 和 <meta> 常被跳过，导致语言切换后 SEO 信息仍是旧语言。

立即学习“前端免费学习笔记（深入）”；

翻译函数必须显式处理 document.head：比如调用 translateElement(document.querySelector('title')) 和 translateMetaTags()
<link rel="canonical"> 和 <link hreflang> 虽不翻译，但 URL 需随语言变化（如 /zh/home → /en/home），否则 Google 认为重复内容
服务端渲染（SSR）场景下，<head> 内容必须在服务端就按目标语言生成，前端 JS 不应覆盖 SSR 已输出的 lang 值，否则引发 hydration mismatch