微数据

微数据是一种在网页中提供附加语义的标准化方式,通俗来说微数据就是为了方便浏览器识别的东西

微数据允许我们定义自定义元素以及在网页中嵌入自定义属性。从较高的角度而言,微数组由一组名-值对组成。
这个分组被称作条目,每个名-值对就是一个属性。条目和属性使用普通元素表示。

作用:

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 测试上面的例子。

阅读原文

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,591评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,448评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,823评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,204评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,228评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,190评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,078评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,923评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,334评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,550评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,727评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,428评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,022评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,672评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,826评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,734评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,619评论 2 354

推荐阅读更多精彩内容