很多站点的内容本身没問题,乱的是标题层級:模板自带一個 H1,編輯在正文里又贴一個 H1,侧栏的推荐位标题也顺手用了 H1。訪客视觉上看不出区別,但搜尋引擎讀到的是三個並列的主题,它很难判断這一頁到底在讲什么。
标题层級不是排版工具
H1 到 H6 最初的用途是表達内容的從属關系,不是用来調字号和颜色的。字号、粗细、間距属于样式問题,交给 CSS 處理更合适。把两件事混在一起,改版时就會互相牵制:想調样式不敢動标簽,想調结构又怕頁面變形。
比較通用的做法是:一個頁面保留一個 H1,用来概括整頁主题;下面用 H2 划分主要章节;H3 表示 H2 之下的细分;再往下同理。不跳級,也不要用 H4 去反包 H2 的内容。
最常见的四類問题
- 一頁多個 H1:常见于模板 H1 加正文 H1,或者一個列表頁里每個摘要卡片都套了 H1。
- 跳級:H2 之後直接跳到 H4,中間缺席的层級會让大纲出現断点,讀起来像漏了一节。
- 把标题标簽当样式用:為了加粗、變色随手套一個标题标簽,而這段内容並不是一個章节标题。
- 标题與内容不符:H2 寫的是「常见問题」,下面却是一段产品介绍;或者标题里塞满關鍵詞,讀起来不像人话。
不用工具也能做的自查
把頁面源碼打開,检索 h1 到 h6 這些标簽,按出現顺序抄一份清單下来,然後照着清單問几個問题:
- H1 是不是只有一個,而且出現在正文主标题的位置,而不是宽泛的站点名?
- 标题层級是不是连續的,有没有從 H2 直接掉到 H4 的情况?
- 把這份清單單獨讀一遍,能不能還原出文章大纲?如果讀起来前後不搭,多半是层級标错了。
- 抽查不同模板:首頁、栏目頁、詳情頁、专题頁各挑两三個,看問题是不是集中在某一個模板里。
- 看看有没有标题是為样式而生的:去掉样式之後,它還算不算一個章节标题。
這套检查不需要任何插件,一個頁面十几分钟就能過一遍。真正費時間的是改模板,尤其是标题层級由多個组件拼出来的站点。
修改时容易踩的坑
先改结构,再調样式
調整层級的时候,尽量不要同时動样式。先把标簽改對,再去补相應的 CSS,出問题时容易定位。改完抽查几個頁面的渲染效果,特別是标题字數特別長或者特別短的頁面,看會不會挤出容器或者換行难看。
規范要和後台對齐
還有一個容易被忽略的地方:編輯規范和模板要同步。如果編輯手册里寫着「正文小标题用 H2」,而模板的正文区根本不接受 H2,那這條規范就只能停在纸面上。規范、後台編輯器、前端模板三者對齐,层級才不會一次又一次地乱回去。
标题层級是给机器和人都看的结构說明。它不直接决定收錄或排名,但會影响一頁内容被理解得是否清楚。
说到底,标题层級只是站点结构里很小的一环,却经常是最先被弄乱的一环。每隔一段時間抽查几類頁面,把明顯不合理的地方改掉,比一次性大改要稳妥得多。