二级页面h1必须是当前页面唯一核心内容标题，而非站点名称；否则会稀释主题、损害SEO与无障碍访问，正确做法是动态生成真实标题并确保全页仅一个h1。
二级页面不该用站点名称塞满 h1，否则会稀释页面主题、干扰 SEO 和屏幕阅读器导航。
为什么二级页面写 h1 站点名称是错的
搜索引擎和辅助技术靠 h1 定位页面唯一核心主题。首页用 <h1>MySite</h1> 合理，但产品页、文章页再这么写，等于告诉机器：“这个商品详情页的主题还是‘MySite’”——完全掩盖了真实内容。实际中常见后果包括：
-
document.querySelector('h1')拿到的是模板里的站点名，业务标题被迫降为h2，Lighthouse 直接报 “Page has no main landmark” - VoiceOver 用户进入页面后听到“MySite”，得手动往下扫三屏才找到真正的标题“Vue 3 响应式原理详解”
- Google 的搜索结果摘要常截断为站点名+无关副文本，点击率下降
二级页面 h1 的正确来源
它必须是当前页面独一无二的内容主干，不是复用、不是拼接、不能靠 CSS 隐藏后另起一个。实操要点：
- SSR/静态生成场景：确保服务端吐出的 HTML 中，
h1是由路由参数或数据层决定的真实标题，例如<h1>React Server Components 入门指南</h1> - SPA 路由切换：用
document.title同步更新的同时，替换 DOM 中的h1内容（别只改<title>） - CMS 或模板系统：禁用“全局页头自动注入
h1”功能；若无法关闭，用 CSS 把模板h1display: none，再在主体区域插入真实的h1（注意：仅限不得已，且要确保无障碍属性如aria-live配合）
组件化开发时如何避免 h1 冲突
React/Vue 组件里硬写 <h1>{{ title }}</h1> 是高危操作——父组件嵌套时极易产出多个 h1。正确做法是把层级交给调用方控制：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- Header 组件接收
levelprop：<Header level="1">用户协议</Header>，内部动态渲染h${level} - Layout 组件统一管理：只在
<main>区域内允许h1，其余子组件默认从h2开始 - 检查工具链集成：用 axe-cli 或 Puppeteer 脚本在 CI 中跑
document.querySelectorAll('h1').length !== 1断言
真要保留站点名，就别用 h1
品牌露出有更语义、更安全的方式：
- 用
<header><h2>MySite</h2></header>—— 视觉可加大加粗，语义上只是页眉二级标题 - 用
<p class="site-name">MySite</p>+ CSS 样式，配合aria-label或role="banner"明确作用域 - 放在
<title>和<meta name="application-name">里，既满足品牌曝光，又不污染正文结构
真正难的不是写出一个 h1，而是在组件封装、CMS 集成、多语言切换时，让每个页面的 h1 始终指向那个不可替代的、此刻正在被用户阅读的核心命题——它不会因为模板方便而妥协，也不会因为视觉一致而让渡语义主权。
