在 HTML 中使用微数据

微数据是 WHATWG HTML 标准的一部分,用于在网页的现有内容中嵌套元数据。搜索引擎和网络爬虫可以从网页中提取和处理微数据,并将其用于为用户提供更丰富的浏览体验。搜索引擎从直接访问这些结构化数据中受益匪浅,因为它使搜索引擎能够理解网页上的信息并为用户提供更相关的结果。微数据使用支持词汇表来描述一个项目,并使用名称-值对来为其属性赋值。微数据试图提供一种声明式的方式,用机器可读的标签来注释 HTML 元素,而不是使用 RDFa 和经典微格式的类似方法。

从宏观角度看,微数据由一组名称-值对组成。这些组被称为项目,每个名称-值对都是一个属性。项目和属性由常规元素表示。

  • 要创建一个项目,可以使用 itemscope 属性。
  • 要向项目添加属性,可以在项目的后代元素上使用 itemprop 属性。

词汇表

Google 和其他主要搜索引擎支持 Schema.org 词汇表用于结构化数据。该词汇表定义了一组标准的类型名称和属性名称,例如,Schema.org 音乐活动 表示一场音乐会表演,具有 startDatelocation 属性来指定音乐会的主要细节。在这种情况下,Schema.org 音乐活动 将是 itemtype 使用的 URL,而 startDatelocation 将是 Schema.org 音乐活动 定义的 itemprop

注意: 有关 itemtype 属性的更多信息,请参阅 https://schema.org/Thing

微数据词汇表提供了项目的语义或含义。Web 开发人员可以设计自定义词汇表,也可以使用 Web 上可用的词汇表,例如广泛使用的 schema.org 词汇表。Schema.org 提供了一系列常用的标记词汇表。

常用词汇表

Google、Microsoft 和 Yahoo! 等主要搜索引擎运营商依赖 schema.org 词汇表来改进搜索结果。对于某些目的,临时词汇表就足够了。对于其他目的,则需要设计词汇表。在可能的情况下,鼓励作者重用现有词汇表,因为这使得内容重用更容易。

本地化

在某些情况下,覆盖特定区域的搜索引擎可能会提供特定于本地的微数据扩展。例如,俄罗斯的主要搜索引擎 Yandex 支持 hCard(公司联系信息)、hRecipe(食谱)、hReview(市场评论)和 hProduct(产品数据)等微格式,并提供自己的术语和百科全书文章定义格式。此扩展是为了解决西里尔字母和拉丁字母之间的音译问题。由于实施了 Schema 词汇表的额外标记参数,俄语网页中的信息索引变得更加成功。

全局属性

itemid – 项目的唯一全局标识符。

itemprop – 用于向项目添加属性。每个 HTML 元素都可以指定一个 itemprop 属性,其中 itemprop 由一个名称-值对组成。

itemref – 不带 itemscope 属性的元素的后代属性可以使用 itemref 与项目关联。itemref 提供了一个元素 ID 列表(不是 itemid),其中包含文档中其他位置的其他属性。

itemscopeitemscope 属性(通常)与 itemtype 一起使用,以指定块中包含的 HTML 是关于特定项目的。itemscope 属性创建项目并定义与之关联的 itemtype 的范围。itemtype 属性是词汇表(例如 schema.org)的有效 URL,用于描述项目及其属性上下文。

itemtype – 指定将用于定义数据结构中 itemprop(项目属性)的词汇表的 URL。itemscope 属性用于设置 itemtype 设置的词汇表在数据结构中将活动的范围。

示例

HTML

html
<div itemscope itemtype="https://schema.org/SoftwareApplication">
  <span itemprop="name">Angry Birds</span> - REQUIRES
  <span itemprop="operatingSystem">ANDROID</span><br />
  <link
    itemprop="applicationCategory"
    href="https://schema.org/SoftwareApplication" />

  <div
    itemprop="aggregateRating"
    itemscope
    itemtype="https://schema.org/AggregateRating">
    RATING:
    <span itemprop="ratingValue">4.6</span> (
    <span itemprop="ratingCount">8864</span> ratings )
  </div>

  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    Price: $<span itemprop="price">1.00</span>
    <meta itemprop="priceCurrency" content="USD" />
  </div>
</div>

结构化数据

itemscope itemtype 软件应用程序 (https://schema.org/SoftwareApplication)
itemprop name 愤怒的小鸟
itemprop 操作系统 安卓
itemprop 应用类别 软件应用程序 (https://schema.org/SoftwareApplication)
itemscope itemprop[itemtype] aggregateRating [聚合评分]
itemprop 评分值 4.6
itemprop 评分计数 8864
itemscope itemprop[itemtype] offers [优惠]
itemprop 价格 1.00
itemprop 货币 美元

结果

注意: 一个用于从 HTML 中提取微数据结构的便捷工具是 Google 的 结构化数据测试工具。请在上面显示的 HTML 上试用它。

另见