丰富网页摘要——HTML5中的“微数据”(MicroData)
什么是“微数据”
大多数网络管理员都熟悉网页上的HTML标签,通常情况下,HTML标记告诉浏览器如何显示在标签中包含的信息。 例如, <h1>阿凡达</h1>告诉浏览器显示的文本字符串“阿凡达”在标题1格式。然而,HTML标记不提供任何有关文本字符串意味着什么,“阿凡达”可能是指取得巨大成功的3D电影的信息,或者它可以指一张纸娃娃系统的图片,这使得搜索引擎难以智能地理解网页中的具体内容。
微数据的作用
微数据对于普通的浏览者来说作用并不大,微数据的存在也并不会影响页面的浏览效果。网页中,同一种信息的表现方式可能有无数种,人们可以在阅读网页的时候理解网页的潜在意义,但搜索引擎无法很容易地理解到这个网页讨论的内容,如果有一个标签能够说:“嘿,搜索引擎,这里的信息是在讨论某个影片,或地方,或人,或视频”的话,可以帮助搜索引擎识更有效地别网页包含信息的具体意义。HTML5中的微数据正可以做到这一点。
微数据的例子
如果你有一个关于电影《阿凡达》的电影预告页面,其中包含了类型、导演以及一个通向预告片页面的链接,您的HTML代码可能看起来像这样:
- <div>
- <h1>阿凡达</h1>
- <span>导演:詹姆斯·卡梅隆(生于 1954年8月16日)</span>
- <span>类型:科幻</span>
- <ahref="../movies/avatar-theatrical-trailer.html">电影片</a>
- </div>
我们为它添加微数据描述之后的代码如下:
- <divitemscopeitemtype="http://schema.org/Movie">
- <h1itemprop="name">阿凡达</h1>
- <divitemprop="director"itemscopeitemtype="http://schema.org/Person">
- 导演:<spanitemprop="name">詹姆斯·卡梅隆</span>(生于<spanitemprop="birthDate">1954年8月16日)</span>
- </div>
- 类型:<spanitemprop="genre">科幻</span>
- <ahref="../movies/avatar-theatrical-trailer.html"itemprop="trailer">电影片</a>
- </div>
微数据的语法
信息块加入 itemscope属性,表示该元素中描述了某种类型的微数据,而使用itemtype属性来表示该信息的类型,如人物类型的微数据:
- <divitemscopeitemtype="http://data-vocabulary.org/Person"></div>
信息的每个属性使用 itemprop 属性进行标识:
- <spanitemprop="nickname">蓝飞</span>
某些隐藏的信息可以使用带content属性的meta标签来表示,如:
- <metaitemprop="best"content="10"/>
日期或时间类信息使用 ISO日期格式 表示,如:
- <timeitemprop="startDate"datetime="2009-10-15T19:00-08:00">2009 年 10 月 15 日晚上 7 点</time>
微数据可以嵌套,如:
- <divitemscopeitemtype="http://schema.org/Movie">
- <h1itemprop="name">阿凡达</h1>
- <divitemprop="director"itemscopeitemtype="http://schema.org/Person">
- 导演:<spanitemprop="name">詹姆斯·卡梅隆</span>(生于<spanitemprop="birthDate">1954年8月16日)</span>
- </div>
- 类型:<spanitemprop="genre">科幻</span>
- <ahref="../movies/avatar-theatrical-trailer.html"itemprop="trailer">预告片</a>
- </div>
部分元素使用URL属性值作为微数据的内容:
- <ahref="">
- <areahref="">
- <audiosrc="">
- <embedsrc="">
- <iframesrc="">
- <imgsrc="">
- <linkhref="">
- <objectdata="">
- <sourcesrc="">
- <videosrc="">
相反,某些元素的URL属性不作为微数据内容:
- <basehref="">
- <scriptsrc="">
- <inputsrc="">
常用的微数据的类型
- 事件: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
欢迎访问交流,至于我为什么要多弄一个博客,因为我热爱前端,热爱网页,我更希望有一个更加自由、真正属于我自己的小站,或许并不是那么有名气,但至少能够让我为了它而加倍努力。。
=======================签 名 档=======================
丰富网页摘要——HTML5中的“微数据”(MicroData)相关推荐
- HTML5扩展之微数据与丰富网页摘要itemscope, itemtype, itemprop
HTML5扩展之微数据与丰富网页摘要 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordp ...
- HTML5扩展之微数据与丰富网页摘要
一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使 ...
- HTML5扩展之微数据与丰富网页摘要——张鑫旭
一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使 ...
- html网页钩子,HTML5中的meta标签 和 IE浏览器能识别的钩子
一.meta 标签的使用 1. 使用描述 description属性 增加点击率 2. 设置字符集 3. 重定向和定时刷新功能 4.设备宽度自适应(针对移动设备) content 参数: width ...
- Shopify和其他电子商务平台上的微数据
Shopify和其他电子商务平台上的微数据 您听说过微数据吗?这是为搜索引擎提供有关您的在线商店所携带产品的结构化,详细信息的一种相对较新的方法.了解更多信息,并了解如何在自己的商店中实施它. 微数据 ...
- 学习笔记—什么是微数据?itemscope/itemtype/itemprop(搜索引擎seo优化)
什么是微数据 MDN官网定义:微数据是WHATWG HTML标准的一部分,用于在网页上的现有内容中嵌套元数据.[1]搜索引擎,网络抓取工具和浏览器可以从网页中提取和处理微数据,并使用它为用户提供更丰富 ...
- 数据库打开数据表_使用微数据打开您的数据
数据库打开数据表 The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition ...
- 边缘微数据中心部署的成本效益分析
当前的数字化服务的消费方式迫使IT企业亟待调整其数据中心的部署.而其中的重点无疑是降低通信延迟和带宽成本. 将"微"数据中心分配到更靠近利用点的地方,有助于降低来自云端和其他远程数 ...
- 一文读懂HTML微数据
本文为HTML标准解读系列文章,其他文章详见这里. 关于微数据,我们可以先从一个简单的HTML片段入手: <h1>对象</h1> 不同的人看到"对象"有可能 ...
最新文章
- ecplise中插件Jrebel的安装
- linux命令 — lsof 查看进程打开那些文件 或者 查看文件给那个进程使用
- 算法 - php - 二叉树遍历
- python是c语言写的吗-学习python还是c语言?
- 我的天!史上最烂的项目:苦撑12年,600多万行代码...
- 用pv操作描述如下前驱图_跟我学PMP | PV、AC、EV…挣值管理的基本概念都是啥?...
- ActiveMQ入门-ActiveMQ跟SpringBoot整合发送接收Queue
- 数据千万条,安全第一条
- python是什么课程-请问自学 Python 有必要买课程吗?
- 【现代软件工程】6月中旬团队项目心得
- 怎么加入链接,可以让微信浏览器直接提示跳出另一个浏览器查看
- hadoop大数据架构
- java 按拼音模糊搜索汉字_C#中拼音模糊匹配汉字智能搜索
- ip变更导致连接不到mysql的解决办法
- 利用Matlab App Designer简单设计程序
- shiro 记住我 的实现
- java六角括号怎么打_六角括号怎么打出来 六角括号输入方法
- 内存单通道和双通道是什么意思
- 朴素贝叶斯+语言模型
- 【行业调研报告】-解读游戏交易平台