lang属性必须写在<html>根元素上，否则SEO和语音合成失效；需符合BCP 47标准（如zh-CN），SSR/静态站应服务端硬编码，SPA切换语言时必须更新document.documentElement.lang，局部多语言内容须显式声明lang，且meta、OG等标签语言须与之严格一致。
lang属性必须写在上，否则SEO和语音合成全失效
搜索引擎和屏幕阅读器只认 <html lang="zh-CN"> 这个根声明，改 document.body.lang 或局部 div 的 lang 属性毫无作用。常见后果包括：Chrome 自动翻译按钮不出现、VoiceOver 把“北京”读成 “Bei Jing”、中英混排时引号间距错乱。
实操建议：
- SSR 页面：服务端根据
Accept-Language头输出正确的<html lang="zh-CN">，别等 JS 加载再补 - SPA 页面：语言切换时必须执行
document.documentElement.lang = "ja-JP"，不是body，也不是只更新状态 - 静态多语言站：每个语言版本单独一份 HTML，
<html>上硬编码对应值，避免 JS 注入延迟导致闪动
lang值必须符合BCP 47标准，否则等于没写
zh_cn、Chinese、ZH-CN、zh-CN （末尾空格）这些写法都会被浏览器和爬虫忽略。它们只接受小写字母 + 连字符 + 地区码（可选）的格式，比如 zh-CN、en-GB、ja-JP。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 后端返回
zh_ch，前端没做标准化转换就直接赋给document.documentElement.lang - 误以为
lang="ja"足够：iOS VoiceOver 某些版本会降级为英语发音，lang="ja-JP"更稳妥 - 用
lang="zh"模糊声明：zh-Hans（简体）和zh-Hant（繁体）触发的语音引擎、拼音标注逻辑不同
局部多语言内容必须显式声明lang，不能靠继承
浏览器不会自动推断「这段英文是引用」「这行日文是代码注释」。不加 lang，就全按根语言处理——拼写检查失效、语音朗读错、字体 fallback 异常（比如日文假名被中文字体渲染）。
示例场景：
- 引用英文文献：
<blockquote lang="en">...</blockquote> - 代码块中嵌入日文注释：
<pre><code lang="ja">// サンプルコード</code></pre> - 双语标题旁标注原文：
<span lang="en">Artificial Intelligence</span>人工智能
meta标签配合lang才能真正影响SEO和自动翻译
<meta name="description" content="..."> 和 <title> 的内容语言必须与 <html lang> 一致，否则搜索引擎可能误判页面主语言。例如中文页用了 lang="zh-CN"，但 <meta name="description"> 写的是英文，Google 可能把它当英文页索引。
关键点：
-
<meta name="description">长度控制在 150–160 字符，且语言与lang值严格匹配 - 避免在
<meta name="keywords">中混用多语言词，现代搜索引擎已基本忽略该标签 - Open Graph 和 Twitter 卡片的
og:title、twitter:title同样需与当前lang一致，否则社交分享时显示错乱
meta，而是 <html lang> 与内容语言、描述标签、局部 lang 声明三者对齐。最容易被忽略的是：SPA 切换语言时只改 state 或 body，却忘了同步刷新 document.documentElement.lang —— 这一步漏掉，前面所有优化都白做。 
