document.documentelement.lang 修改不影响 meta 和 title 内容，二者需显式更新；所有可翻译元数据须用 data-i18n 或 data-i18n-content 标记，并同步设置符合 bcp 47 规范的 lang 属性（如 zh-hans），且 ssr 与前端更新需一致。
document.documentElement.lang 改了但 meta 描述没变
因为 <meta name="description"> 和 <title></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 里的语义化标签
浏览器和爬虫解析 时，会单独读取每个元素的 lang，而不是继承 的值。如果 <title></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 下的元素， 里的 <title></title> 和 <meta> 常被跳过，导致语言切换后 SEO 信息仍是旧语言。
- 翻译函数必须显式处理
document.head：比如调用translateElement(document.querySelector('title'))和translateMetaTags() -
<link rel="canonical">和<link hreflang>虽不翻译，但 URL 需随语言变化（如/zh/home→/en/home），否则 Google 认为重复内容 - 服务端渲染（SSR）场景下，
内容必须在服务端就按目标语言生成，前端 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"
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
