一个页面必须且只能有一个<h1>标签，由具体页面组件生成而非布局文件硬编码，需真实、精准、可见，并与<title>语义一致，通过工具验证唯一性和有效性。
一个页面只用一个一级标题（<h1>），不是设计偏好，而是语义结构的基本要求。它直接关系到搜索引擎能否准确定位页面主题、屏幕阅读器能否正确导航，以及内容逻辑是否清晰可读。
明确谁该输出这个<h1>
模板层和内容层必须职责分离：
- 全局布局（Layout）文件里，不要硬编码 <h1> 网站名或通用文案
- 把 <h1> 的生成权交给具体页面组件——首页输出站点定位，文章页输出文章标题，产品页输出具体型号名称
- CMS 或静态站点生成器中，确保模板变量（如
{{ page.title }}）只在主内容区渲染一次，且非空
检查是否真的只有一个
别依赖肉眼判断，用工具验证：
- 浏览器开发者工具中右键审查元素，看 <h1> 是否唯一、是否出现在主内容区域（如 <main> 内）
- 运行命令行快速扫描：
curl -s URL | grep -o '<h1>'，结果应只返回一行 - 用 Lighthouse 或 axe 插件检测，若报 “Multiple h1 elements” 或 “Missing h1”，说明结构已出问题
动态页面要防“消失”或“重复”
SPA 或服务端渲染项目容易在这两处翻车：
立即学习“前端免费学习笔记（深入）”；
- 首屏加载时，<h1> 不能靠 JS 异步插入——服务端必须直出有效文本，否则爬虫看到的是空结构
- 路由切换后，需同步更新 DOM 中的 <h1> 文本，不能只改
document.title - Next.js/Nuxt/Vue SSG 中，避免 Layout 组件和 Page 组件各自渲染一个 <h1>，可用
<header role="banner">替代 Layout 里的标题容器
标题内容要真实、精准、不可隐藏
即使标签存在，也不等于语义有效：
- 禁止用
display: none或visibility: hidden隐藏 <h1>——语义彻底丢失 - 不能留空：
<h1></h1>或仅含空格，会被视为缺失 - 不要塞关键词堆砌，也不要用竖线 |、破折号 —— 分隔多个概念，破坏可读性
- <h1> 和 <title> 必须语义一致：前者是正文最核心句，后者是搜索结果展示名，二者偏离会触发 Google 的“标题结构不一致”警告
