GEO

Schema.org 入门指南:使用微数据提升网页语义化

2026/1/26
Schema.org 入门指南:使用微数据提升网页语义化
AI Summary (BLUF)

This guide introduces schema.org and Microdata for adding structured data to web pages, helping search engines better understand content. It covers basic concepts like itemscope, itemtype, and itemprop, along with practical examples and advanced topics like dates and enumerations. (本指南介绍如何使用 schema.org 和微数据为网页添加结构化数据,帮助搜索引擎更好地理解内容。涵盖 itemscope、itemtype 和 itemprop 等基本概念,并提供实际示例及日期、枚举等高级主题。)

注意:本文档基于 Schema.org 的开发版本。有关更多详情,请参阅 我们的工作方式

引言:超越 HTML 的语义标记

大多数网站管理员都熟悉页面上的 HTML 标签。通常,HTML 标签告诉浏览器如何显示标签中包含的信息。例如,<h1>Avatar</h1> 告诉浏览器以标题 1 的格式显示文本字符串“Avatar”。然而,HTML 标签本身并未提供关于该文本字符串含义的任何信息——“Avatar”可能指代那部极其成功的 3D 电影,也可能指代一种个人头像类型。这种模糊性使得搜索引擎难以智能地向用户展示相关内容。

Most webmasters are familiar with HTML tags on their pages. Usually, HTML tags tell the browser how to display the information included in the tag. For example, <h1>Avatar</h1> tells the browser to display the text string “Avatar” in a heading 1 format. However, the HTML tag doesn’t give any information about what that text string means—“Avatar” could refer to the hugely successful 3D movie, or it could refer to a type of profile picture—and this can make it more difficult for search engines to intelligently display relevant content to a user.

Schema.org 提供了一套共享的词汇表,网站管理员可以使用这些词汇表以主要搜索引擎(如 Google、Microsoft、Yandex 和 Yahoo!)能够理解的方式来标记他们的页面。

Schema.org provides a collection of shared vocabularies webmasters can use to mark up their pages in ways that can be understood by the major search engines: Google, Microsoft, Yandex and Yahoo!

您可以将 schema.org 词汇表与 MicrodataRDFaJSON-LD 格式结合使用,为您的网页内容添加结构化信息。本指南将帮助您快速掌握 Microdata 和 schema.org 的基础知识,以便开始为您的网页添加标记。

You use the schema.org vocabulary along with the Microdata, RDFa, or JSON-LD formats to add information to your Web content. This guide will help get you up to speed with Microdata and schema.org so that you can start adding markup to your web pages.

尽管本指南主要关注 Microdata,但 schema.org 网站上的大多数示例也展示了 RDFa 和 JSON-LD 格式。这里介绍的基本概念(类型、属性等)同样适用于 Microdata 之外的其他格式——您可以查看相关示例以了解细节上的差异。

Although this guide focuses on Microdata, most examples on the schema.org site show examples in RDFa and JSON-LD too. The basic ideas (types, properties etc.) introduced here are relevant beyond Microdata – take a look at the examples to see how the details compare.

1. 如何使用 Microdata 标记内容

1. How to Mark Up Your Content Using Microdata

1.1 为何使用 Microdata?

1.1 Why Use Microdata?

您的网页具有潜在的含义,人们在阅读时能够理解。但搜索引擎对这些页面所讨论内容的理解是有限的。通过在网页的 HTML 中添加额外的标签——这些标签相当于在说“嘿,搜索引擎,这条信息描述的是这部特定的电影、地点、人物或视频”——您可以帮助搜索引擎和其他应用程序更好地理解您的内容,并以有用、相关的方式展示它们。Microdata 是 HTML5 引入的一套标签,使您能够实现这一目标。

Your web pages have an underlying meaning that people understand when they read the web pages. But search engines have a limited understanding of what is being discussed on those pages. By adding additional tags to the HTML of your web pages—tags that say, “Hey search engine, this information describes this specific movie, or place, or person, or video”—you can help search engines and other applications better understand your content and display it in a useful, relevant way. Microdata is a set of tags, introduced with HTML5, that allows you to do this.

