一个页面只能有一个且h1–h6须线性嵌套;多h1导致搜索引擎降权或忽略后续标题,跳级(如h2后直连h4)则断裂文档大纲、破坏可访问性与seo。

一个页面只能有一个 <h1></h1>,且 <h1></h1> 到 <h6></h6> 必须线性嵌套——跳级或重复都会让搜索引擎和屏幕阅读器“听不懂”你在讲什么,不是排名掉一点,而是结构信号直接失效。
为什么多个 <h1></h1> 会让 Google “放弃理解”整页
Google 不会报错,但会把第二个 <h1></h1> 当作噪声处理:可能降权、忽略后续所有标题层级,甚至整页归入低信任度索引池。常见翻车点包括 CMS 模板里固定输出 <h1>{{site_name}}</h1>,文章页又加一个 <h1>{{post_title}}</h1>;或者 Vue/React 中用 v-if 动态切 <h1></h1> 和 <h2></h2>,导致 SSR 后源码中出现两个 <h1></h1>。
实操建议:
- 检查页面原始 HTML 源码(不是 DevTools 渲染后 DOM),确认
<h1></h1>存在且仅出现一次 -
<h1></h1>文本必须与<title></title>语义一致——比如<title></title>是“React 性能优化”,<h1></h1>就不能是“前端面试题汇总” - 仪表盘类首页含多个独立区块时,用
<section></section>包裹 +<h2></h2>划分,别硬塞多个<h1></h1>
<h2></h2> 后直接写 <h4></h4> 为什么比多 <h1></h1> 更难发现却更伤 SEO
跳级不会触发控制台警告,但会断裂文档大纲(document outline)。Chrome DevTools 的 Accessibility 面板会标为「Heading order」问题,Lighthouse 直接扣分;NVDA 屏幕阅读器在标题导航模式下会跳过缺失层级,用户卡在 <h2></h2> 就进不去下面内容。
原因常被误判为“视觉没问题”:设计师稿里三级标题字号比二级还小,前端顺手用了 <h3></h3>;或响应式中用 CSS 隐藏了 <h2></h2>,但 DOM 仍存在,造成逻辑断层。
正确做法:
- 严格按语义递进:
<h1></h1>→<h2></h2>→<h3></h3>;中间层级可省略,但不能跳(<h1></h1>→<h3></h3>不行,<h1></h1>→<h2></h2>→<h4></h4>在语义成立时可接受) - Markdown 渲染器(如 remark)默认把
##转成<h2></h2>,若原始文档从###开始,需手动补全或配置插件修正 - 服务端渲染中,
<h2></h2>出现在<h1></h1>之前属于严重结构错误,必须修复
动态组件中传 level 参数的坑与安全写法
Vue/React 里写 <header title="安装指南"></header> 并硬编码为 <h1></h1>,是高频翻车点——同一组件可能出现在首页(需 <h1></h1>)、文章内(需 <h2></h2>)、弹窗(需 <h3></h3>)。
错误写法:
- 用
v-if或三元表达式切换标签:condition ? <h1> : <h2></h2> </h1>—— 导致 DOM 结构浮动,SSR/SSG 场景下 Lighthouse 无法静态分析 - 客户端 JS 计算
level值 —— 爬虫看到的是空<h1></h1>或无标题状态
安全写法:
- 组件接收
levelprop,值限定为 1–6 整数,并 fallback:const Tag = `h${Math.min(Math.max(level, 1), 6)}` - SSR/SSG 场景下,
level必须在服务端确定,不能依赖 useEffect 或 useState - 即使所有标题视觉样式一致(比如都设 18px),也必须保留正确语义标签,禁止用
<div class="h2"> 冒充 <h3> <code><h1></h1>权重真比<h2></h2>高很多?关键在协同而非单点没有固定倍数权重,但信号强度差异真实存在:
<h1></h1>是主题锚点,<h2></h2>是子模块框架,<h3></h3>–<h6></h6>主要支撑结构。真正起作用的是整套标题链是否自洽。容易被忽略的细节:
-
<h1></h1>过长(>80 字符)可能在移动端被截断,影响用户第一眼理解,间接推高跳出率 - 关键词堆砌(如
<h1></h1>写“WordPress 主题开发 WordPress 教程 WordPress 插件”)会触发质量算法惩罚 -
<h1></h1>写“React 性能优化”,<h2></h2>却是“Python 爬虫实战”,主题割裂会让 Google 降低页面相关性得分 - 改完
<h1></h1>后排名没变化?因为它是必要不充分条件——真正起作用的是整套标题体系与正文前 100 字、内链锚文本、URL、<title></title>的协同
最复杂的点不在“怎么写”,而在于每次写标题前,先问一句:这个文字是否承担了不可替代的信息角色?如果删掉它,用户或 AI 是否会丢失对当前区块的定位依据?
-











