一个页面必须且只能有一个标签，它是语义上唯一的核心主题声明，用于搜索引擎理解主旨和屏幕阅读器定位主内容，重复或缺失会导致Lighthouse报错、SEO权重分散及无障碍访问障碍。

H1 标签必须且只能出现一次，它不是“看起来最醒目的标题”，而是页面语义上唯一的核心主题声明。

为什么一个页面只能有一个

搜索引擎靠

判断页面主旨，屏幕阅读器用户靠它快速定位主内容。重复或跳过

会直接导致：Lighthouse 报 “Missing main landmark or multiple

”、SEO 权重分散、盲人用户无法确认当前页是否匹配预期。CMS 模板里常因 header 区域硬编码了

，又在正文再塞一个，结果两个都生效——这是最常见的误用源头。

怎么确认你的

放对了位置

打开开发者工具（F12），在 Elements 面板按 Ctrl+F 搜索

，检查以下几点：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 全文只匹配到一对
  和 ，不在
  、
  或组件循环渲染块内

• 出现在
  内部，且是其第一个有意义的子元素（不是空 div 或占位符）
• 内容不是 “首页”“欢迎光临” 这类泛化词，而是与当前 URL 强相关的具体主题，比如

  订单确认：#ORD-78291

  或

  React 19 中 useActionState 的使用限制

常见错误场景和修复方式

不同技术栈下

容易出问题的位置不一样：

• WordPress 主题：检查 single.php 或 index.php 是否在
  里写了
  ，应删掉，改用
  放在主内容区
• Vue/React SPA：不要在根容器（如
  ）上加

  ；应在每个路由组件内部、

  下方动态渲染

  ，并确保路由切换时旧

  被卸载
• 静态 HTML 页面：避免把 logo 图片包裹在
  里（除非它确实是页面主题），更别用 display: none 隐藏后又用 CSS 伪元素“视觉呈现”——这会让辅助技术完全忽略它

真正难的不是写

这行代码，而是判断「此刻这个 URL 所代表的页面，它的不可替代的核心命题到底是什么」——这个判断一旦错，后面所有 SEO 和可访问性优化都在补漏。