站点运营

站点运营:标题层级与语义标签自查,别让整页结构只剩一堆 div

很多站点改版多次后,源码里只剩 div 和 span,标题层级也乱成一团。本文说明为什么标题层级值得单独检查一遍,列出多个 h1、层级跳跃、把标题当字号用、整页缺少语义标签等常见问题,并给出可执行的自查步骤和改动后的回归检查清单。

站点运营

站点运营:标题层级与语义标签自查,别让整页结构只剩一堆 div

站点运行一段时间后,页面往往会经历多次改版、模板替换和内容填充。视觉上看起来没问题,但打开源码会发现:整页几乎全是 div 和 span,标题层级东一块西一块,列表靠换行撑出来。对访客来说这不一定立刻出问题,但对解析页面的程序、读屏软件和后续接手的人来说,等于拿到一份没有目录的文档。

为什么标题层级值得单独看一遍

搜索引擎抓取一个页面后,需要判断这篇内容在讲什么、哪部分是主体、哪部分是附属。除了正文文本本身,标题标签(h1 到 h6)是最直接的线索之一。层级清晰时,程序能较快识别出主标题、分节标题和列表结构,正文提取与摘要生成会更稳定;层级混乱时,可能出现主标题被忽略、导航文字被当成正文、整页主题判断偏移等情况。

这一点对聚合页和栏目列表页尤其明显,因为这类页面正文文字很少,结构本身就是主要信息。

常见的几类结构问题

一个页面出现多个 h1

可能是模板里固定输出了一个 h1(比如站点名),编辑在正文里又手动加了一个。多个 h1 不必然带来问题,但会让程序难以判断哪个才是本篇主题,在标题相似的栏目页上更容易混淆。

层级跳跃

h2 下面直接跟 h4,或者正文的第一个标题就是 h3。视觉上看不出差别,因为字号由 CSS 控制,但结构上相当于目录里从第二章直接跳到第二章第四节。

把标题当字号用

有些页面为了让某段文字变大,随手套一个 h3;真正的段落小标题反而只用 strong 加粗。结果是标题树被稀释,真正的分节内容没有标记。

整页只有 div

导航、正文、侧栏、页脚全部由 div 承载,列表用 p 加换行模拟。程序仍能读到文字,但丢掉了「这是一组并列条目」「这是主导航」这类信息。

一次自查可以这样做

  1. 在浏览器控制台执行一段脚本,把页面里所有 h1 到 h6 按顺序打印出来,形成一份大纲。只看这份大纲,能不能说清页面在讲什么。
  2. 统计 h1 的数量,确认每页只有一处主体标题,且标题内容与页面主题一致。
  3. 检查层级是否连续,是否出现从 h2 直接跳到 h4 的情况。
  4. 抽查模板输出的区域:导航、面包屑、页脚、相关推荐,这些地方在多次迭代后往往只剩 div。
  5. 把明显的内容区块换成语义标签:主导航用 nav,正文主体用 main 或 article,独立分节用 section,页脚用 footer。
  6. 检查并列条目是否用了 ul、ol、li,而不是一串 p 标签。
  7. 确认交互元素使用 a 或 button,而不是绑定了点击事件的 div。

改完之后顺手确认几件事

  • 样式是否还在:语义标签本身不带默认样式,替换后要检查原有 CSS 选择器是否还能命中。
  • 后台是否能继续正常输出:如果富文本编辑器会自动包裹标签,需要确认没有生成嵌套的 h1。
  • 列表页、详情页、专题页三类模板分别抽查一遍,问题通常出在模板而不是单篇内容。
  • 把这次调整记入改动日志,方便下次改版时对照。
结构整理属于基础工作,不会立刻带来可见变化,但它决定了后续内容、抓取和工具解析的上限。做完之后当作一次收尾即可,不必反复折腾。