hreflang 标签仅影响搜索引擎索引与流量分发，与页面渲染、语言切换逻辑无关；必须严格遵循 bcp 47 规范、双向互指、使用绝对 url、避免重复，并优先静态生成。
rel="alternate" hreflang 本质是给搜索引擎看的，不是给浏览器用的
很多人加了 <link rel="alternate" hreflang="zh-CN" href="https://example.com/zh/"> 就以为页面会自动切语言、改字体、调用中文翻译脚本——完全不会。这个标签只影响搜索引擎如何索引和分发流量，和页面渲染、lang 属性、JavaScript 语言切换逻辑毫无关系。浏览器是否显示中文排版、拼写检查、语音朗读，全靠 html 标签上的 lang="zh-CN"，不是靠 hreflang。
hreflang 值必须严格符合 BCP 47，大小写、连字符、拼写一个都不能错
常见错误包括：EN-us（语言大写）、zh_CN（下划线）、chinese（非标准码）、zh-TW（未指明脚本，应优先用 zh-Hant 或 zh-Hant-TW）。正确写法只有这些形式：
-
en（通用英语） -
en-US（美式英语，语言小写 + 地区大写） -
zh-Hans（简体中文，注意是Hans不是hans或HANS） -
zh-Hant-HK（香港繁体，三段式合法）
错一个字符，Google 就可能直接忽略整条 <link>。别信“差不多就行”，hreflang 解析器不宽容。
每页必须双向互指，且所有 href 必须是绝对 URL
英文页要声明中文页，中文页也得反向声明英文页；漏掉任一方向，Google 会认为关系不完整，标记失效。同时：
-
href值不能是/zh/或zh/，必须是完整协议+域名，比如https://example.com/zh/ - 同一页面不能重复添加相同
hreflang值（比如 JS 动态追加时没去重，导致静态 HTML 里 1 条 + JS 加了 1 条zh-CN） -
x-default不是“默认语言”，而是兜底页，通常指向首选语言版本，比如hreflang="x-default" href="https://example.com/en/"
JS 动态插入 hreflang 标签极易翻车
这是最近真实踩坑高发区：后端已静态输出全部 <link rel="alternate" hreflang="...">，但前端 JS 又遍历语言列表、创建新 link 元素、appendChild 到 head。结果是每种语言被重复声明两次，Google 看到冲突就放弃解析。
- 永远优先静态生成
hreflang标签，避免运行时操作 - 如果必须 JS 注入（如 SPA 多语言路由），务必先
document.querySelectorAll('link[rel="alternate"][hreflang]')清理旧标签 - 不要依赖
innerHTML +=拼接，容易覆盖或遗漏；用replaceChildren()或显式remove()更可控
最常被忽略的一点：hreflang 关系必须闭环且无歧义。哪怕只漏掉一个反向链接，或某页的 href 返回 404，整个语言组都可能被降权。验证不能只靠肉眼，得用 Google Search Console 的「国际化报告」或 Screaming Frog 批量抓取比对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
