lang属性必须写在html根标签上且符合bcp 47规范，否则影响seo、翻译、语音朗读等；局部多语言内容需显式声明lang；hreflang须与lang协同并完整覆盖所有语言版本。
lang 属性本身不直接“推广”，但它决定了搜索引擎是否把你的页面识别为某语言的合法版本。写错、漏写或只写在 body 上，海外 SEO 就基本失效。
必须写在 html 根标签上，否则 Google 当它是英文页
浏览器和 Google 只读 这一行。改 document.body.lang 或给某个 div 加 lang，对 SEO 零影响。
- 常见后果：
Chrome自动翻译按钮不出现；VoiceOver把「上海」读成Shang Hai；Google 抓取时判定主语言为en，中文内容被降权 - SSR 页面：服务端根据
Accept-Language头输出对应lang，别等 JS 加载后再补 - SPA 页面：切换语言时必须执行
document.documentElement.lang = "ja-JP"，不是body，也不是只更新 React state - 静态多语言站：每个语言版本单独一份 HTML，
上硬编码，比如
lang 值必须严格符合 BCP 47，否则等于没写
Google 和 Chrome 只接受小写字母 + 连字符 + 地区码（可选）的格式。任何偏差都会被忽略。
- 有效写法：
zh-CN、en-GB、ja-JP、pt-BR - 无效写法：
zh_cn（下划线）、ZH-CN（大写）、zh-CN（末尾空格）、Chinese（自然语言名） - 后端返回
zh_ch？前端必须做标准化转换：zh_ch → zh-CN，再赋给document.documentElement.lang - 用
zh而非zh-Hans？iOS VoiceOver 某些版本会 fallback 到英语发音；zh-Hans和zh-Hant触发的拼音标注、字体回退逻辑完全不同
局部多语言内容必须显式声明 lang，不能靠继承
浏览器不会自动判断「这段英文是引用」「这行德文是产品名」。不加 lang，就全按根语言处理——拼写检查失效、语音朗读错、字体 fallback 异常（比如德文 ß 被中文字体渲染成方块）。
- 英文引文：
<blockquote lang="en">The quick brown fox...</blockquote> - 日文注释代码块：
<pre class="brush:php;toolbar:false;" lang="bash"><code lang="ja"># サーバー起動</code></pre> - 双语标题旁标原文：
<h1>人工智能 <span lang="en">Artificial Intelligence</span> </h1> -
<meta name="description">和<title></title>的语言必须与严格一致，否则 Google 可能索引错语言版本
lang 必须和 hreflang 标签协同，漏一个就全组失效
hreflang 不是可选项，它是告诉 Google “这个页面是哪个语言+地区的官方版本”。它和 lang 是配套关系：前者管索引分发，后者管页面内语义解析。
- 三个版本：
https://example.com/（en-US）、https://example.com/de-de/、https://example.com/es-es/，每个页面的都要放全部三条：<link rel="alternate" hreflang="en-us" href="https://example.com/">、<link rel="alternate" hreflang="de-de" href="https://example.com/de-de/">、<link rel="alternate" hreflang="es-es" href="https://example.com/es-es/"> - 必须包含自我指向，漏掉任意一个语言版本，整组
hreflang可能被 Google 忽略 -
hreflang="x-default"是推荐项，应指向语言选择器页或首页，但不能替代具体语言标签 - 语言-地区码必须查 ISO 官方表：
en-GB（不是en-UK），zh-TW（不是zh-HK），fr-CA（不是fr-FR）
最常被忽略的一点：语言切换后，lang 改了，但 <meta name="description"> 还是旧语言的文案——Google 会把它当矛盾信号，降低信任度。所有语言相关元信息必须同步更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
