HTML中h1站点名称 HTML中h1标签在二级页面的降级策略-html教程-PHP中文网

二级页面h1必须是当前页面唯一核心内容标题，而非站点名称；否则会稀释主题、损害seo与无障碍访问，正确做法是动态生成真实标题并确保全页仅一个h1。

html中h1站点名称 html中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 隐藏后另起一个。实操要点：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

SSR/静态生成场景：确保服务端吐出的 HTML 中，h1 是由路由参数或数据层决定的真实标题，例如 <h1>React Server Components 入门指南</h1>
SPA 路由切换：用 document.title 同步更新的同时，替换 DOM 中的 h1 内容（别只改 <title></title>）
CMS 或模板系统：禁用“全局页头自动注入 h1”功能；若无法关闭，用 CSS 把模板 h1 display: none，再在主体区域插入真实的 h1（注意：仅限不得已，且要确保无障碍属性如 aria-live 配合）

组件化开发时如何避免 `h1` 冲突

React/Vue 组件里硬写 <h1>{{ title }}</h1> 是高危操作——父组件嵌套时极易产出多个 h1。正确做法是把层级交给调用方控制：

Header 组件接收 level prop：<header level="1">用户协议</header>，内部动态渲染 h${level}
Layout 组件统一管理：只在 <main></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></title> 和 <meta name="application-name"> 里，既满足品牌曝光，又不污染正文结构

真正难的不是写出一个 h1，而是在组件封装、CMS 集成、多语言切换时，让每个页面的 h1 始终指向那个不可替代的、此刻正在被用户阅读的核心命题——它不会因为模板方便而妥协，也不会因为视觉一致而让渡语义主权。