`
realic
  • 浏览: 17806 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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">
<meta itemprop="rating" content="0">评分:该商户暂无星级</span>
<a onclick="pageTracker._trackPageview('dp_shop_dianpingshu');" class="count" href="#user-review-info">
<span itemprop="count">2</span>封点评</a>

下面的内容是来自google网站站长工具帮助的内容,以便大家更深刻的理解微数据格式。
更多参考信息:http://support.google.com/webmasters/bin/answer.py?hl=zh-Hans&answer=176035
来源:http://www.mxria.com 

 

分享到:
评论

相关推荐

    microdata:在浏览器中提取HTML5微数据的模块

    在浏览器中提取HTML5微数据的模块 兼容性 微数据使用 ,这是选择器引擎的包装。 如果不将选择器引擎插入其中,则默认为querySelector / querySelectorAll。 有关更多信息,请参见 。 安装 $ npm install --save ...

    microdata:用于提取html微数据的python库

    有关HTML5微数据的更多信息,请参阅有关Mark Pilgrim的。 命令行 当您通过pip安装microdata.py时,它也会在命令行上可用: % microdata.py http://www.wdl.org/en/item/1/ 这将打印出从提供的URL中提取的项目的...

    前端开源库-rdf-parser-microdata

    Microdata是HTML5引入的一种元数据嵌入方式,使得网页内容可以被搜索引擎、浏览器插件和其他工具解析,以提取丰富的结构化信息。例如,它可以用来标记产品信息、事件、人员资料等,提高网站的可发现性和互动性。 `...

    schema-microdata-examples:使用Schema.org微数据HTML标记的一些示例

    在压缩包`schema-microdata-examples-main`中,可能包含了一系列使用Schema.org微数据的实际HTML示例,涵盖了如文章、事件、地点、产品等多个主题。通过查看这些示例,你可以看到如何将微数据应用于不同类型的页面,...

    microdata-tool:用于测试和浏览HTML5微数据的嵌入式脚本

    HTML5微数据测试工具要查看此工具的实际效果,请访问 。 编写该工具是为了帮助调试和浏览HTML5微数据。 要使用此工具,只需在包含库后包含脚本即可。 当您查看页面时,将在左下方显示一个列表,列出该页面上检测到的...

    microdata-js:微数据解析器

    微数据 微数据解析器。 基于PhilipJägenstedt的microdatajs中的测试的测试。安装 npm install @smhg/microdata用法 import { parse } from 'microdata' ;let microdata = parse ( '&lt;html&gt;&lt;!-- ... --&gt;&...

    HTML5网页设计初窥系列课程

    Canvas对象你的画布HTML5网页设计初窥系列课程(6):扩展图形标记HTML5网页设计初窥系列课程(7):HTML5中的地理应用HTML5网页设计初窥系列课程(8):独立数据存储HTML5网页设计初窥系列课程(9):新的网络连接技术HTML5...

    html5---ppt

    - **2013年**:W3C正式宣布HTML5规范正式定稿。 - **2022年**:HTML5最终版正式发布。 #### 三、HTML5的关键特性 1. **语义化标签**:HTML5引入了一系列新的标签,如`&lt;article&gt;`、`&lt;aside&gt;`、`&lt;section&gt;`等,这些...

    HTML5入门ppt

    - **Microdata**:一种简单的、用于嵌入机器可理解的数据的语法,有助于搜索引擎理解和展示内容。 - **HTML+RDFa**:RDFa(Resource Description Framework in Attributes)是一种标准,用于将语义元数据添加到HTML...

    html5简介和简单的使用方法

    此外,HTML5支持RDFa、微数据(Microdata)、微格式(Microformats)等,这些技术有助于构建更加有价值的数据驱动型Web应用。 ##### 2. 本地存储特性(Class: OFFLINE & STORAGE) HTML5引入了本地存储功能,如`...

    HTML5最佳实战项目

    9. Microdata和Schema.org:Microdata是一种标记数据的方式,用于增加网页的语义。与Schema.org结合使用,可以帮助搜索引擎更好地理解网页内容,提升SEO效果。 10. Responsive Design:HTML5支持媒体查询(Media ...

    html5自学资料

    12. **Microdata和RDFa**:这两种语义化技术允许在HTML文档中嵌入结构化数据,使搜索引擎和其他应用能更好地理解和利用网页内容。 以上只是HTML5部分核心特性的概述,实际应用中还包括WebRTC(实时通信)、WebGL...

    html5.chm参考手册下载

    10. Microdata和Microformats:用于添加结构化数据到HTML文档中,方便搜索引擎抓取和解析,增强网页的语义化。 此外,“刘祥博客.url”可能是一个链接,指向刘祥的博客,他可能分享了更多关于HTML5的实战经验和技术...

    H5电商(仿京东首页)

    HTML5的语义化标签和Microdata/RDFa/Schema.org等元数据标准有助于搜索引擎理解网页内容,提高搜索排名。 9. Accessibility(无障碍访问): HTML5引入了更多对无障碍访问的支持,如ARIA属性,确保视觉障碍或其他...

    microdata-rdf:将微数据内容提取转换为RDF的规范

    **微数据(Microdata)与RDF:关联数据的基础** 微数据是一种在HTML文档中嵌入结构化数据的方法,使得搜索引擎、浏览器和其他Web服务能够更好地理解网页内容。它通过使用特定的属性和类来标记HTML元素,使得这些...

    HTML5 - Reference guide

    - **Microdata**:讲解 Microdata 作为一种语义化数据格式的应用。 - **会话历史与存储 API**:探讨 HTML5 中的本地存储机制(如 localStorage 和 sessionStorage)。 - **离线应用**:介绍 HTML5 如何支持离线...

    《HTML5从入门到精通》中文学习教程.zip

    11. **Microdata和Microformats**:这些元数据标准允许添加额外的信息来描述页面内容,有助于搜索引擎优化(SEO)和富网页应用(RDFa、Schema.org等)。 JavaScript是HTML5的重要补充,它是一种轻量级的编程语言,...

    html5 基础

    - Microdata添加了语义化数据,使得搜索引擎能够更好地理解和索引页面内容; - Formtype增加了更多表单类型,如email和tel,丰富了表单数据的类型; - Canvas提供了2D绘图能力,Canvas3D支持3D绘图; - CSS3技术为...

Global site tag (gtag.js) - Google Analytics