如何正确使用 HTML 标题标签

发布时间:2021-07-07 08:22:21

每个网站都有的一个共同元素是 HTML 标题标签,这些标题不仅将您的内容分解为更具可读性的部分,而且还创建了您网站的语义大纲,以便搜索引擎和可访问性软件可以准确判断网站的内容。

HTML 标题标签.png

为什么要使用 HTML 标题标签?

就像我们上面所说的,这些标签创建了网站的骨架。没有它们,您网站内容在用户和机器人看来就像是一堵巨大的文本墙,即使您使用段落将其分解。

此外,屏幕阅读器和辅助功能软件使用它们来导航您的内容。因此,如果您不包含 HTML 标题标签,您的站点将无法被许多人访问,因为他们根本无法在页面和内容中移动。此外,进入您网站的搜索引擎和其他网络爬虫也会通过您的标题进行导航。

标签层次很重要

HTML 标题标签层次结构很重要。您使用这些标签的顺序可能会影响您网站的 SEO。虽然您可以使用 CSS 设置它们的样式并使 H6 标签比 H2 更大、更粗、更亮,但您仍应尽量保持它们的有序性,以免混淆爬虫(和读者)。

按升序考虑标签,就好像它们是帖子大纲的标题一样。您应该只在其直接前任下放置更高的数字。您可以根据需要将它们嵌套任意深,但请确保每次只按顺序放置下一个。在某些特定情况下,您的 H6 高于 H4,但在大多数情况下,搜索引擎通过使用标题导航您的内容来确定主题优先级并衡量搜索意图的内容有效性。

H1标签

H1 标签可能是最简单的 HTML 标题标签,同时也是最容易被误解的标签之一。在大多数情况下,您会看到 H1 标题是特定页面或帖子的标题。这就是搜索引擎将(可能)显示在结果中的内容。您的浏览器也可能会在其标题栏中显示这一点,尽管许多 SEO 插件和类似的应用程序允许您更改它。因此,虽然在 H1 标签中包含目标关键词很重要,但这并不是 100% 必要的。在语义上编写标题和标题以涵盖访问者的搜索意图,而不是关键字填充 HTML 标题标签。

多年来,标准做法是每页有一个(并且只有一个)H1 标签。搜索引擎会抓取您的网页并寻找 H1 标签。然后他们使用它来确定主题、标题和结构。但是,在您的网站上使用多个 H1 HTML 标题标签不会导致任何 SEO 惩罚。这意味着在需要时您可以在每个页面上使用多个。

何时使用多个 H1 标题

H1 的唯一目的是指示关于单个主题的完整部分。如果您有一个包含多个主题的页面,您可能希望为该页面上的每个新主题使用 H1。这样做会告诉 搜索引擎,您的页面不仅仅与标题中的主题有关。但是下面可能还有一个关于完全不同(但相关)的主题的部分。

在单页网站上,这很重要,因为您可能在该页面上有关于、产品、联系和服务部分。那么你如何让搜索引擎知道每个部分中包含的内容是它自己的自治单元?H1标签,您将每个部分视为自己的迷你网页,使用我们上面在每个部分中讨论的层次结构。这样,搜索引擎在浏览页面时会看到标题,然后它可以确定从这些部分中提取哪些部分内容来回答搜索者的问题。建议仅在该部分与页面标题具有同等重要性时才使用 H1 标签,而不是次要部分。

H2标签

H2 标签很可能成为页面上最常用的 HTML 标题标签。并且有充分的理由。互联网上的大多数帖子和页面都包含一个主题,只有几个副标题。我们建议您创建的每一段内容都至少包含一个 H2 标签。

他们将子主题(或步骤)分开以便于阅读。例如,我们的大部分帖子主要由 H2 标题组成(适用时为 H3)。那是因为我们的文章是关于一个主题的,我们试图解决一个问题。我们将在H1 中使用诸如如何使用 OBS Studio 进行直播之类的标题,但诸如“如何开始使用 OBS Studio”等副标题将在 H2 中。H2 标签代表与 H1 主题直接相关的各个步骤。

一般来说,每篇文章会有多个 H2 标签,而它们下可能没有嵌套的子标题。如果您的页面或帖子属于一个主题,并且没有像上面的示例那样细分为带有小节的部分,那么拥有多个 H2 标签比嵌套 H2 -> H3 -> H4 更好,因为这些标签会向爬虫表明您重新深入研究一个次要主题,而不是扩展帖子的主要主题。

H3标签

另一方面,H3 标签是您的文章可以真正深入了解主题细节的地方。你不应该直接在 H1 下使用这些 H3 标签。搜索引擎绝对将它们视为副标题。而 H2 被接受为单个文章中部分的主要标题(H1 将主要主题声明为标题,请记住)。

H4, H5, H6 标签

我们把这些放在一起是有原因的。通常,您将很难找到任何充分利用 H1 到 H6 范围的 HTML 标题标签的站点。到目前为止,最流行的结构是 H1 到 H3。就像您很少看到超出第二个嵌套级别的内容大纲一样。

H4

在大多数情况下,H4 标签的用途与 H3 相同。您将使用它们来详细了解步骤和示例,但始终嵌套在主要标题下方。设计师通常使用比 H3 小的 CSS 来设计它们。他们倾向于在普通内容创建中看到有限的使用。如果需要分解想法以便需要 H4 标题标签,则主题往往非常深入。

H5 和 H6

您可以通过几种不同的方式使用 H5 和 H6 标题。

第一种方式

(举个例子,我们通过标题把这个特定的部分分成了不同的部分,我们现在在 H4 下,因为它是主要文章的一个子主题。)

这些标题通常用于目录和类似列表中,但它们的主要功能在技术上与其他标题相同,在整个页面中描绘重要性降序的主题。很难找到包含完整标题到 H6 的文档。

第二种方式

有些人使用 H5 和 H6 标签作为“特殊”格式标题。他们会对这两个与 H1 到 H4 完全不同的 HTML 标题标签应用特殊的 CSS。然后,您可以使用它们来引起人们对可能会被忽视的主题和想法的关注。

这不是技术上的最佳实践,因为标题是分层的。但是,如果您的网站整体结构良好,并且您在某些单独的页面或帖子上谨慎地使用 H5 和 H6 作为特殊样式,则几乎可以肯定您不会受到 SEO 的影响。

请记住,即使将它们用于特殊格式,也不会脱离层次结构。让它们井然有序。因此,如果您使用 H6 来设置副标题的样式,请确保您使用的下一个是 H1 或 H2,以表明您已返回到标准结构。

HTML 标题标签不该做什么

不要用整个标题层次结构一直向下构建单个页面。您最好为标题和所有 H2 使用 H1,而不是嵌套每个连续的标题。此外,您不想随意使用标题。只能按顺序使用它们。否则,爬虫将不知道如何导航您的页面,无障碍软件也不知道。

标题标签是每个网站的重要元素。正确使用它们可以提高您的搜索引擎排名,以及您网站的用户体验,因为访问者将能够更轻松地找到他们在您的内容中寻找的信息。请记住,不要在标题中使用过多的关键字。


声明:本站发布的内容以原创、转载、分享网络内容为主,如有侵权,请联系电话:400-887-2127,邮箱:7221960@qq.com ,我们将会在第一时间删除。文章观点不代表本站立场,如需处理请联系我们。