H1标签排第几？43%的电商首页里它不是最大那行

摘要：112个电商独立站首页，把主内容区里每一段可见文字的实际渲染字号量出来排序。屏幕上最大的那10段字，只有47.1%挂着h标签；44.6%的站，全页最大的那行字根本不是标题标签；28.6%的站首页没有h1；有h1的站里22.7%的h1内容就是品牌名本身。而h1、h2、h3三级字号完全同向的，112个站里只有27个。

上一篇量的是首页上那些字有没有进文本层。这一篇往前挪一格：字进来了，可它的身份没跟着进来。

页面上有两套层级同时在跑。一套是人看到的：字号、字重、位置、留白，谁大谁重要，一眼就分得出。另一套是机器读到的：h1到h6，还有它们的先后顺序。两套本该指向同一件事，但它们由不同的人、在不同的环节、用不同的工具定下来——视觉那套在Figma里定，标签那套在组件库里定，中间隔着一次交付。

所以问题很自然：这两套到底对得上吗？对不上的话，差多远？此前量过首页正文是不是空壳，那查的是有没有内容；这次查的是内容有没有骨架。

屏幕上的层级和标签里的层级，本来就是两条线

CSS出现之后，标签和外观就彻底解耦了。一个h1可以只有12px，一个span可以有120px，浏览器完全不介意。这在工程上是好事，它让同一份HTML能适配任何设计。

代价是没人再被迫对齐这两套。以前用font标签排版的年代，写下什么标签就长什么样，做错了当场看得见。现在做错了什么都看不见——页面照样漂亮，Lighthouse的可访问性分数也未必掉，因为自动检测工具查的是“有没有跳级”“是不是空的”，查不了“这个视觉上的标题有没有被标成标题”。

语义化HTML这件事的真实影响一直被两头夸张：一头说改成语义标签排名就涨，一头说标签无所谓反正Google能看懂。这次的实测正好落在中间，也正好能说清楚为什么两头都不对。

这次到底量了什么？

131个电商与消费品牌的独立站首页，用真实浏览器在1440宽的视口打开，等页面稳定后遍历主内容区里的每一个元素，取它自己直接持有的那段文字（不算子元素的，避免父子重复计数），记下四样东西：实际渲染的字号、字重、标签名、在页面里的位置。

然后按字号从大到小排序，看排在最前面那几段用的是什么标签。同时把页面上所有h1到h6单独拿出来，记下它们各自的字号、可见性、有没有文字。

有三个口径要先讲清楚，不然数字没法读：

• 只看主内容区。导航和页脚里的字本来就该小，把它们算进来会稀释结果。判据是元素有没有落在nav、footer或者对应的role里。
• 看的是渲染后的字号，不是CSS里写的值。同一个类在不同断点下字号不同，只有渲染后的计算值才是用户真正看到的。text-transform造成的大小写变化也按屏幕上的样子记。
• 字号相同时按渲染面积排序。同为40px的两段字，占地更大的那段视觉权重更高。

先说13个被弹窗整个盖住的站怎么处理

第一版跑完，结果里混进来一批很奇怪的站：bonprix首页“最大的字”是16px的“Austria · Österreich”，boohoo是18px的“HOW BOOHOO USES COOKIES”，farfetch干脆只有10px。

这些站的首页在打开的瞬间被cookie同意层或者地区选择层整个盖住了，主内容根本没渲染出来，或者被遮罩挡在后面拿不到尺寸。这时候量到的不是页面的层级，是弹窗的层级。

判据定成：主内容区最大字号低于24px的，一律剔出主统计，单独列一类。125个跑通的站里有13个中招，剩下112个进入统计。这13个站本身也是个发现——它们的首屏在爬虫和纯文本提取器眼里，第一眼看到的是同意条款，不是产品。

屏幕上最大的那10段字，有几段挂着h标签？

112个站，每站取字号最大的10段，一共1104段（有些站不足10段）。结果是：

把这10段用的标签摊开看，就知道那另外一半跑哪去了：

span、p、div三个加起来占42.5%，比h2一个还多。也就是说，首页上视觉分量最重的那批字，接近一半是用完全不表达层级的标签装的。

如果把范围收窄到最大的3段，情况好一点但没好多少：336段里有184段是h标签，占54.8%。

页面上最大的那行字，标签是什么？

这个指标更极端一点：每个站只看一段，就是全页字号最大的那行。

112个站里，只有62个站的这一行是标题标签（h2最多，36个；h1只有21个），剩下50个站、44.6%，页面上最显眼的那行字挂的是span、p、div、strong甚至i。

挑几个具体的看：

