微数据是一种在网页中提供附加语义的标准化方式,通俗来说微数据就是为了方便浏览器识别的东西
微数据允许我们定义自定义元素以及在网页中嵌入自定义属性。从较高的角度而言,微数组由一组名-值对组成。
这个分组被称作条目
,每个名-值对就是一个属性
。条目和属性使用普通元素表示。
作用:
Web浏览器(DOM做标记),搜索引擎优化(SEO)
全局属性
微数据引入了五个全局属性,这些属性适用于在任意元素以及为数据提供上下文机制。
属性 | 描述 |
---|---|
itemscope | 用于创建一个条目。itemscope 属性是一个布尔值属性,说明页面上有微数据以及它从哪里开始。声明所使用的作用域,加在最外层的元素中 |
itemtype | 这个属性是一个有效的 URL,用于定义条目以及为属性提供上下文。声明所使用的词汇表,加在最外层的元素中 |
itemid | 这个属性是条目的全局标识符。声明属性id,全局标识,加在最外层的元素中 |
itemprop | 这个属性为条目定义属性。声明属性名,加在要声明的元素中 |
itemref | 这个属性提供了一个附加元素列表来抓取条目的名-值对。声明一个新的元素表,有些浏览器会自动把meta标签放到head里读,声明后就算页面移除仍能识别微数据,加在最外层的元素中 |
示例
- 用 itemscope 属性创建一个条目。
- 给条目添加一个属性,itemprop 属性用于条目的后代。
这里有两个条目,其中每个条目都有一个 "name" 属性:
<div itemscope>
<p>My name is <span itemprop="name">Zara</span>.</p>
</div> <div itemscope>
<p>My name is <span itemprop="name">Nuha</span>.</p>
</div>
属性值通常是字符串,如 meta标签的content属性 img标签的src属性 a标签的 href属性 都属于微数据使用,属性本身也可以是一组名-值对,通过在元素上放置 itemscope 属性来声明属性。
微数据 API 支持
如果浏览器支持 HTML5 微数据 API
,那么全局 document
对象上就会有一个 getItems()
函数。如果浏览器不支持微数据,getItems()
函数就会是 undefined
。
function supports_microdata_api() {
return !!document.getItems;
}
Modernizr 还不支持微数据 API 检测,因此我们需要使用像上面一样列出的函数来检测。
HTML5 微数据标准包含 HTML 标记(主要用于搜索引擎)和一系列 DOM 函数(主要用于浏览器)。
我们可以在网页中引入微数据标记,不理解微数据属性的搜索引擎将会忽略它们。但是,如果需要通过 DOM 访问或者操作微数据,我们还需要检查浏览器是否支持微数据 DOM API。
定义微数据词汇表
要定义一个微数据词汇表我们需要一个只想有效网页的命名空间 URL。例如 http://data-vocabulary.org/Person 可以用作带下列命名属性的个人微数据词汇表的命名空间。
- name - 人名,简单的字符串值。
- Photo - 指向人物照片的 URL。
-
URL - 属于个人的网站。
例子:
<section itemscope itemtype="http://data-vocabulary.org/Person">
<h1 itemprop="name">Andy Runie</h1>
<p>
<img itemprop="photo" src="http://www.example.com/photo.jpg">
</p>
<a itemprop="url" href="http://www.example.com/blog">My Blog</a>
</section>
Google 支持将微数据作为他们 Rich Snippets 程序的一部分。当 Google 的网页爬虫解析我们的页面并发现符合 http://data-vocabulary.org/Person 词汇表的微数据属性时,它会解析出这些属性并把他们存储到其他页面数据的旁边。
你可以利用 Rich Snippets 测试工具 使用 http://www.tutorialspoint.com/html5/microdata.htm 测试上面的例子。