首页 / SEO book / SEO 基础与入门 / H1 标签作用与最佳实践

什么是 H1 标签?它对 SEO 为何重要及最佳实践

H1 标签作用与最佳实践SEO 基础与入门

H1 标签是用于标记网页标题的代码。了解它的用法与重要性。

什么是 H1 标签?

H1 标签是用于创建网页主标题的 HTML,有助于向访客和搜索引擎表明页面的主要主题。它由开头的 <h1> 标签、标题文本以及结尾的 </h1> 标签组成。

下面是 H1 标签在 HTML 代码和实际页面中的示例:

HTML 中和实时页面上的 H1 标签

H1 标签示例

为更直观地了解 HTML H1 标签在实际中的样子,下面看几个来自不同网站的示例。

这个 Semrush Academy 课程上的 H1 标签是“SEO Principles: An Essential Guide for Beginners”,简洁、描述性强且有吸引力。

Semrush Academy 课程的 H1 标签,内容为:“SEO Principles: An Essential Guide for Beginners”

W3Schools 关于 HTML 标题教程上的 H1 标签是“HTML Headings”,简单、准确,且与该页面标题一致。

W3Schools 教程的 H1 标签,内容为:“HTML Headings”

这篇 TechCrunch 文章上的 H1 标签是“We tested Google's Gemini chatbot—here's how it performed”,引人好奇,也准确告诉读者会看到什么。

TechCrunch 文章的 H1 标签,内容为:“We tested Google’s Gemini chatbot—here’s how it performed”

如何检查网页上的 H1 标签

查看自己(或任何其他)网页上的 H1 标签,无需特殊技能。

以下是几种最常见的方法:

查看页面源代码

在页面上任意位置点击右键,从菜单中选择“查看页面源代码”或“显示页面源代码”。

Semrush 博客页面上的“查看页面源代码”按钮

这会在新标签页中打开该页面的源代码。

接下来可以手动查找 <h1> 标签。

或者在 Mac 上使用“Command + F”快捷键,在 PC 上使用“Ctrl + F”,并输入“h1”。

在页面源代码中搜索“h1”

使用浏览器扩展

可以安装浏览器扩展,在访问的任何网页上高亮显示 H1 标签。

例如,你可以使用 H-tag Chrome 扩展。它会高亮显示页面上的所有 <h> 标签。

使用 H-tag Chrome 扩展在 Semrush Blog 页面上高亮显示的 H1 标签

其他更复杂的扩展,如 Detailed SEO Extension,会显示大量与 SEO 相关的洞察,例如:

  • 标题标签(用于指定网页标题的 HTML)
  • 元描述(用于提供页面描述的 HTML)
  • Meta robots 标签(告诉搜索引擎如何抓取、索引和展示页面内容的 HTML)
  • <h> 标签

等等。

Detailed SEO Extension 窗口,显示页面的标题、描述、URL、规范标签和 robots 标签数据

使用网站审计工具

用网站审计工具扫描网站,可以找出 H1 标签的各种问题,例如缺失、重复或空标签。

例如,SEO 检查器会在一份关于网站健康与表现的全面报告中,提供 H1 标签的相关信息。

Site Audit 工具中发现的“h1”问题

H1 标签为什么对 SEO 重要?

H1 标签并非已确认的排名因素,但对 SEO 仍然重要。

主要有三个原因:

1. H1 帮助搜索引擎理解内容

搜索引擎会查看 H1,以了解页面及其内容。

H1 越具描述性越好。

Chewy 这篇博客文章中的 H1,就是一个描述性 H1 的绝佳示例。

它准确告诉搜索引擎会看到什么:美国最好的猫咪咖啡馆,从而让搜索引擎更容易理解页面内容。

实时页面和页面 HTML 中显示的 H1 标签

2. H1 提升用户体验

H1 标签让读者一眼就能了解页面主题,从而提升用户体验(UX),尤其是多数网站都会把 H1 显示为页面上最大的文字。

而提升用户体验至关重要。Google 强调它有助于获得更好的排名。

更何况:

快速浏览标题,能让读者在深入阅读前了解会学到什么,从而预先评估内容的价值。

