一个页面只能有一个<h1>且必须位于<body>下第一层有意义的内容区块中，需自然嵌入核心关键词、线性递进标题层级、避免JS延迟渲染，确保SEO与无障碍访问。
一个页面只能有一个 <h1>，且必须出现在 <body> 内
搜索引擎和屏幕阅读器依赖 <h1> 判断页面主题，重复或缺失都会削弱语义信号。常见错误是 CMS 模板在 <header> 里塞一个 <h1>（比如网站 Logo），又在正文开头再加一个——这等于告诉搜索引擎：“这个页面有两个最重要的主题”。
实操建议：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 检查源码，确认
<h1>出现在<body>下第一层有意义的内容区块中，避开<nav>、<aside>、<footer> - 若使用 WordPress，主题可能已将文章标题自动渲染为
<h1>，此时编辑器里再手动插一个就重复了；用浏览器开发者工具的“元素”面板搜索<h1>即可验证 - 静态页直接写：
<h1>有机蔬菜种植指南：从选种到丰收</h1>，不要套<div>或<span>包裹
<h1> 不能当样式工具用，关键词要自然嵌入
有人把 <h1> 当成“最大最粗的字”，硬塞一堆关键词如 <h1>有机蔬菜 种植技术 蔬菜种植教程 养殖方法</h1>，这既破坏可读性，也触发搜索引擎的关键词堆砌判定。
实操建议：
-
<h1>文本应是一句完整、自然的主标题，长度控制在 20–35 字以内（移动端尤其重要） - 核心关键词放在开头更有效，例如
<h1>前端性能优化：Lighthouse 实战调优指南</h1>，比<h1>Lighthouse 实战调优指南｜前端性能优化</h1>更利于抓取 - 样式调整全部交给 CSS，比如改颜色、间距、响应式缩放，不要靠
<h1>默认大小“凑效果”
层级断裂比没写 <h1> 更危险
有些页面跳着用标题，比如正文直接上 <h3>，或者 <h1> 后面紧跟 <h4>，这会让辅助技术和 SEO 爬虫认为结构混乱，甚至忽略后续所有标题语义。
实操建议：
- 标题必须线性递进：
<h1>→<h2>→<h3>，中间不跳级；允许降级（<h2>后接<h3>），但禁止越级（<h1>后直接<h3>） - 如果某区块确实不需要
<h2>，宁可用<div>+ CSS 控制视觉，也不要为了“补层级”硬加一个空<h2> - 用 Lighthouse 或 axe 浏览器插件跑一次“Heading levels”审计，它会明确标出断裂点
动态页面里 <h1> 容易被 JavaScript 覆盖或延迟渲染
单页应用（SPA）或 SSR 渲染不全时，<h1> 可能初始为空、被 JS 替换两次、或等数据加载完才插入 DOM——这对首屏 SEO 和首屏可访问性都是硬伤。
实操建议：
- 服务端渲染（SSR）或静态生成（SSG）时，确保
<h1>是 HTML 原生输出，而非 JS 插入 - 若必须用 JS 动态设置，至少保证初始 HTML 中有占位
<h1>加载中...</h1>，避免空白或缺失 - 检查
document.querySelector('h1')在页面 load 后是否立即可读，而不是等useEffect或mounted钩子触发后才出现
<h1> 标签，而是让整个内容结构从策划阶段就按语义流设计——标题层级一旦错位，后面所有 <h2> 到 <h6> 都得跟着偏移。 
