一、什么是微数据
一个页面的内容,不仅要给用户看,还要让机器可识别。而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签、属性名以及特定用法等。如使用 <h1>
标签包裹页面标题信息就是为了让机器识别(搜索引擎 SEO)
微数据本质是给网页中可见的数据提供附加语义的标准化方式。允许我们在网页元素中嵌入自定义属性。是为了方便机器识别而产生的东西。适合于精细地优化那些已经在 DOM 中的数据的语义性。
如在 span
、div
标签内添加属性,让机器识别其特定类型的信息,例如评论、人物信息或事件都有相应的属性,用来描述其意义。
HTML5 微数据规范是一种标记内容以描述特定类型的信息,每种信息都有描述特定类型的项。
二、微数据中的概念
微数据使用来自自定义的词汇表的、带作用域的名/值对来给 DOM 做标记
2.1 作用域
微数据重用了 DOM 本身的层级结构,提供了一种方式来表达“所有该元素的属性都来自这个词汇表”。允许在同一个页面使用多个微数据词汇表,甚至可以将词汇表嵌套,完全和 DOM 结构用法一样。
作用域,就是指定元素为微数据的项目,各个项可以嵌套,类似于 DOM 结构,是一个命名空间
2.2 词汇表
指向一个网址 URL,并不一定实际存在(实际存在最好),定义微数据使用的词汇的命名空间。
微数据词汇表有三:schema.org 词汇表,Google丰富摘要词汇表,WHATWG / microformats.org词汇表。
词汇表,就是指定微数据项目的类型,声明作用域的名称。
2.3 数据模型
微数据的数据模型是名/值对,一个微数据的属性名总是声明在一个 HTML 元素上,相对应的属性值则从 DOM 中取得。
在项里的元素添加属性名,就会成为所在的项目里的属性,属性值是文本或者其他数据。
三、微数据的语法
通过对下面例子的改造讲解:
<section>
<h1>destiny</h1>
<p>![](http://upload-images.jianshu.io/upload_images/7295449-c6767031a780189f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</p>
<p><a href="http://destinytaoer.cn">blog</a></p>
</section>
3.1 itemscope 项目的作用域
声明元素为一个项目,包含至少一个属性。
<section itemscope>
<h1>destiny</h1>
<p>![](http://upload-images.jianshu.io/upload_images/7295449-c6767031a780189f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</p>
<p><a href="http://destinytaoer.cn">blog</a></p>
</section>
3.2 itemtype 项目的类型
微数据定义的类型。其值为 URL,用于引入一个微数据词汇表可以使用 http://schema.org 或是 http://data-vocabulary.org 域名
<section itemscope itemtype="http://data-vocabulary.org/Person">
<h1>destiny</h1>
<p>![](http://upload-images.jianshu.io/upload_images/7295449-c6767031a780189f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</p>
<p><a href="http://destinytaoer.cn">blog</a></p>
</section>
3.3 itemprop 项目的属性
添加一个数据项目属性。任何微数据属性都可以重复,只要各自的值位于不同的 HTML 元素中。
<section itemscope itemtype="http://data-vocabulary.org/Person">
<h1 itemprop="name">destiny</h1>
<p>![](http://upload-images.jianshu.io/upload_images/7295449-c6767031a780189f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</p>
<p><a itemprop="url" href="http://destinytaoer.cn">blog</a></p>
</section>
3.4 属性值
数据属性对应的属性值是元素中的某个属性或者文本的值
- content
属性
- <meta itemprop="" content="">
src
属性audio
embed
iframe
img
source
video
href
属性a
area
link
data
属性object
datetime
属性time
文本内容
- 其他所有元素
3.4 嵌套项与多属性
在包含 itemprop
的元素中添加 itemscope
插入嵌套项。
<span itemprop="members" itemscope>S˙H˙E
<span itemprop="name">任家萱</span>
<span itemprop="name">田馥甄</span>
<span itemprop="name">陈嘉桦</span>
</span>
项目可以包含不同值的多个相同属性。如上例
同一个元素同样也可以有多个属性关键名称,用空格分隔。
<p itemscope>
<span itemprop="name call">destiny</span>
</p>
3.5 itemref 页面内引用
允许微数据项目通过指向特定 ID
(含有需要属性的元素)包含非后代属性。
<p itemscope itemref="band-members">
<span itemprop="name">S˙H˙E</span>
</p>
……
<span id="band-members" itemprop="members" itemscope>S˙H˙E
<span itemprop="name">任家萱</span>,
<span itemprop="name">田馥甄</span>和
<span itemprop="name">陈嘉桦</span>
</span>
含有 itemref
属性的元素项目会把 itemref
指定 id
的项目包含进来。
3.6 标注不可见数据
如果你想添加的文本并不是页面内容的一部分,你可以在 <meta>
元素上使用 content
属性:<meta itemprop="" content="">
但是某些浏览器会自动把 <meta>
元素移动到 head
标签中。比较靠谱的做法是使用 itemref
做页面内引用,这样即使浏览器移除了,还是能够识别出微数据。
<p itemscope>
<span itemprop="name" itemscope itemref="meta-likes">
钟欣桐
<meta id="meta-likes" itemprop="likes" content="twins成员">
</span>
摄影爱好者陈老师的粉丝。
</p>
注意:应当尽可能的使用可见数据,因为不可见的数据,往往会被忽略,更新时忘记修改。可以将不可见数据紧挨着它所描述的可见文本后面,可以起到一定提醒作用。
3.7 itemid 全局标识符
允许词汇表给微数据项目定义一个全局标识符。
如书的 ISBN 数值
<p itemscope itemtype="http://vocab.example.com/book" itemid="urn:isbn:0321687299">
<!-- 书信息… -->
</p>
四、词汇表
以 Google 丰富摘要词汇表( data-vocabulary.org )为例。
4.1 Person 人物
设置 itemtype="http://data-vocabulary.org/Person"
包含属性有:
- name
姓名
- nickname
昵称
- photo
头像,图片链接
- title
头衔、职称
- role
角色 (如:会计)
- url
个人网址,定义比较宽松
- affiliation
相关的组织名称(如:雇主、公司)
- friend
朋友(表示与另外一人的社会关系)
- contact
联系方式(表示与另外一人的社会关系)
- acquaintance
熟人关系(表示与另外一人的社会关系)
- address
位置地址,可以是一个项目
4.2 Address 地址
Person 词汇表定义了 address 属性,而 address 本身也是微数据项目,有自己的词汇表:设置 itemtype="http://data-vocabulary.org/Address"
包含属性有:
- country-name
国家
- region
省
- locality
县、地区
- street-address
街道地址
- postal-code
邮政编码
对于没有定义属性的地址,如:镇,可以写入 locality
属性中。
注意:一般地址只用一个标签包含,为了微数据的应用,应当为各个对应属性增加一个标签包含。虽然增加了标签,但这样做是值得的。其他情况也是如此
4.3 Organization 组织
设置 itemtype="http://data-vocabulary.org/Organization"
包含属性有:
- name
组织名称
- url
组织主页链接
- address
组织地址,可以是一个项目
- tel
组织的电话号码
- geo
地理位置坐标,可以是一个项目
4.4 Geo 地理位置
设置itemtype="http://data-vocabulary.org/Geo"
包含属性有:
- latitude
纬度
- longitude
经度
一般使用不可见标注方式
4.5 Event 事件
设置itemtype="http://data-vocabulary.org/Event"
包含属性有:
- summary
事件名称
- url
事件详情链接
- location
事件发生或活动举行的地点或场所,可以有一个嵌套的组织或者地址来表示
- description
对事件的描述
- startDate
开始日期和时间,ISO 格式:2009-11-06T08:30+01:00
- endDate
结束日期和时间,ISO 格式
- duration
事件持续时间,ISO 格式
- eventType
事件类型(如讲座、音乐会等)
- geo
事件的地理位置,可以是一个项目
- photo
事件相关图片链接
4.6 Review 点评
设置itemtype="http://data-vocabulary.org/Review"
包含属性有:
- itemreviewed
被点评的项目名称,可以是产品、服务、商家等
- rating
对该项目的数字质量评级,默认档次从 1 到 5,也可以前嵌套一个 Rating 项目
- reviewer
点评者姓名
- dtreviewed
点评日期,ISO 格式
- summary
关于点评的简要说明
- description
点评详细描述
4.7 Rating 等级
设置itemtype="http://data-vocabulary.org/Rating"
包含属性有:
- value 获得的评级
- worst 最差的等级,0
- best 最好的等级