应只用一个<h1>，因多用会削弱主题聚焦，导致SEO降权和屏幕阅读器误读；主流工具默认仅识别首个<h1>为页面主标题，后续<h1>易被忽略或误判。
不是必须只用一次，但多用 <h1> 会削弱页面主题聚焦，对 SEO 和可访问性实际有害。
为什么搜索引擎和屏幕阅读器都“在意” <h1> 的数量
浏览器本身不限制 <h1> 出现次数，HTML5 规范也允许在 <section> 或 <article> 内各自定义 <h1>。但现实是：主流 SEO 工具（如 Google Search Console、Ahrefs）和多数屏幕阅读器默认把第一个 <h1> 当作页面唯一主标题处理；后续的 <h1> 很可能被忽略或误判为结构混乱。
常见错误现象：
– 页面顶部有 <h1>首页</h1>，中间又塞一个 <h1>最新活动</h1>，结果搜索结果中展示的是“最新活动”，而非预期的“首页”
– 屏幕阅读器用户进入页面后直接跳到第二个 <h1>，错过核心内容定位
- 真实使用场景：单页应用（SPA）路由切换时，若未手动重置
<h1>，旧标题残留会导致语义错乱 - 建议做法：每个路由/视图只保留一个
<h1>，且由 JS 动态更新其textContent，而非静态堆叠 - 兼容性影响：IE9+、所有现代浏览器均无解析问题，但 NVDA、VoiceOver 等读屏工具对多重
<h1>的行为不一致
<h1> 放哪儿才算“合理位置”
它不需要非得在 DOM 最前面，但必须在逻辑上早于它所描述的内容块。比如卡片式布局中，若 <h1> 被 CSS position: absolute 移到右上角，而 DOM 顺序落在一堆 <div> 后面，语义结构就已断裂。
- 容易踩的坑：用
display: none隐藏“冗余”<h1>—— 搜索引擎仍会索引，且可访问性检测工具直接报错 - 正确替代：用
<h2>~<h6>表达次级标题，配合 ARIArole="heading"和aria-level="2"可补足语义（但不如原生 heading 标签可靠） - 性能无关，但维护成本高：多个
<h1>会让内容编辑者困惑，CMS 模板里容易误删关键标题
HTML5 的 <section> + <h1> 嵌套真能解决问题？
理论上可以，例如：
<article>
<h1>博客文章标题</h1>
<section>
<h1>章节一</h1>
...
</section>
<section>
<h1>章节二</h1>
...
</section>
</article>
但实际落地时，绝大多数 CMS、SEO 插件、甚至 Lighthouse 审计都不会按 HTML5 章节模型解析层级。它们仍倾向提取第一个 <h1> 并忽略上下文。
- 参数差异：Lighthouse 的 “Heading levels should only increase by one” 规则不检查嵌套，只扫描全局 heading 顺序
- 使用场景局限：适合静态文档站（如 Markdown 渲染器），不适合动态业务页（商品页、用户中心等）
- 真正起作用的不是标签嵌套，而是 DOM 顺序 + 视觉焦点流 + 文本相关性三者一致
最常被忽略的一点：SEO 不是只看 <h1> 是否存在，而是看它是否与 <title>、首段文本、图片 alt、以及用户点击进来的搜索词形成强语义闭环——这个闭环一旦被多个 <h1> 打断，修复成本远高于一开始只写一个。