peakdesign那个i标签值得单说。按HTML标准里对章节与标题的定义，只有h1到h6会划分出章节；i表示的是“语气或语态上有区别的一段文字”，通常渲染成斜体，跟标题没有半点关系。用它来装80px的主打款发布语，纯粹是因为某个组件恰好长成那样。

还有一类更微妙的：materialkitchen的h1是120px的“The MK Free Collection is Here”，写得很正经，但同一屏上有一段125px的span“Smart &”把它压了下去。h1写对了，只是在自己的页面上不是最大的那行。

h1都去哪了？

112个站的h1情况：

• 28.6%的站首页没有h1（32个）。
• 50.9%恰好一个（57个），20.5%有两个或更多（23个）。
• 有5个站的h1里一个字都没有——要么整个空着，要么只包了一个logo图。
• 有9个站的h1被CSS藏起来了，在页面上看不见。

这几个数字有个很好的外部参照。HTTP Archive的Web Almanac 2024年SEO章节统计的是全网上千万页面：70%的页面有h1，比2022年的66%有提升；空的h1在桌面端占6%。这次112个站里71.4%有h1，跟那个70%几乎重合。空h1这一项要注意口径：Web Almanac数的是h1标签实例中的空标签占比，这次数的是站点里有没有空h1，两个数字都落在6%上下，但不是同一个东西，只能当量级参照。总之这个样本在h1上不算特殊，看到的问题是普遍的。

但Web Almanac那份报告没测两件事：h标签的顺序合不合理，以及非标题元素被排成了标题。多个h1到底合不合规、H1和页面标题什么关系这类问题已经讨论了很多年，这次补的正是没人量过的那一块。

再看h1的内容。75个站有非空h1，其中17个（22.7%）的h1内容基本就是品牌名本身：Anker | Live Charged.、Casper Sleep、Everlane、Govee、CLUSE、Decathlon、Welcome to IKEA Global!、DJI大疆创新官网。42.7%的h1文本不超过18个字符。

把品牌名当h1不算错，首页确实可以这么写。问题是这个h1通常挂在页头的logo上，字号只有14到16px，而它跟这个页面的title、og:title说的往往又不是同一件事——三份自述互不相认，机器要从中挑一个当页面主题。

h1的字号在自己页面上排第几？

把每个站h1的字号拿去跟同页所有文字块比：

• 中位数是第1名。也就是说，超过一半的站，h1确实是最大的那行字。
• 但43.1%的站h1不是最大那行，18.1%连前十都进不去。
• 最惨的一个站，h1的字号在自己页面上排第57。
• h1字号与全页最大字号的比值，中位数是0.86；有20%的站这个比值不到0.5，也就是h1的字号连最大那行的一半都不到。

这个分布挺说明问题：它不是普遍崩坏，是两极分化。一半站的视觉和标签配合得挺好，另一半站里h1彻底沦为一个挂在logo上的形式字段。

h标签不是不够用，是用在了别处

看到上面那些数字，很容易以为这些站舍不得用h标签。恰恰相反：112个站每站的h标签数量中位数是27.5个，最多的一个站有392个。

一个首页哪来27个章节？拆开看就明白了：它们大量长在导航和页脚里。

中位数看着还行，但分布很偏。有11个站、9.8%，一半以上的h标签长在导航或页脚里。allbirds是最典型的一个：导航和页脚里塞了46个h标签，中位字号20px，全是下拉菜单里的分类名；主内容区反而只有12个。brooklynbedding是导航20个对正文7个。chubbiesshorts导航里那17个h标签，中位字号只有10px。

还有4个站走到了另一个极端：主内容区一个h标签都没有，页面上仅有的几个h全在页头页脚。这4个站的首页在文档结构上是完全平的，机器拿到的是一整块没有任何分节标记的文字。

把导航的分类名做成h3不算错，规范允许，屏幕阅读器也能用来跳转。但它有个副作用：当导航里有46个h3、正文里只有12个的时候，任何按标题切段的程序都会被导航牵着走。它切出来的“章节”大部分是菜单项。Google那种直接跳到页面某一段的深链依赖的正是这套结构，切歪了就跳歪了。

为什么偏偏是首页最容易错？

内页通常规矩得多。文章页、产品页的模板改动少、结构固定，h1挂在文章标题或商品名上，谁也不会去动。出问题的几乎都是首页。

原因在于首页是唯一一个按活动而不是按内容组织的页面。主流独立站建站系统都把首页做成了可拖拽的区块列表：一个横幅区块、一个精选商品区块、一个图文区块、一个评价区块。运营上一个新活动就加一个区块，活动结束就拖走。

