使用结构化数据增强搜索引擎优化

Avatar of Tristram Tolliday
Tristram Tolliday

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!

SEO 通常被认为是网络上的蛇油。您在搜索如何改进您的 SEO 时,滚动浏览过多少次吸引眼球的标题?似乎每个人都知道一些“神奇”的疗法,可以将您排在搜索结果的榜首,并将浏览量转化为转化率。在如此多的噪音中筛选,可能会让我们错过一些可能就在我们鼻子下面的真正宝石。

在本文中,我们将介绍其中的一颗宝石:结构化数据

我们知道在网站开发时,需要一个 SEO 必备清单。它包括诸如强劲的 <title>,长长的 <meta> 标签列表,以及在图像上使用描述性的 alt 属性(这对可访问性来说是双赢的)。对任何网站进行快速检查 使用 Lighthouse 将会显示出更多提示和最佳实践,以充分发挥内容的 SEO 潜力。

然而,搜索引擎越来越智能,开始超越过去那些算法抓取技术。众所周知,Google、亚马逊和 Microsoft 都在机器学习方面投入了大量资金,因此,他们需要干净的数据来为他们的搜索 AI 提供支持。

这就是架构概念发挥作用的地方。事实上,正是来自 Google 和 Microsoft(以及雅虎和 Yandex)的资金,促成了 schema.org 的成立,这是一个网站和社区,旨在推动他们的格式——更常见的是被称为结构化数据——向前发展,以便他们和其他搜索引擎能够以更有用和更具吸引力的方式帮助展示内容。

那么,什么是结构化数据?

结构化数据描述了数字文档(即网站、电子邮件等)的内容。它在整个网络中使用,并且像 <meta> 标签一样,是搜索引擎用于读取内容的不可见信息层。

结构化数据有三种形式:微数据RDFaJSON-LD。微数据和 RDF 都直接注入到文档的 HTML 元素中,用机器可读的指针来标注页面中每个相关的元素。例如,在产品上使用微数据属性的示例,直接来自 schema.org 文档

<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Kenmore White 17" Microwave</span>
  <img itemprop="image" src="kenmore-microwave-17in.jpg" alt='Kenmore 17" Microwave' />
  <div itemprop="aggregateRating"
    itemscope itemtype="http://schema.org/AggregateRating">
   Rated <span itemprop="ratingValue">3.5</span>/5
   based on <span itemprop="reviewCount">11</span> customer reviews
  </div>
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <!--price is 1000, a number, with locale-specific thousands separator
    and decimal mark, and the $ character is marked up with the
    machine-readable code "USD" -->
    <span itemprop="priceCurrency" content="USD">$</span><span
          itemprop="price" content="1000.00">1,000.00</span>
    <link itemprop="availability" href="http://schema.org/InStock" />In stock
  </div>
  Product description:
  <span itemprop="description">0.7 cubic feet countertop microwave.
  Has six preset cooking categories and convenience features like
  Add-A-Minute and Child Lock.</span>
  Customer reviews:
  <div itemprop="review" itemscope itemtype="http://schema.org/Review">
    <span itemprop="name">Not a happy camper</span> -
    by <span itemprop="author">Ellie</span>,
    <meta itemprop="datePublished" content="2011-04-01">April 1, 2011
    <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
      <meta itemprop="worstRating" content = "1">
      <span itemprop="ratingValue">1</span>/
      <span itemprop="bestRating">5</span>stars
    </div>
    <span itemprop="description">The lamp burned out and now I have to replace
    it. </span>
  </div>
  <div itemprop="review" itemscope itemtype="http://schema.org/Review">
    <span itemprop="name">Value purchase</span> -
    by <span itemprop="author">Lucas</span>,
    <meta itemprop="datePublished" content="2011-03-25">March 25, 2011
    <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
      <meta itemprop="worstRating" content = "1"/>
      <span itemprop="ratingValue">4</span>/
      <span itemprop="bestRating">5</span>stars
    </div>
    <span itemprop="description">Great microwave for the price. It is small and
    fits in my apartment.</span>
  </div>
  <!-- etc. -->
</div>

如果这看起来像是膨胀的标记,它确实有点膨胀。但如果您喜欢将所有数据集中在一个地方,那么它肯定是有益的。

