一个页面只能有一个<h1>，且必须准确表达唯一核心主题；<h2>–<h6>体现内容逻辑嵌套，跳级、多<h1>或动态切换标签均破坏语义结构。
一个页面只能有一个 <h1>，且必须准确表达页面唯一核心主题；<h2>–<h6> 不是样式开关，而是内容逻辑的嵌套映射——跳级、多 <h1> 或动态切换标签都会直接破坏语义结构。
为什么 <h1> 必须且只能出现一次
搜索引擎和屏幕阅读器不靠视觉大小识别主标题，而是把 <h1> 当作页面“论文标题”级锚点。两个 <h1> 同时存在（比如 CMS 模板 header 里一个、正文又一个），会导致：
- Google 可能忽略第二个
<h1>后所有层级，子内容不被索引 - NVDA/JAWS 在标题导航模式下卡死在第一个
<h1>，无法跳转 - Lighthouse 的
heading-levels审计项直接报错 - SSR/SSG 页面若首屏 HTML 中无
<h1>（如 loading 状态占位），爬虫抓到的是空结构
怎么判断该用 <h2> 还是 <h3>
不是看字号大小，而是看它在内容大纲中是否从属于上一级标题。例如：
- 文章页：
<h1>是文章标题 → 每个大章节用<h2>（如“背景”“方法”“结论”）→ 每个<h2>下的子模块用<h3>（如“数据收集”“模型训练”） - 仪表盘首页：没有单一主主题，就不用
<h1>，改用<section>+<h2>（如“今日概览”“用户活跃”“错误率趋势”） - 组件库文档：每个组件示例区块应为
<h3>（从属于当前组件页的<h2>“API 使用”）
关键检查点：删掉这个标题，下面的内容是否失去上下文定位？如果是，那它就该有对应层级；如果不是，说明层级过高或冗余。
动态渲染标题时最容易踩的坑
Vue/React 中传 level prop 渲染标题很常见，但错误写法会直接让 Lighthouse 无法静态分析结构：
- ❌ 禁止用三元表达式切换标签：
{condition ? <h1> : <h2>}—— DOM 结构浮动，SSR 与 CSR 不一致 - ❌ 禁止用
v-if/v-else控制不同<h>标签 —— 同一位置标签类型不可预测 - ✅ 正确做法：
const Tag = `h${Math.min(Math.max(level, 1), 6)}`，且level必须在服务端确定（SSR/SSG 场景） - ✅ fallback 必须存在：当
level未传或非法时，默认降级为<h2>，不能渲染<div>冒充
<title> 和 <h1> 不一致会触发 AI 信任降权
这不是 SEO 黑话，而是当前主流 AI 搜索引擎（如 Google SGE、Perplexity）的实际判定逻辑：
- 如果
<title>是前端性能优化指南 | 前端性能实验室，但<h1>是React.memo 使用误区详解，AI 会标记该页“意图模糊” - 二者语义不必完全相同，但需强相关：前者是频道名+内容类型，后者是具体主题，构成“频道 → 文章”的可信路径
- 关键词堆砌式
<h1>（如SEO优化|h1 h2 h3|HTML标题标签|前端教程）反而降低点击率与停留时间
真正难的不是记住规则，而是在每次敲下 <h 前，先问一句：这个文字删掉后，用户或 AI 是否还知道这块内容在整页中的不可替代角色？
