使用 Schema.org 和 Rich Snippets 提升您的搜索结果

结构化数据可以以更具视觉吸引力和信息量的方式呈现您的搜索结果。根据Searchmetrics 的一项研究，向网站添加结构化数据标记可使 Google 搜索结果增加 36%。

结构化数据标记在 Google、Bing 和其他搜索引擎中呈现为丰富网页摘要。丰富网页摘要是增强的搜索结果，可向搜索引擎网页摘要添加额外信息，例如照片、价格、用户评级和其他特征。

结构化数据导致更好的搜索结果有两个主要原因：

它通过使搜索引擎更容易理解内容来扩展 HTML 语义。
Rich snippets——结构化数据的搜索引擎呈现——比常规的、信息量较少的搜索结果具有更好的点击率。

推荐读物：
深入了解正确的 HTML5 语义

Schema.org 词汇表

如果您想为自己的网站添加丰富网页摘要，则需要将结构化数据添加到您的 HTML 标记中。结构化数据使用schema.org词汇表，让您可以告知搜索引擎您内容的性质。

Schema.org是Google、Bing 和 Yahoo 的倡议，旨在提供一组用于描述不同种类的 Web 内容的模式，以便搜索引擎可以更好地理解它。

Schema.org 词汇表按两级层次结构组织：

类型：不同种类的网页内容，它们被安排成自己的层次结构
属性：每种类型都有一定数量的属性

第一层类型

Thing是schema.org 词汇表中最通用的项目，它是所有其他类型的祖先。

二级类型

Types 的第二层更具体一些，包含Event、Action、Intangible、CreativeWork、Place、Organization、Product和Person类型。还有一个单独的二级事物，可作为schema.org 扩展使用；它是MedicalEntity类型。

第三层类型

每个二级类型包含一些或许多三级类型，例如 CreativeWork 的子类型之一是评论类型。请注意，更具体的类型（第二级和第三级）继承其父级（如果是第三级则为祖父级）的属性。

下图发布在官方架构博客上，它可视化了 schema.org 词汇表的层次结构。

找到您需要的架构

浏览词汇表以找到您需要的模式。例如，对于菜谱丰富网页摘要，您需要使用作为 CreativeWork 子项的菜谱类型。它有许多属性，例如cookTime、cookingMethod、recipeIngredient等，而且它还继承了其父项 (CreativeWork) 和祖父项 (Thing) 的属性。

Schema.org 是一个社区项目，经常扩展，并定期发布新版本。如果你找不到你需要的模式，你可以向Schema.org 社区提出，你也可以为他们的Github 项目做贡献。

将结构化数据添加到您的标记中

那么如何将模式添加到前端代码中呢？Schema.org 可以使用三种不同的格式。您需要选择一个，以便将结构化数据标记添加到您的站点。虽然理论上您可以在同一个站点上使用多种格式，但这会损害代码的可读性和可维护性，因此这不是一个好的做法。

结构化数据标记的三种主要格式如下：

微数据：这是一种Web 标准，通过引入新属性（例如itemprop. 官方 schema.org 网站有一个关于如何使用微数据的很好的教程，所以如果您已经熟悉 HTML，这种格式可能是一个不错的选择。
RDFa：RDFa的全称是Resource Description Framework in Attributes，它是 W3C 的推荐标准，它借助一组特定的属性来扩展 HTML、XML 和 SVG 文档。Facebook 的Open Graph Protocol也是基于 RDFa 的，因此您可能已经遇到过它。有一个适合初学者的RDFa Lite版本，还有一个完整版本，它提供了许多选项来以精心设计的方式处理结构化数据。
JSON-LD：虽然其他两个选项扩展了 HTML 标记，但JSON-LD使用JSON语法。JSON-LD 代表JavaScript Object Notation for Linked Data ，这是Google Developers 推荐的格式，根据他们的观点，“结构化数据标记最容易用 JSON-LD 格式表示”。您无需成为 JavaScript 专家即可使用 JSON，因为它是一个使用名称-值对的简单符号系统。

借助每个 schema.org 类型页面底部的便捷选项卡，您可以轻松地比较这三种格式。

通过仔细研究示例，您可以轻松了解每种格式的工作原理，并在您自己的站点上使用其中一种格式。

您需要添加到代码中的结构化数据标记基于 schema.org 词汇表。如果您选择微数据或 RDFa，您需要将额外的属性添加到常规 HTML 标记中。

例如，对于微数据，您可以通过使用属性将类型的名称添加到容器中itemscope itemtype=""，并将每个属性添加到该itemprop属性中。这是一个非常简单的例子：

1个
2个
3个
4个
5个

<div itemscope itemtype="https://schema.org/Recipe">
  <h2 itemprop="name">My Recipe</h2>
  <img itemprop="image" src="image.jpg" alt="Recipe Image">
  <p itemprop="description">Description of Recipe</p>
</div>

和使用 RDFa 的相同示例，值得注意您需要在此处使用的不同属性：

1个
2个
3个
4个
5个

<div vocab="https://schema.org/" typeof="Recipe">
  <h2 property="name">My Recipe</h2>
  <img property="image" src="image.jpg" alt="Recipe Image">
  <p property="description">Description of Recipe</p>
</div>

如果选择JSON-LD 格式，则需要将代码放在HTML 页面头部的标记内。<script type="application/ld+json"></script>上面的示例将如下所示：

1个
2个
3个
4个
5个
6个
7
8个
9

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Recipe",
  "name": "My Recipe",
  "image": "image.jpg",
  "description": "Description of Recipe"
}
</script>

使用结构化数据的技巧

测试您的结构化数据标记

在将结构化数据标记添加到您的站点之前，您可以使用 Google 的结构化数据测试工具对其进行快速测试。这样您就可以快速找到问题（如果有）。

利用 Google 知识图卡

Google 不仅将结构化数据用于丰富网页摘要，而且如果您是某种内容类型的权威，您的内容也可能出现在某些搜索引擎结果页面右侧显示的其中一张知识图卡中.

请注意，您无法让 Google 为您的内容显示知识图卡，但如果您的结构化数据标记设置正确，则有可能。

Google 使用 Facebook 的结构化数据标记在知识图谱中显示额外信息。

使用 Google Rich Cards

2016 年 5 月，Google推出了Rich Cards，它是“当前 Rich Snippets 格式的升级版”，并提供以轮播形式呈现的引人入胜的移动搜索结果，可以通过左右滚动来浏览。Google Rich Cards 还使用结构化数据标记和 schema.org 词汇表。

将结构化数据添加到您的电子邮件中

您可以在电子邮件中使用结构化数据标记来为收件人触发Google Now Cards ，Google Developers 有一个很好的教程介绍如何操作。

动态生成结构化数据

可以使用Google Tag Manager动态生成JSON-LD 格式的结构化数据，Moz.com教您如何做。