使用微格式标记数据

哈哈,我最喜欢的是这个微格式了,直接用HTML标签标注,不用去记那些itempro和属性名字,属性地址之类的,直接熟悉HTML的属性名字,并加以区分。不同类型的页面用不同类型的标记。

前端博客的博客和文章分类页面均有这种微格式标记数据哦。

微格式是网页上使用的简单规范(称为实体),用于描述特定的信息类型,例如评论、活动、商品、商家或人物。每个实体都有自己相应的属性。例如,人物具有姓名、地址、职位、公司和电子邮件地址等属性。

通常情况下,微格式使用 HTML 标记(常为 <span><div>)中的 class 属性为实体及其属性分配简要的描述性名称。以下示例是一个简短的 HTML 文本块,显示的是 Bob Smith 的基本联系信息。

<div>
   <img src="www.example.com/bobsmith.jpg" />
   <strong>Bob Smith</strong>
   新体验杂志社资深编辑
   江苏省南京市上海路 200 号
   邮编:210000
</div>

以下是用 hCard(人物)微格式标记的同一 HTML 内容。

<div>
   <img src="www.example.com/bobsmith.jpg" />
   <strong>Bob Smith</strong>
   <span>资深编辑</span> at <span>新体验杂志社</span>
   <span>
      <span>江苏省南京市</span>
      <span>上海路 200 号</span>, <span></span>      邮编:<span>210000</span>
   </span>
</div>

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

  • 在第一行中,class="vcard" 表示 <div> 中所含的 HTML 内容描述的是人物(用于描述人物的微格式称为 hCard,而在 HTML 中则称为 vcard。这不是拼写错误)。
  • 该示例说明了人物项的属性,例如照片、姓名、职位、组织和地址。要给 vcard 所说明的人物的属性添加标记,就需要为包含这些属性内容(如 <span><img><title>)的每个元素分配一个指明其属性的 class 属性。例如,fn 说明人物的名字;title 说明职位。(各种信息类型的“帮助”文章中均包含可以识别的属性的完整列表。)
  • 属性中可以包含其他属性。在以上示例中,属性 adr 说明人物的地址,其中包含子属性 street-addresslocalityregionpostal-code

嵌套微格式

一种微格式中包含另一种微格式的情况是比较常见的,例如,评论中包含评论者的联系信息。以下的评论示例中包含 Bob Smith 的工作职位和雇主。

<div>
   <strong>超级轰炸机游戏评论</strong>
   评论者:Bob Smith(资深编辑,新体验杂志社)
   评分:4.5 分(满分为 5 分)
   游戏很棒!从开战到轰掉敌人老巢,
   时刻都有新的挑战刺激着我。
</div>

以下是带有 hReview(评论)和 hCard(人物)微格式标记的同一 HTML 内容。为了表示评论者 Bob 的相关信息,我们将 hCard(人物)微格式嵌套在 hReview(评论)微格式中。

<div>
   <span>
      <strong><span>超级轰炸机</span> 评论</strong>
   </span>
   <span>
      评论者:<span>Bob Smith</span>, <span>资深编辑</span>
      <span>新体验杂志社</span>
   </span>
   评分:<span>4.5</span> 分(总分为 5 分)。
   <span>游戏很棒!从开战到轰掉敌人老巢,
   时刻都有新的挑战刺激着我。
</div>

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

  • 评论通过 hReview 微格式说明,写为 class="hreview"。由于这是评论,因此整个 HTML 文本块包含在带有 class="hreview" 属性的 div 中。
  • 要标识评论者,可以使用 span。但是,在本例中我们想使用 vcard(人物)微格式来提供评论者的其他信息。为此您需要将 reviewervcard 放在同一行中,并用空格分隔,例如:<span>vcard 属性 fntitleorg 说明 Bob 的名字、职位和工作单位。

如需更多示例,请参见嵌套实体

隐藏的内容

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

但是在某些情形下,向搜索引擎提供更为详细的信息是很有用的,即使您不希望访问您网页的人看到该信息。例如,提供场地的经纬度可帮助 Google 正确地将其在地图上显示出来,而采用 ISO 日期格式提供活动的日期则有助于将它正确地显示在搜索结果中。在这种情况下,您可以使用微格式值类样式。不妨考虑下面这个示例:

<span>
   <span title="2009-10-15T19:00-08:00" />
10 月 15 日晚上 7 点
</span>

<span title="2009-10-15T19:00-08:00" /> 添加到带有 class="dtstart" 标记的文本块中,丰富网页摘要的解析器就会根据 title 属性中的值来查找活动的开始日期。在不影响用户的日期显示方式的情况下,可以用 ISO 日期格式表示 title 属性中的日期。

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

要检查标记,可以使用结构化数据测试工具


关注我

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

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

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