HTML5中微数据概述及在搜索引擎中的使用举例


Posted in HTML / CSS onFebruary 07, 2013

做网站优化已经快一个月了,对于seo的一般技术也有了一些了解,前些天开始使用谷歌的网站站长工具,在里面发现很多百度站长工具里面不曾有的内容,其中“结构化数据”这一项是出现在 “优化”栏里面,可想而知,这个结构化数据会不会是争对谷歌搜索的一个优化的方法呢?添加自己的站 进入这个页面,发现它提示我的网站上未检测到任何结构化数据,但是这么一个缺少概念的词让我们这种网站优化新手怎么理解呢?
进入谷歌的“帮助”页,谷歌提到了“丰富网页摘要(微数据、微格式、RDFa 和数据荧光笔)”,其中微数据是谷歌推荐的优化方式,而这个微数据正是现在新秀HTML5为增强网页语义化而增加的新特性,旨在构建对程序,对用户都更有价值的数据驱动的web。

HTML5微数据规范是标记内容的一种方式,用于描述特定的信息类型,例如评论、人物信息或活动。每种信息都描述特定类型的项,例如人物、活动或评论。例如,活动可以包含 venue、starting time、name 和 category 属性。

微数据使用 HTML 标记(常为 <span> 或 <div>)中的简单属性为项和属性指定简要的描述性名称。以下示例是一个简短的HTML 文本块,显示的是 Bob Smith 的基本联系信息。

复制代码
代码如下:

<div>
我的名字是王XX,但大家叫我 wungking。我的主页是:
<a href="https://3water.com">3water.com</a>
我住在武汉。我是程序员,目前在第五动力上班。
</div>

以下是用微数据标记的同一 HTML 内容。
复制代码
代码如下:

<div itemscope itemtype="http://data-vocabulary.org/Person">
我的名字是 <span itemprop="name">王XX</span>
但大家叫我 <span itemprop="nickname">wungking</span>。
我的主页是:
<a href="https://3water.com" itemprop="url">3water.com</a>
我住在武汉。我是<span itemprop="title">程序员</span>
目前在<span itemprop="affiliation">第五动力</span>上班。
</div>

下面对此示例进行了详细说明。
1,在第一行中,itemscope 表示 <div> 中的内容是个项。itemtype="http://data-vocabulary.org/Person 表示该项是人物。
2,人物项的每个属性均使用 itemprop 属性进行标识。例如,itemprop="name" 描述人物的姓名。

简单的用法介绍了,看一下效果,因为这种标记在web页面不会有任何不同的效果(对用户来说),所以这里要粘贴下,谷歌测试工具的效果:
这个是我主页的 结构化数据测试的结果,下方 item 之后的 image title 都是在页面中的对应元素中添加的,谷歌在抓取你的页面的时候,通过这种结构化的标记,来快速获取最有效的信息。至于它对于网站排名有没有效果,现在还没法测试,只能先优化了看看效果。

看到这里,各位站长是不是很想把自己的站优化一下呢?因为在定义itemprop的类型时没有一个官方的标签集。只提供了部分行业的 部分属性值,所以这里我们还是静待其完善吧!

HTML / CSS 相关文章推荐
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 #HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 #HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 #HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 #HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 #HTML / CSS
You might like
聊天室php&amp;mysql(六)
2006/10/09 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
YUV转为jpg图像的实现
2019/12/09 Python
Python如何操作docker redis过程解析
2020/08/10 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
Python排序函数的使用方法详解
2020/12/11 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
上学迟到的检讨书
2014/01/11 职场文书
2014年国庆标语
2014/06/30 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
土地租赁协议书
2015/01/29 职场文书
小兵张嘎观后感
2015/06/03 职场文书
春风化雨观后感
2015/06/11 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
孩子满月酒答谢词
2015/09/30 职场文书