实例解析丰富网页摘要的三大标记格式
2018年3月11日 来源：马海祥博客丰富网页摘要英文名称为Rich Snippets，通俗的来讲就是在每条搜索结果下方显示作者信息、照片信息、评论者、投票等等，这些信息都是丰富文本摘要，旨在让用户大体上先了解网页上的内容，以及与用户的搜索查询有何关联。丰富网页摘要可以帮助搜索用户更为迅速地确定某一网站是否包含他们感兴趣的信息。
Google之前已为购物、食谱、评论、视频、音乐以及活动推出了丰富网页摘要。而对于博客来说，主要有两个丰富网页摘要功能，一个是目录分类摘要功能，另一个就是作者摘要功能。
目录分类摘要功能，可以让用户在Google搜索界面直观的看到文章的具体分类信息，了解到网站的结构，引导用户进一步查阅更多内容。如下图所示：
如果我们要想实现以上的丰富网页摘要功能，就需要我们先掌握丰富网页摘要的标记格式。据收集的官方公布的信息展示，目前，丰富网页摘要主要通过微数据（官方推荐）、微格式、REFa三种格式对网页内容类型进行标记来实现。
一、微数据
HTML5微数据规范是标记内容的一种方式，用于描述特定的信息类型，例如评论、人物信息或活动。每种信息都描述特定类型的项，例如人物、活动或评论。例如，活动可以包含venue、starting time、name 和category属性。
微数据使用HTML标签中的简单属性为微数据项和属性指定简要的描述性名称。
以下示例是一个简短的HTML文本块，显示的是马海祥的基本联系信息。
<div>
我的名字是马海祥，我的博客是。我的主页是：
<a href="http://www.mahaixiang.cn">www.mahaixiang.cn</a>
我住在杨浦区（上海市），我工作是SEO，目前在SEO公司上班。
</div>
以下是用微数据标记的同一个HTML内容。
<div itemscope itemtype="http://data-vocabulary.org/Person">
我的名字是 <span itemprop="name">马海祥</span>
我的博客是<span itemprop="nickname"></span>。
我的主页是：
<a href="http://www.mahaixiang.cn" itemprop="url">www.mahaixiang.cn</a>
我住在杨浦区（上海市）。我是<span itemprop="title">SEO</span>
目前在<span itemprop="affiliation">SEO公司</span>上班。
</div>
下面马海祥就对此示例进行详细说明：
（1）、在第一行中，itemscope表示中的内容是个项。itemtype="http://data-vocabulary.org/Person 表示该项是人物。
（2）、人物项的每个属性均使用itemprop属性进行标识。例如，itemprop="name" 描述人物的姓名。
1、嵌套实体
上例显示了马海祥的联系信息，但是不包含他的地址。下面的例子显示了相同的HTML内容，但其中包含address属性。
<div itemscope itemtype="http://data-vocabulary.org/Person">
我的名字是 <span itemprop="name">马海祥</span>
我的博客是<span itemprop="nickname"></span>。
我的主页是：
<a href="http://www.mahaixiang.cn" itemprop="url">www.mahaixiang.cn</a>。
我住在
<span itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="locality">杨浦区</span>
<span itemprop="region">（上海市）</span>
</span>
我是<span itemprop="title">SEO</span>
目前在<span itemprop="affiliation">SEO公司</span>上班。
</div>
下面马海祥就对此示例进行详细说明：
address属性自身便是一个项目，包含它自己的属性集。它将itemscope属性放在声明address属性的项中，并使用itemtype属性指定所描述的项的类型，例如：<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">。
2、日期和时间信息
若要明确指定日期和时间，请使用time元素及datetime属性。在此例中，startDate属性表示活动的开始日期。datetime属性中的值使用ISO日期格式指定。这样，您就可以为搜索引擎提供ISO格式的详细日期、时间和时区（“2009-10-15T19:00-08:00”），其中时区是可选信息；同时，可以通过用户易于理解的方式在网页上显示日期（“2009 年 10 月 15 日晚上 7 点”）。如下所示：
<time itemprop="startDate" datetime="2009-10-15T19:00-08:00">2009 年10月15日晚上7点</time>
3、隐藏的内容
一般情况下，Google不会显示隐藏的内容。也就是说，不向用户显示某些内容，而是使用隐藏文本为搜索引擎和网络应用单独标记信息。您应该标记用户访问您的网页时实际看到的文本。
本规则有几个例外情况。在某些情况下，向搜索引擎提供更详细的信息有很多好处，即使您不希望访问您网页的人看到这些信息。例如，如果餐馆的评分为 8.5 分，用户（而不是搜索引擎）会认为评分范围为 1 到 10 分。在此例中，您可以使用meta元素表示此信息，如下所示：
<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
评分：<span itemprop="value">8.5</span>
<meta itemprop="best" content="10" />
</div>
下面马海祥就对此示例进行详细说明：
meta标记用于指定不在网页上显示的其他信息，在此例中，是指最高得分实际上是10分。该属性值使用content 属性进行指定。
同样，以ISO持续时间格式提供活动持续时间也可以确保此信息正确显示在搜索结果中，如下所示：
持续时间：
<span>1.5 小时<meta itemprop="duration" content="PT1H30M" />
</span>
下面马海祥就对此示例进行了详细说明：
（1）、使用meta标记可以指定属性的值（在此例中是持续时间）。这样，您就可以使用content属性的值（“PT1H30M”）以 ISO 8601 持续时间格式指定此持续时间，同时仍以用户易于理解的方式在网页上显示持续时间（“1.5 小时”）。
（2）、Google搜索引擎会查看meta元素的父元素，以识别meta标记中以其他方式表示的信息。因此，在此例中，请务必确保meta标记的直接父节点位于文字“1.5 小时”的外围。
二、微格式
1、使用微格式标记数据
微格式是网页上使用的简单规范（称为实体），用于描述特定的信息类型，例如评论、活动、商品、商家或人物。每个实体都有自己相应的属性。例如，人物具有姓名、地址、职位、公司和电子邮件地址等属性。
通常情况下，微格式使用HTML标记（常为 <span> 或 <div>）中的 class 属性为实体及其属性分配简要的描述性名称。以下示例是一个简短的HTML文本块，显示的是马海祥的基本联系信息。
<div>
<img src="www.mahaixiang.cn/seo.jpg" />
<strong>马海祥</strong>
SEO研究院的资深SEO
江苏省南京市上海路 200 号
邮编：210000
</div>
以下是用 hCard（人物）微格式标记的同一 HTML 内容。
<div class="vcard">
<img class="photo" src="www.mahaixiang.cn/seo.jpg" />
<strong class="fn">马海祥</strong>
<span class="title">资深SEO</span> at <span class="org">SEO研究院</span>
<span class="adr">
<span class="street-address">江苏省南京市</span>
<span class="locality">上海路 200 号</span>, <span class="region"></span>
邮编：<span class="postal-code">210000</span>
</span>
</div>
下面马海祥就对此示例进行详细说明：
（1）、在第一行中，class="vcard" 表示 <div> 中所含的HTML内容描述的是人物（用于描述人物的微格式称为hCard，而在HTML中则称为vcard。这不是拼写错误）。
（2）、该示例说明了人物项的属性，例如照片、姓名、职位、组织和地址。要给vcard所说明的人物的属性添加标记，就需要为包含这些属性内容（如 <span>、<img> 或 <title>）的每个元素分配一个指明其属性的class属性。例如，fn说明人物的名字；title说明职位。（各种信息类型的“帮助”文章中均包含可以识别的属性的完整列表。）
（3）、属性中可以包含其他属性。在以上示例中，属性adr说明人物的地址，其中包含子属性street-address、locality、region和postal-code。
2、嵌套微格式
一种微格式中包含另一种微格式的情况是比较常见的，例如，评论中包含评论者的联系信息。以下的评论示例中包含马海祥的工作职位和雇主。
<div>
<strong>评论</strong>
评论者：马海祥（资深编辑，新体验杂志社）
评分：5 分（满分为 5 分）
SEO做的很棒！
</div>
以下是带有hReview（评论）和hCard（人物）微格式标记的同一HTML内容。为了表示评论者的相关信息，我们将hCard（人物）微格式嵌套在hReview（评论）微格式中。
<div class="hreview">
<span class="item">
<strong class="item"><span class="fn"></span> 评论</strong>
</span>
<span class="reviewer vcard">
评论者：<span class="fn">马海祥</span>, <span class="title">资深SEO</span>
<span class="org">SEO研究院</span>
</span>
评分：<span class="rating">5</span> 分（总分为 5 分）。
<span class="description">SEO做的很棒！
</div>
下面马海祥就对此示例进行详细说明：
（1）、评论通过hReview微格式说明，写为class="hreview"。由于这是评论，因此整个HTML文本块包含在带有class="hreview"属性的div中。
（2）、要标识评论者，可以使用span class="reviewer"。但是，在本例中我们想使用vcard（人物）微格式来提供评论者的其他信息。为此您需要将reviewer和vcard放在同一行中，并用空格分隔，例如：<span class="reviewer vcard">。vcard属性fn、title和org说明Bob的名字、职位和工作单位。
3、隐藏的内容
一般情况下，Google不会显示隐藏的内容。也就是说，不向用户显示某些内容，而是使用隐藏文本为搜索引擎和网络应用程序单独标记信息，您应该标记用户访问您的网页时实际看到的文本。
但是在某些情形下，向搜索引擎提供更为详细的信息是很有用的，即使您不希望访问您网页的人看到该信息。例如，提供场地的经纬度可帮助Google正确地将其在地图上显示出来，而采用ISO日期格式提供活动的日期则有助于将它正确地显示在搜索结果中。在这种情况下，您可以使用微格式值类样式。不妨考虑下面这个示例：
<span class="dtstart">
<span class="value-title" title="2009-10-15T19:00-08:00" />
10 月 15 日晚上 7 点
</span>
将<span class="value-title" title="2009-10-15T19:00-08:00" />添加到带有class="dtstart"标记的文本块中，丰富网页摘要的解析器就会根据title属性中的值来查找活动的开始日期。在不影响用户的日期显示方式的情况下，可以用ISO日期格式表示title属性中的日期。
三、关于RDFa
RDFa全称（RDF attribute），设计提供了一套属性，可以用于在XML(及其方言，也包括HTML)中携带元数据，对于在（X）HTML中添加RDFa的作者而言，不一定需要理解RDF或者本体。
RDFa作为一种用于（X）HTML文档的语义标注技术，目前已经成为W3C的推荐技术标准。
1、使用RDFa标记内容
RDFa是标记内容的一种方式，用于描述特定的信息类型，如餐馆评论、活动、人物或商品详情。这些信息类型被称为实体或项。每个实体都有多个属性。例如，人物具有姓名、地址、职位、公司和电子邮件地址等属性。
一般情况下，RDFa使用XHTML标记（常为 <span> 或 <div>）中的简单属性为实体和属性分配简要的描述性名称。以下示例是一个简短的HTML文本块，显示的是马海祥的基本联系信息。
<div>
我的名字是马海祥，我的博客是。我的主页是：
<a href="http://www.mahaixiang.cn">www.mahaixiang.cn</a>。
我住在杨浦区（上海市）。我是SEO，目前在SEO公司上班。
</div>
以下是带有RDFa标记的同一HTML内容。
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
我的名字是 <span property="v:name">马海祥</span>，
我的博客是<span property="v:nickname"></span>。
我的主页是：
<a href="http://www.mahaixiang.cn" rel="v:url">www.mahaixiang.cn</a>。
我住在杨浦区（上海市）。我是<span property="v:title">SEO</span>，
目前在<span property="v:affiliation">SEO公司</span>上班。
</div>
下面马海祥就对此示例进行详细说明：
（1）、该示例的开头为使用xmlns的命名空间声明，表示指定词汇表（实体及其组件列表）所在的命名空间。您可以随时使用xmlns:v="http://rdf.data-vocabulary.org/#" 命名空间声明对包含人物、评论、商品或地点数据的网页进行标记。请务必使用结尾斜线和#号(xmlns:v="http://rdf.data-vocabulary.org/#")。
（2）、同样，第一行中的typeof="v:Person"表示所标记的内容代表的是人物。typeof属性名称带有前缀 v: (typeof="v:Person")
（3）、该人物的各个属性（例如其姓名或昵称）均用property进行标记。属性名称带有前缀v: (<span property="v:nickname">)。
（4）、要显示网址，请使用rel代替property，例如：<a href="http://www.mahaixiang.cn" rel="v:url">www.mahaixiang.cn</a>。请务必带上前缀v。"rel" 用于描述两个实体之间的关系，本例中指的是人物实体和网页实体之间的关系。
2、嵌套项
以上示例显示的是马海祥的联系信息。其中包含了他的地址，但是没有指明他与该地址之间的关系。
在一种信息类型中包含另一种信息类型是很常见的。在本例中，我们想将Bob的地址信息(typeof="v:Address")加入到typeof="v:Person"实体中。因此，我们在此使用rel表示Bob（实体 v:Person）与其地址（实体 v:Address）之间的关系。然后，我们使用 <span typeof="v:Address"></span> 包含实际的地址实体。如下所示：
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
我的名字是 <span property="v:name">马海祥</span>，
我的博客是 <span property="v:nickname"></span>。
我的主页是：
<a href="http://www.mahaixiang.cn" rel="v:url">www.mahaixiang.cn</a>。
我住在
<span rel="v:address">
<span typeof="v:Address">
<span property="v:locality">杨浦区</span>，
<span property="v:region">（上海市）</span>
</span>
</span>
我是<span property="v:title">SEO</span>
目前在<span property="v:affiliation">SEO公司</span>上班。
</div>
3、隐藏的内容
一般情况下，Google不会显示隐藏的内容。也就是说，不向用户显示某些内容，而是使用隐藏文本为搜索引擎和网络应用程序单独标记信息。您应该标记用户访问您的网页时实际看到的文本。
但是在某些情形下，向搜索引擎提供更为详细的信息是很有用的，即使您不希望访问您网页的人看到该信息。例如，提供场地的经纬度可帮助Google正确地将其在地图上显示出来，而采用ISO日期格式提供活动的日期则有助于将它正确地显示在搜索结果中。
在此例中，您可以使用content属性表示丰富网页摘要的解析器应该使用这个属性值来查找活动的开始日期。如下所示：
<span property="v:dtstart" content="2009-10-15T19:00-08:00">2009年10月15日晚上7点</span>
点评：
虽然说Google是推荐使用微数据，不过也接受以上的两种格式。所以您无需事先了解这些格式，只要了解 HTML基础知识即可。现在现在需要的就是参考以上结构化数据标记帮助文档了解如何将微数据添加到自己的网站。
