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

标签: 网页 摘要 html5 | 发表时间:2012-08-19 03:11 | 作者:蓝飞
出处:http://www.clanfei.com/

什么是“微数据”

大多数网络管理员都熟悉网页上的HTML标签,通常情况下,HTML标记告诉浏览器如何显示在标签中包含的信息。 例如, <h1>阿凡达</h1>告诉浏览器显示的文本字符串“阿凡达”在标题1格式。然而,HTML标记不提供任何有关文本字符串意味着什么,“阿凡达”可能是指取得巨大成功的3D电影的信息,或者它可以指一张纸娃娃系统的图片,这使得搜索引擎难以智能地理解网页中的具体内容。

微数据的作用

微数据对于普通的浏览者来说作用并不大,微数据的存在也并不会影响页面的浏览效果。网页中,同一种信息的表现方式可能有无数种,人们可以在阅读网页的时候理解网页的潜在意义,但搜索引擎无法很容易地理解到这个网页讨论的内容,如果有一个标签能够说:“嘿,搜索引擎,这里的信息是在讨论某个影片,或地方,或人,或视频”的话,可以帮助搜索引擎识更有效地别网页包含信息的具体意义。HTML5中的微数据正可以做到这一点。

微数据的例子

如果你有一个关于电影《阿凡达》的电影预告页面,其中包含了类型、导演以及一个通向预告片页面的链接,您的HTML代码可能看起来像这样:
  
  1. <div>
  2. <h1>阿凡达</h1>
  3. <span>导演:詹姆斯·卡梅隆(生于 1954年8月16日)</span>
  4. <span>类型:科幻</span>
  5. <a href="../movies/avatar-theatrical-trailer.html">电影片</a>
  6. </div>
我们为它添加微数据描述之后的代码如下:
  
  1. <div itemscope itemtype ="http://schema.org/Movie">
  2. <h1 itemprop="name">阿凡达</h1>
  3. <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  4. 导演:<span itemprop="name">詹姆斯·卡梅隆</span> (生于 <span itemprop="birthDate">1954年8月16日)</span>
  5. </div>
  6. 类型:<span itemprop="genre">科幻</span>
  7. <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">电影片</a>
  8. </div>

微数据的语法

信息块加入 itemscope属性,表示该元素中描述了某种类型的微数据,而使用itemtype属性来表示该信息的类型,如人物类型的微数据:
  
  1. <div itemscope itemtype="http://data-vocabulary.org/Person"></div>
信息的每个属性使用 itemprop 属性进行标识:
  
  1. <span itemprop="nickname">蓝飞</span>
某些隐藏的信息可以使用带content属性的meta标签来表示,如:
  
  1. <meta itemprop="best" content="10" />
日期或时间类信息使用 ISO日期格式表示,如:
  
  1. <time itemprop="startDate" datetime="2009-10-15T19:00-08:00">2009 年 10 月 15 日晚上 7 点</time>
微数据可以嵌套,如:
  
  1. <div itemscope itemtype ="http://schema.org/Movie">
  2. <h1 itemprop="name">阿凡达</h1>
  3. <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  4. 导演:<span itemprop="name">詹姆斯·卡梅隆</span> (生于<span itemprop="birthDate">1954年8月16日)</span>
  5. </div>
  6. 类型:<span itemprop="genre">科幻</span>
  7. <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">预告片</a>
  8. </div>
部分元素使用URL属性值作为微数据的内容:
  
  1. <a href="">
  2. <area href="">
  3. <audio src="">
  4. <embed src="">
  5. <iframe src="">
  6. <img src="">
  7. <link href="">
  8. <object data="">
  9. <source src="">
  10. <video src="">
相反,某些元素的URL属性不作为微数据内容:
  
  1. <base href="">
  2. <script src="">
  3. <input src="">

常用的微数据的类型

  • 事件:http://data-vocabulary.org/Event
  • 组织:http://data-vocabulary.org/Organization
  • 人物:http://data-vocabulary.org/Person
  • 产品:http://data-vocabulary.org/Product
  • 评论:http://data-vocabulary.org/Review
完整的微数据类型请参考: http://schema.org/docs/full.html

