首页 / SEO book / SEO 基础与入门 / H1 标签是什么、有哪些最佳实践

什么是 H1 标签?SEO 最佳实践

H1 标签是什么、有哪些最佳实践SEO 基础与入门

H1 标签为什么重要?如何添加?又有哪些最佳实践?本指南逐一解答。

H1 标签是一种 HTML 标题标签,最常用于标记网页标题。多数网站会用 CSS 让 H1 在页面上比 H2、H3 等次要标题更醒目。

H1 标签为什么重要?如何添加?又有哪些最佳实践?

本指南逐一解答以下问题:

H1 标签为什么对 SEO 重要?

原因有三个。

  1. H1 标签帮助搜索引擎理解页面
  2. H1 标签改善用户体验
  3. H1 标签提升可访问性

H1 标签帮助搜索引擎理解页面

Google 的 John Mueller 表示,H1 标签能帮助 Google 理解页面结构。按照 Google 的建议把 H1 用于页面标题或内容标题,H1 实际上就是在告诉 Google:“这个页面讲的是什么。”

H1 标签改善用户体验

H1 标签之所以能改善用户体验,是因为它属于网页层级结构的一部分。H1 是页面上最醒目的标题,其次是 H2,再到 H3,依次类推。

H1 标签与其他标题使用不当,页面会变得更难浏览和消化。

H1 标签提升可访问性

数百万视障人士使用屏幕阅读器把网页文案与图片转换为语音。webAIM 的这项研究显示,60% 的屏幕阅读器用户希望只有页面标题使用 H1 标签。

如何添加 H1 标签?

多数 CMS 都能轻松为页面添加 H1 标签。下面看看几个主流 CMS 中的操作方式。

如何在 WordPress 中添加 H1 标签

多数 WordPress 主题会在代码中把页面或文章标题作为 H1。

如何在 Wix 中添加 H1 标签

多数 Wix 主题在每个页面上都有一个 H1 标签。若不确定是哪段文字,可在主题编辑器中临时修改 H1 标签样式,页面构建器就会清楚地高亮出 H1。

如何在 Squarespace 中添加 H1 标签

多数 Squarespace 主题在每个页面上都有一个 H1 标签。若不确定位置,在醒目的文本框上逐一点击,直到找到带有“标题 1”(Heading 1)样式的文本框即可。

如何在 HTML 中添加 H1 标签

使用起始 H1 标签(<h1>),输入页面标题,然后加上结束 H1 标签(</h1>)。

示例:

<h1>这是 H1</h1>

SEO 中的 H1 标签有哪些示例?

写好 H1 标题并没有一套硬性规则,但有一些格式值得参考。

下面列举三个 H1 标签示例,供撰写下一个标题时参考。

示例 1:关键词丰富的 H1

这个示例针对的关键词是 SERP 波动(SERP Volatility)。把相关主题与关键词放在 H1 前面,能强化内容与该主题的相关性。

示例 2:长尾 H1 标签

富含长尾关键词的 h1 示例

这篇文章的开头在标题里瞄准了一个长尾关键词。该长尾版本还顺带覆盖了许多高搜索量的短尾关键词变体,包括“Google questions”(搜索量 2.2K),和“

示例 3:以祈使句开头的 H1 标题

基于任务的 h1 标签示例

H1 标签和标题标签(title tag)有什么区别?

在深入讲解如何优化 H1 标题之前,先要弄清 H1 的 SEO 与标题标签的 SEO之间的区别:

  • H1 标题位于网页的 <body> 中,而标题标签则放在 <head> 部分。
  • H1 标题显示在页面上,而标题标签则在搜索引擎中可见。
  • 因此,你可以把 H1 标签看作是页面标题,而把标题标签看作是搜索结果页面(SERP)中的标题。
  • 标题标签对点击很重要——H1 标签对上下文很重要。

下面是 H1 标签与标题标签的对比……

H1 标签与标题标签的区别

标题标签通常比 H1 标题对 SEO 更关键,原因如下:

  1. 它们是搜索引擎在页面上最先看到的元素之一——这意味着它们在向 Google 传达内容相关性方面起着很大作用。
  2. 它们是用户在搜索结果页面上看到的第一条信息——这意味着它们能直接影响点击。

H1 和其他页面标题需要具有描述性,并能帮助用户浏览页面。

后文会详细介绍 H1 与标题标签之间的关系,说明何时该保持一致、何时该有所区分。

H1 标签的 SEO 最佳实践

逐一介绍这些最佳实践之前,有重要的一点:违反其中任何一条都极不可能带来 SEO 灾难。因此没有做到某些点也不必惊慌,绝不会招致 Google 惩罚这类后果。

