广州网站开发H标签怎么用？标题层级与结构优化

很多企业官网的正文里，标题只是「字号大一点的加粗行」，用哪个标签全凭设计师在编辑器里选了哪个样式。结果一页里出现五个 H1，或者从 H2 直接跳到 H4。网站开发H标签 这层结构，客户看不见，但搜索引擎靠它判断页面重点，读屏软件靠它读出大纲，改版时靠它保持样式统一。

图：目录页的层级结构，与 H 标签的组织逻辑一致

一、H标签层级 到底是什么

H 是标题标签的缩写，分六级，表达的不是字号大小，而是层级关系。

网站开发H标签 一共六级，实际用到的通常只有前面三级。

1、它管的是结构不是样式

字号、颜色、字重由样式表控制，H 标签只负责说明「这一行是哪一个层级的标题」。看到一个标题字号不够大就去换成更高层级的标签，是典型误用——正确做法是调整样式，而不是改标签。

2、H1 是页面的那句话

H1 应该能用一句话概括这页讲什么，和页面标题相呼应但不完全一样。栏目页的 H1 写栏目主题，详情页的 H1 写具体内容主题。整站的标题层级规划，在广州企业官网设计要点里属于信息架构的一部分，开工时就该定好。

3、读屏软件也依赖它

视障用户用读屏软件浏览页面时，可以调出标题列表快速跳转。层级乱了，这个列表就毫无价值。这不是加分项，而是无障碍访问的基本要求。

二、网站开发H标签的层级规则

三条规则守住，结构就不会乱。

1、一个页面只放一个 H1

H1唯一性 是最容易被破坏的一条。常见原因是页头的企业名称或 Logo 也被包成了 H1，导致每个页面都有两个。Logo 是图片，不该用标题标签包裹；页面唯一的 H1 留给正文主题。

2、层级不能跳

H2 下面直接出现 H4，等于中间缺了一层，大纲就断了。正确的顺序是从上到下依次递进：H2 → H3 → H4，需要回到上一级就重新用 H2。跳级不一定是错，但连续跳级会让结构读不通。

3、不要为了视觉效果换标签

想让某行字更大就用 H2，想让另一行更小就用 H5，这种做法把结构彻底打乱。视觉大小交给样式类，标签只反映内容层级。

4、装饰性文字不用标题标签

「—— 关于我们 ——」这类分隔语、口号、按钮文案，都不是标题，不该用 H 标签。用了会让大纲里出现一堆没有信息量的条目。

三、最常见的几种错误用法

1、模板站最容易出问题

模板自带的样式常常把所有加粗行都设成某个 H 标签，填内容的人只管排版好看，层级就乱了。定制开发时把标题层级写进模板规范，内容填进去自动就是对的。模板与定制在扩展性上的差别，在广州模板站和定制站区别里讲过，标题结构属于其中一项。

2、富文本编辑器要限制选项

后台编辑器如果把 H1 到 H6 全开放给编辑人员，层级迟早会乱。只开放 H2 和 H3，H1 由模板固定输出，是更稳妥的配置。

3、改版时要重查一遍

改版换了模板、换了编辑器，原来的层级可能全部失效。改完抽查几个典型页面，看大纲是否还通顺。内链与结构的关系在广州企业网站内链优化里另有说明，两处一起查效率更高。

四、怎么检查和验收

1、看大纲不看源码

用浏览器插件或在线工具生成页面大纲，一眼就能看出层级是否通顺。大纲读起来像一份目录，就说明结构是对的；读起来杂乱，就是标签用错了。

2、按页面类型抽查

首页、栏目页、详情页各抽查两三个，不用全站逐页过。问题通常出在模板层面，一个页面有问题，同类页面多半都有。

3、写进验收清单

标题层级、H1 唯一性、Logo 是否被包成 H1，这三项要写进上线验收清单，和链接检查一起做。基础的 SEO 检查项在广州企业网站SEO优化怎么做里有完整列表，可以合并执行。

延伸问答：标题标签用法 的常见疑问

1、H1 能不能和页面标题完全一样

可以相近，不必完全一致。页面标题受字数限制要精简，H1 可以更完整一些。两者表达同一主题即可，不必逐字相同。

2、一个页面至少要几个 H2

没有硬性规定。内容分了几个大节就用几个 H2，通常三到八个比较合适。只有一个 H2 的短页面，说明内容可能不需要分节。

3、H4 以下要不要用

多数企业官网用不到。层级到 H3 已经足够表达结构，更深层级说明内容组织本身需要重新拆分。

总结：结构是给机器和辅助设备看的

网站开发H标签 这一层做得规范，受益的是搜索引擎理解、读屏软件朗读、以及后续改版的效率，客户看不见但一直在使用。H1 唯一、层级不跳、样式与标签分离，这三条做到就够了。优诺网络在做官网定制时把标题层级写进模板规范，后台编辑器也做限制，避免内容填进去之后结构走样。