一、什么是微数据
一个页面的内容,不仅要给用户看,还要让机器可识别。而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签、属性名以及特定用法等。如使用 <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 最好的等级
作者:destiny0904
链接:https://www.jianshu.com/p/7148a5a9f1d3
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
发表评论