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，它就按页面默认语言渲染，但实际文案可能已切为日文——导致标点错位、字体回退异常、语音朗读混乱。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• <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

BCP 47 格式错误会让 meta 失效

<meta name="description" lang="chinese"> 或 lang="zh_CN" 会被浏览器忽略，等同于没写。搜索引擎和辅助技术只认标准 BCP 47 标签，错一个字符就失去语义作用。

• 简体中文必须用 zh-Hans（不是 zh-CN，虽兼容但不推荐；更不能用 zh-chs 或 zh-simplified）
• 繁体中文用 zh-Hant，地区变体如 zh-HK、zh-MO 可用于区分用词（“软件” vs “软体”）
• 所有 lang 值必须小写，连字符分隔，无空格或下划线；lang="en-us" 是错的，正确是 lang="en-US"

工程上最麻烦的不是加属性，而是保证 <head> 里每一处语言声明都跟当前语言包键值、BCP 47 码、DOM 更新时机三者对齐——漏掉任意一环，SEO 和无障碍就掉链子。