国际化网站多地区定位需同时规范使用lang属性和hreflang标签：lang声明页面主体语言并须准确写在html根元素，hreflang则闭环互指所有语言版本且用绝对url；二者必须逻辑一致，否则导致seo降权与可访问性失效。
国际化网站的多地区定位不是靠猜用户在哪，而是用明确、成对、标准化的 HTML 标签告诉搜索引擎：这个页面是给谁看的。核心就两条——lang 属性定内容语言，hreflang 标签定地区与语言版本关系。两者缺一不可，且必须严格匹配实际内容。
根元素 lang 必须准确声明页面主体语言
搜索引擎和屏幕阅读器只认 这个声明。写错格式（如 zh_cn、ZH-CN、zh-CN[空格]）、写在 body 上、或只写 "zh" 而不区分简繁（zh-Hans / zh-Hant），都会导致识别失败。
- 中文页标题里混写英文关键词，但
lang="zh-CN"却没变 → 百度可能折叠展示，Google 可能降权相关性 - SPA 切换语言时只更新状态或 body.lang → VoiceOver 仍按旧语言朗读，“北京”被读成 “Bei Jing”
- 静态站每个语言版本必须硬编码
，不能靠 JS 延迟注入，否则首屏源码语言错误，SEO 和可访问性双失效
hreflang 必须闭环互指所有语言版本
hreflang 不加分，但决定你的中文页会不会被当成英文页的重复副本而直接跳过索引。它要求每一页都完整列出所有语言版本（含自身和 x-default），且全部用绝对 URL、BCP 47 格式、双向对应。
- 英文页写了
hreflang="zh-CN"指向中文页，但中文页没回指英文页 → 搜索引擎认为“中文页无对应英文版”，整组失效 - hreflang="en" 指向一个实际是日文的 URL → 语义冲突，整个 hreflang 声明被忽略
- 全站只在首页加 hreflang，产品页 /zh/product 缺失 → 区域化流量无法精准分发
lang 与 hreflang 必须逻辑自洽
这两个标签服务对象不同：lang 是给浏览器和辅助技术看的，hreflang 是给爬虫看的。但它们不能打架。
- 中文页
，但rel="canonical"指向英文主页 → Google 标记为 “Conflicting signals”，两个版本都可能被降权 - 中文页
hreflang="zh-CN"指向自己，但页面内大段英文引用没加<p lang="en"></p>→ 拼写检查失效、字体 fallback 错乱、引号间距异常 - 子目录结构（/en/、/zh/）比参数结构（?lang=en）更受搜索引擎信任，也更利于 hreflang 管理
局部多语言内容必须显式标注
浏览器不会自动识别“这段英文是引用”或“这行法文是作者名”。不加 lang，就全按根语言处理。
- 技术文档中嵌入英文代码注释 → 不加
<span lang="en"></span>，中文字体强行渲染假名，显示异常 - 双语导航菜单，中文项用
<li lang="zh-CN">，英文项用<li lang="en">→ 屏幕阅读器切换发音，拼写检查正常启用 - CSS 可用
::lang(zh)伪类微调标点间距或字重，但前提是 HTML 中已正确声明
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
