使用 Microdata 开始使用 Schema.org

使用 Microdata 开始使用 Schema.org

大多数网站管理员熟悉他们页面上的 HTML 标签。通常,HTML 标签告诉浏览器如何显示标签中包含的信息。例如,<h1>Avatar</h1> 告诉浏览器以标题 1 格式显示文本字符串 “Avatar”。但是,HTML 标签没有给出关于该文本字符串意味着什么的任何信息——“Avatar” 可能指的是非常成功的 3D 电影,或者它可能指的是某种个人资料图片——这可能使搜索引擎更难智能地向用户显示相关内容。

Schema.org 提供了一组共享词汇,网站管理员可以使用它们以主要搜索引擎能够理解的方式标记他们的页面:Google、Microsoft、Yandex 和 Yahoo!

您可以将 schema.org 词汇与 MicrodataRDFaJSON-LD 格式一起使用,以向您的 Web 内容添加信息。本指南将帮助您快速掌握 Microdata 和 schema.org,以便开始向您的网页添加标记。

虽然本指南专注于 Microdata,但 schema.org 网站上的大多数示例也显示了 RDFa 和 JSON-LD 中的示例。这里介绍的基本思想(类型、属性等)超出了 Microdata 的范围——请查看示例以了解细节如何比较。

目录

  1. 如何使用微数据标记您的内容
    1. 为什么要使用微数据?
    2. itemscope 和 itemtype
    3. itemprop
    4. 嵌入项目
  2. 使用 schema.org 词汇
    1. schema.org 类型和属性
    2. 预期类型、文本和 URL
    3. 测试您的标记
  3. 高级主题:信息的机器可理解版本
    1. 日期、时间和持续时间
    2. 枚举和规范引用
    3. 缺失/隐含信息
    4. 扩展 schema.org

1. 如何使用微数据标记您的内容

1a. 为什么要使用微数据?

您的网页具有底层含义,人们在阅读网页时会理解这些含义。但是搜索引擎对这些页面上讨论的内容的理解是有限的。通过向网页的 HTML 添加额外标签——标签说,”嘿搜索引擎,这些信息描述了这个特定的电影、地点、人或视频”——您可以帮助搜索引擎和其他应用程序更好地理解您的内容,并以有用、相关的方式显示它。微数据是一组标签,与 HTML5 一起引入,允许您这样做。

1b. itemscope 和 itemtype

让我们从一个具体的例子开始。想象您有一个关于电影 Avatar 的页面——一个包含电影预告片链接、导演信息等的页面。您的 HTML 代码可能看起来像这样:

1
2
3
4
5
6
<div>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

首先,识别页面中”关于”电影 Avatar 的部分。为此,在包含项目信息的 HTML 标签中添加 itemscope 属性,像这样:

1
2
3
4
5
6
<div itemscope>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954) </span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

通过添加 itemscope,您指定 <div>...</div> 块中包含的 HTML 是关于特定项目的。

但仅仅指定正在讨论一个项目并没有多大帮助,而不指定它是什么类型的项目。您可以使用紧跟在 itemscope 之后的 itemtype 属性来指定项目的类型。

1
2
3
4
5
6
<div itemscope itemtype="https://schema.org/Movie">
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

这指定 div 中包含的项目实际上是一个 Movie,正如 schema.org 类型层次结构中定义的那样。项目类型作为 URL 提供,在这种情况下是 https://schema.org/Movie

返回顶部

1c. itemprop

我们还可以为搜索引擎提供关于电影 Avatar 的哪些额外信息?电影有有趣的属性,如演员、导演、评分。要标记项目的属性,请使用 itemprop 属性。例如,要识别电影的导演,请在包含导演姓名的元素中添加 itemprop="director"。(在 https://schema.org/Movie 上有您可以与电影关联的所有属性的完整列表。)

1
2
3
4
5
6
<div itemscope itemtype ="https://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

请注意,我们添加了额外的 <span>...</span> 标签,以便将 itemprop 属性附加到页面上的适当文本。<span> 标签不会改变网页被 Web 浏览器渲染的方式,因此它们是与 itemprop 一起使用的方便 HTML 元素。

搜索引擎现在不仅可以理解 http://www.avatarmovie.com 是一个 URL,还可以理解它是科幻电影 Avatar 的预告片 URL,该电影由 James Cameron 导演。

返回顶部

1d. 嵌入项目

有时项目属性的值本身可以是另一个具有自己属性集的项目。例如,我们可以指定电影的导演是一个 Person 类型的项目,而 Person 有 namebirthDate 属性。要指定属性的值是另一个项目,请在相应的 itemprop 之后立即开始一个新的 itemscope

1
2
3
4
5
6
7
8
<div itemscope itemtype ="https://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<div itemprop="director" itemscope itemtype="https://schema.org/Person">
Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954</span>)
</div>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

