了解HTML5微数据itemscope、itemtype、itemprop

4月/24日


了解HTML5微数据itemscope、itemtype、itemprop,下次在网页代码中看到这些不要再奇怪了,它被很多的运用到了seo上,微数据是有特定属性名称的词汇表中特定的元素属性的数据,它是一种方便机器识别的数据,当然也是属于前端的范畴。

大白话理解:

一个一堆乱码的网页,你看不懂,机器也看不懂,但是用相关软件抓取,就会根据一些微数据标识把网站的大体框架,重要信息抓下来,打出一堆重要的JSON数据。网站是干啥的,都有啥,一目了然。

例如: meta标签的content属性   img标签的src属性  a标签的 href属性 都属于微数据使用

作用:

Web浏览器(DOM做标记),搜索引擎优化(SEO)

格式:

itemscope:声明所使用的作用域,加在最外层的元素中。

itemtype:声明所使用的词汇表,加在最外层的元素中。

itemprop:声明属性名,加在要声明的元素中。

itemid:声明属性id,全局标识,加在最外层的元素中。

itemref:声明一个新的元素表,有些浏览器会自动把meta标签放到head里读,声明后就算页面移除仍能识别微数据,加在最外层的元素中。

实例:

<head RDFa rel=author> 作者

<bodyitemscope itemtype=”WebPage”> 网页

<articleitemscope itemtype=”Book”> 书

我不想让页面上渲染 “我叫张三“,但是我还想让这个信息被这个网页携带!!! content!!!

<meta content=”我叫张三” itemprop=”name”>书名

<meta content=”我来自北京” itemprop=”description”>书序言

<meta content=”我的简介下载” itemprop=”thumbnailUrl”>书小样下载

<meta content=”我的详情信息下载” itemprop=”contentUrl”>书全部下载

切图网始于2007年, 前端外包 服务拓荒者、领航者,提供专业的前端外包服务,微信公众号 qietuwang