HTML5扩展之微数据与丰富网页摘要

标签: 前端开发 HTML5 itemscope 微数据 | 发表时间:2011-12-21 13:47 | 作者:直觉
出处:http://www.kekaku.com

一、微数据是?

一个页面的内容,例如人物、事件或评论不仅要给用户看,还要让机器可识别。而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签、属性名以及特定用法等。举个简单例子,我们使用 <h1>标签包裹页面标题信息就是为了让机器识别(搜索引擎 – SEO)。

而微数据是什么呢?在我看来,微数据也是为了方便机器识别而产生的东西。其有特定的规范,有特定的格式。可以丰富搜索引擎的网页摘要。

先来看看比较官方的解释: HTML5 微数据规范是一种标记内容以描述特定类型的信息,例如评论、人物信息或事件。每种信息都描述特定类型的项,例如人物、事件或评论。例如,事件可以包含 venue、starting time、name 和 category 属性。

微数据使用 HTML 标记(常为 <span> 或 <div>)中的简单属性为项和属性指定简要的描述性名称。

上面的释义过于学术化,我们可以将其搁置一边,先看个简单的关于微数据的例子。平时,我们要在页面上显示对一个人的描述,HTML代码可能如下:

<div>
  我的名字是王富强,但大家叫我小强。我的个人首页是:
  <a href="http://www.example.com">www.example.com</a>
  我住在上海市富贵新村。我是工程师,目前在财富科技公司上班。
</div>

而如果使用针对人物的微数据标记,则HTML会如下:

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

您会发现,HTML代码量多了不少,还出现了很多自定义的属性,如 itemscope, itemtype, itemprop等。这些属性就是方面机器识别的特定的标记。其含义等依次如下:
itemscope
定义一组名值对,称为项。

itemprop=”属性名”
添加一个数据项属性。这个属性名可以是个单词或是个URL,与元素包含的文本值相关:

  • 对于大部分元素,属性名值就是元素标签里面的文本值(不是所有标签)。
  • 对于有URL属性的元素,该值就是URL(如 <img src="">, <a href="">, <object data="">等)。
  • 对于 <time>元素,该值就是 datetime=""属性。
  • 对于 <meta itemprop="" content="">, 该值就是 content=""属性。

itemref=””
允许微数据项通过指向特定ID(含有需要属性的元素)包含 非后代属性

itemtype=””
微数据定义的类型。其值为URL,扮演词汇表名称的作用。

itemid=””
允许词汇表给微数据项定义一个全局标识符,例如书的ISBN数值,在同样元素上使用 itemid作为数据项的 itemscopeitemtype属性。

二、微数据语法

itemscope和itemprop
先来个小例子:

<p itemscope>下周我要去<span itemprop="name">韩红刚</span>家拔萝卜</p>

<p>元素上的 itemscope使其成为了一个微数据项,其子元素上 itemprop属性的值 name为词汇表中的一个关键属性。一个微数据项至少有一个验证的 itemprop.

itemprop后面的名称可以是单词,也可以是URL,使用URL让这个名称全局唯一。如果使用单词的话,最好使用词汇表,这个单词在该词汇表中有定义,同样可以让名称唯一。

itemprop值
对于一些元素, itemprop值来自元素的属性,像是 datetime属性或是 content属性。还是拔萝卜的例子:

<p itemscope><time itemprop="date" datetime="2011-12-05">下周</time>我要去 <a itemprop="url" href="http://weibo.com/u/2499612703">韩红刚</a>家拔萝卜</p>

定义了两个 itemprop下的属性值 urldate,所包含的值就是一个url地址(不是元素内的文本值 韩红刚)和一个特定格式的时间。

在微数据中,下面的元素以它们的URLs为值:

  • <a href="">
  • <area href="">
  • <audio src="">
  • <embed src="">
  • <iframe src="">
  • <img src="">
  • <link href="">
  • <object data="">
  • <source src="">
  • <video src="">

相反,以下HTML5元素URL包含属性不作为属性值使用:

  • <base href="">
  • <script src="">
  • <input src="">

