日期:2014-05-17  浏览次数:20781 次

HTML5规范中微数据MicroData浅析
HTML5规范中微数据MicroData浅析作者:夜飞羽 来源:mxria.com  时间:2012-02-14
最近学习了一下WHATWG网站中关于微数据的内容,microdata对于普通用户而言,可能不显得如何重要,但对于搜索引擎,它的应用将带来机器语言分析的极大便利。这将意味着,搜索引擎将能更智能、准确地识别网站内容,在语义层面上给出用户最期望看到的结果。对于网站制作者而言,提高搜索引擎对内容的识别程度,一方面是一种SEO手段,另外也可以改善用户体验。目前Google已经提供了相应的测试工具并在google搜索引擎中支持microdata的应用。下面看一段搜索结果的截图,图中颜色标出的部分是重点。



1.如何理解微数据的用途
我们可以理解所谓微数据,就是网页中特别定义的一个“名称name-属性值value”组合。这种组合我们称之为"项"(items)。在HTML中,有一个itemscope 属性是用来描述items项的。下面就是一段实际例子
<div itemscope>
<p>网站名称 <span itemprop="name">美瑞网</span>.</p>
</div>

<div itemscope>
<p>网站标题名称 <span itemprop="name">HTML5、CSS3等WEB开发技术分享网站</span>.</p>
</div>
假定没有使用微数据,上面的代码是这样的:
<div >
<p>网站名称 <span >美瑞网</span>.</p>
</div>

<div >
<p>网站标题名称 <span >HTML5、CSS3等WEB开发技术分享网站</span>.</p>
</div>
这对于浏览网页的人而言,是否使用microdata没有任何区别,用户看到的结果是一样的。但对于机器识别例如搜索引擎而言,使用了微数据的网页代码则提供了更加丰富的信息。搜索引擎通过相应的schema规范,就能理解Name所代表的确切含义,从而提取被标识的内容。简单的例子,加入将itemprop中的name换为address,那么搜索引擎就可以知道这里的内容描述的是地址,具备特定的含义。经过这么处理后,我们网站中的信息将被更加准确的采集和分类处理,从而为更加深入的数据分析和数据挖掘提供了最基本的指引。

2.微数据项Items的几种表现方式
原则上,HTML中的每个标签都可以定义成为相应的items,只需加上itemscope和itemprop属性即可。在实际应用时,考虑到机器语言和人类语言之间理解方式的差异性,应用时我们有多种选择。
如果是类似img图像标签,a链接标签,src和href的内容是value值的内容,在微数据中会自动获取内容值。
<div itemscope>
<img itemprop="image" src="googlelogo.png" alt="Google Logo">
</div>
如果希望用户看到的内容和搜索引擎关心的内容不一样,则可以采用value值得方式。例如用户看到度娘刘冬最红的消息,而实际希望传递给搜索引擎的信息是最火热事件排名索引id,我们就可以采用如下方式:
<h1 itemscope>
<data itemprop="hot-id" value="898ML001">度娘刘冬最红</data>
</h1>

如果希望在微数据中标记特殊时间,我们可以采用time标签。例如:最近非常喜爱的歌手惠特尼.休斯顿逝世,沉痛哀悼做个网站纪念。在她的生平介绍网站里标记生死日期
<div itemscope>
惠特尼.休斯顿:<time itemprop="birthday" datetime="1964-02-13">1964年二月十三日</time>--<time itemprop="deathday" datetime="2012-02-13">2012年二月十一日</time>.
</div>
如果希望在微数据中标记多个属性值得items,可以使用多个name-value组合,其中name属性一样。例如:喜欢的歌星名字
<div itemscope>
<p>最喜欢的歌星:</p>
<ul>
  <li itemprop="flavor">奶茶刘若英</li>
  <li itemprop="flavor">天王刘德华</li>
</ul>
</div>
如果希望在微数据中描述层次结构的数据集,itemscope同样支持树状层次节点的数据类型。例如汽车类网站中可以采用下面的方式进行组织。我喜欢乘坐的交通工具是家用轿车雪佛兰,科鲁兹的1.8L
<div itemscope>
<p>Name: <span itemprop="name">雪佛兰</span></p>
<p>Band: <span itemprop="band" itemscope> <span itemprop="name">科鲁兹</span> (<span itemprop="size">1.8L</span> players)</span></p>
</div>

大家看到这里,这样的表现方式是不是感觉似曾相识?是的,跟xml的组织方式完全一致。XML经过了多年的发展,一致未能在网页中得到广泛的应用,但在文档应用格式上,xml是当仁不让的最佳选择。如今,微数据正是将xml曲线引入web规范中的一个变革,目前规范尚不成熟,我们拭目以待,相信不久的将来,这种变化将带给网页信息整理和数据分析领域的巨大创新。

3.DOM中如何应用微数据模型
支持微数据的DOM API中提供了getItems这个方法处理微数据。document.getItems(typeNames) 提供了访问网页中顶层微数据集合的功能,采用document.getItems就可以获得网页中一个items的集合,items项的类型可以使用element.itemType 获得。例如下面的代码展示了我们如何在DOM模型中处理items
var user = document.getItems('http://example.net/user')[0];
alert('Hello ' + user.properties['name'][0].itemValue + '!');

上面的一切看上去都非常完美,在普通的网页中也可以实现类似XML格式化的数据,操作这些数据也非常简单,微数据的发展值得期待!目前google已经支持微数据的应用,但baidu尚未有证据表明支持微数据。本文开头大众点评网的应用实例代码如下,大家可以学习学习。

<div class="shop-name">
<h1 class="shop-title" itemprop="name itemreviewed">贵州菜</h1><span><a class="subbranch J_pop-login" onclick="pageTracker._trackPageview('dp_shop_caozuo_tianjiafendian')" href="/addshop/1_10/id=5139338" title="添加分店">添加分店</a></span>
</div>
<div class="comment-rst">
<span title="该商户暂无星级" class="item-rank-rst irr-star0" itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<met