返回顶部

2. 使用 schema.org 词汇

2a. schema.org 类型和属性

并非所有网页都是关于电影和人的——除了第 1 节中描述的 Movie 和 Person 类型之外,schema.org 描述了各种其他项目类型,每个类型都有自己的一组属性,可以用来描述项目。

最广泛的项目类型是 Thing,它有四个属性:namedescriptionurlimage。更具体的类型与更广泛的类型共享属性。例如,Place 是 Thing 的更具体类型,而 LocalBusiness 是 Place 的更具体类型。更具体的项目继承其父级的属性。(实际上,LocalBusiness 是 Place 和 Organization 的更具体类型,所以它从两个父类型继承属性。)

以下是一组常用项目类型:

您还可以查看所有项目类型的完整列表,列在一个页面上。

返回顶部

2b. 预期类型、文本和 URL

在向网页添加 schema.org 标记时,请记住以下几点。

  • 更多更好,除了隐藏文本。 一般来说,您标记的内容越多越好。但是,作为一般规则,您应该只标记对访问网页的人可见的内容,而不是隐藏 div 或其他隐藏页面元素中的内容。
  • 预期类型 vs 文本。 在浏览 schema.org 类型时,您会注意到许多属性有”预期类型”。这意味着属性的值本身可以是一个嵌入项目(见第 1d 节:嵌入项目)。但这不是必需的——只包含常规文本或 URL 就可以。此外,每当指定预期类型时,嵌入预期类型的子类型的项目也是可以的。例如,如果预期类型是 Place,那么嵌入 LocalBusiness 也是可以的。
  • 使用 url 属性。 一些网页是关于特定项目的。例如,您可能有一个关于单个人的网页,您可以使用 Person 项目类型标记它。其他页面在它们上面描述了项目的集合。例如,您的公司网站可能有一个列出员工的页面,每个员工都有一个指向其个人资料页面的链接。对于这样的包含项目集合的页面,您应该单独标记每个项目(在这种情况下作为一系列 Person),并为指向每个项目相应页面的链接添加 url 属性,像这样:
1
2
3
4
5
6
<div itemscope itemtype="https://schema.org/Person">
<a href="alice.html" itemprop="url">Alice Jones</a>
</div>
<div itemscope itemtype="https://schema.org/Person">
<a href="bob.html" itemprop="url">Bob Smith</a>
</div>

返回顶部

2c. 测试您的标记

就像 Web 浏览器对测试网页布局更改很重要,代码编译器对测试您编写的代码很重要一样,您也应该测试 schema.org 标记以确保其正确实现。Google 提供了一个丰富的片段测试工具,您可以使用它来测试标记并识别任何错误。

3. 高级主题:信息的机器可理解版本

许多页面只能使用 itemscopeitemtypeitemprop 属性(第 1 节中描述)以及 schema.org 上定义的类型和属性(第 2 节中描述)来描述。

但是,有时项目属性对于机器来说很难理解,而无需额外消歧。这个部分描述了在标记页面时如何提供信息的机器可理解版本。

  • 日期、时间和持续时间:使用带有 datetimetime 标签
  • 枚举和规范引用:使用带有 hreflink 标签
  • 缺失/隐含信息:使用带有 contentmeta 标签。

返回顶部

3a. 日期、时间和持续时间:使用带有 datetime 的 time 标签

日期和时间对于机器来说可能很难理解。考虑日期 “04/01/11”。它是指 2004 年 1 月 11 日?2011 年 1 月 4 日?还是 2011 年 4 月 1 日?为了使日期明确,请使用 time 标签以及 datetime 属性。datetime 属性的值是使用 YYYY-MM-DD 格式指定的日期。下面的 HTML 代码明确地将日期指定为 2011 年 4 月 1 日。

1
<time datetime="2011-04-01">04/01/11</time>

您还可以指定一天中的时间,使用 hh:mmhh:mm:ss 格式。时间以字母 T 为前缀,可以与日期一起提供,像这样:

1
<time datetime="2011-05-08T19:30">May 8, 7:30pm</time>

让我们在上下文中看看。这是一些描述 2011 年 5 月 8 日举行的音乐会的 HTML。Event 标记包括事件的名称、描述和事件的日期。

