一个页面必须且仅用一个h1，它是Google移动优先索引识别核心主题的硬性规则；需位于main内、首屏SSR输出、与title语义一致但表达不同，禁用display:none隐藏。

一个页面只用一个 h1，不是“建议”，而是 Google 移动优先索引识别核心主题的硬性规则。它不靠数量堆权重，而是靠结构清晰度建立可信度——就像一本书只有一个书名，多印几个反而让人怀疑哪本才是真的。

确保 h1 出现在 main 里且位置靠前

是搜索引擎锁定正文的唯一锚点。如果

在

里（比如套在 logo 上），或藏在 JS 渲染后的某个 div 里，爬虫很可能忽略它，甚至把页脚备案号当主标题解析。

• 检查 DOM：用 document.querySelector('main')?.innerHTML?.includes('<h1>')</h1> 确认

  真实存在于

  内部

• SSR/SSG 场景下，必须在首屏 HTML 中输出

  …

  ，不能等 JS 加载完再插入
• Next.js 用户需通过 generateMetadata 同步生成

让 h1 和 title 语义一致但表达不同

可在此基础上口语化延展，如 “一文吃透 useEffect：从依赖数组到清理函数”

避免堆砌式写法：<h1>React useEffect 教程 | React Hooks 教程 | 前端开发教程</h1>

避开常见隐藏陷阱

有些团队为了视觉简化，用 display: none 或 visibility: hidden 把

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

隐藏起来，这会让屏幕阅读器完全跳过，Google 也会视其为无效结构信号。

立即学习“前端免费学习笔记（深入）”；

• 正确做法是用 clip-path 或文本缩进实现“视觉隐藏但语义保留”
• 若页面确实不需要视觉呈现主标题（如某些仪表盘首页），宁可省略

  ，也不要伪造一个隐藏的

• CMS 模板中常默认在
  插入

  ，务必关闭该选项，或在服务端逻辑中过滤掉

快速验证是否合规

上线前花 10 秒就能确认：

• 打开控制台，运行 document.querySelectorAll('h1').length —— 返回值必须是 1
• 进一步定位：运行 [...document.querySelectorAll('h1')].map(el => el.outerHTML) 查看具体位置
• Lighthouse 的 SEO audit 会明确标出

  数量与