一个页面只能有一个<h1>且h1–h6须线性嵌套；多h1导致搜索引擎降权或忽略后续标题，跳级（如h2后直连h4）则断裂文档大纲、破坏可访问性与SEO。
一个页面只能有一个 <h1>，且 <h1> 到 <h6> 必须线性嵌套——跳级或重复都会让搜索引擎和屏幕阅读器“听不懂”你在讲什么，不是排名掉一点，而是结构信号直接失效。
为什么多个 <h1> 会让 Google “放弃理解”整页
Google 不会报错，但会把第二个 <h1> 当作噪声处理：可能降权、忽略后续所有标题层级，甚至整页归入低信任度索引池。常见翻车点包括 CMS 模板里固定输出 <h1>{{site_name}}</h1>，文章页又加一个 <h1>{{post_title}}</h1>；或者 Vue/React 中用 v-if 动态切 <h1> 和 <h2>，导致 SSR 后源码中出现两个 <h1>。
实操建议：
- 检查页面原始 HTML 源码（不是 DevTools 渲染后 DOM），确认
<h1>存在且仅出现一次 -
<h1>文本必须与<title>语义一致——比如<title>是“React 性能优化”，<h1>就不能是“前端面试题汇总” - 仪表盘类首页含多个独立区块时，用
<section>包裹 +<h2>划分，别硬塞多个<h1>
<h2> 后直接写 <h4> 为什么比多 <h1> 更难发现却更伤 SEO
跳级不会触发控制台警告，但会断裂文档大纲（document outline）。Chrome DevTools 的 Accessibility 面板会标为「Heading order」问题，Lighthouse 直接扣分；NVDA 屏幕阅读器在标题导航模式下会跳过缺失层级，用户卡在 <h2> 就进不去下面内容。
立即学习“前端免费学习笔记（深入）”；
原因常被误判为“视觉没问题”：设计师稿里三级标题字号比二级还小，前端顺手用了 <h3>；或响应式中用 CSS 隐藏了 <h2>，但 DOM 仍存在，造成逻辑断层。
正确做法：
- 严格按语义递进：
<h1>→<h2>→<h3>；中间层级可省略，但不能跳（<h1>→<h3>不行，<h1>→<h2>→<h4>在语义成立时可接受） - Markdown 渲染器（如 remark）默认把
##转成<h2>，若原始文档从###开始，需手动补全或配置插件修正 - 服务端渲染中，
<h2>出现在<h1>之前属于严重结构错误，必须修复
动态组件中传 level 参数的坑与安全写法
Vue/React 里写 <Header title="安装指南" /> 并硬编码为 <h1>，是高频翻车点——同一组件可能出现在首页（需 <h1>）、文章内（需 <h2>）、弹窗（需 <h3>）。
错误写法：
- 用
v-if或三元表达式切换标签：condition ? <h1> : <h2>—— 导致 DOM 结构浮动，SSR/SSG 场景下 Lighthouse 无法静态分析 - 客户端 JS 计算
level值 —— 爬虫看到的是空<h1>或无标题状态
安全写法：
- 组件接收
levelprop，值限定为 1–6 整数，并 fallback：const Tag = `h${Math.min(Math.max(level, 1), 6)}` - SSR/SSG 场景下，
level必须在服务端确定，不能依赖 useEffect 或 useState - 即使所有标题视觉样式一致（比如都设 18px），也必须保留正确语义标签，禁止用
<div class="h2">冒充
<h1> 权重真比 <h2> 高很多？关键在协同而非单点
没有固定倍数权重，但信号强度差异真实存在：<h1> 是主题锚点，<h2> 是子模块框架，<h3>–<h6> 主要支撑结构。真正起作用的是整套标题链是否自洽。
容易被忽略的细节：
-
<h1>过长（>80 字符）可能在移动端被截断，影响用户第一眼理解，间接推高跳出率 - 关键词堆砌（如
<h1>写“WordPress 主题开发 WordPress 教程 WordPress 插件”）会触发质量算法惩罚 -
<h1>写“React 性能优化”，<h2>却是“Python 爬虫实战”，主题割裂会让 Google 降低页面相关性得分 - 改完
<h1>后排名没变化？因为它是必要不充分条件——真正起作用的是整套标题体系与正文前 100 字、内链锚文本、URL、<title>的协同
最复杂的点不在“怎么写”，而在于每次写标题前，先问一句：这个文字是否承担了不可替代的信息角色？如果删掉它，用户或 AI 是否会丢失对当前区块的定位依据？
