Microdata – HTML5之语义扩展

最新推荐文章于 2025-05-11 13:05:57 发布

xiongzhengxiang

最新推荐文章于 2025-05-11 13:05:57 发布

阅读量2.3k

点赞数

分类专栏： HTML5 文章标签： html5 搜索引擎扩展 class html div

HTML5 专栏收录该内容

34 篇文章

订阅专栏

语义网是一个梦想：互联网上所有的内容都是数据，这些数据和现实世界的具体事物相关，各个应用程序和设备都可以识别和使用这些数据。HTML标签本身在不断朝着语义化方向发展，但是这些标签数量有限，远远不能满足需求，于是一些其他的技术出来，用来增强和扩展语义。

大部分网页都是以HTML格式被呈现的，而前端攻城师每天接触的都是HTML文件，于是我们编写的代码直接影响着语义网的发展…^^*…这个话说的有点大了，不过我们在写HTML标签的时候，多考略一点语义化的东西还是有不少作用的。

清晰明了的代码，便于代码的阅读、维护、复用；
更好的可访问性，被更多的设备访问；
对搜索引擎友好，内容被搜索引擎更好的理解、分析和索引。

前端攻城师们在他们的代码中使用各种技术来增强网页的语义。

使用语义化的标签和结构，主标题用<h1>，头部用<header>（HTML5）等。
书写语义化的属性，容易理解的class名，比如class=”article-name”、procuct-tag=”xxx yyy zzz”等

但是，HTML的标签总是有限的，虽然HTML5草案中新增了不少的标签，但是远远不能满足所有开发人员的需求，而且这些标签只是描述了一些网页上常见的内容，还有更多的内容没有合适的标签，比如一个人以及相关的名字、地址、性别、联系方式等；而自定义的一些属性，比如procuct-tag=”xxx yyy zzz”，只能被本站的代码、或者仅仅是这个功能的开发人员所能识别和理解，其他设备和搜索引擎根本无法识别。

语义扩展之道 Microformats / RDFa / Microdata

于是微格式出现了，RDFa出现了，这些技术很简单，能够增前并扩展页面的语义，对，是扩展语义，让页面的文字不再是文字，变成了一种数据，可以被程序或者机器、搜索引擎等理解的数据。

最早的Microformats，通过特定的class名来实现，应用简单，主流搜索引擎支持:

<div class="vcard">
   My name is
   <span class="fn">Bob Smith</span>,
   Here is my home page:
   <a href="http://www.example.com" class="url">www.example.com</a>.
</div>

之后的RDFa，通过自定义属性-值的方式来实现，在扩展性方面做的很好，需要声明用来解析的词汇库，使用起来复杂一点，最近退出的RDFa lite有更进一步的改善，兼容shcema.org的词汇库，主流搜索引擎支持：

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
   My name is <span property="v:name">Bob Smith</span>,
   Here is my homepage:
   <a href="http://www.example.com" rel="v:url">www.example.com</a>.
</div>

Microdata和RDFa一脉相承，只是使用语法更加简单明了，出现了被三大搜索引擎支持的词汇库shcema.org，主流搜索引擎支持：

<div itemscope itemtype="http://data-vocabulary.org/Person">
  My name is <span itemprop="name">Bob Smith</span>,
  Here is my homepage:
  <a href="http://www.example.com" itemprop="url">www.example.com</a>.
</div>

如何选择?

这三种方案是兼容的并不排斥，你可以在同一个页面使用不同的方案，并且可以在一个页面上使用多种方案，但这会给各种设备和搜索引擎增减兼容逻辑，而且三个独立发展，力量分散，前进的步子跨的不是很快，那我们应该使用哪一种呢：

技术可行性，简单易用、兼容性?
什么样的收益?
发展方向、标准化?

我们根据最新的一些消息来分析一下

Microdata结合了Microformats的简单易用和RDFa的可扩展性；
Microdata出现在HTML5草案中；
三大搜索引擎联合推出用于Microdata的词汇库shcema.org，在搜索结果页显示相关的富网摘。

Microdata+shcema 胜出

Microdata基本用法（whatwg版本）

<div itemscope itemtype="http://schema.org/Person">
  My name is <span itemprop="name">Bob Smith</span>
  Here is my homepage:
  <a href="http://www.example.com" itemprop="url">www.example.com</a>.
</div>

通过itemscope来声明一个数据对象；
用itemtype=”http://schema.org/Xxx”来指定使用的词汇库，以及数据的类型
通过标签的itemprop=”yyyy”来指定对象的特定属性，标签包含的内容就是属性的值(有少数例外，可参考http://www.schema.org/docs/full.html)；
DOM API document.getItems(“http://schema.org/Person”) opera11.60+

schema.org中定义的数据类型列表比较多，文档以及对应词汇表为 http://schema.org/。

Creative works: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries …
Embedded non-text objects: AudioObject, ImageObject, VideoObject
Event
Organization
Person
Place, LocalBusiness, Restaurant …
Product, Offer, AggregateOffer
Review, AggregateRating

富网摘(Rich Snippets)

其实，现阶段，语义扩展带来的唯一的看的见的好处是：页面内容更好的被搜索引擎理解，以及看得见的搜索引擎的富网摘(Rich Snippets)。而这个是Microformats、RDFa和Microdata都可以实现的，下面以Microdata为例，简单说明一下如何在项目中使用。

1.添加属性

<div itemscope="itemscope" itemtype="http://schema.org/Product">
	<h1 itemprop="name">三星I9100（Galaxy S 2）2.3系统双核 超值热卖</h1>
	<a href="http://auction1.paipai.com/F4E679240000000000743B3E0800C6B9"><img itemprop="image" src="http://img4.paipaiimg.com/b092a3be/item-0E798018-F4E679240000000000743B3E0800C6B9.0.300x300.jpg" alt="三星I9100（Galaxy S 2）2.3系统双核 超值热卖" /></a>
	<div itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
		<span itemprop="ratingValue">3.5</span>/5
		<span itemprop="reviewCount">766</span> 人评价
	</div>
	<div itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer">
		<span itemprop="price">3030.00</span>
		<meta itemprop="priceCurrency" content="CNY" />
		<link itemprop="availability" href="http://schema.org/InStock" />现货 可购买
	</div>
</div>

2.测试google对数据的提取，以及预览效果 Rich Snippets Testing Tool

3.正式应用到模版

tips：

面包屑、评论和价格预览是富网摘中可以看到成果的东西
可以用搜索引擎对Microdata识别的兼容性测试工具(google)，来预览页面在搜索引擎结果页的效果，同时检测Microdata用法是否准确。http://www.google.com/webmasters/tools/richsnippets
不同的词汇表（主要是schema.org与data-vocabulary.org），对应的属性和值稍有不同，有些词汇的某些属性是必须有的，需对照文档使用，搜索引擎结果页并不会显示所有设置了的词汇类型和属性。
设置的词汇类型和属性越多越好，不是所有的属性都会显示为富网摘。
属性名或者属性值不对，嵌套关系不对会导致，设置了属性之后通过样式隐藏的元素等都会导致富网摘不会出现。