hreflang标签仅用于SEO，告知搜索引擎页面语言版本关系，不触发用户跳转或影响浏览器渲染；其值须严格遵循BCP 47规范，且需双向互指、绝对URL、静态输出，同时必须与html lang属性、URL路径及页面内容保持一致。
rel="alternate" hreflang 标签不会让用户自动跳转，也不会改变页面语言或内容——它只告诉搜索引擎：“这些页面是同一内容的不同语言版本”。想实现用户端语言切换，必须另做服务端重定向或前端逻辑。
hreflang 标签根本不管浏览器跳转
加了 <link rel="alternate" hreflang="zh-Hans" href="https://example.com/zh/">，用户访问英文页时不会被“自动切到中文”。浏览器完全忽略这个标签，html 的 lang 属性、字体渲染、拼写检查、屏幕阅读器发音，全由 <html lang="en"> 决定，和 hreflang 无关。
常见错误现象：
- 中文页里写了指向英文页的
hreflang，结果用户手动改成/en/URL，看到的还是中文文案 → 后端没返回对应语言内容，或前端没触发翻译逻辑 - Google 搜索中文关键词，用户点进来却看到英文页 →
<html lang="en">没同步改成zh-Hans，浏览器按英文规则渲染中文字体和标点
hreflang 值必须严格符合 BCP 47 规范
大小写、连字符、顺序错一个，Google 就可能整条忽略。不是“差不多就行”，而是解析器零容忍。
立即学习“前端免费学习笔记（深入）”；
正确写法（必须全部小写 + 连字符）：
-
en（通用英语），不是EN或english -
zh-Hans（简体中文），不是zh_CN、zh-hans、zh-CN（后者虽常见但非 BCP 47 推荐） -
ja-JP（日语-日本），不是jp-japan或ja_jp -
x-default是兜底页标识，不是“默认语言”，通常指向首选语言页，如hreflang="x-default" href="https://example.com/en/"
每页必须双向互指且用绝对 URL
中文页要声明所有语言版本，英文页也得完整声明回中文页；所有 href 必须带协议和域名，相对路径如 /zh/ 或 ./en/ 会被爬虫直接跳过。
正确示例（出现在 https://example.com/zh/ 页面中）：
<link rel="alternate" hreflang="zh-Hans" href="https://example.com/zh/"> <link rel="alternate" hreflang="en" href="https://example.com/en/"> <link rel="alternate" hreflang="ja-JP" href="https://example.com/ja/"> <link rel="alternate" hreflang="x-default" href="https://example.com/en/">
关键约束：
- 漏掉任一反向链接（比如英文页没写回
zh-Hans），Google 会认为“中文版没有对应英文版” - 某条
href返回 404 或重定向链过长，整个语言组可能被降权 - JS 动态插入容易重复生成，导致同一种语言被声明两次 → 优先静态输出，若必须 JS 注入，先
document.querySelectorAll('link[rel="alternate"][hreflang]')清理旧标签
别把 hreflang 和 lang 属性、多语言切换逻辑混为一谈
hreflang 只影响 SEO 索引与流量分发；<html lang="zh-Hans"> 才决定浏览器怎么渲染；而用户点击“中文”按钮后跳转或刷新，靠的是 window.location.href、服务端路由判断或 i18n 库的数据替换。
真实项目中最容易翻车的点：
- 用单页应用（SPA）做语言切换，却还在每个路由页静态塞
hreflang指向不同 HTML 文件 → 语义冲突，Google 认为内容不一致 - 把
hreflang="zh-Hans"和<html lang="en">同时放在中文页里 → 浏览器按lang渲染，搜索引擎按hreflang索引，两者打架 - 以为加了
hreflang就不用管lang属性 → 结果中文文案在英文lang下显示异常字体 fallback、标点间距错乱、屏幕阅读器用英语念中文
真正闭环的多语言，得让 hreflang、lang、URL 路径、页面内容四者严格对齐。少一个，SEO、可访问性、用户体验就掉一块。
