H1 标签到底怎么用才正确？一个被低估的 SEO 因素

我刚开始做网站的时候，被 H1 标签怎么用这个问题困扰了很久。

去网上搜，说法五花八门：”首页 H1 要放网站名”、”文章页 H1 要放文章标题”、”一个页面只能有一个 H1”、”HTML5 可以有多个 H1”……

更让我迷惑的是——同一套说法，换个网站看，结论居然相反。

后来我才搞明白：很多人对 H1 的理解还停留在 20 年前的 HTML4 时代。HTML5 把规则改了，但大部分教程没跟着改。

一句话理解： H1 是页面内容的”标题”，告诉搜索引擎和用户”这一页在说什么”——每个页面应该有且只有一个 H1。

先纠正几个常见的错误认知

错误 1：首页不应该用 H1

这个说法非常普遍——“首页 H1 留给文章内容页用”、”首页用 logo 代替 H1 就行”。

但你知道吗？百度、Google 的首页都有 H1。 它们用 <h1> 包裹了”百度一下”和”Google”这个品牌标识。当然，它们不会傻到只写个 logo，而是把 h1 和 a 标签结合，既有品牌含义又对搜索引擎友好。

<!-- 一个合理的首页 H1 结构 -->
<header>
  <a href="/">
    <h1>飞鲤的自留地</h1>
  </a>
</header>

把 H1 用在品牌名称上，而不是浪费掉——这才是正确的做法。

错误 2：文章页 H1 给网站名，不要给文章标题

这个建议的来源是”要保持 H1 在全站的一致性”——但这个逻辑是错的。

文章页的核心内容是这个文章，不是网站名称。 搜索引擎期望的 H1 是告诉它”这个页面的主题是什么”。对于文章页来说，主题就是文章标题。

<article>
  <header>
    <h1>H1 标签到底怎么用才正确？</h1>
    <!-- 网站名称用其他标签，或者通过结构化数据表达 -->
    <p class="site-name">来自：飞鲤的自留地</p>
  </header>
  <p>正文内容...</p>
</article>

错误 3：一个页面可以有多个 H1（HTML5）

这个说法不完全对。HTML5 确实放宽了限制——允许在 section、article 等分节元素中使用自己的 h1-h6，但浏览器的实际实现和屏幕阅读器的支持并没有跟上这个规范。

WGAC（无障碍指南）和实际测试都表明：一个页面最好只有一个 H1。

经验之谈： 我见过一个页面写了三个 H1，结果屏幕阅读器的用户读完第一个 H1 就以为页面内容结束了——因为 NVDA 和 VoiceOver 都把 H1 当作”页面内容的起始标记”。多 H1 反而让阅读体验变差。

2026 年 H 标签使用规范

标签	每页次数	用法	备注
H1	仅 1 次	页面主要标题/品牌名	最重要的标题
H2	不限	主要章节标题	文章的各个部分
H3	不限	H2 下的子章节	三级标题
H4-H6	不限	深层细分	很少用到 H6

正确示例

<!-- 首页 -->
<header>
  <h1>飞鲤的自留地</h1>
  <p>一个前端开发者的技术博客</p>
</header>

<main>
  <section>
    <h2>最新文章</h2>
    <!-- 文章列表... -->
  </section>
  <section>
    <h2>热门标签</h2>
    <!-- 标签列表... -->
  </section>
</main>

<!-- 文章页 -->
<article>
  <header>
    <h1>H1 标签到底怎么用才正确？</h1>
    <p>发布日期：2026-07-24</p>
  </header>
  
  <section>
    <h2>常见的错误认知</h2>
    <p>...</p>
    
    <h3>错误 1：首页不应该用 H1</h3>
    <p>...</p>
  </section>
  
  <section>
    <h2>H 标签的正确使用规范</h2>
    <p>...</p>
  </section>
</article>