上面两个例子,我们可以来个简单的整合,如下:

<p itemscope><time itemprop="date" datetime="2011-12-05">下周</time>我要去 <a itemprop="url" href="http://weibo.com/u/2499612703"><span itemprop="name">韩红刚</span></a>家拔萝卜</p>

itemprop="name"嵌入在链接之中了。

嵌套项
我们可以给包含 itemprop的元素添加 itemscope插入嵌套项。

<p itemscope><span itemprop="name">五月天</span>主唱是<span itemprop="members" itemscope><span itemprop="name">阿信</span>。</span></p>

定义了一个项,有两个关键字属性: namemembers。该 name是五月天, members则是嵌套项,包含了一个值为 阿信的属性 name。注意到 members并无文本值。

像上面p标签这种父辈元素没有任何一个微数据项的微数据项称为“顶级微数据项”。微数据API返回的是顶级数据项及其对应的属性,以及其中嵌套的子数据项。

多属性
先看例子:

<span itemprop="members" itemscope>前S˙H˙E 的成员是
<span itemprop="name">任家萱</span>,
<span itemprop="name">田馥甄</span>和
<span itemprop="name">陈嘉桦</span>.</span>

项目可以包含不同值的多个属性。例如上例 name属性定义了3个值:任家萱、田馥甄和陈嘉桦。

同一个元素同样也可以有多个属性关键名称(用空格分隔),例如下面这个例子:

<p itemscope><span itemprop="name call">志玲姐</span>是个美女。</p>

“志玲姐”即是名字,又是称谓。

通过itemref页面内引用
还是先看个例子吧:

<p itemscope itemref="band-members">后天我要去看<span itemprop="name">
S˙H˙E</span>的演唱会,好兴奋哈!</p>
……
<span id="band-members" itemprop="members" itemscope>S˙H˙E 的成员是
<span itemprop="name">任家萱</span>,
<span itemprop="name">田馥甄</span>和
<span itemprop="name">陈嘉桦</span>.</span>

上面的定义通过引用ID band-members包含了 members项的三个成员名称属性,每个都是不一样的值。

使用meta添加内容
如果你想添加的文本并不是页面内容的一部分,你可以在 <meta>元素上使用 content属性: <meta itemprop="" content="">

举个小例子:

<p itemscope><span itemprop="name" itemscope>钟欣桐<meta itemprop="likes" content="twins成员"></span>摄影爱好者陈老师的粉丝。</p>

不会,有些遗憾的是,某些浏览器会自动把 <meta>元素移动到 head标签中。比较靠谱的做法是使用 itemref做页面内引用,这样即使浏览器移除了,一些工具啥的还是能够识别出微数据。具体做法如下:

<p itemscope><span itemprop="name" itemscope itemref="meta-likes">钟欣桐<meta id="meta-likes" itemprop="likes" content="twins成员"></span>摄影爱好者陈老师的粉丝。</p>

项类型(itemtype)及全局唯一名字
通过 itemtype,我们可以给微数据项指定一种类型,这个属性需要使用在含 itemscope的元素上。 itemtype的值是个URL地址,代表了微数据使用的词汇。请注意,这个地址只能是文本字符串,用来唯一标示词汇表,同时,该地址不一定非要指向真是的网页地址(当然,指向最好了)。这样我们就可以使用词汇表中的name名称作为 itemprop名称做些定义了。

例如,下面这个例子。

<p itemscope itemtype="http://schema.org/MusicGroup">后天我要去看<span itemprop="name">S˙H˙E</span>的演唱会,好兴奋哈!</p>

http://schema.org/MusicGroup词汇表中有个名为”name”的关键名称,如下截图:

词汇表截图 张鑫旭-鑫空间-鑫生活

用itemid全局标识
有时,某些项需要唯一的标识进行标识。例如书的ISBN数值,我们可以借助itemid属性,如下例子:

<p itemscope itemtype="http://vocab.example.com/book"
  itemid="urn:isbn:0321687299">
  <!-- 书信息… -->
</p>

三、微数据的力量

