一个页面应有且仅有一个语义正确的<h1>，代表当前页核心主题：首页用站点定位，文章页用文章标题，产品页用具体产品名；<h1>不可用于样式控制，须通过CSS调整外观；HTML5允许多个<h1>仅限于独立语义区块（如<article>）内；动态框架中需避免SSR/CSR导致的缺失或重复。
一个页面只能有一个 <h1>，且必须代表页面核心主题
搜索引擎和屏幕阅读器都依赖 <h1> 判断“这页到底讲什么”。如果首页放了 <h1>“公司简介”，文章页却用 <h1>“联系我们”，机器会困惑主内容到底是哪个。真实场景中，CMS 模板常在 header 区硬编码一个 <h1> 网站名，再在正文又塞一个文章标题，结果页面出现两个 <h1> ——这是最常见也最伤 SEO 的错误。
- 首页：用
<h1>表达站点定位，比如<h1>上海前端开发工作室</h1> - 文章页：
<h1>必须是当前文章标题，比如<h1>React 19 中 useActionState 的实际陷阱</h1> - 产品页：不是“产品列表”，而是具体产品名，比如
<h1>MacBook Pro 16 英寸（M4 Pro）</h1>
<h1> 不是样式工具，别用它控制字号或居中
有人看到默认 <h1> 太大，就加 style="font-size:18px;" 压缩；或者为了居中写 align="center"。这等于把语义标签当 div 用。一旦改版或接入无障碍工具，视觉正常但逻辑断裂——屏幕阅读器仍会高亮播报“一级标题”，而用户听到的却是被压缩成小字的普通文本。
- 所有视觉调整交给 CSS：
h1 { font-size: 2rem; text-align: center; margin: 0.5em 0; } - 禁止在
<h1>标签里写class以外的呈现属性（如align、color、size） - 如果 CMS 输出不可控，宁可用 JS 动态移除多余
<h1>，也不要妥协语义
HTML5 允许多个 <h1>？前提是语义区块隔离
HTML5 规范确实允许在 <article> 或 <section> 内部各自用 <h1>，但这不等于可以随意堆砌。真实项目里，95% 的误用都源于没搞清“独立语义上下文”这个前提。
- 正确场景：博客首页列出 5 篇文章，每篇用
<article><h1>标题</h1>...</article>—— 每个<article>是自包含内容单元 - 错误场景：在同一个
<main>里并列写两个<h1>，中间没有任何语义容器包裹 - 检查方法：用浏览器开发者工具右键审查元素，看
<h1>是否严格落在<article>/<section>内部，且父容器有明确 role 或 aria-label
动态页面中 <h1> 容易被 SSR/CSR 搞丢或重复
Next.js、Nuxt 或 Vue SPA 在首屏渲染时，常因数据加载时机问题导致 <h1> 缺失；服务端渲染时又可能把 layout 固定的 <h1> 和页面组件里的 <h1> 一起吐出来。这类问题不会报错，但 Google Search Console 会标记 “Missing H1” 或 “Multiple H1s”。
- Next.js App Router：确保只在
page.tsx中定义<h1>，layout.tsx 里彻底删掉任何<h1> - Vue/Nuxt：用
<ClientOnly>包裹动态标题，避免服务端预渲染出空<h1> - 上线前必做：用 Lighthouse 扫描，重点关注 “Document does not have a main landmark” 和 “Heading elements are not in a sequentially-descending order” 这两条
<h1>，而是让整个团队在模板、CMS、前端框架、SEO 配置之间达成一致——只要有一环松动，<h1> 就会悄悄失效。 