区块本身是别人写好的组件，它内部用什么标签由组件作者决定，而组件作者不知道这个区块最后会被放在页面的哪个位置、旁边是什么。于是每个区块内部的层级都是自洽的，拼在一起就没人管了。横幅组件用span做大字，因为它的作者认为横幅是装饰；图文组件用h2做小标题，因为它的作者认为那是内容。两个组件放在同一屏上，视觉上前者比后者大一倍，标签上前者却什么都不是。

这就解释了为什么断层出现在h1和h2之间而不是h2和h3之间：h2和h3往往来自同一个组件，作者自己会保证它们的相对关系；h1却挂在页头模板上，跟内容区块分属两套代码。

要在流程上堵住这个口子，得让设计交付里就带上信息架构而不只是视觉稿，同时让组件层面的语义化在前端这一侧有人负责。指望上线后靠SEO单方面纠正，改一次上一个活动就打回原形。首屏区块怎么排本来就是转化和结构两件事同时在做的决定，这两件事不该分两拨人各做各的。

标签层级和视觉层级同向吗？

最后一个口径，也是最宽松的：只要h1的字号不小于h2、h2不小于h3，就算同向。不要求严格递减，不要求差多少。

h2和h3之间挺规矩，86.3%。断在h1和h2之间：四成多的站，h2的字号比h1还大。原因也不难猜——h1挂在logo上（小），h2用在首屏区块标题上（大），两者根本不在同一个视觉体系里，一个属于页头组件，一个属于内容模块。

三级全同向的只有24.1%，这个数字比单看任何一级都低，因为它要求两处都不出错。

这件事对SEO和AI引用到底有多大影响？

先把话说到位：不要指望改了h标签排名就动。Google在SEO入门指南里关于标题数量与顺序的那一节写得非常直白——标题按语义顺序排对屏幕阅读器很好，但从Google搜索的角度看，顺序乱了它并不在意。这句话经常被引用来证明“h标签无所谓”，但它说的其实只是顺序，不是标签本身。被检索和被引用是两套机制，网页搜索那一套确实对结构没那么敏感，后面这一套敏感得多。

真正受影响的是另外两条线。

第一条是段落级抽取。生成式检索不是整页整页地用，它要把页面切成可引用的小块，再决定引哪一块。切块的依据是文档结构——标题在哪，标题管到哪。段落级被引用的诊断和查询扇出把一个问题拆成十几个的机制都建立在这个前提上。如果首页上七八个板块的标题全是span，机器看到的就是一大团没有分节的文字，切出来的块跟你以为的板块对不上。精选摘要要抢的也是这种块，块划错了，后面每一步都跟着错。切句子这一步本身就已经很容易出错，再没有结构提示会更糟。

第二条是无障碍树。这条现在比以前重要得多，因为AI智能体读页面读的是无障碍树，不是截图。无障碍树里有没有一个叫“标题”的节点，完全取决于标签或者role，跟字号一点关系都没有——W3C关于标题的那份教程把屏幕阅读器如何靠标题跳转讲得很清楚。一个80px的i标签，在无障碍树里就是一段普通文字，屏幕阅读器不会念“标题”，智能体也不会把它当区块入口。

顺带一提，这跟首页大图上那些字压根没进文本层是同一个毛病的两种形态：一个是内容没进去，一个是内容进去了但结构没进去。人这边两次都毫无损失，因为人看的是排版。

怎么改：三条判据就够

不用推翻设计，也不用改视觉。判断只有三步。这三步背后其实只有一条规矩，就是WCAG关于信息与关系的那条成功准则说的：靠视觉呈现出来的结构关系，必须同时用程序能确定的方式表达一遍。

第一步，把首页当成一篇文章念一遍。如果要给这个页面做目录，哪几行会进目录？把它们列出来，通常是五到八条：首屏主张、每个内容板块的名字、精选系列的名字。这份清单就是应该挂h标签的那批字。

第二步，逐条查它现在挂的是什么。浏览器开发者工具里选中那行字，看标签名。是span、div、p、strong、i的，改成对应层级的h2或h3。改标签不改样式——把原来的类原样保留，在CSS里给h2、h3加上font-size: inherit之类的兜底，视觉上一个像素都不会变。

第二步那句“改标签不改样式”值得展开一下，因为它是这件事能不能推动的关键。设计和前端最怕的就是SEO提一个要求、页面跟着走形。实际上只要在改标签的同时把浏览器默认样式压掉，视觉可以做到零变化：

/* 把语义标签的默认外观清干净，视觉完全交给原来的类 */
.hero-title, .section-title {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
}

然后把原来那个span的类名原样搬到h2上就行。改完拿改前改后的截图跑一遍像素级比对，确认差异为零再合并。保哥给一个户外装备品牌做这件事的时候，就是先把像素比对结果贴给设计负责人看，对方当场就松口了——挡在前面的从来不是标签，是“你们又要改我的页面”这句话。

