一个页面必须且只能有一个，因为主流搜索引擎按传统语义模型解析，仅将首个视为主标题，其余忽略或降权；JS水合、CMS模板、UI组件误用等易导致DOM中出现多个，破坏文档大纲，影响SEO与可访问性。
一个页面必须且只能有一个 <h1></h1>，否则搜索引擎和屏幕阅读器会失去对主主题的判断依据——这不是规范建议，而是实际解析行为导致的后果。
为什么多个 <h1></h1> 会让爬虫“困惑”
HTML5 允许多个 <h1></h1>，但 Google、Bing 等主流爬虫仍按传统语义模型解析：把第一个 <h1></h1> 当作主标题，其余忽略或降权。更麻烦的是，JS 渲染后 DOM 中可能出现第二个 <h1></h1>（比如组件库默认渲染的 Card 标题），而源码里看不到——这会导致 SSR 页面在首屏 HTML 中只有一个 <h1></h1>，但客户端水合后变成两个。
常见触发场景包括：
- CMS 模板中
<h1></h1>写死为站点名，又在文章组件里再塞一个<h1></h1> - UI 库（如 Ant Design、Chakra UI）的
<card></card>或<modal></modal>默认用<h3></h3>包裹标题，但开发者误设为<h1></h1> - SPA 路由切换时，未清空上一页残留的
<h1></h1>节点
<h1></h1> 到 <h6></h6> 必须连续，不能跳级
浏览器和辅助技术依赖标题层级生成文档大纲（Document Outline）。<h1></h1> 后直接跟 <h3></h3>，解析器不会“自动补全”缺失的 <h2></h2>，而是可能把 <h3></h3> 当作 <h2></h2> 处理，或完全跳过层级逻辑——不同引擎行为不一致，结果不可控。
实操中要检查的不是模板，而是最终渲染的 DOM：
- 打开 Chrome DevTools → Elements 面板 → 检查实时 DOM，而非原始 HTML 源码
- 用 Lighthouse 的 “Accessibility” 审计项，它会直接报出 “Heading levels should only increase by one”
- 避免用
<h2></h2>替代 CSS 样式：导航栏文字加粗 ≠ 该用<h2></h2>，改用<nav></nav>+<p class="nav-title"></p>更安全
语义化容器标签如何影响标题权重分配
<main></main>、<article></article>、<section></section> 这些标签本身不直接提升 SEO，但它们改变了标题的上下文意义。例如：
- 一个
<h2></h2>放在<main></main>内，会被认为是主体内容的子主题；放在<aside></aside>里，则可能被降权或忽略 -
<article></article>内部的<h1></h1>是独立内容单元的主标题（如博客单篇），但它不与页面级<h1></h1>冲突——前提是这个<article></article>真正代表独立可索引实体 -
<section></section>必须带标题（<h2></h2>–<h6></h6>），否则它只是个无语义的分组，对 SEO 和可访问性都无效
标题文本怎么写才不被当成关键词堆砌
现代搜索引擎已不再统计关键词密度，而是分析语义连贯性。<h1></h1> 写成 <h1>Vue3 reactive ref 响应式 Vue.js 教程</h1> 不仅无效，还可能触发质量算法惩罚，因为动词缺失、意图模糊、缺乏自然句式。
真正有效的写法需同时满足三个条件：
- 包含用户真实搜索短语，如 “
Vue 3 reactive 和 ref 的区别” - 保持完整语义结构，优先用 “动词+名词” 或 “疑问句”，如
<h1>Vue 3 中 reactive 和 ref 的区别与使用场景</h1> - 长度控制在 20–60 字符，移动端显示不截断，且前 30 字必须承载核心意图
最容易被忽略的一点是：<h1></h1> 的语义必须和 <title></title>、正文首段、内链锚文本形成闭环。单独改 <h1></h1> 几乎不会带来排名变化——它只是整套信号中的一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