Google 的职责是理解、索引并排列网络内容。如果没有任何机制来处理诸如页面缺少 H1 标签这类不理想的情况,这件事根本无法完成。

话虽如此,在 SEO 中每一点努力都有帮助——所以尽可能遵循最佳实践是有益的。

以下是 H1 标签的 9 条最佳实践:

  1. 用 H1 标签标记页面标题
  2. H1 使用标题首字母大写
  3. 让 H1 与标题标签保持一致
  4. 在每个重要页面上都使用 H1 标签
  5. 每个页面只用一个 H1
  6. 保持 H1 标签简短
  7. 用样式体现标题层级
  8. 包含你的目标关键词
  9. 让 H1 标签更具吸引力

用 H1 标签标记页面标题

Google 建议“把文章标题放在正文上方醒目的位置,例如放在 <h1> 标签中”。

许多网站平台和 CMS 默认如此,但在某些主题下这一行为可以被覆盖。

想了解自己的主题如何处理这一点,最简单的检查方式是在浏览器中右键点击标题,选择“检查”。若高亮部分包含 <h1>,说明它被包裹在 H1 标签中。

对 HTML 不太熟悉的话,可以安装 Ahrefs SEO 工具栏,查看免费的站内报告来检查 H 标签(包括 H1)。

如果你想批量检查 H1 标签:

  1. 注册一个免费的 Ahrefs 网站管理员工具(Ahrefs Webmaster Tools)账户
  2. 用 Site Audit 抓取你的网站
  3. 进入站内(On page)报告
  4. 滚动到“H1 setup”图表
  5. 点击饼图中的绿色部分

H1 使用标题首字母大写

“标题格式”(Title case)是指把所有含有四个及以上字母的单词首字母大写。

若 CMS 把页面标题同时用于 H1 标签和标题标签,对页面标题使用标题首字母大写有助于让搜索结果更整洁。通常只有论坛帖子才使用全小写或句子式大小写。

让 H1 与标题标签保持一致

Google 的支持文档建议让标题标签与 H1 保持一致。

WordPress 这样的大多数 CMS 会自动处理,但若要区分标题标签和 H1,就需要使用类似 Yoast 的 SEO 插件。

最常见的原因是:页面标题作为 H1 没有问题,作为标题标签却太长。

例如,我们的这篇文章标题和 H1 就略有不同:

标题和 H1 略有不同却同出一辙(如上面的例子),问题不大;但若差异巨大,就值得让两者重新保持一致,

原因在于,搜索用户在某种程度上是被搜索结果页上的标题标签说服的。点进页面后若看到完全不同、毫不相关的标题(H1),就会觉得受骗。

还有一些情况也需要区分标题标签与 H1,例如针对特定关键词、优化点击率(CTR),或为搜索结果标题打造品牌形象。只要确保两者不偏离太多即可。

在 Ahrefs 网站管理员工具中可以免费检查 H1 与标题标签是否不匹配。

  1. 注册 Ahrefs 网站管理员工具
  2. 在 Site Audit 中抓取你的网站
  3. 进入站内(On page)报告
  4. 滚动到“H1 setup”图表
  5. 点击饼图中的绿色区域
  6. 查找差异巨大的标题标签和 H1

下面是我们的锚文本指南中不匹配的标题和 H1:

标题标签侧重定义,H1 侧重某项研究。搜索用户点进这个页面可能觉得被欺骗或困惑,因此坚持一致的角度更合理。

在每个重要页面上都使用 H1 标签

页面标题既然应当包裹在 H1 标签中,每个重要页面都应使用 H1 就不言而喻。毕竟每个页面都有标题。

如果你想找出 H1 缺失或为空的页面:

  1. 注册一个免费的 Ahrefs 网站管理员工具账户
  2. 在 Site Audit 中抓取你的网站
  3. 进入站内(On page)报告
  4. 滚动到“H1 setup”图表
  5. 点击饼图中的红色区域

如上所示,我们有些页面缺少 H1。

这算最佳实践吗?不算。但也不太可能造成大问题,因为这些页面从 SEO 角度看并不特别重要,只是博客首页和归档页,无论如何都只吸引品牌流量。

开发人员几分钟就能“修复”这个问题,但可能不值得占用他们的时间,因为这些页面在访客看来完全正常,而这才是最重要的。

每个页面只用一个 H1

Google 的 John Mueller 表示,每个页面使用多个 H1 也没问题。

若使用 HTML5,严格来说确实如此。在不同区块中使用多个 H1 标签在技术上没有问题。

例如,这个 HTML5 页面有四个 H1 标签,技术上没问题。