做得好,H1 就能提供层级结构,让访客确信这里有他们需要的信息。

看看这张图:

一张展示标题如何帮助读者快速浏览内容的图

左边的示例缺少清晰的结构与次序,很难看出内容讲什么。

右边的示例把 H1 显示为页面上最突出的标题,然后是 H2,再到 H3,依次类推。

结构易于浏览、跟进和理解。

3. H1 提升可访问性

H1 标签(以及一般意义上的其他标题)能帮助使用屏幕阅读器的人理解页面内容。

屏幕阅读器是通过语音合成器或盲文显示器来朗读计算机文本的程序。

以下是宾夕法尼亚州立大学(The Penn State University)可访问性指南中的标题在屏幕阅读器上的呈现示例:

屏幕阅读器显示标题

图片来源:宾夕法尼亚州立大学

精心撰写有描述性的 H1 标签并保持有条理的标题结构,就能提升网站的可访问性。

如何为你的博客页面添加 H1 标签

在多数网站内容管理系统(CMS)中,为文章添加 H1 标签很容易。许多 CMS 都有用于文章标题的占位字段,会自动格式化为 H1。

下面介绍在 WordPress、Squarespace 和 Wix 中更改 H1 标签的方法。

在 WordPress 中添加 H1 标签

大多数 WordPress 主题的代码都会把文章标题设为 H1。

WordPress 博客标题编码为 H1

要更改这个(或任何其他)标题,点击或高亮要重新格式化的文本,所选区块上方会出现一个工具栏。

就像这样:

在 WordPress 中高亮文本以重新排版

点击该工具栏左侧的段落符号。

然后选择“标题”。

WordPress H2

选择“H1”,把标题标签改为 H1。

在 WordPress 编辑器中将 H2 改为 H1

完成。

在 Squarespace 中添加 H1 标签

在 Squarespace 中为博客文章添加 H1,多数情况下只需填写“文章标题”字段。

若要更改某个页面的 H1 标签,先选中想改为 H1 的文本。

然后点击工具栏左侧的格式按钮。

Squarespace H1 编辑

并选择“Heading 1”。

就像这样:

Squarespace 中的文本样式菜单

完成。

在 Wix 中添加 H1 标签

Wix 也会自动把博客文章标题设为 H1 标签。

wix 中的 H1 标签博客文章标题

但与该列表中的另外两个 CMS 不同,在 Wix 中 H1 标签只能作为文章标题使用,无法把其他任何副标题改成 H1。

H1 标签最佳实践

以下是六条 H1 标签最佳实践,遵循它们可以改善 SEO。

1. 每个页面只使用一个 H1

只使用一个 H1 能建立层级,让页面结构更有逻辑。

它让读者(以及使用屏幕阅读器的人)能轻松浏览并理解页面主题。

H1 用于表达主要主题的标题,H2 用于重要的副标题,H3 用于支撑这些副标题的下级标题,依次类推:

用 H1、H2、H3、H4、H4 和 H6 标签展示的博客结构

那么,每个页面应有多少个 H1 标签?

每个页面只应有一个主要主题,也就是唯一的 H1。

2. 确保每个重要页面都有一个 H1

H1 标签是最重要的标题,每个重要页面都应当有一个。

哪些页面算重要?由你判断。不错的起点是:任何希望在 Google 上获得排名的页面。

要找出缺失或空 H1 的页面:

  1. 访问 Site Audit
  2. 输入你的主页 URL,点击“开始审计”
  3. 点击“问题”标签页
  4. 在搜索栏中输入“h1”
  5. 点击“没有 H1 的页面”的警告
Site Audit 工具中一条突出显示的警告,内容为:“28 个页面没有 h1 标题”

随后会看到受影响的页面列表,为每个页面添加 H1 即可解决。

3. 包含你的目标关键词

除标题标签外,Google 还会扫描 H1 等内容,判断其是否与搜索者的查询相关。

换言之:

一个 H1 中提及该搜索词的页面,往往比 H1 中没有提及的页面在该查询上排名更好。

我们所有的博客文章都这么做。

