页面技术上允许多个<h1>，但实际项目中绝不应使用——搜索引擎、Lighthouse和屏幕阅读器均视其为错误，因其导致语义污染、损害E-E-A-T评分与移动优先索引。
一个页面在技术上可以有多个 <h1>，但实际项目中**绝不应该这么做**——搜索引擎、Lighthouse、屏幕阅读器都会把它当错误处理。
为什么浏览器不报错，但你必须当错误对待
HTML5 规范确实允许在 <section> 或 <article> 内部各自用 <h1>，但这前提是每个容器是语义独立、可单独分发的内容单元（比如一篇嵌入的博客文章、一个用户评论区）。真实页面里 95% 的多 <h1> 场景根本不符合这个前提：
- CMS 模板在
<header>里硬塞一个<h1>做 logo，正文又来一个 - Vue/React 组件里把
<h1>写死在<Card>或<Banner>内部，导致循环渲染时重复输出 - SPA 首屏 SSR 输出无
<h1>，靠useEffect动态插入，结果 CSR 渲染后 DOM 里出现两个
这些不是“兼容性问题”，而是语义污染：爬虫看到两个 <h1>，不会猜哪个更重要，而是直接标记为“结构混乱”，影响 E-E-A-T 评分和移动优先索引。
怎么快速确认你的页面有没有非法多 h1
别只看渲染后的 DOM，要查服务端直出的 HTML 源码（右键 → “查看网页源代码”），然后执行：
立即学习“前端免费学习笔记（深入）”；
-
Ctrl+F搜索<h1>，确认只出现一次且闭合完整 - 在控制台运行
document.querySelectorAll('h1').length，返回值必须是1 - 检查该
<h1>是否落在<main>内部，且是其第一个有意义子节点（不是空<div>或占位符） - 比对
document.title和document.querySelector('h1')?.textContent，主题词必须覆盖同一领域（例如都围绕 “React useActionState”）
logo 和组件里误用 h1 的典型补救方式
很多人说“我用 CSS 把 <h1> 隐藏掉就行”，这是错的：display: none 或 visibility: hidden 不等于删除语义，仍会被解析为无效标题。正确做法是：
- 把 logo 改成
<div class="logo"><img src="logo.svg" alt="上海前端开发工作室"></div>，用alt保证可访问性 - UI 组件（如
<Card>）内部禁止硬编码<h1>，改用<h2>或传入levelprop 并严格 fallback 到<h2> - Next.js 用户必须用
generateMetadata同步服务端<title>和<h1>；Nuxt 用户用useSeoMeta并验证 SSR 输出 HTML 中<h1>真实存在
最易被忽略的一点：Markdown 渲染器（如 remark）默认把 ## 编译为 <h2>，如果源文档是 ## 后直接 ####，就等于跳级生成了 <h2> → <h4>，这同样会破坏大纲，且比多 <h1> 更隐蔽。
