站点运营

站点运营:标题层級與语义标簽自查,別让蜘蛛靠猜讀懂頁面

很多站点的模板做好之後,H1 到 H6 和语义标簽就再没人看過。本文從 H1 數量、层級跳級、導航與侧栏抢标簽、语义容器一致性几個角度,给出一套半小时能跑完的自查流程,帮站長把頁面结构交代清楚,让蜘蛛少猜一点。

站点运营

站点运营:标题层級與语义标簽自查,別让蜘蛛靠猜讀懂頁面

站点运营里有一類問题很少被主動检查:頁面标簽用得對不對。标题、關鍵詞、外鏈這些總有人盯着,但 H1 到 H6 以及语义标簽的用法,往往在模板做好之後就再也没人看過。蜘蛛拿到一個 HTML 文档,很大程度上要依赖這些标簽判断頁面主体是什么、结构有几层、哪些内容是導航和推荐。标簽混乱,等于让蜘蛛自己猜。

這項自查不需要改版,也不用動資料库,翻几個主要模板,半小时就能把明顯的問题找出来。

H1:一頁一個,別当字号用

最常见的两種极端。一是全站頁面都没有 H1,正文标题用 div 加了個大字号顶上去;二是首頁、列表頁、詳情頁的侧邊栏和頁脚里塞了五六個 H1,每個区块标题都寫成 H1。前者让頁面缺一個明确的主体标识,後者让主体标识彻底失效。

比較稳妥的做法是:一個頁面只保留一個 H1,内容與頁面主标题一致,詳情頁就是文章标题,列表頁就是栏目名,首頁就是站点名加一句定位描述。

顺手检查這几点

  • H1 里是不是塞了整段關鍵詞堆砌,讀起来不像人话。
  • 列表頁每個條目的标题统一用 H2 還是 H3,全站是否一致。
  • 面包屑、广告位、推荐位的小标题有没有被寫成 H1。
  • 同一個頁面里出現多個 H2 文本完全相同,比如三個「相關内容」。

层級不要跳

H1 下面直接跳到 H4,或者正文里全用 H3 而没有 H2,都會让结构變得难以還原。建议保持 H1 → H2 → H3 的顺序,需要更细的分級时,先想清楚這一段是不是真的属于上一級的子话题。

還有一種情况是把标题标簽当成排版工具:想让某行字大一点就套個 H2,想小一点就套 H4。這類用法在正文里會制造大量無意义的层級节点,建议改用样式類来控制字号。

语义标簽:不求完美,但要一致

HTML5 提供了 main、nav、article、section、aside、header、footer、time 等标簽。不必追求教科书式的语义化,關键是同一套模板在不同頁面上保持一致,不让同一块区域這次是 nav、下次是 div。

值得检查的几個位置

  • main:全站每個頁面只出現一次,包住主要内容区,不要把侧栏也一起包進去。
  • nav:主導航、面包屑、頁脚導航都可以用,但別把正文里的關鍵詞連結列表也标成 nav。
  • article:适合詳情頁正文、獨立的评论條目,不适合用来包整個頁面的框架。
  • section:带标题的区块,如果一段内容找不到合适的标题,可能它本来就不需要 section。
  • time:發布時間、更新時間用 time 加 datetime 属性,比纯文本更容易被机器识別。

關掉样式看一遍

最直接的自查方式是临时禁用 CSS,或者用浏览器自带的辅助功能大纲视图,只看标题结构。如果關掉样式之後,頁面大纲讀起来像一份清晰的目錄,說明结构基本没問题;如果讀出来是一堆重复的「更多」「推荐」「热门」,那就需要調整。

另一個办法是直接查看頁面源碼,從 head 往下掃一遍,看看正文区域之前的标簽有多少是装饰性的 div 嵌套。嵌套過深不會直接導致抓取失敗,但會让解析和内容提取變得更費劲。

修复顺序建议

  1. 先解决正文没有 H1 或者多個 H1 的問题,這是影响最大的一類。
  2. 再處理模板层面的重复标簽,比如導航和侧栏里的假标题,改一次全站生效。
  3. 然後梳理层級跳級和标题重复,主要動正文編輯器里的寫法。
  4. 最後统一语义容器,让 main、nav、article 的用法在全站保持一致。
标簽的作用不是让頁面更好看,而是让机器在没人解释的情况下,也能讀出哪一段是主体、哪一段只是陪衬。

這類自查属于基础工作,做完不會立刻看到資料變化,但它會让後續的抓取、索引和内容理解少掉很多無谓的摩擦。把它加進站点上线的检查清單里,比事後返工划算得多。