说了这么多,你可能会有疑问或不耐烦了:微数据这玩意,貌似蛮复杂,头疼的,看上去鸟用都没有,唉,还是按ctrl+w去微博转转吧~~

为了打消这种疑虑,有必要中间插播介绍了微数据的真正体。我们可能都知道,给元素添加额外的语义东西,可以使用自定义 data属性( data-*). 但是,自定义 data属性只是纯粹的属性,而微数据有特定的规范,有特定属性名称的词汇表,且更多是服务于现实世界,在这方面是很强大的。

说得太空太虚了吧?确实,过于学术化的说法往往不易让人理解。通俗讲,微数据就是在保证页面内容显示良好的情况下清晰而准确地勾勒出了数据的骨架与精髓,可以通过工具、API等进行方便强大的数据交互。

我们都知道,现在流行的数据交换格式是什么?没错,就是JSON。从某种意义上来讲,微数据的本质就是JSON,哦?没看出来,不急,举个例子就会知道了。

如下HTML下的微数据代码:

<section>
  <h3><a href="http://atnd.org/events/5181" title="WDE-ex Vol11『iPad
  のウェブデザイン:私たちがみつけたこと 』 : ATND">WDE-ex Vol.11 — Designing
  for iPad: Our experience so far</a></h3>
  <p>On <time datetime="2010-07-21T19:00:00+09:00">July 21st 19:00
  </time>-<time datetime="2010-07-21T20:00:00+09:00">20:00</time> at
  <span itemscope itemtype="http://schema.org/Organization">
  <a itemprop="url" href="http://www.apple.com/jp/retail/ginza/map/">
  <span itemprop="name">Apple Ginza</span></a></span>,
  <span itemscope itemtype="http://schema.org/Person">
  <a itemprop="url" href="http://informationarchitects.jp/" title="iA">
  <span itemprop="name">Oliver Reichenstein</span>, CEO of iA</a>
  </span>, will share the lessons they've learned while creating three
  iPad apps and one iPad website.</p>
</section>

日本,英文不懂没关系,机器也不懂,但是它懂微数据,你也一样。上面微数据的数据本质是什么?很乱,不是吗?但是,如果我们只关注微数据的部分: itemscope, itemprop等,你会发现什么?

我们使用 Live Microdata对上面的HTML代码 跑一下,会得到下面的JSON数据:

{
  "items": [
    {
      "type": [
        "http://schema.org/Organization"
      ],
      "properties": {
        "url": [
          "http://www.apple.com/jp/retail/ginza/map/"
        ],
        "name": [
          "Apple Ginza"
        ]
      }
    },
    {
      "type": [
        "http://schema.org/Person"
      ],
      "properties": {
        "url": [
          "http://informationarchitects.jp/"
        ],
        "name": [
          "Oliver Reichenstein"
        ]
      }
    }
  ]
}

微数据格式化JSON截图 张鑫旭-鑫空间-鑫生活

我想,您应该大致明白机器为何可以识别微数据了。由于微数据的这种数据本质特性,在web应用中,我们做一些数据交互的时候,事情就会变得奇妙而轻松。例如,你访问一个你中意的女孩子的个人主页的时候,如果使用微数据,就可以自动把她的一些信息啊联系方式啊什么的放到你的通讯录中,是不是很赞!或是在你的日历表中添加一些需要完成的事件等等。很多真实世界的应用与web应用有了更为轻松强大的结合。

四、一些词汇表介绍

这里提及的微数据词汇表有三: schema.org词汇表Google丰富摘要词汇表( www.data-vocabulary.org), WHATWG/microformats.org词汇表

我大致看了这几个词汇表,不由得心里一咯噔:妈呀,这么多,都介绍的话我这周末只能抱电脑了。因此,这里只大致提点部分提纲性质内容。

事件(Events) 人物(Person) 组织或业务(Organisation or business) 日历(Calendar) 预览(Review) 许可证(License) 产品和服务(Products and services) Atom提要(Atom feed)
  • hAtomhttp://microformats.org/wiki/hatom
食谱(Recipes)

