使用 RDFa 标记内容

RDFa 是标记内容的一种方式,用于描述特定的信息类型,如餐馆评论、活动、人物或商品详情。这些信息类型被称为实体。每个实体都有多个属性。例如,人物具有姓名、地址、职位、公司和电子邮件地址等属性。

如果你细心的查看前端博客的源码,你就会发现本站的面包屑里面是用这种RDFa标记了微数据的。本站的面包屑同时也已经被谷歌搜索引擎所认可了哦。

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

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

以下是带有 RDFa 标记的同一 HTML 内容。

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

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

  • 该示例的开头为使用 xmlns 的命名空间声明,表示指定词汇表(实体及其组件列表)所在的命名空间。您可以随时使用 xmlns:v="http://rdf.data-vocabulary.org/#" 命名空间声明对包含人物、评论、商品或地点数据的网页进行标记。请务必使用结尾斜线和 # 号 (xmlns:v="http://rdf.data-vocabulary.org/#")。
  • 同样,第一行中的 typeof="v:Person" 表示所标记的内容代表的是人物。typeof 属性名称带有前缀 v: (typeof="v:Person“)
  • 该人物的各个属性(例如其姓名或昵称)均用 property 进行标记。属性名称带有前缀 v: (<span property="v:nickname">)。
  • 要显示网址,请使用 rel 代替 property,例如:<a href="http://www.example.com" rel="v:url">www.example.com</a>。请务必带上前缀 v"rel" 用于描述两个实体之间的关系,本例中指的是人物实体和网页实体之间的关系。

嵌套项

以上示例显示的是 Bob Smith 的联系信息。其中包含了他的地址,但是没有指明他与该地址之间的关系。

在一种信息类型中包含另一种信息类型是很常见的。在本例中,我们想将 Bob 的地址信息 (typeof="v:Address") 加入到 typeof="v:Person" 实体中。因此,我们在此使用 rel 表示 Bob(实体 v:Person)与其地址(实体 v:Address)之间的关系。然后,我们使用 <span typeof="v:Address"></span> 包含实际的地址实体。

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

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

隐藏的内容

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

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

在此例中,您可以使用 content 属性表示丰富网页摘要的解析器应该使用这个属性值来查找活动的开始日期。

<span property="v:dtstart" content="2009-10-15T19:00-08:00">2009 年 10 月 15 日晚上 7 点</span>

关注我

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

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

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