lang属性写错会导致hreflang整组失效:html根标签lang值与hreflang语言代码不一致(如zh-cn与zh-CN)时,Google静默忽略整组;lang必须符合BCP 47规范,大小写敏感、仅用短横线;hreflang须成组互指、覆盖全部语言变体(含自身及x-default),且所有href为协议一致的绝对URL;局部多语言内容须显式设lang,不可依赖继承或hreflang;lang与hreflang职责分离,前者决定渲染与可访问性,后者仅用于搜索引擎识别。

lang属性写错会让hreflang整组失效
Google明确要求:html根标签的lang值必须和<link rel="alternate" hreflang="zh-CN">中的语言代码完全一致。大小写、连字符、地区码缺一不可——zh-cn和zh-CN会被视为冲突,整组hreflang被静默忽略,不是报错,而是当没写。
- 常见非法值:
zh_CN、Chinese、zh-ch、cn,浏览器和搜索引擎全当没设 - 验证方式:用Google Search Console的「URL检查」工具抓取页面,看「国际化」标签页是否列出有效对应关系
- 后端返回
zh_ch或ZH-CN时,前端必须转成小写+短横线格式,否则lang值非法即失效
hreflang必须成组互指且覆盖全部语言变体
hreflang不是单向声明,是双向契约。每个语言版本页面的<head>里,都要完整声明所有已知语言-地区版本(含自身),漏掉任意一个,整组可能被降权。
- 例如有
en-US、zh-Hans、ja-JP三个版本,每页都得写三条<link rel="alternate" hreflang="...">,包括指向自己的那条 -
hreflang="x-default"不是替代项,而是兜底页(如语言选择器页或英文首页),不能省略具体语言标签 - 所有
href必须是绝对URL:https://example.com/zh/✅,/zh/❌,./zh/❌ - HTTP和HTTPS混用,会被当成两个不同页面,
hreflang关系直接断裂
局部多语言内容不显式设lang,屏幕阅读器和翻译插件全读错
lang属性作用于元素及其子节点,不是全局开关。只改document.documentElement.lang,对已渲染的子元素无效——屏幕阅读器仍按旧语言朗读,翻译插件也识别错。
- 中文页面里嵌一段英文术语?必须给
<code lang="en">useState</code>加lang - 技术文档中夹
<pre lang="bash">curl -X POST</pre>,lang="bash"虽非BCP 47标准,但被语法高亮工具和浏览器识别为代码上下文 - SPA切换语言时,必须同步更新
document.documentElement.lang和所有含语义的子元素lang属性,不能只改state或class - 别用
[lang="en"]选择器做样式控制——它只匹配显式写了lang="en"的元素;要用:lang(en)伪类,它能继承父级语言
lang和hreflang职责完全不同,混用就白配
hreflang只告诉搜索引擎“这个页面还有哪些语言版本”,lang才决定浏览器怎么渲染、屏幕阅读器怎么读、拼写检查用哪套词典。两者不能互相替代,也不自动联动。
立即学习“前端免费学习笔记(深入)”;
-
lang写在html标签上才是唯一可靠依据;只给div或p加lang,对SEO、字体回退、自动翻译提示几乎没影响 - SSR页面:服务端渲染时,根据
Accept-Language头动态写入<html lang="zh-CN"> - 静态页:每个语言版本单独一份HTML,
html标签硬编码对应值,避免JS注入延迟导致闪动 - 切记:
hreflang不触发跳转,不改变渲染,不替代lang——它纯粹是给搜索引擎看的元信息
lang和hreflang必须严格对齐、实时同步、逐页校验。漏一个大小写,丢一条互指链接,整个多语言SEO结构就可能失效。



