1
2
3
4
5
6
7
<div itemscope itemtype="https://schema.org/Event">
<div itemprop="name">Spinal Tap</div>
<span itemprop="description">One of the loudest bands ever
reunites for an unforgettable two-day show.</span>
Event date:
<time itemprop="startDate" datetime="2011-05-08T19:30">May 8, 7:30pm</time>
</div>

持续时间可以类似地使用带有 datetime 属性的 time 标签指定。持续时间以字母 P 为前缀(代表”period”)。以下是如何指定食谱烹饪时间为 1 ½ 小时:

1
<time itemprop="cookTime" datetime="PT1H30M">1 1/2 hrs</time>

H 用于指定小时数,M 用于指定分钟数。

日期、时间和持续时间标准由 ISO 8601 日期/时间标准 指定。

返回顶部

枚举

一些属性只能取有限的可能值集合。程序员经常称这些为”枚举”。例如,一个有待售商品的在线商店可以使用 Offer 项目类型来指定报价的细节。availability 属性通常只能有几个可能值之一——In stockOut of stockPre-order 等。就像项目类型被指定为 URL 一样,schema.org 上枚举的可能值也可以指定为 URL。

以下是一个待售商品,使用 Offer 类型和相关属性标记:

1
2
3
4
5
<div itemscope itemtype="https://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<span itemprop="availability">Available today!</span>
</div>

以下是同一个商品,但使用 linkhref 来明确指定可用性为允许值之一:

1
2
3
4
5
<div itemscope itemtype="https://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<link itemprop="availability" href="https://schema.org/InStock"/>Available today!
</div>

Schema.org 为少数属性提供枚举——通常在属性的典型值有限的地方,有一个相应的枚举在 schema.org 中指定。在这种情况下,availability 的可能值在 ItemAvailability 中指定。

规范引用

通常,链接使用 <a> 元素指定。例如,以下 HTML 链接到《麦田里的守望者》一书的 Wikipedia 页面。

1
2
3
4
5
<div itemscope itemtype="https://schema.org/Book">
<span itemprop="name">The Catcher in the Rye</span>
by <span itemprop="author">J.D. Salinger</span>
Here is the book's <a itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">Wikipedia page</a>.
</div>

如您所见,itemprop="url" 可用于指定指向另一个站点(在这种情况下是 Wikipedia)上讨论同一项目的页面的链接。指向第三方站点的链接可以帮助搜索引擎更好地理解您在网页上描述的项目。

但是,您可能不想在页面上添加可见链接。在这种情况下,您可以改用 link 元素,如下所示:

1
2
3
4
5
<div itemscope itemtype="https://schema.org/Book">
<span itemprop="name">The Catcher in the Rye</span>
<link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
by <span itemprop="author">J.D. Salinger</span>
</div>

返回顶部

3c. 缺失/隐含信息:使用带有 content 的 meta 标签

有时,网页有有价值的信息可以标记,但由于它在页面上的显示方式而无法标记。信息可能在图像中传达(例如,用于表示 5 分之 4 评分的图像)或 Flash 对象(例如,视频剪辑的持续时间),或者它可能被暗示但未在页面上明确说明(例如,价格的货币)。

在这些情况下,使用带有 content 属性的 meta 标签来指定信息。考虑这个例子——图像向用户显示 5 分之 4 的星级评分:

1
2
3
4
5
6
<div itemscope itemtype="https://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<img src="four-stars.jpg" />
Based on 25 user ratings
</div>

以下是再次显示的示例,但评分信息已标记。

1
2
3
4
5
6
7
8
9
10
<div itemscope itemtype="https://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<div itemprop="reviews" itemscope itemtype="https://schema.org/AggregateRating">
<img src="four-stars.jpg" />
<meta itemprop="ratingValue" content="4" />
<meta itemprop="bestRating" content="5" />
Based on <span itemprop="ratingCount">25</span> user ratings
</div>
</div>

此技术应谨慎使用。只对无法以其他方式标记的信息使用带有 content 的 meta

返回顶部

3d. 扩展 schema.org

大多数站点和组织不会有什么理由扩展 schema.org。但是,schema.org 提供了指定现有类型的附加属性或子类型的能力。如果您有兴趣这样做,请阅读更多关于 schema.org 扩展机制 的信息。


使用 Microdata 开始使用 Schema.org
https://www.gjxx.dev/schema/documents/gs/
作者
gjxx
发布于
2025年10月16日
许可协议