做站点运营时,大家容易盯着 TDK、内鏈和 URL,却很少回头看标题层級。标题层級不只是视觉問题:H1 告诉用戶和蜘蛛這個頁面在讲什么,H2、H3 則像内容大纲,把長頁面切成可讀的区块。层級乱了,頁面不是不能看,而是理解成本變高。
H1 常见問题:不是缺失,就是重复
在模板层,H1 经常被誤用。有的頁面把 Logo 包在 H1 里,有的文章頁同时出現“栏目名 + 文章标题”两個 H1,還有的用图片代替文字标题,DOM 里根本没有 H1。這些問题在视觉上未必明顯,但對頁面主题识別不友好。
- 一個頁面出現多個 H1,且内容互不相關;
- H1 與 title 完全一致,失去互补作用;
- H1 被拆成多段,或者里面塞了關鍵詞堆砌;
- 列表頁、专题頁、搜尋结果頁共用一個 H1 模板;
- H1 在移動端被隐藏,只剩图片或图标。
层級跳跃:H2 之後直接 H4
另一個高频問题是层級跳跃。内容編輯為了让字号變小,直接選 H4 或 H5,跳過了 H2、H3。這样样式看起来没問题,但大纲结构断裂。蜘蛛在解析时,無法判断哪一段是章节标题,哪一段是章节下的小节。
更稳妥的做法是:H1 只出現一次,代表頁面主题;H2 用于主要区块;H3 用于 H2 下的细分;如果還需要更细,優先考虑用列表或段落,而不是繼續往 H5、H6 堆。
自查时按模板走一遍
逐個頁面检查不現實,建议按模板類型抽查。常见的模板包括首頁、栏目頁、文章頁、专题聚合頁、标簽頁、作者頁、搜尋结果頁和 404 頁面。
- 打開頁面源碼,搜尋 h1 标簽,確認數量和内容;
- 检查 H1 是否與頁面主题一致,是否和 title 有区分;
- 從 H2 開始逐級检查,看是否存在跳級;
- 把 CSS 關掉或使用阅讀模式,观察大纲是否還能讀通;
- 检查移動端和 PC 端渲染後的标题是否一致;
- 记錄問题模板,回到模板层统一修改,而不是逐頁修补。
修复顺序:先模板,後内容
如果問题出在模板,優先改模板,否則每次發新内容都會重复出現。模板改完後,再處理存量内容。存量内容不必一次性全改,可以按流量和更新频率排優先級:常更新的栏目頁、重点文章頁先處理,归档内容可以顺带修正。
編輯器侧也可以做一些约束:限制 H1 數量、提供标题层級下拉、在發布前提示层級跳跃。這样能减少編輯随手用加粗或字号代替标题的情况。
标题层級是内容大纲,不是字号工具。样式可以改,语义別乱。
別忽略導航和侧邊栏的标题
導航菜單、侧邊栏推荐、頁脚栏目有时也會使用 H2 或 H3。它們属于全站重复模块,如果层級過高,會干扰正文大纲。更合适的做法是用 div 或 nav 配合样式,正文区域再獨立使用 H2、H3。這样蜘蛛進入頁面後,能更快定位到主体内容。
最後提醒一句:标题层級自查不需要天天做,但每次改模板、換編輯器、上线新栏目时值得顺手看一眼。结构清晰了,内容更新和内鏈布局都會省力一些。