hreflang标签仅用于SEO，不触发前端行为；必须双向闭环、绝对URL、符合BCP 47规范、静态生成且无重复；x-default为兜底页，验证需用Search Console或Screaming Frog。
hreflang 标签不能实现自动切换，它只告诉搜索引擎“其他语言版本在哪”，浏览器和用户完全感知不到。 加了 <link rel="alternate" hreflang="zh-CN" href="https://example.com/zh/">，页面不会跳转、不改文字、不换字体、不触发任何前端逻辑——它纯粹是给 Google、Bing 这类爬虫看的 SEO 信号。
hreflang 声明必须双向且用绝对 URL
常见错误是只在中文页写指向英文页的 hreflang，却忘了在英文页也加回指中文页的对应标签。Google 要求闭环声明，漏一个就可能整个语言组失效。
- 每页
<head>中必须包含所有语言版本的<link rel="alternate" hreflang="xxx">，包括自己 -
href值必须是完整协议+域名的绝对 URL，https://example.com/zh/✅，/zh/或zh/❌ - 同一页面内不能重复出现相同
hreflang值（比如后端静态输出一条，JS 又动态追加一条zh-CN）
hreflang 值必须严格符合 BCP 47 规范
大小写、连字符、顺序错一个字符，Google 就忽略整条标签。这不是“差不多就行”的场景。
- 正确写法：
en、en-US、zh-Hans、zh-Hant-TW、x-default - 典型错误：
EN-us（语言大写）、zh_CN（下划线）、chinese（非标准码）、zh-TW（未明确脚本，应优先用zh-Hant-TW） -
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]')→.forEach(el => el.remove()) - 不要用
innerHTML +=拼接，容易覆盖或遗漏；用replaceChildren()或显式remove()更可控
最容易被忽略的一点：hreflang 关系必须闭环且无歧义。哪怕只漏掉一个反向链接，或某页的 href 返回 404，整个语言组都可能被降权。验证不能只靠肉眼，得用 Google Search Console 的「国际化报告」或 Screaming Frog 批量抓取比对。
