首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

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

2012-09-09 
丰富网页摘要——HTML5中的“微数据”(MicroData)什么是“微数据”大多数网络管理员都熟悉网页上的HTML标签,通常

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

什么是“微数据”

大多数网络管理员都熟悉网页上的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。



    =======================签 名 档=======================
    原文地址(我的博客):http://www.clanfei.com/2012/08/1643.html
    欢迎访问交流,至于我为什么要多弄一个博客,因为我热爱前端,热爱网页,我更希望有一个更加自由、真正属于我自己的小站,或许并不是那么有名气,但至少能够让我为了它而加倍努力。。
    =======================签 名 档=======================




热点排行