使用语义 HTML5 标签聚焦页面内容

2023 年 12 月 23 日|搜索引擎优化|预计阅读时间 ≈ 13 分钟

使用语义 HTML5 标签聚焦页面内容，避免页面主题的污染和稀释

那么，在我们深入细节之前，对于那些不太确定语义 HTML5 标签和其他 HTML 标签（如

、、

等通用 HTML 标签）之间确切区别的人来说，这些通用标签只是容器，没有表明它们所包含内容的类型。实际上，

几乎可以容纳任何内容，并被用作构建页面的最基本块。

那么什么是语义 HTML5 标签？

语义 HTML5 标签 具有特定的作用，并告诉我们可以期望它们包含什么样的内容。一直以来就存在的两个标签是<head>和<body>，浏览器肯定知道<head>中的所有内容都是关于页面的元数据，<body>中的所有内容都是将展示给用户的可见部分。

在本文中，我们将特别关注的标签是<header>、<footer>、<main>、<article>、<aside>、<section>，在一定程度上还有<nav>。

为什么只有这七个标签？因为它们是向搜索引擎算法展示重要内容所在位置所需的全部。

为什么我们需要这样做？

那么，为什么向搜索引擎展示这些内容的位置很重要？它自己不能弄清楚吗？我的意思是，谷歌很聪明，对吧？是的，谷歌很聪明，而且越来越聪明，但是通过标记重要内容，您不仅为它节省了一些工作，而且您掌控了局面！

让我们考虑一个可能特别有用的情况。几年前，我为一个汽车租赁网站做 SEO。理论上，这个网站的结构很容易，因为优惠是按制造商>系列>型号分类的，所以当您到达型号级别时，有很多继承的上下文。

问题是每个型号页面都包含类似的优惠和相关的博客文章。例如，一个关于宝马汽车的页面会包含奔驰、奥迪和捷豹的类似优惠，以及关于整个汽车行业的博客文章，可能会提到雷诺、大众或任何其他品牌。如果您查看页面的文本内容，会有很多污染，提到了各种与宝马无关的东西。

一个案例研究

关于语义标签的重要性以及谷歌实际如何处理它们存在很多争论，所以这里是我两年前与Jason Barnard 合作的一个相对高流量网站的截图，其中红线显示了将语义 HTML5 标签集成到页面模板的时刻，您可以看到流量增加了 30％。

语义 HTML5 标签集成

那么搜索引擎到底是如何知道您的页面是关于什么的？

作为人类，我们可以直观地分析页面布局，并且根据经验本能地知道主要内容是什么。但是搜索引擎如何看待您的页面？它们看到的是一堆几乎都是关于汽车的杂乱文本。到目前为止还不错，但是请记住，您的网站在同一页面中提到了宝马、奔驰、奥迪、捷豹和雷诺。还有汽车保险和其他关于汽车行业的一般新闻。

机器可以通过查看诸如<title>和<h1>标签之类的信号来“猜测"。它还可以查看文本中单词出现的次数。这都是相当标准的分析，它可能会得出正确的结论......但为什么不非常明确地告诉它唯一需要考虑的内容在哪里呢？

[案例研究] 通过页面 SEO 推动新市场的增长

当 Springly 开始考虑向北美市场扩张时，页面 SEO 已被确定为在新市场成功起步的关键之一。了解如何通过内容策略的技术 SEO 从 0 走向成功。

我们如何做到这一点？

就像我们使用<head>和<body>标签来划分 HTML 代码的区域一样，我们将构建一个结构，一个不可见的结构，它只会为页面增加几个字节的重量，但就像城市中的行政区一样。机器人将确切地知道它们在哪里以及每个区域的目的是什么。

注意：不要对语义元素应用类或样式。您需要能够添加、删除或移动它们，而不会以任何方式影响页面的外观！

我们首先需要做的是将页眉栏内容和页脚栏内容与主要内容分开。

我们需要将其分成较小的块来组织内容块，到目前为止，我们一直在使用<div>标签来做到这一点。（想起使用 HTML 表格进行页面布局时不禁颤抖）。那么使用<div>标签有什么问题？没什么，除了它们没有告诉我们其内容的作用。

您可以给<div>一个id，如下所示：

1<div id="header">
2<div id="main">
3<div id="footer">

但这实际上并没有告诉机器任何东西。您不妨将它们称为：

1<div id="john">
2<div id="paul">
3<div id="george">
4<div id="ringo">

我们需要一些能够告诉我们每个块的作用的东西，就像我们写的那样：

1<beatles >
2     <singer id="john"></singer>
3     <bassist id="paul"></bassist>
4     <guitarist id="george"></guitarist>
5     <drummer id="ringo"></drummer>
6</beatles>

幸运的是，有语义 HTML5 标签可以做到这一点：我们可以使用<header>、<main>和<footer>标签。像这样：

1<body>
2     <header ></header>
3     <main ></main>
4     <footer ></footer>
5</body>

<header>和<footer>可能会包含一些<nav>标签中的导航菜单，但这不是我们这里关心的。

那么让我们看看<main>块。

标签

因为我们可以在<main>块中放入各种各样的内容，所以我们需要能够隔离当前页面特有的内容，并排除其他所有内容。为此，我们可以使用<article>标签，它将包含<h1>，如下所示：

1<main>
2     <article>
3           <h1></h1>
4           *特定页面内容*  
5     </article>
6</main>

此页面的所有特定内容都将放入<article>标签中。

请注意，这里的“文章"不一定是指报纸文章意义上的文章，而只是一个东西，如一件衣服、一个产品、一篇博客文章、一个“关于我们"页面、一个食谱......

到目前为止，一切都很好。但是页面中的所有其他内容呢？我们需要将其分为两组：以某种方式与主页面内容相关的内容项和与网站更一般相关的内容项。

