站点运营

站点运营:标题层級與语义标簽自查,別让整頁结构只剩一堆 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。
  • 列表頁、詳情頁、专题頁三類模板分別抽查一遍,問题通常出在模板而不是單篇内容。
  • 把這次調整记入改動日誌,方便下次改版时對照。
结构整理属于基础工作,不會立刻带来可见變化,但它决定了後續内容、抓取和工具解析的上限。做完之後当作一次收尾即可,不必反复折腾。