谷歌摘要微数据

HTML5 微数据规范是标记内容的一种方式,用于描述特定的信息类型,例如评论、人物信息或活动。每种信息都描述特定类型的项,例如人物、活动或评论。例如,活动可以包含 venue、starting time、name 和 category 属性。

你知道吗?

谷歌现在更加鼓励的是使用微数据,理由如下:

过去,我们支持结构化数据标记的三种不同标准:微数据、微格式和 RDFa。我们决定让 schema.org 仅支持一种格式,而无需网站站长在几种格式间做出取舍。此外,单一格式可基于相关数据提高搜索引擎间的一致性。虽然对于现有标准的选择仍存在争议,但我们 发现微数据能够较好地平衡 RDFa 的扩展性与微格式的简单性,因此我们采用了这种格式。

要获取微数据的概述以及 schema.org 所遵守的规范,请参阅 schema.org 入门指南

微数据使用 HTML 标记(常为 <span><div>)中的简单属性为项和属性指定简要的描述性名称。以下示例是一个简短的 HTML 文本块,显示的是 Bob Smith 的基本联系信息。

<div> 
  我的名字是 Bob Smith,但大家叫我 Smithy。我的主页是:
  <a href="http://www.example.com">www.example.com</a>
  我住在富贵新村(上海市)。我是工程师,目前在财富科技公司上班。
</div>

以下是用微数据标记的同一 HTML 内容。

<div itemscope itemtype="http://data-vocabulary.org/Person"> 
  我的名字是 <span itemprop="name">Bob Smith</span> 
  但大家叫我 <span itemprop="nickname">Smithy</span>。
  我的主页是:
  <a href="http://www.example.com" itemprop="url">www.example.com</a>
  我住在富贵新村(上海市)。我是<span itemprop="title">工程师</span>
  目前在<span itemprop="affiliation">财富科技公司</span>上班。
</div>

下面对此示例进行了详细说明。

  • 在第一行中,itemscope 表示 <div> 中的内容是个项。itemtype="http://data-vocabulary.org/Person 表示该项是人物。
  • 人物项的每个属性均使用 itemprop 属性进行标识。例如,itemprop="name" 描述人物的姓名。

嵌套实体

上例显示了 Bob Smith 的联系信息,但是不包含他的地址。下面的例子显示了相同的 HTML 内容,但其中包含 address 属性。

隐藏的内容

一般情况下,Google 不会显示隐藏的内容。也就是说,不向用户显示某些内容,而是使用隐藏文本为搜索引擎和网络应用单独标记信息。您应该标记用户访问您的网页时实际看到的文本。

本规则有几个例外情况。在某些情况下,向搜索引擎提供更详细的信息有很多好处,即使您不希望访问您网页的人看到这些信息。例如,如果餐馆的评分为 8.5 分,用户(而不是搜索引擎)会认为评分范围为 1 到 10 分。在此例中,您可以使用 meta 元素表示此信息,如下所示:

<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
   评分:<span itemprop="value">8.5</span>
   <meta itemprop="best" content="10" />
</div>

下面对此示例进行了详细说明:

  • meta 标记用于指定不在网页上显示的其他信息,在此例中,是指最高得分实际上是 10 分。该属性值使用 content 属性进行指定。

同样,以 ISO 持续时间格式提供活动持续时间也可以确保此信息正确显示在搜索结果中,如下所示:

持续时间:
<span>1.5 小时<meta itemprop="duration" content="PT1H30M" />
</span>

对于特定词汇和示例,请参见:

要检查您的标记,请使用数据化结构测试工具


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流