站点运行一段时间后,页面往往会经历多次改版、模板替换和内容填充。视觉上看起来没问题,但打开源码会发现:整页几乎全是 div 和 span,标题层级东一块西一块,列表靠换行撑出来。对访客来说这不一定立刻出问题,但对解析页面的程序、读屏软件和后续接手的人来说,等于拿到一份没有目录的文档。
为什么标题层级值得单独看一遍
搜索引擎抓取一个页面后,需要判断这篇内容在讲什么、哪部分是主体、哪部分是附属。除了正文文本本身,标题标签(h1 到 h6)是最直接的线索之一。层级清晰时,程序能较快识别出主标题、分节标题和列表结构,正文提取与摘要生成会更稳定;层级混乱时,可能出现主标题被忽略、导航文字被当成正文、整页主题判断偏移等情况。
这一点对聚合页和栏目列表页尤其明显,因为这类页面正文文字很少,结构本身就是主要信息。
常见的几类结构问题
一个页面出现多个 h1
可能是模板里固定输出了一个 h1(比如站点名),编辑在正文里又手动加了一个。多个 h1 不必然带来问题,但会让程序难以判断哪个才是本篇主题,在标题相似的栏目页上更容易混淆。
层级跳跃
h2 下面直接跟 h4,或者正文的第一个标题就是 h3。视觉上看不出差别,因为字号由 CSS 控制,但结构上相当于目录里从第二章直接跳到第二章第四节。
把标题当字号用
有些页面为了让某段文字变大,随手套一个 h3;真正的段落小标题反而只用 strong 加粗。结果是标题树被稀释,真正的分节内容没有标记。
整页只有 div
导航、正文、侧栏、页脚全部由 div 承载,列表用 p 加换行模拟。程序仍能读到文字,但丢掉了「这是一组并列条目」「这是主导航」这类信息。
一次自查可以这样做
- 在浏览器控制台执行一段脚本,把页面里所有 h1 到 h6 按顺序打印出来,形成一份大纲。只看这份大纲,能不能说清页面在讲什么。
- 统计 h1 的数量,确认每页只有一处主体标题,且标题内容与页面主题一致。
- 检查层级是否连续,是否出现从 h2 直接跳到 h4 的情况。
- 抽查模板输出的区域:导航、面包屑、页脚、相关推荐,这些地方在多次迭代后往往只剩 div。
- 把明显的内容区块换成语义标签:主导航用 nav,正文主体用 main 或 article,独立分节用 section,页脚用 footer。
- 检查并列条目是否用了 ul、ol、li,而不是一串 p 标签。
- 确认交互元素使用 a 或 button,而不是绑定了点击事件的 div。
改完之后顺手确认几件事
- 样式是否还在:语义标签本身不带默认样式,替换后要检查原有 CSS 选择器是否还能命中。
- 后台是否能继续正常输出:如果富文本编辑器会自动包裹标签,需要确认没有生成嵌套的 h1。
- 列表页、详情页、专题页三类模板分别抽查一遍,问题通常出在模板而不是单篇内容。
- 把这次调整记入改动日志,方便下次改版时对照。
结构整理属于基础工作,不会立刻带来可见变化,但它决定了后续内容、抓取和工具解析的上限。做完之后当作一次收尾即可,不必反复折腾。