一个页面必须且只能有一个，因其是搜索引擎和屏幕阅读器识别页面主题的核心锚点；多个、缺失或位置错误会导致解析降权、无障碍中断及结构信号失真。
一个页面必须且只能有一个 <h1></h1>，不是浏览器限制，而是搜索引擎和屏幕阅读器赖以理解页面主题的锚点。多一个、少一个、放错位置，都会让结构信号失真——这不是“可能影响”，而是实际触发解析降权或无障碍中断。
为什么多个 <h1></h1> 会出问题
搜索引擎把 <h1></h1> 当作论文标题来处理：它不关心你写了几个，只信任第一个，并可能忽略后续所有语义结构。CMS 模板里常见的 header 区域硬编码一个 <h1></h1>（比如站点名），内容区又输出一个（比如文章标题），结果就是两个竞争主干，爬虫无法判断哪段是正文起点。
- 真实错误现象：
<h1>MySite</h1>+<h1>如何调试 React Suspense 边界</h1>同时存在 - Vue/React 中用
v-if或三元表达式动态切<h1></h1>/<h2></h2>，导致 SSR 和 CSR 渲染层级不一致 - 用 CSS 把
<h1></h1>设为display: none或visibility: hidden，被识别为隐藏文本，有风险 - 部分旧版抓取器遇到第二个
<h1></h1>就直接终止 DOM 结构分析
<h1></h1> 和 <title></title> 不一致的后果
两者语义冲突时，Google 优先采信 <title></title>，但会标记该页面“结构混乱”，拖累可信度评分。这不是排名暴跌，而是长期削弱内容相关性得分的隐性损耗。
- 典型 mismatch：
<title>CSS Grid 布局实战 | 前端工程师指南</title>对应<h1>欢迎来到我的技术博客！</h1> - 检查方法：在浏览器控制台运行
document.querySelector('h1')?.textContent和document.title，手动比对语义是否聚焦同一主题 - Lighthouse SEO audit 会明确报出 “
<h1></h1>count” 和 “<h1></h1>matches<title></title>” 两项失败
跳级使用 <h1></h1> → <h3></h3> 为什么危险
HTML 解析器不会报错，但会尝试“修复”断裂结构，结果不可控：有的把 <h3></h3> 当作 <h2></h2> 处理，有的直接跳过该区块的层级逻辑。屏幕阅读器依赖严格递进实现章节跳转，跳级等于切断导航路径。
- 允许的写法：
<h1></h1>→<h2></h2>→<h4></h4>（中间<h3></h3>未在当前页面展示，但逻辑上存在） - 禁止的写法：
<h1></h1>→<h3></h3>（无任何<h2></h2>承接） - Vue/React 组件中避免用条件渲染动态切换标签名，例如
{isSub ? <h2> : <h3>}</h3> </h2>，应统一由父组件控制层级 - SEO 工具（如 Screaming Frog）会将跳级识别为 “outline error”，影响文档大纲完整性评分
最难的不是记住“只能一个 <h1></h1>”，而是确保它出现在用户真正开始阅读内容的位置——而不是藏在 header 的 logo 里、悬浮菜单下，或被 JavaScript 延迟注入。结构信号必须可被静态解析，且与用户第一眼看到的信息一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