1.2 itemscopeitemtype

1.2 itemscope and itemtype

让我们从一个具体例子开始。假设您有一个关于电影《阿凡达》的页面,其中包含指向电影预告片的链接、导演信息等。您的 HTML 代码可能如下所示:

Let’s start with a concrete example. Imagine you have a page about the movie Avatar—a page with a link to a movie trailer, information about the director, and so on. Your HTML code might look something like this:

<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>

首先,确定页面中“关于”电影《阿凡达》的部分。为此,在包含项目信息的 HTML 标签上添加 itemscope 属性,如下所示:

To begin, identify the section of the page that is “about” the movie Avatar. To do this, add the itemscope attribute to the HTML tag that encloses information about the item, like this:

<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 是关于一个特定项目的。

By adding itemscope, you are specifying that the HTML contained in the <div>…</div> block is about a particular item.

但是,仅指定有一个被讨论的项目而不说明它是哪种类型的项目,帮助不大。您可以在 itemscope 之后立即使用 itemtype 属性来指定项目的类型。

But it’s not all that helpful to specify that there is an item being discussed without specifying what kind of an item it is. You can specify the type of item using the itemtype attribute immediately after the itemscope.

<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 中包含的项目实际上是 schema.org 类型层次结构中定义的 Movie(电影)。项目类型以 URL 形式提供,本例中为 https://schema.org/Movie

This specifies that the item contained in the div is in fact a Movie, as defined in the schema.org type hierarchy. Item types are provided as URLs, in this case https://schema.org/Movie.

1.3 itemprop

1.3 itemprop

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

