免费工具 H 标签检测：一眼看清网页的 H1–H6 标题大纲
把网页源码粘进来，按文档顺序列出全部 h1 到 h6，缩进成一棵大纲树，每个标题都标了在源码第几行。跳级、空标题、多个 H1 会被标出来，并说明依据——哪些是 HTML 标准和无障碍的要求，哪些其实对搜索排名没影响。
- 大纲树一目了然
- H1–H6 和 role="heading"
- 本地检测
检测标题大纲
在浏览器里打开网页，按 Ctrl+U（Mac：⌘⌥U）查看源代码，全选复制后粘到下面；也可以只粘文章那一段 HTML。改一个字结果就更新，不会抓取或上传任何东西。
整页源码或一段 HTML 都行。标题里的图片按 alt 文字计入，和读屏软件的读法一致。
标题总数
7
h1–h6，加上 role="heading" 的元素。
H1 个数
1
跳级
1
比上一个标题深了不止一级。
空标题
1
既没有文字，也没有图片 alt。
标题大纲
按级别缩进、按源码顺序排列，右边的数字是在源码里的行号。
- H1网店打开太慢？三步提速指南24
- H2先测量，再动手26
- H4重点看哪几个数跳级28
- H2压缩商品图片30
- H3（空）空35
- H2去掉用不上的脚本36
- H2读者留言42
检查结果
错误和警告排在前面；「提示」是补充说明，不一定要改。
- 错误第 35 行<h3> 是空的。读屏软件会读出「标题 N 级」，后面却没有内容。补上文字或删掉这个元素。
- 警告第 28 行h2 后面直接是 h4（「重点看哪几个数」），跳过了 h3。HTML 标准要求每个标题最多比前一个深一级。
- 通过只有一个 H1：「网店打开太慢？三步提速指南」。
H1 网店打开太慢？三步提速指南
H2 先测量，再动手
H4 重点看哪几个数
H2 压缩商品图片
H3 (empty)
H2 去掉用不上的脚本
H2 读者留言可以贴进内容需求文档、工单或站内内容盘点表。
版本 v1.0更新于 更新记录
哪些问题要改，改给谁看
标题同时服务两类读者：一类是浏览页面的人，包括靠标题跳转的读屏软件用户；另一类是搜索引擎，用标题理解每一节在讲什么。两边在意的东西不一样。
跳级
比如 h2 后面直接接 h4。HTML 标准认为这不合规，读屏用户也会弄不清这个 h4 属于哪一节。Google 说标题顺序对它没影响，所以改跳级是为了人，不是为了排名。
空标题
多半是建站工具留下的空模块，或者拿标题当空行用。读屏软件照样会读出来。这是唯一一项哪里都值得改的问题。
多个 H1
HTML 标准允许，对 Google 也没影响，算写法上的选择。只用一个和页面标题一致的 H1，大纲更整齐，「这页讲什么」也更清楚。
隐藏的、只有图片的标题
藏在下拉菜单、轮播图里的标题，或者只放了一个 logo 图片的标题。检查去掉它们之后，看得见的大纲是否还说得通。
Google 的 SEO 新手指南把「标题的数量和顺序」列在不必关注的事项里：标题按语义顺序排列对读屏软件很有帮助，但从 Google 搜索的角度看，顺序乱了也没关系。本工具标出跳级，依据是 HTML 标准和无障碍要求，这一点如实写明。
一分钟查完一个页面
后台编辑器里的草稿、已经上线的页面都能查。
-
1
复制源码
线上页面按 Ctrl+U 查看源代码后全选复制；草稿在编辑器里切到 HTML / 源码模式复制。
-
2
粘进来
大纲马上出来。行号对应你粘贴的源码，方便回去找到这个标题。
-
3
把大纲当目录读一遍
它像不像这一页的内容提要？有没有其实只是样式的标题，比如「全场包邮」横幅被写成了 h2？
-
4
改完再粘一次
把跳级改掉、空标题补字或删除，再检测一次。需要发给同事时，复制下面的文字版大纲。
什么算标题，什么算跳级
依据 WHATWG HTML 标准（Living Standard）的「Headings and outlines」一节。以前那套按 section 元素推算层级的「大纲算法」已经从标准里删掉，浏览器和读屏软件也从没实现过，所以 <section> 不会改变标题级别，级别只看标签里的数字。
- 标题 = 按源码顺序出现的 h1–h6，加上带
role="heading"的元素（级别取aria-level，没写按 2 级，同 WAI-ARIA） - 跳级 = 比紧挨着的上一个标题深了不止一级：h2 → h4 算跳级，h4 → h2 不算
- 标题文字 = 元素里的文字加上图片的 alt，连续空白合并成一个
<hgroup>里只有 h1–h6 那个算标题，旁边的<p>是副标题，不计入
| 标题顺序 | 结果 | 原因 |
|---|---|---|
| h1 → h2 → h3 → h2 | 通过 | 每一步最多深一级 |
| h1 → h2 → h4 | 跳级 | h4 比 h2 深两级，标准要求中间先有 h3 |
h1 → h3（放在 <section> 里） | 跳级 | HTML 标准自己举的不合规例子 |
| 第一个就是 h2，没有 h1 | 警告 | 标准写明至少应有一个 1 级标题 |
| h1 → h2 → h1 → h2 | 通过（提示） | 允许多个 h1 |
默认示例查出来什么
默认内容是一篇讲网店提速的运营笔记，里面故意放了几个常见问题。
| 行号 | 标题 | 结论 |
|---|---|---|
| 24 | H1 网店打开太慢？三步提速指南 | 通过，唯一的 H1 |
| 26 | H2 先测量，再动手 | 通过 |
| 28 | H4 重点看哪几个数 | 跳级：h2 → h4，缺 h3 |
| 30 | H2 压缩商品图片 | 通过 |
| 35 | H3（空） | 错误：空标题 |
| 36 | H2 去掉用不上的脚本 | 通过 |
| 42 | H2 读者留言 | 通过 |
改法：把 h4 改成 h3，删掉空的 h3，大纲就变成一个主标题加四个小节。链接提取、图片 alt 检查、文本代码比、HTML 校验四个页面用的是同一段 HTML，可以对照着看。
标题结构通常错在哪
多数问题都是因为按「字号好看」而不是按「内容层级」选标签。
按字号选标签
觉得 h4 的字号合适就用 h4，结果就是跳级。层级按内容结构定，字号交给 CSS。
模板里的标题
侧栏小部件、页脚、订阅框写成 h2、h3，每个页面的大纲里都会多出它们。只在引出一段正文时才用标题。
空标题和隐藏标题
可视化建站工具常留下空的标题模块，轮播图会把还没轮到的标题藏起来，都会干扰按标题跳转。
执着于「只能有一个 H1」
HTML 标准和 Google 都没有要求只能有一个 H1。保持一个清楚的 H1 是好习惯，但为了「SEO」删掉一个合理的 H1 没有意义。
结构理顺之后，看页面实际表现
大纲清楚能帮人找到想看的内容。TapCub 能告诉你他们到底有没有找到：哪些搜索词把人带来、停留多久、从哪离开。
H1 标签是什么意思？怎么检测网页的 H 标签？
H1 是 HTML 里最高一级的标题标签，通常就是页面的主标题，H2–H6 是它下面的各级小标题。检测方法：打开网页，按 Ctrl+U 查看源代码，全选复制后粘到上面的输入框。工具会按顺序列出全部 h1–h6，缩进成大纲，每个标题都标了行号。
一个页面可以有多个 H1 吗？
可以。HTML 标准允许多个 H1，Google 也说标题数量对搜索没有影响。很多网站只留一个 H1 当页面标题，是因为结构对读者和读屏用户更清楚，不是因为第二个 H1 是错的。
H 标签跳级会影响 SEO 吗？
Google 的说法是不会：它的 SEO 新手指南写明标题顺序对 Google 搜索没有影响。但跳级不符合 HTML 标准「每个标题最多比前一个深一级」的要求，也会让读屏用户摸不清结构，所以还是值得改。
section 元素会让里面的标题自动降级吗？
不会。这个说法来自旧的「文档大纲算法」，它已经从 HTML 标准里删除，浏览器和读屏软件也从来没有实现过。标题级别只看标签（h1–h6）或 aria-level。
为什么建站工具里的标题显示成空的？
源码里有这个标题元素，但里面没有文字，通常是删内容时留下的空模块，或者拿标题当空行用。读屏软件仍然会读到它，删掉或补上文字即可。
能直接输入网址检测吗？
这一版只检测你粘贴的 HTML，所以草稿、测试环境、需要登录的页面都能查。粘贴源码看到的是服务器返回的内容；如果标题是 JavaScript 运行后才加上的（比如 Vue、React 单页应用），要在浏览器开发者工具里复制渲染后的 HTML。
和 HTML 校验工具有什么区别？
HTML 校验检查整段标记：未闭合标签、重复 id、缺 lang 和 alt。这个工具只看标题，并把它们排成大纲。同一段源码两个工具都可以查。
粘贴的源码会上传吗？
不会。解析在你的浏览器里完成，用的是页面自带的小型解析器，内容不会发给 TapCub、不会保存，也不会写进网址。