第三步，把h1定下来。首页h1写品牌名可以，写这一季的主张也可以，但要满足两条：它有文字，它不被藏起来。如果h1挂在logo上而首屏另有一句大标语，更稳的做法是把h1移到那句标语上，logo回归成img加alt。

还有一条排查用的野路子：把浏览器的字体全部关掉再看一眼。在开发者工具里禁用页面CSS，剩下的就是纯结构。这时候页面上凡是显示成大号粗体的，就是真正的标题；刚才屏幕上那些醒目的大字如果变成了正文段落，说明它们在机器眼里从来就没当过标题。这个方法比任何工具都直观。页面结构与语义标签的批量体检可以把这件事扩展到全站，再配合GEO技术端抓得到、读得懂、引得出那三步一起看，能定位到底卡在哪一环。

什么情况下不该改

有几种情况，看着像漏，其实是对的。

产品卡片上的商品名和价格，字号可能不小，但它们不是标题，是列表项的内容。给几十张卡片各配一个h3，会让文档结构变成一片扁平的噪声，反而不如让它们老老实实待在链接和段落里。判据是这行字够不够格进目录——商品名进不了首页的目录。

促销数字也一样。首页上那个100px的“UP TO 40% OFF”，视觉权重最高，但它是一个营销标签，不是内容区块的名字。如果它下面确实带着一整块促销内容，那这块内容应该有自己的标题；那个大数字本身不必是h标签。

纯装饰性的大字，比如渐变文字动画、滚动跑马灯里的品牌口号，也不用挂标题。它们没有管辖范围，挂上去只会制造空壳章节。AI可见性审计里那种堆得满、关系没人审的毛病，反过来也一样成立：标签堆得越多不等于结构越清楚。

最后提醒一句常见的过度反应：不要为了“层级好看”硬把h1、h2、h3按字号从大到小重排一遍。层级表达的是从属关系，不是尺寸关系。一个板块的标题即使排得小，只要它管着下面那一片内容，它就该是h2。真正要修的是那些管着一片内容却没被标成标题的字，以及那些什么都不管却被标成标题的字。把内容当结构化数据来生产那套做法之所以有用，就是因为它在生产环节就回答了“这块内容归谁管”这个问题。

常见问题解答

Google不是说h标签顺序不重要吗，那这篇的意义在哪？

Google说的是顺序，比如h2后面直接跟h4，它不介意。这跟“视觉上的标题根本没被标成标题”是两回事。前者是一个结构有小瑕疵的目录，后者是压根没有目录。而且Google的态度只代表网页搜索这一条通道，段落级抽取和无障碍树两条线都吃标签。

首页没有h1，会不会掉排名？

没有直接证据说会。h1不是排名因素清单上的一项。但它是页面主题最明确的一次自我声明，缺了它，机器只能从title、og:title和正文里推测，而这三处的说法经常互相打架。这次112个站里28.6%没有h1，说明这不是什么罕见错误，也说明不写它并没有立刻带来惩罚——但它确实少了一次表态的机会。

为什么用渲染后的字号，而不是CSS里写的值？

因为CSS里的值经常是相对单位，或者被断点覆盖。同一个类在1440宽和375宽下的实际字号可能差一倍。渲染后的计算值才是用户在这个视口里真正看到的东西，也是唯一能跟标签做对照的口径。

把span改成h2，视觉会变吗？

默认会——浏览器给h2带了默认的字号、字重和上下外边距。做法是改标签的同时保留原来的类，并在CSS里显式把这几个属性重置掉。改完对着截图比一遍，确认没有一像素的位移，这一步一定要做。

多个h1到底行不行？

HTML5规范允许，Google也说过能处理。但这次实测里20.5%的站有两个以上h1，其中不少是模板叠加的意外产物——页头一个、首屏一个、某个组件里又一个，彼此没有关系。真正的问题不是数量，是它们说的不是同一件事。

那13个被弹窗盖住的站，是不是也算一种问题？

算，而且是另一种问题。它们的首屏在纯文本视角下第一眼看到的是同意条款而不是产品。这次把它们剔出主统计是为了口径干净，不是说它们没事。判断自己的站有没有这毛病很简单：用无痕窗口打开首页，不做任何点击，直接全选复制，看看粘出来的头几行是什么。

这次的样本能推广到内页吗？

不能直接推。首页是模板最杂、组件最多、最容易出现层级错位的页面，内页尤其是文章页通常规矩得多。这次只测了首页，桌面端1440宽视口，112个电商与消费品牌站。要判断自己站的情况，还是得按上面那三步走一遍。

权威参考资料