h1后直接写h2是合法且推荐的嵌套顺序，代表整页唯一主题与第一级子模块的语义承接；h1后跳过h2直写h3则破坏文档大纲，导致屏幕阅读器跳过、lighthouse扣分及seo信号失效。
h1后面直接写h2是合法且推荐的嵌套顺序
这是 HTML 语义结构的起点，<h1></h1>代表整页唯一主题，<h2></h2>自然承接为第一级子模块。Google 和屏幕阅读器都依赖这种线性关系理解内容骨架。只要 DOM 中 <h1></h1> 出现在 <h2></h2> 之前（且中间没插其他标题），就满足基本要求。
常见错误不是“h1后能不能跟h2”，而是：
– <h2></h2> 出现在 <h1></h1> 之前（比如 SSR 模板漏了主标题，或 CMS 动态渲染顺序错乱）
– <h1></h1> 被包裹在 <footer></footer> 或 <aside></aside> 里，导致语义脱节
– 多个 <h1></h1> 共存，让第二个 <h1></h1> 实际被当作噪声忽略
h1后面跳过h2直接写h3会破坏文档大纲
这不是浏览器报错的问题，而是解析逻辑断裂：Chrome DevTools 的 Accessibility 面板会标出「Heading order」警告，Lighthouse 直接扣分，NVDA 屏幕阅读器在标题导航模式下会跳过 <h3></h3>，用户卡在 <h2></h2> 就进不去后续内容。
容易被忽略的场景：
– Markdown 渲染器（如 remark）把 ## 转成 <h2></h2>，但原始文档从 ### 开始，结果生成 <h1></h1> → <h3></h3>
– 响应式中用 CSS 隐藏了某个 <h2></h2>，但 DOM 仍存在，视觉上“跳级”了，实际结构已断层
– Vue/React 组件中用 v-if 或 {condition && <h2>...</h2>} 导致 SSR 后源码缺失 <h2></h2>
h2必须嵌套在h1之后，但不必紧邻
<h1></h1> 和 <h2></h2> 之间可以有其他非标题元素（比如 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6890" title="seo giffy"><img
src="https://img.php.cn/upload/skill/000/000/081/179118012688229.jpg" alt="seo giffy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6890" title="seo giffy" class="overflowclass">seo giffy</a>
<p class="overflowclass">当用户想要设置、改进或审核分析跟踪与衡量时使用。也适用于用户提及“设置跟踪”、“GA4”、“Google Analyt...”等情况。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6890" title="seo giffy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、<section></section>、<div>），只要没有其他标题标签插入即可。关键不是物理距离，而是 DOM 树中的层级顺序和语义连续性。
<p>需要注意：<br>– <code><h2></h2> 不能出现在 <header></header> 或 <nav></nav> 里（除非该区域确实是页面主内容的一部分）
– <h2></h2> 应该放在 <main></main> 内，否则可能被搜索引擎判定为非核心内容
– 如果页面含多个独立区块（如仪表盘首页），用 <section></section> 包裹 + <h2></h2> 划分，别硬塞多个 <h1></h1>
SEO 权重不靠“h1 > h2”简单递减，而靠语义一致性
单独改一个 <h1></h1> 不会让排名突变，真正起作用的是整套标题链是否自洽：<h1></h1> 写“React 性能优化”，<h2></h2> 就不该是“TypeScript 基础语法”，否则 Google 会降低页面主题相关性得分。
实操中更易踩的坑：
– <h1></h1> 和 <title></title> 文本语义不一致（比如 <title></title> 是“前端面试题汇总”，<h1></h1> 却是“Vue 3 响应式原理”）
– <h2></h2> 堆砌关键词（如 <h2></h2>北京React培训_北京前端培训班_北京Web开发课程），触发 spam 惩罚
– <h2></h2> 数量失控（一页超过 5 个），说明内容组织混乱，反而稀释每个子模块的信号强度
最常被忽略的一点：检查必须基于原始 HTML 源码，不是 DevTools 渲染后的 DOM。SPA 页面路由切换后未更新 <h1></h1> 文本、CMS 模板固定输出 <h1>{{site_name}}</h1>，这些错误在源码里才看得清。