另一方面,JSON-LD 通常位于 <script> 标签中,并在一组数据块中描述相同的属性。同样,来自文档

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Product",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "3.5",
    "reviewCount": "11"
  },
  "description": "0.7 cubic feet countertop microwave. Has six preset cooking categories and convenience features like Add-A-Minute and Child Lock.",
  "name": "Kenmore White 17\" Microwave",
  "image": "kenmore-microwave-17in.jpg",
  "offers": {
    "@type": "Offer",
    "availability": "http://schema.org/InStock",
    "price": "55.00",
    "priceCurrency": "USD"
  },
  "review": [
    {
      "@type": "Review",
      "author": "Ellie",
      "datePublished": "2011-04-01",
      "description": "The lamp burned out and now I have to replace it.",
      "name": "Not a happy camper",
      "reviewRating": {
        "@type": "Rating",
        "bestRating": "5",
        "ratingValue": "1",
        "worstRating": "1"
      }
    },
    {
      "@type": "Review",
      "author": "Lucas",
      "datePublished": "2011-03-25",
      "description": "Great microwave for the price. It is small and fits in my apartment.",
      "name": "Value purchase",
      "reviewRating": {
        "@type": "Rating",
        "bestRating": "5",
        "ratingValue": "4",
        "worstRating": "1"
      }
    }
  ]
}
</script>

这是我个人偏好的方式,因为它被视为您的内容的小型外部说明手册,就像 JavaScript 用于脚本,CSS 用于您的样式一样,一切都愉快地自包含。对于某些类型的架构,JSON-LD 变得至关重要,因为页面的内容与结构化数据的内容不同(例如,查看 speakable 属性,目前处于测试阶段)。

Google 允许从外部来源 获取结构化数据,而不是强制使用内联脚本(这在以前是令人沮丧的不可能),这为在网络上实施 JSON-LD 提供了一个受欢迎的介绍。这可以通过开发人员完成,也可以在 Google 标记管理器中完成。

结构化数据对您意味着什么

除了让搜索引擎爬虫更轻松地读取您的页面之外?两个字:丰富摘要。丰富摘要是高度可视化的模块,它们往往出现在搜索引擎的顶部,有时被称为结果中的“位置 0”,显示在第一个搜索结果之上。以下是在 Google 中搜索“蓝莓派”的简单示例

Google search results showing three recipes displayed as cards at the top, a card of nutritional facts in the right sidebar, a first result showing user reviews, and finally, the search results.
查看上面那三个食谱——以及右侧栏的内容——在使用结构化数据中细节的结果列表之前显示出来。

即使是第一个结果也是一个丰富摘要!如您所见,使用结构化数据是您在搜索结果页面中获得丰富摘要的门票。并且,并非为了激发您的害怕错过心理,但任何没有在丰富摘要中显示的网站已经面临着跌入“折叠以下”区域的风险。请注意,第二个自然结果勉强挤进了画面。

不要害怕,亲爱的开发者们!向网站添加和测试结构化数据是一个简单且相对轻松的过程。一旦您掌握了诀窍,您就会将它添加到您可以想象到的每个可能的位置,甚至电子邮件中。

值得注意的是,结构化数据并不是进入丰富摘要的唯一途径。搜索引擎有时可以从您的 HTML 中确定足够的信息来显示一些摘要,但利用它会将成功几率提高。此外,使用结构化数据可以让您控制内容的显示方式,而不是让 Google 或者类似的机构为您决定。

结构化数据的类型

结构化数据不仅仅是食谱。以下列出了 Google 支持的结构化数据类型 的完整列表。(剧透警告:几乎是所有类型的内容。)

  • 文章
  • 书籍(支持有限)
  • 面包屑导航
  • 轮播
  • 课程
  • COVID-19 公告(测试版)
  • 评论(支持有限)
  • 数据集
  • 雇主汇总评分
  • 预计薪资
  • 活动
  • 事实核查
  • 常见问题解答
  • 操作指南
  • 图像许可元数据(测试版)
  • 职位发布
  • 本地商家
  • 徽标
  • 电影
  • 产品
  • 问答
  • 食谱
  • 评论摘要
  • 网站链接搜索框
  • 软件应用
  • 可读性(测试版)
  • 订阅和付费内容
  • 视频

