最直接方式是打开Elements面板，右键h1～h6元素选“Inspect ARIA attributes”，查看aria-level是否连续且符合逻辑；Accessibility面板会标红跳级、重复h1、section缺标题等问题。
Chrome DevTools 里怎么看标题层级是否健康
最直接的方式是打开 Elements 面板，右键任意 <h1>～<h6> 元素 → 选 “Inspect ARIA attributes”，看 aria-level 值是否连续、是否符合内容逻辑。这个值是浏览器引擎（Blink）内部计算出的实际语义层级，比单纯数标签名更可靠。
注意：浏览器不会弹窗报错，但 Accessibility 面板会把跳级、重复 <h1>、<section> 缺标题等结构问题标为红色警告。
为什么 <section> 一加，<h3> 就变子级了
标题的语义层级不是静态写死的，而是由它所在的**语义容器**动态决定的。同一个 <h3>，在 <main> 下是平级，在 <section> 内就自动降为子节。
-
<main><h2>A</h2><section><h3>B</h3></section></main>→ B 是 A 的子节 -
<main><h2>A</h2><div><h3>B</h3></div></main>→ B 被识别为跳级（<div>无语义，不构成新大纲上下文）
所以别只盯着标签名改，得看它被谁包裹、和谁并列。
立即学习“前端免费学习笔记（深入）”；
服务端/框架里标题容易崩的三个典型场景
动态渲染时，标题结构最容易在看不见的地方被破坏：
- 全局 Layout 组件硬塞一个
<h1>Logo</h1>，页面组件又输出一个<h1>文章标题</h1>→ 实际两个<h1>，大纲分裂 - 富文本字段渲染后自动包裹
<p>，变成<p><h3>xxx</h3></p>→ 违反 HTML 嵌套规范，部分读屏器直接忽略该标题 - SPA 路由切换后没更新
<h1>文本，屏幕阅读器仍读旧标题，且搜索引擎可能索引到错误主标题
解析标题时，别漏掉 <title> 和 <meta name="description">
对爬虫和 SEO 来说，<title> 是页面主题的唯一锚点，必须每页唯一、含核心词、不能是通用文案；<meta name="description"> 虽不参与大纲，但影响搜索结果摘要展示。
它们都位于 <head>，且在 HTML 解析早期就被解析器提取——比 DOM 构建还早。如果用 JS 动态改 document.title，爬虫看不到；同理，服务端没吐出 <meta>，就不会有描述。
真正难的不是“找标题”，而是确认它出现在正确上下文、被正确容器包裹、且未被其他层覆盖或隔离。