下面可以看到我们如何在两篇不同的博客文章 H1 中包含关键词“title tags”和“alt text”:

在标题中包含目标关键词

4. 保持 H1 标签在 60 个字符以内

文字越清晰简洁越好,H1 标签或其他标题也不例外。

最佳实践是保持在 50 到 60 个字符之间,与标题标签一样。

为什么?

许多 CMS 会把同一段文案用于 H1 和标题标签。此外,Google 偶尔会用 H1 标签替换标题标签。搜索结果中若被像下面这样截断就糟了:

Google 搜索结果中 h1 标签被截断的示例

H1 标签的长度没有技术限制,但最稳妥的做法是保持在 60 个字符以内。

5. 让文章页面的 H1 与标题标签保持一致

一个常见的 SEO 错误,是把代码 <head> 部分添加的标题标签与 H1 标签混淆,因为两者都描述页面的主题。

主要区别在于两者出现的位置。

标题标签出现在浏览器标签页顶部,也可能出现在搜索结果页(SERP)上,除此之外在网页上不可见。

以下是一个标题标签在浏览器标签页和 SERP 中的示例:

浏览器标签页中和搜索结果页面中的标题标签

H1 标签是用户在页面上看到的、通常为大号文字的标题。若与标题标签不同,通常不会出现在 SERP 上。

以下是我们一篇博客文章的 H1:

Semrush 博客的 H1 标题:“Keyword Research for SEO: What It Is & How to Do It”

Google 建议让你的 H1 标签与标题标签保持一致,以防止不准确的文章标题出现在搜索结果中。

即便两者不同,也应当非常相似。

就像这样:

Semrush 博客的 H1 标题:“6 Market Analysis Steps to Building a Surefire Marketing Strategy”,以及代码中的标题标签:“Market Analysis: 6 Steps to Building a Surefire Marketing Strategy”

用户进入页面却看到一个完全不同(且不相关)的 H1,会感到被欺骗,这并非所愿。

6. 优化你的 H1 以满足搜索意图

搜索意图是用户搜索某个东西时的首要目标。

H1 应当立即告诉读者,你将满足其搜索意图。

换言之:

内容将给出他们想要的东西。

满足意图很重要,因为它是 Google 的主要目标。想要更好的排名,它也就成为你的首要目标。

要确定某个关键词的搜索意图,把它输入 Google 并分析出现的结果。

例如,“content marketing”的头部结果都聚焦于解释内容营销是什么:

Google 对“content marketing”查询的顶部结果

那些文章都不太深入,也不推销任何东西。这说明搜索意图是信息型的,这些文章写给想学习的人看。

这意味着需要撰写一个能满足这种信息型搜索意图的 H1,以及配套的文章。

确定搜索意图还有一个更快的方法,就是使用我们的网站关键词检查工具。

输入关键词并点击“搜索”。

在 Keyword Overview 工具中输入的“content marketing”

这会显示所选关键词的相关信息,包括它的意图。

Keyword Overview 工具中“content marketing”的结果,“Intent”组件已高亮显示

如何运行 H1 标签审计

要检查网站是否存在 H1 标签错误,运行一次审计即可。

打开 Site Audit,粘贴域名并点击“开始审计”。

在 Site Audit 搜索栏中输入域名

工具会显示一个包含网站整体健康状况的仪表盘。

点击“问题”标签页查看问题列表。

Site Audit 的概览仪表盘,高亮“Issues”标签页

在搜索栏中输入“h1”。

Site Audit 的“Issues”标签页中“h1”的结果

这样就能看到所有存在 H1 问题的页面,先修复警告,再处理提示。

建议定期运行审计,以便在有需要关注的新问题时得到提醒。

为此,设置一份定期报告即可。

在 Site Audit 仪表盘的右上角,点击齿轮图标。

向下浏览设置,找到“计划”。

就像这样:

设置 Site Audit 时间安排

接着会出现一个弹窗,可在其中选择运行报告的频率。

设为偏好的日期,勾选弹窗底部的“发送电子邮件”选项,然后点击“保存”。

从 Site Audit 获取电子邮件报告

这样就能修复问题,让 SEO 工作顺畅运行。