Schema.org 开始指南
大部分站长都对 HTML 标签十分熟悉。通常 HTML 告诉浏览器怎样渲染显示网页上的信息。例如, <h1>英雄</h1>
告诉浏览器以 1 号大标题显示文本文字 "英雄"。
然而, HTML 并没有给出这段文字确切意义的信息—— "英雄" 既可以指武勇超群而令人敬佩的人,又可以指张艺谋导演的那部电影。对于搜索引擎来说,想要智能地给用户呈现最相关的内容,将变得更加困难。
Schema.org 提供了一份共享的词汇表,站长可以使用它来标记网页,而这些标记则被主要的搜索引擎: Google, Microsoft, Yandex 和 Yahoo! 所支持。
你将 schema.org 词汇表与 微数据 microdata 结合起来使用,为你的 HTML 内容添加额外信息。我们长远的目标是支持更多的格式,但目前我们将专注于微数据 Microdata。 本指南将帮助你更快地熟悉微数据和 schema.org,之后你便可以为你的网页添加标记。
1. 怎样使用微数据标记你的内容
1a. 为什么使用微数据 microdata?
阅读你的网页时,人们可以理解页面内容。但搜索引擎对于页面上的内容却理解有限。在你的网页 HTML 代码中添加额外的标签—标签是为了告诉搜索引擎这些信息对该具体的电影、或地方、或人物、或视频进行了描述—你可以帮助搜索引擎和其他应用更好的理解你的内容并用一种有效、相关的方式将其表达。微数据是一个标签集合,它引入了能让你实现以上目标的HTML5。
1b. itemscope 和 itemtype
首先,请看一个具体的例子。假设你有一个描述电影英雄的网页,里边有该电影预告片的链接、导演信息等等。你的HTML代码类似于:
<div> <h1>英雄</h1> <span>演员:李连杰,梁朝伟,张曼玉,陈道明,章子怡,甄子丹</span> <span>动作,剧情</span> <a href="http://www.iqiyi.com/dianying/20110304/85d89eaca94de03e.html">在线播放</a> </div>
第一步,先确定该页面中“有关”电影英雄部分。为此,在包含了该项所有信息的HTML标签中添加itemscope元素 ,如下:
<div itemscope> <h1>英雄</h1> <span>演员:李连杰,梁朝伟,张曼玉,陈道明,章子怡,甄子丹 </span> <span>动作,剧情</span> <a href="http://www.iqiyi.com/dianying/20110304/85d89eaca94de03e.html">在线播放</a> </div>
通过添加 itemscope
,你可以确定包含在 <div>...</div>
块中的HTML是关于某一特定的项的信息。
但是当所讨论的项是未知分类时,这样做并不完全有效。此时,你可以紧跟着itemscope
后面添加itemtype
属性来确定该项的类型。
<div itemscope itemtype="http://schema.org/Movie"> <h1>英雄</h1> <span>演员:李连杰,梁朝伟,张曼玉,陈道明,章子怡,甄子丹</span> <span>动作,剧情</span> <a href="http://www.iqiyi.com/dianying/20110304/85d89eaca94de03e.html">在线播放</a> </div>
这就确定了div中的项是Movie的信息,正如schema.org类型层次中定义的一样。项的类型表示成URLs,这里用的是 http://schema.org/Movie
。
1c. itemprop
关于阿凡达 ,我们能为搜索引擎提供什么样的额外信息?电影有一些比较引人注意的属性,如演员、导演和评价。我们为项的属性贴上标签,并使用itemscope
属性。如,确定电影的导演,在导演名字所在的元素中添加itemprop="director" (http://schema.org/Movie包含了有关于一部电影的所有属性的完整列表。)
<div itemscope itemtype ="http://schema.org/Movie"> <h1 itemprop="name">阿凡达</h1> <span>Director: <span itemprop="director">詹姆斯·卡梅隆</span> (出生于1954年8月16日)</span> <span itemprop="genre">科幻片</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">预告片</a> </div>
请注意,我们已经添加了额外的 <span>...</span>
标签来把 itemprop
属性附加到页面相应的文本上。<span>
标签并没改变页面通过web浏览器的显示方式,所以它们是一种可便捷使用itemprop
的HTML元素。
搜索引擎现在不仅能把 http://www.avatarmovie.com 理解为一个 URL,还能把它理解为由James Cameron 执导的科幻电影Avatar预告片的URL。
1d. 嵌入 item
有时,项的属性值可以成为一个有自身属性集的项。比如说,我们可以确定一部电影的导演是一个Person类型的项 ,同时,Person有自己的属性 name和
birthDate。为确定某属性是另一个项,
你可以再相应的itemprop
后面开始一个新的itemscope
。
<div itemscope itemtype ="http://schema.org/Movie"> <h1 itemprop="name"&g;阿凡达</h1> <div itemprop="director" itemscope itemtype="http://schema.org/Person"> 导演: <span itemprop="name">詹姆斯·卡梅隆/span> (出生于<span itemprop="birthDate">1954年8月16日)/span> </div> <span itemprop="genre">科幻片</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">预告片</a> </div>
2. 使用 schema.org 词汇表
2a. schema.org 类型和属性
不是所有的页面都是关于电影和人物的—除了第1节描述的Movie和 Person类型外, schema.org 描述了其他项类型,其中,每个都有自己的属性集,用于描述该项。
最广泛的项类型是 Thing,它有四个属性: name
,description
,url
和 image
。更多具体类型与 比其更广泛的类型共享属性。如, Place 是 Thing更具体的类型, LocalBusiness 是Place的更具体类型。更具体项继承它们父类的属性。(实际上, LocalBusiness is是Place和Organization的一个更具体类型 ,所以它继承了两者的属性)。
以下是常用的项类型集:
- 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
也可见 full list of all item types,由单独的页面列出。
2b. 期望的类型、文字以及 URL
在网页中添加schema.org标识时,需要谨记以下注意事项。
- 越多越好,除了隐藏文本。 一般来说,标识的内容越多越好。不过,你应该只标识对用户可见的内容而不是隐藏在div或网页元素中的内容。
- 预期类型与文本。浏览 schema.org的过程中,你会发现很多属性都有“预期类型。这意味着该属性的值可作为嵌入项(见1d:嵌入项)。但这并不是一个硬性要求 —适用于仅包含普通文本或一个URL。另外,预期类型被确定时,它也可嵌入一个该类型子类的项。例如,如果与其类型是Place,嵌入一个LocalBusiness是合适的。
- 使用url属性。有些网页是关于具体项的。如,你可能有一个专门描述单个被标识为Person项类型人的物网页。而另一网页上有描述它们的项集合。例如,你公司的网站会有网页专门对员工进行列表,而且每个员工都有链接到具体的个人主页。对于这种包含项集合的网页,你应该单独标识每个项(这里作为一系列Persons)并在相应的链接上添加url属性,如下所示:
<div itemscope itemtype="http://schema.org/Person"> <a href="alice.html" itemprop="url">张艺谋</a> </div> <div itemscope itemtype="http://schema.org/Person"> <a href="bob.html" itemprop="url">王晶</a> </div>
2c. 测试你的标记
就像用浏览器检测你的网页布局变化和用代码编译器检测你写的代码那样重要,你应该也测试你的schema.org标识以确保其正确实现。谷歌提供了丰富网页摘要检测工具,你可以使用它们来检测你的标识并找出错误。
3. 高级话题: 机器可理解的信息
很多网页的描述只需用到由schema.org定义并加入 itemscope,
itemtype和
itemprop
属性(section1描述的)的类型和属性 (section2所描述的)。
然而,有时如果不消除额外的歧义,机器还是很难理解该项的属性。这一节介绍了如何让你在标识页面后为能机器提供一个它可理解的信息版本。
- 日期, 时间,和 期限:使用
time
和datetime
标签。 - 枚举 和 规范的引用 :使用
href
属性标记链接。 - 缺失/隐含的信息: 添加
meta
标签和content
属性。
3a. 日期,时间和期限: 使用 time 和 datetime 标签
机器很难理解日期和时间。就拿 “04/01/11”来说,它是标识2004年1月11日?2011年1月4日?还是2011年4月1日?因此,使用带有datetime
属性的time
标签。datetime
的值使用 YYYY-MM-DD
格式。下面的HTML代码明确表示2011年4月1日。
<time datetime="2011-04-01">04/01/11</time>
你也可以使用 hh:mm
或hh:mm:ss
格式 明确表示时间。时间前缀用字母T表示,而且可以跟日期一起表示某天的某个时间,如下:
<time datetime="2011-05-08T19:30">5月 8日, 7:30pm</time>
这里的HTML代码描述的是在2011年5月8日举行的音乐会。该活动的标识包括活动的名称、一个描述以及活动的日期。
<div itemscope itemtype="http://schema.org/Event"> <div itemprop="name">Spinal Tap</div> <span itemprop="description">有史以来最响亮的乐队之一 将在此度过难忘的两天。</span> 活动日期: <time itemprop="startDate" datetime="2011-05-08T19:30">5月 8日, 7:30pm</time> </div>
期限的描述与以上方式类似,使用带有datetime
属性的time
标签。期限前缀用字母P标示(P表示“period”)。下面给出的是,如何明确描述烹饪一个菜谱所需的一个半小时:
<time itemprop="cookTime" datetime="PT1H30M">1 1/2 小时</time>
H
用来表示单位小时, M
表示单位分。
日期、时间和期限的标准规范,请见 ISO 8601 date/time standard.
3b. 枚举和规范的引用: 使用 href 属性标记链接
枚举
某些属性值只能在某一有限集合中取得。程序通常称它们为“枚举”。比如, 销售某项的在线商店使用Offer项类型来详细描述其报价。 availability
属性值一般只几个可能值之一 —In stock
, Out of stock
, Pre-order
,等等。与项类型表示为URLs一样,枚举的可能值在schema.org中也被表示成URLs。
下面是一个出售项,它被标识了Offer类型以及相关属性:
<div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name">飘柔洗发水</span> <span itemprop="price">$19.95</span> <span itemprop="availability">今天有效!</span> </div>
项同上,但是用了 link
和 href
来表示availability
的值:
<div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name">飘柔洗发水</span> <span itemprop="price">$19.95</span> <link itemprop="availability" href="http://schema.org/InStock"/>今天有效! </div>
Schema.org 为少数属性提供了枚举—通常是对于有有限取值个数的属性,在schema.org中可找到相应的枚举规范。该例子中,availability
的值在 ItemAvailability中有规范。
规范的引用
通常链接指定是用 <a>
元素。例如,下面的HTML链接到有麦田守望者这本书的维基百科页面。
<div itemscope itemtype="http://schema.org/Book"> <span itemprop="name">麦田守望者</span>— <span itemprop="author">塞林格</a> 这是书所在的 <a itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">维基百科页面</a>。 </div>
正如你能看到的一样, itemprop="url"
可用来指定一个链接,从该页面连接到讨其他网站的页面(这里指的是维基百科),当然,两个页面所讨论的项要一致。 链接到第三方网站能够帮助搜索引擎更好地理解你的网页上所描述的项。
但是,你可能并不想在你的网页上添加一个可见链接。本例当中,你可以用一个link
元素来代替,如下所示:
<div itemscope itemtype="http://schema.org/Book"> <span itemprop="name">麦田守望者</span>— <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" /> <span itemprop="author">塞林格</span> </div>
3c. 缺失/隐含的信息: 添加 meta 标签和 content 属性
有时,网页上有值得标识的信息,但因为它们在网页上的显示方式导致它们不能被标识。这些信息可能通过图像(如,表示比率等于5分之4的图片)或Flash object(如,视频的时长)本身来表达,又或者是隐含其中并没在网页上明确表示(售价所用的货币种类)。
此时,使用 带有content
属性的meta
标签明确表示该信息。下面,回到这个例子—表示比率等于5分之4的图片。
<div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name">飘柔洗发水</span> <span itemprop="price">$19.95</span> <img src="four-stars.jpg" /> 基于25个用户评论 </div>
这里,该例子再次用比率信息标识。
<div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name">飘柔洗发水</span> <span itemprop="price">$19.95</span> <div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating"> <img src="four-stars.jpg" /> <meta itemprop="ratingValue" content="4" /> <meta itemprop="bestRating" content="5" /> 基于 <span itemprop="ratingCount">25</span> 个用户评论 </div> </div>
应该谨慎使用此技术。只有使用带有该信息内容的meta
,否则不能被标识。
3d. 扩展 schema.org
大多数网站和组织将没有理由去扩展schema.org。然而, schema.org 提供了表示额外属性或已有类型的子类型的功能。 如果你对此感兴趣,可从schema.org extension mechanism中了解更多。
最后更新时间:2011年1月29日