Google丰富摘要词汇支持微格式和RDFa这是除了微数据之外其他两个增加内容语义的方法。除了这种差异外,基本上与schema.org是想匹配的,除非他们在 itemtype中使用 www.data-vocabulary.org代替 schema.org。尽管google仍然支持这类词汇,但是最新的schema.org提供了更多的词汇,这些词汇还被Bing和Yahoo支持,因此在选择微数据上schema.org可以让你笑得更久。不过您可能仍然希望签出“富文档摘要”,因为它们代码更简单,书写的时候要比schema.org来得更好。

五、浏览器支持

)
微数据浏览器支持情况 (截止 2011年8月16日
Browser Support
Chrome 不支持
Safari 不支持
Firefox 进行中…
Opera 最快版本12.00-1033
Internet Explorer 不支持

虽然浏览器目前对微数据的支持基本上就是大鸭蛋,但是,由于搜索引擎还有一些三方工具都鸟他,微数据目前还是很有应用价值的。例如Bing, Google, 以及Yahoo使用schema.org词汇表定义的微数据显示搜索结果(特定格式的搜索结果,即将展示)。

六、丰富网页摘要应用

先看国内应用微数据的实例。

我们打开谷哥哥,输入“香口鱼”,轻轻地回车,稍等片刻,得到下面截图:

google与微数据丰富网页摘要 张鑫旭-鑫空间-鑫生活

我们对比可以发现,大众点评网搜索显示的样子跟下面的芸芸结果不一样,有评分显示,评论数,日期等。怎么回事?莫非点评给Google塞了很多票子。非也,我们点击链接进入该页面,右键查看源代码,就会发现如下代码:

源代码中微数据展示 张鑫旭-鑫空间-鑫生活

上面截图各种标注的部分就是本文多次出现了微数据特有的关键属性,名称等。也就是说,点评的搜索结果的显示之所以不同,是因为其应用了HTML5之微数据,使用的词汇表是相对简单的 Google丰富网页摘要词汇表中的。

关于具体怎么使用,Google提供了详尽的使用示例(包括代码展示),而且是中文版的。就是上面这段末尾的链接。我想我没有必要重复详述。不过,有些同行可能就是单纯地感兴趣,不想跳来跳去,我还是依葫芦画瓢,做了个很简单的微格式应用例子。

您可以狠狠地点击这里: 微数据示例之评论demo

其实demo没有什么好看的,人眼所见,并非机器所见,Google提供了一个丰富摘要测试的工具(仍测试阶段): Rich Snippets Testing Tool

例如上面测试结果您可以狠狠地点击下面这个链接查看: 微数据评论之丰富网页摘要测试

丰富网页摘要测试工具效果截图 张鑫旭-鑫空间-鑫生活

是否有所启发呢?想让您的网页在Google,或是Bing下面的展示丰富而与众不同吗?微数据,就是你的选择!!

七、延伸阅读

本文主要参考: Extending HTML5 — Microdata

精力有限,无法同步更新,见谅!欢迎吐槽。

VIA: http://www.zhangxinxu.com/wordpress/?p=2058

您可能也喜欢:

45个基于HTML5结构的网站案例

HTML5&Flash之粗知浅见

3 款强大的 HTML5 游戏快速开发工具推荐

HTML5目前无法帮你实现的五件事

10个精美的HTML5企业网站
无觅

相关 [html5 扩展 数据] 推荐:

HTML5扩展之微数据与丰富网页摘要

- - 可咔酷 | 网络杂货铺
一个页面的内容,例如人物、事件或评论不仅要给用户看,还要让机器可识别. 而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签、属性名以及特定用法等. 举个简单例子,我们使用

标签包裹页面标题信息就是为了让机器识别(搜索引擎 – SEO). 在我看来,微数据也是为了方便机器识别而产生的东西.

丰富网页摘要——HTML5中的“微数据”(MicroData)

- - 蓝飞技术博客 —— 关注前沿,追求卓越。
大多数网络管理员都熟悉网页上的HTML标签,通常情况下,HTML标记告诉浏览器如何显示在标签中包含的信息. 例如,

阿凡达

告诉浏览器显示的文本字符串“阿凡达”在标题1格式. 然而,HTML标记不提供任何有关文本字符串意味着什么,“阿凡达”可能是指取得巨大成功的3D电影的信息,或者它可以指一张纸娃娃系统的图片,这使得搜索引擎难以智能地理解网页中的具体内容.

应用 HTML5 的 WebSocket 实现 BiDirection 数据交换

- - IBM developerWorks 中国 : 文档库
HTML5 是新一代的 Web 标准. 虽然 HTML5 标准还没有最终确定但是它已然成为主流,各大厂商都开始提前实现其草案中的功能. HTML5 提供了很多新特征,比如 Canvas、离线存储、多线程、视频标签等等. 其中一个很重要的特征是 WebSocket,它提供了一种双向全双工的服务器和客户端通信的功能.

HTML5 Web Database 数据库的使用方法

- - 博客园_首页
HTML5 Web Database 数据库的使用方法. //openDatabase方法打开已经存在的数据库,如果不存在将会创建一个数据库,参数分别是 数据库的名称,版本,数据库的描述,和数据大小. var db = window.openDatabase("mydatabase", "1.0", "我的数据库描述", 20000); 数据库的SQL语句的使用方法.

HTML5如何用window.postMessage在网页间传递数据

- - HTML5资源教程
估计很少人知道 HTML5 APIS里有一个window.postMessage API. window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息. 基本上,它就像是跨域的AJAX,但不是浏览器跟服务器之间交互,而是在两个客户端之间通信. 让我们来看一下 window.postMessage是如何工作的.

用HTML5里的window.postMessage在两个网页间传递数据

- - WebHek
估计很少人知道HTML5 APIS里有一个 window.postMessage API. window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息. 基本上,它就像是跨域的AJAX,但不是浏览器跟服务器之间交互,而是在两个客户端之间通信. 让我们来看一下 window.postMessage是如何工作的.

HTML5中微数据在搜索引擎中的使用举例

- - CSDN博客Web前端推荐文章
做网站优化已经快一个月了,对于seo的一般技术也有了一些了解,前些天开始使用谷歌的网站站长工具,在里面发现很多百度站长工具里面不曾有的内容,其中“结构化数据”这一项是出现在 “优化”栏里面,可想而知,这个结构化数据会不会是争对谷歌搜索的一个优化的方法呢. 添加自己的站 进入这个页面,发现它提示我的网站上未检测到任何结构化数据,但是这么一个缺少概念的词让我们这种网站优化新手怎么理解呢.

HTML5数据可视化第二弹:打造最美3D机房

- - JavaScript - Web前端 - ITeye博客
最近项目开发任务告一段落,刚好有时间整理这大半年的一些成果. 使用html5时间还不久,对js的认识还不够深入. 没办法,以前一直搞java,对js的一些语言特性和概念一时还转换不过来. 上一篇 第一弹介绍了项目中做的一个彩虹爆炸图,主要用了 html5的canvas的2d绘制技术. 这一回我想介绍一下项目中的一个亮点技术:html5的3D,以及如何用它打造精美的3D机房监控系统.

IP地理位置数据库 中国地区扩展版 120621

- - eMule Fans 电骡爱好者
这里的 IP地理位置数据库 中国地区扩展版,是 我们在webhosting.info的数据库基础上,进行了简体中文的汉化,并将 QQ IP 数据库(QQWry.Dat)纯真版中的中国地区详细IP数据库导入,而结合得到的. 更新时间2012年6月21日,版本号120621. IP to Country 数据库文件ip-to-country.csv,可用于Xtreme、MorphXT等许多支持IP2C功能的 eMule Mod软件.

将安全开发流程扩展到云和大数据

- - 博客园_知识库
  英文原文: Extend your secure development process to the cloud and big data.   简介: 云计算和大数据正在改变着企业. 了解必须将这些新技术融入您的安全开发流程的原因,并了解什么是安全开发流程、云计算和大数据技术的组成部分,以及它们存在哪些应用程序安全风险和如何减轻这些风险.