What additional information can we give search engines about the movie Avatar? Movies have interesting properties such as actors, director, ratings. To label properties of an item, use the itemprop attribute. For example, to identify the director of a movie, add itemprop="director" to the element enclosing the director’s name. (There’s a full list of all the properties you can associate with a movie at https://schema.org/Movie.)

<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> 标签不会改变网页浏览器渲染页面的方式,因此它们是配合 itemprop 使用的便捷 HTML 元素。

Note that we have added additional <span>…</span> tags to attach the itemprop attributes to the appropriate text on the page. <span> tags don’t change the way pages are rendered by a web browser, so they are a convenient HTML element to use with itemprop.

现在,搜索引擎不仅能理解 http://www.avatarmovie.com 是一个 URL,还能理解它是科幻电影《阿凡达》预告片的 URL,该电影由詹姆斯·卡梅隆执导。

Search engines can now understand not just that http://www.avatarmovie.com is a URL, but also that it’s the URL for the trailer for the science-fiction movie Avatar, which was directed by James Cameron.

1.4 嵌套项目

1.4 Embedded Items

有时,项目属性的值本身可以是另一个具有自己属性集的项目。例如,我们可以指定电影的导演是一个 Person(人物)类型的项目,而该 Person 具有 name(姓名)和 birthDate(出生日期)属性。要指定某个属性的值是另一个项目,您需要在相应的 itemprop 之后立即开始一个新的 itemscope

Sometimes the value of an item property can itself be another item with its own set of properties. For example, we can specify that the director of the movie is an item of type Person and the Person has the properties name and birthDate. To specify that the value of a property is another item, you begin a new itemscope immediately after the corresponding itemprop.

<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 词汇表

2. Using the Schema.org Vocabulary

2.1 Schema.org 类型与属性

2.1 Schema.org Types and Properties

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

Not all web pages are about movies and people—in addition to the Movie and Person types described in section 1, schema.org describes a variety of other item types, each of which has its own set of properties that can be used to describe the item.

最广义的项目类型是 Thing,它具有四个属性:namedescriptionurlimage。更具体的类型会继承更广义类型的属性。例如,Place 是 Thing 的一个更具体的类型,而 LocalBusiness 又是 Place 的一个更具体的类型。更具体的项目会继承其父类型的属性。(实际上,LocalBusiness 是 Place Organization 的更具体类型,因此它从两个父类型继承属性。)

The broadest item type is Thing, which has four properties: name, description, url, and image. More specific types share properties with broader types. For example, a Place is a more specific type of Thing, and a LocalBusiness is a more specific type of Place. More specific items inherit the properties of their parent. (Actually, a LocalBusiness is a more specific type of Place and a more specific type of Organization, so it inherits properties from both parent types.)

以下是一些常用的项目类型:

Here’s a set of commonly used item types:

您也可以在完整类型列表页面上查看所有项目类型。

You can also see a full list of all item types, listed on a single page.

2.2 期望类型、文本与 URL

2.2 Expected Types, Text, and URLs

在为网页添加 schema.org 标记时,请记住以下几点注意事项:

Here are a few notes to keep in mind when adding schema.org markup to your web pages.

  • 标记越多越好,但隐藏文本除外。 一般来说,标记的内容越多越好。然而,作为一般规则,您应该只标记访问网页的用户可见的内容,而不是隐藏在 div 或其他隐藏页面元素中的内容。 (More is better, except for hidden text.)
  • 期望类型与文本。 在浏览 schema.org 类型时,您会注意到许多属性都有“期望类型”。这意味着该属性的值本身可以是一个嵌套项目(参见第 1.4 节:嵌套项目)。但这并非强制要求——仅包含常规文本或 URL 也是可以的。此外,只要指定了期望类型,嵌入一个属于该期望类型子类型的项目也是可以的。例如,如果期望类型是 Place,那么嵌入一个 LocalBusiness 也是可以的。 (Expected types vs text.)
  • 使用 url 属性。 有些网页是关于特定项目的。例如,您可能有一个关于单个人物的网页,可以使用 Person 项目类型进行标记。其他页面则描述了项目的集合。例如,您的公司网站可能有一个列出员工的页面,每个员工都有一个指向其个人资料页面的链接。对于这种包含项目集合的页面,您应该单独标记每个项目(本例中是一系列 Person),并为每个项目的链接添加 url 属性,如下所示: (Using the url property.)
<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>

2.3 测试您的标记

2.3 Testing Your Markup

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

Much like a web browser is important for testing changes to your web page layout, and a code compiler is important for testing code you write, you should also test your schema.org markup to make sure it is implemented correctly. Google provides a rich snippets testing tool, which you can use to test your markup and identify any errors.

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

3. Advanced Topic: Machine-Understandable Versions of Information

许多页面可以仅使用第 1 节描述的 itemscopeitemtypeitemprop 属性,以及第 2 节描述的 schema.org 定义的类型和属性来描述。

Many pages can be described using only the itemscope, itemtype, and itemprop attributes (described in section 1) along with the types and properties defined on schema.org (described in section 2).

然而,有时项目属性在没有额外消歧义的情况下,机器难以理解。本节描述了在标记页面时,如何提供信息的机器可理解版本。

However, sometimes an item property is difficult for a machine to understand without additional disambiguation. This section describes how you can provide machine-understandable versions of information when marking up your pages.

  • 日期、时间和持续时间:使用带有 datetime 属性的 <time> 标签。 (Dates, times, and durations: use the time tag with datetime)
  • **枚举和规范
← 返回文章列表
分享到:微博

版权与免责声明:本文仅用于信息分享与交流,不构成任何形式的法律、投资、医疗或其他专业建议,也不构成对任何结果的承诺或保证。

文中提及的商标、品牌、Logo、产品名称及相关图片/素材,其权利归各自合法权利人所有。本站内容可能基于公开资料整理,亦可能使用 AI 辅助生成或润色;我们尽力确保准确与合规,但不保证完整性、时效性与适用性,请读者自行甄别并以官方信息为准。

若本文内容或素材涉嫌侵权、隐私不当或存在错误,请相关权利人/当事人联系本站,我们将及时核实并采取删除、修正或下架等处理措施。 也请勿在评论或联系信息中提交身份证号、手机号、住址等个人敏感信息。