几乎所有现代浏览器都能正确渲染它,会根据嵌套层级显示嵌套在 <section> 元素中的 H1 标签。也就是说,第一个 <section> 中的 H1 看起来像 H2,嵌套在另一个 <section> 中的 H1 看起来像 H3,依次类推。

不过,即使使用 HTML5,万维网联盟(W3C)也建议使用“与区块嵌套层级相称的标题级别”。

例如:

原因在于,一些旧版浏览器在缺少明确 CSS 规则时难以正确渲染。

若网站不使用 HTML5 呢?

John Mueller 表示,多个 H1 标签仍然没问题:

既然按 W3C 的标准这不算最佳实践,为什么 Google 还是这么建议呢?

答案:因为他们已经开发出机制来处理网页上出现多个 H1 这一常见问题。

使用一个还是多个 H1 标签对 SEO 也许并不太重要,但对多数网站来说,只用一个仍是最佳实践。

在 Ahrefs 网站管理员工具中可以免费检查网站是否存在包含多个 H1 标签的页面。

  1. 注册一个免费的 Ahrefs 网站管理员工具账户。
  2. 用 Site Audit 抓取你的网站
  3. 进入站内(On page)报告
  4. 滚动到“H1 setup”图表
  5. 点击饼图中的黄色区域

保持 H1 标签简短

许多 CMS 会把同一段文案同时用于 H1 和标题标签。若属于这种情况,除非打算为每个页面和文章单独撰写标题标签,否则让页面标题保持简短是值得的。

多短才合适?一般的经验法则是 70 个字符以内。

下面这个页面就违反了这条规则:

这个页面的 H1 有 80 个字符,在页面本身上看着完全正常。但 WordPress 把同一段文案用于标题标签,导致它在搜索结果中被截断。

把标题标签设为 H1 的较短版本即可解决。但若一开始就写一个更短的标题,就不会出现这个问题。

用样式体现标题层级

标题用于在网页上建立层级结构。H1 标签通常是页面上最重要的标题,CSS 样式也应体现这一点。

换句话说,H1 应该是页面上最醒目的标签。

这似乎显而易见,但仍有大量网站的 H1 和 H2 在视觉上几乎没有区别。

包含你的目标关键词

Google 的 John Mueller 在 2020 年表示:

H1 通常包裹着页面标题,可以说是页面上最重要的标题。因此,包含主要关键词通常有意义,能让 Google 与搜索用户更清楚页面的主题。

我们几乎在所有博客文章中都这样做。

这样做总是有意义的吗?当然不是。

有时为了可读性,使用目标关键词的近义变体更好。

例如这篇文章的主要关键词是“how to get more views on youtube”,但由于写的是清单式文章,把它用在 H1 里并不合适,于是改用了一个近义变体。

根据 Gotch SEO 在 2024 年的研究,排名与部分关键词匹配之间的相关性可以忽略不计(-0.03)——换言之,完全匹配的关键词对排名没有显著影响。

使用同义词、部分匹配的关键词、连词和虚词(停用词)都没有问题,这样文字听起来更自然。

让 H1 标签更具吸引力

H1 标签需要具有描述性,这不言而喻。但为博客文章写标题时,还需要足够吸引人,以争取点击。

如何写出一个吸引人的文章标题?

在考虑使用那些博客文章标题生成器之前,先想清楚这篇文章的目的是什么。若其存在是为了从搜索引擎吸引自然流量,而 CMS 又把页面标题同时用于 H1 和标题标签,那么标题就需要为搜索引擎用户而写。

如何判断他们想要什么?

从目标关键词排名靠前的结果中寻找灵感。

例如,看“SEO techniques”排名靠前的页面,就能清楚看到搜索用户想要的是能帮助提升搜索流量、可操作且有效的 SEO 技巧。

据此可以为文章写出一个吸引人的页面标题(H1)。

在 SEO 领域,这被称为针对搜索意图优化。

常见问题(FAQ)

下面回答几个关于 H1 标签的常见问题。

H1 标签应该多长?

H1 标签可以按需设定长度,但多数 CMS 会把页面标题同时用于 H1 和标题标签,最好让页面标题保持简短(少于 70 个字符),以免标题标签被截断。

一个页面上可以有多个 H1 标签吗?

使用 HTML5 就可以。不使用 HTML5 时,这很少算最佳实践,但无论怎样都不太可能造成大问题。

可以在 H1 标签中使用图片吗?

可以。W3C 就是这么做的。

结语

可以说,H1 标签不如以前那么重要了。即便 H1 的使用并不理想,Google 也有相应机制来理解你的内容。

话虽如此,遵循最佳实践并不难,所以不妨照做。至少,它能改善用户体验。

有疑问?在 Twitter 上联系我。