是的,这里有很多选择!但随之而来的是许多增强网站内容并利用这些搜索引擎功能的机会。

使用结构化数据

查找适合您的项目的结构化数据的最简单方法是浏览 Google 的搜索目录。高级用户可能希望浏览 schema.org 上的内容,但我警告您,这将是一个可怕的兔子洞,值得您深入探索。

让我们从一个相当简单的示例开始:Logo 徽标数据类型。它很简单,因为我们真正需要的只是一个网站 URL 和图像的源 URL,以及一些基本细节,以帮助搜索引擎知道它们正在查看的是一个徽标。以下是我们的 JSON-LD

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "Example",
    "url": "http://www.example.com",
    "logo": "http://www.example.com/images/logo.png"
  }
</script>

首先,我们有 <script> 标签本身,它告诉搜索引擎它即将使用一些 JSON-LD。

从那里,我们有五个属性

  • @context: 这包含在所有结构化数据对象中,无论其类型是什么。它告诉搜索引擎 JSON-LD 包含由 schema.org 规范定义的数据。
  • @type: 这是对象的引用类型。它用于识别我们正在处理的内容类型。在这种情况下,它是“组织”,它 具有一系列的子属性,它们在后面跟着。
  • name: 这是包含组织名称的子属性。
  • url: 这是包含组织网站地址的子属性。
  • logo: 这是包含组织徽标图像文件的路径的子属性。对于 Google 来说,要将其视为徽标,它必须至少为 112⨉112 像素,并且必须为 JPG、PNG 或 GIF 格式。抱歉,目前不支持 SVG。

一个页面可以具有多个结构化数据类型。这意味着可以混合匹配内容。

测试结构化数据

你看,将结构化数据放入页面并不难,对吧?但是,一旦我们有了它,我们可能应该检查一下它是否真的有效。

GoogleBingYandex(需要登录)都提供了测试工具。Google 甚至专门针对 验证电子邮件中的结构化数据 提供了一个工具。在大多数情况下,只需输入网站 URL,工具就会启动测试,并显示它识别的对象、它看到的属性以及需要查看的任何错误或警告。

Showing Google's testing results where the JSON-LD is displayed on the left of the screen and the details of it on the right.
Google 结构化数据测试工具 会获取标记并显示它识别的信息。

下一步是通过 Google Search Console 确认结构化数据在您的实时网站上是否可访问。您可能需要设置一个帐户并在使用特定搜索引擎的控制台之前验证您的网站,但检查数据 - 再次 - 就像在网站 URL 中输入内容并使用检查工具来检查网站是否确实处于活动状态一样。当搜索引擎访问它时,发送数据。

如果结构化数据实现正确,它将显示。在 Google 的情况下,它位于“增强功能”部分,旁边有一个大大的复选标记。

Google Search Console screenshot showing Google can find the site and that it recognizes search enhancements below that. In this case, it is showing that the Logo structured data type was found and is supported.
请注意最后检测到的“徽标” - 它有效!

但是等等!我做了所有这些,什么也没发生......怎么回事?

与所有搜索引擎优化一样,在结构化数据的使用方式或时间方面,没有保证或时间范围。您的内容的富摘要可能需要很长时间才能生效 - 几天、几周甚至几个月!我知道,被蒙在鼓里很糟糕。不幸的是,这是一个等待游戏。


希望这能让您很好地了解结构化数据是什么以及如何利用它来利用搜索引擎提供的突出显示内容的功能。

关于帮助优化网站以供搜索引擎使用的建议、技巧和窍门绝对不少。虽然其中很多内容都与<head> 中包含的内容或内容的编写方式有关,但开发人员可以做一些实际的事情来产生影响。结构化数据绝对是其中之一,值得探索以从内容中获得最大价值。

结构化数据是您的不二之选。当然,虽然搜索引擎只支持 schema.org 词汇表的选定部分,但它们不断发展和扩展对该词汇表的支持。为什么不从 在时事通讯中添加电子邮件链接的结构化数据 开始?或者也许您想尝试一些不同的东西,比如 定义站点链接搜索框(这非常元但非常酷)。或者,嘿,添加一个 Pinterest 的食谱。有人要蓝莓派吗?