测试页面中的微数据

Google提供了一个丰富摘要测试的工具(仍测试阶段): Rich Snippets Testing Tool

相关 [网页 摘要 html5] 推荐:

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

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

阿凡达

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

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

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

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

Google丰富网页摘要教程

- - 月光博客
  Google的丰富网页摘要可以帮助Google搜索用户更为迅速地确定某一网站是否包含他们感兴趣的信息. Google之前已为购物、食谱、评论、视频、音乐以及活动推出了丰富网页摘要. 今天我就介绍一下丰富网页摘要在普通网站SEO优化上的使用.   对于博客来说,有两个主要的丰富网页摘要功能,一个是目录分类摘要功能,一个是作者摘要功能.

丰富网页摘要指南

- - Google China Blog
发表者:Jeremy Lubin,用户体验专家;Pierre Far,网站管理员趋势分析师. 原文: Rich snippets guidelines. 转载自: 谷歌中文网站管理员博客. 发布时间:2012年10月17日 下午 05:12:00. 传统纯文本的搜索结果网页摘要的目的是总结我们的搜索结果中某个页面的内容.

HTML5和CSS3:网页设计的框架

- 壮壮爱 - 译言-每日精品译文推荐
来源HTML5 and CSS3: Wireframing in the final product. 框架是Photoshop和网页经典的比较之处. 现有的框架和原型工具不能准确体现网站的需求. 静态设计的网站不能在web浏览器上浏览. 而且当你完成网站最终建设,网页上一些元素看起来和草稿中相对应元素不完全一样,客户端会发现那些字体定位上的细微的区别.

软件应用的丰富网页摘要

- rokey - Google 黑板报 - Google (谷歌)中国的博客网志,走近我们的产品、技术和文化
发表者:Alejandro Goyen,产品经理. 原文:Introducing: Application Rich Snippets. 发布时间:2011年9月27日 下午 03:01:00. 丰富网页摘要可以帮助用户更为迅速地确定某一网站是否包含他们感兴趣的信息. 我们先前已为购物、食谱、评论、视频以及活动推出了丰富网页摘要,不久前,又推出了音乐丰富网页摘要.

全新的音乐丰富网页摘要格式

- 冰仔 - Google 黑板报 - Google (谷歌)中国的博客网志,走近我们的产品、技术和文化
发表者:Gideon Wald,产品经理助理. 原文A new rich snippets format for music. 转载自:谷歌中文网站站长博客. 发布时间:2011年9月1日 上午 11:03:00. 自我们于2009年推出丰富网页摘要以来,我们已经为大量不同类型的内容创建了丰富网页摘要格式,例如事件、人物及评论,从而向用户展示他们在网站上所查找的内容的相关信息.

Radi: Mac上的HTML5可视化网页编辑器

- 虫虫 - 36氪
Radi是一个Mac平台上的网页制作工具,以用来制作各种可视化内容,比如图片、动画、视频、曲线图、JavaScript等. 有了Radi,即便不会写代码你也可以制作HTML5网页, Radi从一开始就可以让你充分利用HTML5的功能,比如多媒体支持和即时图案等,对video 和canvas 元素的支持非常好.

基于HTML5 的网页APP时代即将到来?

- Feng - Tech2IPO
去年的这个时候我发博文表示我很看好 HTML5 移动网页APP的前景. 网页上的APP时代超过了我之前的预想. Kindle 已经可以再浏览器中使用了,下面是在safari 上我的图书馆:. 和Kindle  APP一样,我也可以在线下载后阅读. 我的朋友Etsy也在 Android推出了她的 HTML5 主题页面,这是在我手机上的页面效果:.

Adobe 发布 HTML5 网页动画工具 Adobe Edge

- Joji - ITeye资讯频道
    Flash VS HTML5之争似乎即将见分晓. Adobe刚刚发布了一个新的工具Adobe Edge,允许设计师通过HTML5、CSS和JavaScript制作网页动画,无需Flash.     Adboe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏. 目前该工具的重点放在动画引擎上,但未来将增加更多HTML5功能,比如Canvas、HTML5音频/视频标签等.