1<main>
2     <article>
3          <h1 >< /h1>
4          *特定页面内容*  
5         *\[与文章内容直接相关的附加内容\]*  
6     </article>
7     *\[与文章内容无关的附加内容\]*  
8</main>

我们如何告诉机器我们刚刚定义为“附加内容"的此内容就是这样？这就是<aside>标签发挥作用的地方。

<aside>标签

当我们包含<aside>标签时，我们简化的代码将如下所示：

1<main>
2     <article>
3          <h1></h1>
4          *特定页面内容*  
5          <aside>
6               *\[与文章内容直接相关的附加内容\]*  
7          </aside>
8     </article>
9     <aside>
10     *\[与文章内容无关的附加内容\]*  
11     </aside>
12</main>

现在，我们已经告诉搜索引擎忽略<aside>标签中的任何内容，并且不将其视为主要内容的一部分。

回到我们的例子

在文章开头我给出的汽车租赁网站的例子中，我们可以这样告诉机器忽略那些干扰信息：

1<main>
2     <article>
3          <h1>宝马 1 系掀背车</h1> 关于宝马 1 系掀背车的特定页面内容_  
4         <aside>
5               _提到奥迪、奔驰和捷豹的类似优惠_  
6               _具体关于宝马 1 系或宝马的一般博客文章_  
7          </aside>
8     </article>
9     <aside>
10          _关于汽车行业的一般博客文章_  
11     </aside>
12</main>

通过这种方式，我们告诉机器：

  • 这篇文章专门关于宝马 1 系掀背车。
  • 有类似的优惠，可能有助于为文章提供背景，但不应被视为其内容的一部分。
  • 页面中还有一些额外的内容，但应该不在考虑范围内。

* 注意：如果您有专门关于宝马车型或宝马一般的博客文章，您可以将它们放在文章内的 <aside> 中，因为这将增强文章的背景。

但是 <section> 标签呢？

这是我认为在所有 HTML5 语义标签中使用最不当的标签之一！我见过在 <header> 中的 <section> ，在 <footer> 中的 <section> ，在其他 <section> 中的 <section> ，甚至更糟的情况。

<section> 标签的问题在于，从逻辑上讲，它需要是某事物的一个部分。只是在 HTML 中随意添加一堆 <section> ，几乎和使用 <div> 一样，因为我们不知道它们的目的是什么。

别忘了，我们不应该使用这些语义标签来从视觉上构建页面布局，只需在文本中放入 <h2> 和 <h3> 标签就可以将其分成层次结构的部分。那么为什么还要使用 <section> 呢？

确实，<section> 允许您在页面中合法地放置更多的 <h1> 标签：查看 2017 年谷歌网站管理员 YouTube 频道制作的这个视频 。然而，除了少数特殊情况，比如一个页面只是列出每个博客文章的图片标题和文本摘要，您需要非常小心，否则您只是在冒险再次让机器对页面内容感到困惑。

我认为 <section> 的唯一有效用法是在 <article> 标签内部，如果文章有作为自成一体的信息块有意义的部分。<section> 标签可以告诉机器，这部分内容可以作为本身有价值的片段被索引。再看我们的例子。这里我只保留了 <article> 标签并添加了一些部分：

1<article>
2      <h1>宝马 1 系掀背车</h1>
3      <p>关于宝马 1 系掀背车的一般页面内容</p>
4      <section>
5           <h2>宝马 1 系掀背车的标准配置</h2>
6           <p>关于配置的相关内容</p>
7      </section>
8      <section>
9             <h2>宝马 1 系掀背车的技术规格</h2>
10           <p>关于技术规格的相关内容</p>
11     </section>
12     <section>
13            <h2>宝马 1 系掀背车有多快？</h2>
14           <p>关于速度的相关内容</p>
15     </section>
16     <aside>
17           _提到奥迪、奔驰和捷豹的类似优惠。_  
18           _具体关于宝马 1 系或宝马的一般博客文章。_  
19      </aside>
20</article>

在前面的例子中，我们可以看到关于宝马 1 系掀背车技术规格的部分可以被隔离并索引为一个独立的片段，或者像 Cindy Krum 定义的“Fraggle” ，如果做得正确并且页面有权威性，一个 <section> 甚至可能最终在谷歌搜索结果中排名第 0 ！

结论

在本文中，我们已经看到遵循一些基本规则可以使您的页面对于像搜索引擎这样的机器更容易理解：

  1. 使用简单、逻辑和一致的语义 HTML5 结构将使谷歌的模板算法能够理解每个页面的重要独特内容在哪里。任何让搜索引擎更容易的事情都必须是好的！
  2. 使用语义 HTML5 标签关注页面的真正特定内容，并排除可能对主题有害的其他内容。
  3. 良好的语义 HTML5 结构是 增强网络可访问性 的关键。别忘了，搜索引擎机器人是互联网上最大的盲人用户群体！
  4. 不要向语义标签添加任何样式。您需要能够添加、删除或移动它们，而不影响可见的页面布局。请注意，<main>、``<article> 和 <aside> 标签对于 css 显示属性的默认值为“block”，您可能也需要重置它。

更进一步

如果您想充分利用语义标记的功能，可以查看使用 <figure> 和 <figcaption> 处理图像。您还可以使用 <thead>、``<th>、``<tbody> 和 <caption> 标签在 HTML 表格中构建数据，以准确告诉机器表格的内容以及每列数据的含义：谷歌有一个 单独的表格实验数据库 ，为其提供自成一体的表格更有可能使您的表格在搜索结果中显示在第 0 位。

资源

关于 HTML5 的 维基百科页面 及新的语义元素。

语义元素的详细描述可以在 W3C Schools 网站上找到。