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学习之2D转换功能详解
Dec 23 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 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
jQuery 源码分析笔记
2011/05/25 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
php中smarty区域循环的方法
2015/06/11 PHP
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
layui表格实现代码
2017/05/20 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
python实现大转盘抽奖效果
2019/01/22 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
python else语句在循环中的运用详解
2020/07/06 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
经典的班主任推荐信
2013/10/28 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
单位综合评价意见
2015/06/05 职场文书
入党函调证明材料
2015/06/19 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
python解析照片拍摄时间进行图片整理
2022/07/23 Python