海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

每个网站都是自己独特的怪物,开发人员和设计人员将自己的标志性声音放入代码中。 但是每个网站都有的一个共同元素是 HTML 标题标签。 这些标题不仅将您的内容分解为更具可读性的部分,而且还创建了您网站的语义大纲,以便搜索引擎和可访问性软件可以准确判断网站的内容。 关于 HTML 标题标签的正确使用和功能偶尔会出现一些混淆,因此我们想通过所有 6 层并讨论如何以及何时正确使用它们。

https://www.youtube.com/watch?v=H519o8BvpQA

订阅我们的 YouTube 频道

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

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

此外,屏幕阅读器和辅助功能软件使用它们来导航您的内容(有时是字面意思)。 因此,如果您不包含 HTML 标题标签,您的网站将无法被许多人访问,因为他们根本无法在页面和内容中移动。

此外,进入您网站的搜索引擎和其他网络爬虫也会通过您的标题进行导航。 最近,谷歌一直在其排名中考虑代码语义,这意味着搜索意图非常重要。 您的 HTML 标题标签是其中的主要部分,它告诉 Google 和访问者在页面上的哪个位置可以找到按层次重要性组织的特定信息。

页面中的每个标签都以自己的方式帮助这一切。

标签层次很重要

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

海外社媒SNS代运营Tiktok代运营公司

按升序考虑标签,就好像它们是帖子大纲的标题一样。 您应该只(通常)在其直接前任下放置更高的数字。 您可以根据需要将它们嵌套任意深,但请确保每次只按顺序放置下一个。

下面是一个例子:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
        <h3>Subtopic</h3>
            <h4>Very specific point</h4>
        <h3>Main Point Number 2</h3>
            <h4>Subtopic</h4>
                <h5>Example or important chart</h5>
            <h4>Specific point</h4>
                <h5>Example or important chart</h5>
                    <h6>Highly specific example explaining this point</h6>

在某些特定情况下,您的 H6 高于 H4,但在大多数情况下,Google 和其他搜索引擎通过使用标题导航您的内容来确定主题优先级并衡量搜索意图的内容有效性。

H1标签

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

h1 示例

上图显示了用作 Elegant Themes 博客文章条目标题的 H1 标签。 它也是页面上唯一的 H1 标签。 这表明它是页面内容的主题。

多年来,标准做法是每页有一个(并且只有一个)H1 标签。 在大多数情况下,这仍然是一个很好的建议。 Google 和其他搜索引擎会抓取您的网页并寻找 H1 标签。 然后他们使用它来确定主题、标题和结构。

但是,谷歌明确表示,在您的网站上使用多个 H1 HTML 标题标签不会导致任何 SEO 惩罚。 这并不意味着在您的网站上到处使用它们,而是意味着在需要时您可以在每个页面上使用多个。

何时使用多个 H1 标题

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

在单页网站上,这也很重要,因为您可能在该页面上有“关于”、“定价”、“联系方式”和“作品集”部分。 那么你如何让谷歌知道每个部分中包含的内容是它自己的自治单元?

H1标签,就是这样。 您将每个部分视为自己的迷你网页,使用我们上面在每个部分中讨论的层次结构。 这样,谷歌在浏览页面时会看到标题,然后它可以确定从这些部分中提取哪些部分(等等)来回答搜索者的问题。

您也可以选择在每次使用 H1 标签时使用 部分 标记在您的网站上,但我们建议仅当它是与页面标题平行重要的部分时才这样做,而不是从属部分。

H2标签

现在,H2 标签很可能成为页面上最常用的 HTML 标题标签。 并且有充分的理由。 互联网上的大多数帖子和页面都包含一个主题,只有几个副标题。 我们建议您创建的每一段内容都至少包含一个 H2 标签。 Yoast 和其他 SEO 插件建议大约每 300 个字一个标题。 根据您的内容,这就是 H2 标签的用途。

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

h2 的例子

H2 标签代表与 H1 主题直接相关的各个步骤。 在那个特定的帖子中,我们使用了以下结构:

<h1>How to Use OBS Studio to Livestream</h1>
    <h2>What is OBS Studio?</h2>
        <h3>What about SLOBS?</h3>
    <h2>How to Get Started with OBS Studio</h2>
    <h2>OBS Studio Setup</h2>
        <h3>Setting Up a Scene in OBS Studio</h3>
        <h3>Adding Sources in OBS Studio</h3>
    <h2>Adjusting Sources Onscreen</h2>
        <h3>RMTP Keys and OBS Studio</h3>
    <h2>Wrapping Up</h2>

这篇文章中的 H2 标题标签涵盖了主要思想,例如入门和下载、设置实际软件,然后调整您的屏幕对观众的显示方式。 虽然在 H3 的下面也涉及步骤,但 H2 标题表示文章的大尺寸图片。 它们是一个高级视图,爬虫和读者将能够浏览以查看文章是否包含他们正在搜索的信息。

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

WordPress花园建议你也读一下这篇文章  Netflix 不可阻挡的成功 | 博客

H3标签

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

h3 示例

如果您仔细查看上图,您会发现 H2 和 H3 标签之间的实际样式和大小并没有太大不同。 原因是,我们不希望您通过扫描来假设我们在 H3 中提出的任何一点都不如 H2 重要。 因为它不是。

它只是在尺寸上更小,表明它是 H2 的一个从属点,而不是与整个主题的直接联系,从结构的角度来看,这对于您的文章的 SEO 来说是最重要的。 对于人类读者,而不是机器人,视觉上的区别只是帮助他们向下移动页面并将信息分解为更容易解析。

H4, H5, H6 标签

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

I. Idea 
    A. Subpoint
        1. Detail
II. Idea
	A. Subpoint
		1. Detail
III. Idea

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,而不是嵌套每个连续的标题。

是的:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
    <h2>Main Point Number 2</h2>
    <h2>Main Point Number 3</h2>
    <h2>Main Point Number 4</h2>

不:

<h1>Title</h1>
    <h2>Point Number 2</h2>
    <h3>Point Number 3</h3>
    <h4>Point Number 4</h4>
    <h5>Point Number 5</h5>
    <h6>Point Number 6</h6>

此外,您不想随意使用标题。 只能按顺序使用它们。 否则,爬虫将不知道如何导航您的页面,无障碍软件也不知道。

不:

<h1>Title</h1>
    <h3>Point Number 2</h3>
    <h2>Point Number 3</h2>
    <h6>Point Number 4</h6>
    <h5>Point Number 5</h5>
    <h4>Point Number 6</h4>

通常,您可以假设爬网程序在找到下一个 H1 或 H2 时会知道您已移出小节。 在上面的代码片段中,爬虫和机器人很难解析信息的结构。

用 HTML 标题标签结束

看到了吗? 我们回到 H2 标题来总结一下。 标题标签是每个网站的重要元素。 正确使用它们可以提高您的搜索引擎排名,以及您网站的用户体验,因为访问者将能够更轻松地找到他们在您的内容中寻找的信息。 请记住,不要在标题中使用过多的关键字。 尽管包含您正在讨论的关键字或短语以确保您的想法清晰是一个好主意,但 Googlebots 和其他人非常聪明,可以判断您何时交换了主题或在同一主题上。 总体而言,使用 HTML 标题标签非常重要,但如果您只记住几件事,您的网站将很快大放异彩。

您是否正确使用了 HTML 标题标签?

文章特色图片由 VectorV / shutterstock.com 提供

海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts