带有 Hx 标题标签的内容的层次结构

已发表: 2018-01-30

目录

    在网站上使用内容标题是一个相当流行的主题,它带来了许多至今仍然存在的神话。 那么什么是标题标签,为什么要使用它们以及如何在网站上实现标题标签的最佳结构?

    • 1什么是标题?
    • 2在 Hx 标题标签中使用重要内容
    • 3谷歌对 Hx 标题标签有什么看法?
    • 4关于内容标题的其他基本信息

    什么是标题?

    标题标签用于向用户展示内容的结构(也包括网络浏览器爬虫)。 有六种标题大小——从 H1 到 H6 ,尽管其中第一个最相关(它是最重要的标题),而 H5 和 H6 很少使用。

    由于 Hx 标题标签包含的文本(应该)比内容的其余部分大得多,因此它是用户的视觉线索,可以让他们理解下面的段落描述的内容。 使用各种大小的标题来表示层次结构,使用户更容易消化内容。

    在 HTML 语法中,我们在 <> 括号中使用标签:

     <h1>标题 1</h1>
    <h2>标题 2</h2>
    <h3>标题 3</h3>
    <h4>标题 4</h4>
    <h5>标题 5</h5>
    <h6>标题 6</h6>

    但是在网站上,它们会看起来像这样(显然,取决于样式表):

    可以在此处找到示例用法:https://www.w3schools.com/html/html_headings.asp。

    在 Hx 标题标签中使用重要内容

    当几乎每天都有新的博客文章、新闻、指南或专家文章出现时,不仅用漂亮的图片或吸引人的标题,而且用结构化的内容来吸引用户是值得的。

    在移动设备上浏览特定文章时,读者通常主要关注标题。 除了纯粹的审美方面,适当的标题结构可以更容易地解释和消化内容,因此用户有可能在给定的网站上停留更长时间。

    不仅用户可以从结构良好的网站中受益——爬虫也可以这样做,因为标题文本对他们也很重要。 这就是为什么标题标签包含与页面上的内容在主题方面相关的关键字如此重要的原因。 如果我们使用特定关键字定位特定页面,则最好将它们(即使以不同的形式)放在标题中; 它们自然可以放在文本中,但要在一个理由之内。

    应明确定义结构,并且标题的大小应彼此不同。 将它们设置为与正文相同的样式或不按重要性区分它们是错误的。

    文章中的 Hx 标题

    在写博客文章时,我们可以创造性地使用标题。 您应该在开始之前定义文章的结构。 标题可能是分隔各个段落的交叉标题(就像在这篇文章中一样),其中最重要的一个 <h1> 可用于描述主题。 它经常在网站模板中自动定义,因此如果不是这种情况,值得与 SEO 专家和 Web 开发人员讨论进行更改。

    一个设计良好的文章结构可以使它看起来更有吸引力。 标题中的有趣内容将清楚地告知读者(和爬虫)他们对给定文章的期望。

    在网站主页上放置哪些标题标签?

    主页(或任何其他页面,例如服务页面)也应该具有标题的层次结构。 在 <head> 部分,建议将 H1 放在 H2 下方,H3等等,但没有最大数量的标题标签。 即使在 H1 的情况下,您也不需要将自己限制在一个标题上(如下所述)。

    但是,您需要记住,标题中的“关于我们”或“了解更多”等部分不会增加太多内容。 此外,使用重要性较低的标题,例如 H5-H6,几乎没有意义(文章的布局方面除外)。

    一页网站=一个H1标题标签?

    对于单页网站,它不像博客文章那样明显。 在HTML5 规范(https://www.w3.org/TR/2014/REC-html5-20141028/sections.html) 中,您可以找到负责定义 HTML 文档中各个部分的<section>标记。 一个部分通常包含一个标题,因此每个部分可能具有不同的层次结构,例如:

     <部分 id=”关于”>
     <h1>关于我</h1>
     <p>一些关于我的文字:)</p>
     <h2>我叫戴维……</h2>
     <p>关于我的第二段。 大声笑:)</p>
    </节>
    
    <section id=”portfolio”>
     <h1>我的作品集</h1>
     <p>我最近的项目...</p>
    </节>
    
    <部分>
     <h1>推荐</h1>
     <p>满意客户的意见...</p>
     <h2>最新推文</h2>
     <p>推文 1</p>
     <p>推文 2</p>
    </节>
    
    <部分>
     <h1>联系方式</h1>
    </节>
    

    正如您在上面看到的,每个部分都有一个不同的 H1 标题,然后是一个 H2 标题……尽管您可以决定有一个或多个 H1 标题标签,然后是 H2、H3 等。

    Google 对 Hx 标签有什么看法?

    谷歌员工对标题标签说了很多,但值得引用他们的最新观点。 一年前, John Meuller在 Google 网站管理员论坛上写道:https://productforums.google.com/forum/#!msg/webmasters/BmyI8YX_25A/81hZNQFJDQA

    “我们不会以不同的方式对待 HTML5,并且在一个页面上有多个 H1 标签是可以的。 使用它们时要合理,在有意义的地方使用它们。 使用 H1 绝对不会受到任何处罚。”

    稍后,在 2017 年 4 月,John 在 Twitter (https://twitter.com/JohnMu/status/852131231928135680) 上简短地回答了一个问题,一个页面上可以使用多少个 H1 标题。

    最后,作为谷歌网站管理员频道“SEO Snippets”YouTube 系列的一部分,上传了关于该问题的简短指南:

    试试 Senuto开始免费试用

    有关内容标题的其他基本信息

    尽管 Google 员工建议(至少在他们的官方声明中)采用灵活的标题标签方法,但仍有一些规则值得遵循:

    • 不要过度使用页面上的标题
    • 在有意义的地方使用标题以及当它们反映其下方的文本时,以帮助用户确定给定段落的开始和结束位置
    • 不要将整个段落(所有内容)放在标题中
    • 不要只使用关键字,尤其是不自然的形式
    • 不要通过对标题和正文使用相同的字体大小来隐藏正文中的标题
    • 保持结构层次有序
    • 也许有时使用 <strong> 标签而不是标题标签 ????。

    在创建内容时,既不过度优化也不优化不足; 取而代之的是,力求平衡并关注用户消化您网站上的内容(包括文章、指南或其他博客文章)的感受。 毕竟,标题是谷歌搜索引擎的排名决定因素,这就是为什么你不能忽视它们。

    试试 Senuto开始免费试用