一个页面只能有一个含实际内容的<h1>标签，它代表页面唯一主干，须服务端直出、与<title>语义一致，且标题层级必须严格嵌套，避免重复、隐藏、动态插入或组件内硬编码导致的语义污染。
一个页面只能有一个 <h1>，且必须有实际内容
浏览器、搜索引擎和屏幕阅读器都把 <h1> 当作页面语义上的“唯一主干”。它不是视觉样式开关，而是结构信号——空的 <h1>、重复的 <h1>、或 JS 动态插入的 <h1>（尤其 SSR/SSG 页面首屏缺失），都会让爬虫和辅助技术误判页面主题。
常见错误包括：
- CMS 模板在轮播图、商品卡片、侧边栏模块里各自硬写一个
<h1> - 用 CSS 的
display: none或visibility: hidden隐藏<h1>，导致语义彻底丢失 - 首页用
<h1>MySite</h1>，内页却漏掉，或靠 JS 在 mount 后才渲染
正确做法是：服务端直出有效文本，如文章页写 <h1>useEffect 依赖数组为空数组时的陷阱</h1>；首页可为 <h1>高性能 React 组件库</h1>。不要塞关键词堆砌，也不要用它当 logo 容器。
<h1> 和 <title> 必须语义一致，但不必字字相同
<title> 决定搜索结果中显示的标题，<h1> 告诉搜索引擎“正文里哪句最核心”。两者冲突（比如 <title> 是 “React Hooks 教程”，<h1> 却是 “欢迎来到我的博客”）会被 Google 标记为“标题结构不一致”，新站冷启动期排名波动明显增大。
实操建议：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<title>控制在 50–60 字符，含主关键词 -
<h1>可稍作口语化延展，比如<title>是 “CSS Grid 布局入门”，<h1>写成 “三步上手 CSS Grid：从网格定义到响应式对齐” - 避免在
<h1>中出现竖线|、破折号—等分隔符堆砌关键词
别用 <h1> 实现视觉效果，也别跳级嵌套 <h2>–<h6>
<h1> 不是“最大字号标签”。如果只是想让某段文字看起来大而醒目，应该用 <div> + CSS；如果它确实是页面唯一主旨，则必须用 <h1> 并确保后续标题严格按逻辑嵌套：有 <h2> 就该有对应内容支撑，<h3> 必须出现在某个 <h2> 之后，不能 <h2> 直接跳到 <h4>。
容易被忽略的点：
- Markdown 渲染器（如 remark）默认把
##编译为<h2>，若源文档是##后直接####，就等于跳级 - Vue/React 中避免用
levelprop 动态生成<h${level}>，除非你严格校验传入值为连续整数且带 fallback - SSR 页面若首屏只有 loading 占位符，
<h1>缺失，爬虫抓到的就是空结构
组件库、弹窗、卡片里不该硬编码 <h1>
复用型 UI 单元（比如 <Card>、<Modal>、<Banner>）如果内部固定写死 <h1>，一旦被多次插入同一页面，必然破坏 H1 唯一性。这不是“样式问题”，是语义污染。
替代方案很明确：
- 统一用
<h2>起始，由父容器决定层级（比如文章页主<h1>下所有章节标题用<h2>） - 需要语义关联但不显式展示标题时，用
aria-labelledby指向已有文本，而非伪造隐藏<h1> - 确实无主标题场景（如纯工具类弹窗），宁可不用
<h1>，也不要补一个无效的
真正影响 SEO 和可访问性的，从来不是“有没有加粗大字”，而是整个标题树是否能被机器准确还原出内容骨架——这点在 2026 年的算法实践中已被反复验证。结构断了，再多的关键词也救不回语义可信度。
