一个页面必须且只能有一个h1，否则将导致搜索引擎索引异常、屏幕阅读器导航失效、Lighthouse报错及AI信任降权；多h1破坏语义锚点，跳级（如h2后直接h4）断裂知识图谱，title与h1不一致则触发意图模糊判定。
一个页面必须且只能有一个 h1，否则 SEO 和屏幕阅读器都会“听懵”——这不是建议，是结构失效的临界点。
为什么多个 h1 会直接破坏语义结构
搜索引擎和读屏器不靠字体大小识别标题，而是靠 h1 到 h6 的嵌套关系构建内容地图。当出现两个 h1（比如 CMS 模板 header 里一个、正文又一个），系统无法判断哪个才是页面主题锚点：
- Google 可能忽略第二个
h1后所有层级，导致子内容不被索引 - NVDA/JAWS 读屏器在“标题导航模式”下会卡在第一个
h1，跳不过去 - Lighthouse 的「Document structure」审计项会报
heading-levels错误 - Next.js 或 Nuxt 用户若用
useEffect动态插入h1，初始 HTML 响应中可能为空，爬虫看到的是无主标题页面
动态组件中怎么安全传 level 参数
Vue/React 里写 <header title="安装指南"></header> 硬编码为 h1 是最常见翻车点。真实场景中，同一组件可能出现在首页（需 h1）、文章内（需 h2）、弹窗（需 h3）：
- 组件必须接收
levelprop，值限定为 1–6 的整数，且有 fallback：const Tag = `h${Math.min(Math.max(level, 1), 6)}` - 禁止用
v-if或三元表达式切换标签：condition ? <h1> : <h2></h2> </h1>会导致 DOM 结构浮动，Lighthouse 无法静态分析 - SSR/SSG 场景下，
level必须在服务端确定，不能依赖客户端 JS 计算 - 如果设计要求视觉无差异（比如全用 18px 字号），仍要保留正确标签，别用
<div class="h2"> 冒充 <h3> <code>h2到h6跳级为什么比多h1更隐蔽但更致命跳级（如
h2后直接h4）不会报错，但会让语义链断裂。它不像多h1那样一眼可见，却直接影响 AI 引用质量：立即学习“前端免费学习笔记（深入）”；
- 生成式引擎（如 Kimi、DeepSeek）解析网页时，依赖标题层级构建知识图谱；跳级导致子节被识别为“游离节点”，不被纳入上下文关联
- WCAG 2.1 明确要求标题形成“有意义的层次结构”（准则 1.3.1），跳级属于合规红线
- 真实错误场景：Markdown 渲染器把
##编译为h2，但用户手写####时漏了中间两级，输出就是h2→h4 - 修复方式不是加空
h3，而是用<section></section>隔离逻辑块，在每个<section></section>内从h2重新开始计数
title和h1内容不一致会触发 AI 信任降权生成式引擎优化（GEO）时代，
title和h1不再只是 SEO 配合项，而是 AI 判定内容权威性的交叉验证信号：- 若
<title>React 性能优化指南</title>，但<h1>欢迎使用我们的在线工具</h1>，AI 会标记该页“意图模糊”，降低引用优先级 - 二者关键词主体必须一致，
title可扩展品牌名（如React 性能优化指南 | 前端性能实验室），h1应聚焦核心命题 - 静态站点生成器（如 Hugo、Astro）中，确保
h1来自 frontmatter 的title字段，而非模板硬编码 - 注意：CMS 导出的 HTML 若含空
h1（如<h1></h1>），会被 GEO 工具直接判为低质内容源
真正难的不是记住“只能一个
h1”，而是每次写标题前，先问一句：这个文字是否承担了不可替代的信息角色？如果删掉它，用户或 AI 是否会丢失对当前区块的定位依据？
