itemprop

itemprop 全局属性 用于向项目添加属性。每个 HTML 元素都可以指定 itemprop 属性，并且 itemprop 由一个名称-值对组成。每个名称-值对称为一个属性，一个或多个属性的组合形成一个项目。属性值可以是字符串或 URL，并且可以与非常广泛的元素相关联，包括 <audio>、<embed>、<iframe>、<img>、<link>、<object>、<source>、<track> 和 <video>。

示例

下面的示例显示了一组使用 itemprop 属性标记的元素的源代码，以及一个显示结果结构化数据的表格。

HTML

html
<div itemscope itemtype="http://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>

结构化数据

项目
itemprop 名称 itemprop 值
itemprop 名称 阿凡达
itemprop 导演 詹姆斯·卡梅隆
itemprop 类型 科幻
itemprop 预告片 ../movies/avatar-theatrical-trailer.html

属性

属性的值可以是字符串或 URL。当字符串值为 URL 时，它使用 <a> 元素及其 href 属性、<img> 元素及其 src 属性或其他链接到或嵌入外部资源的元素来表示。

三个值为字符串的属性

html
<div itemscope>
  <p>My name is <span itemprop="name">Neil</span>.</p>
  <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
  <p>I am <span itemprop="nationality">British</span>.</p>
</div>

一个属性“image”，其值为 URL

html
<div itemscope>
  <img itemprop="image" src="google-logo.png" alt="Google" />
</div>

当字符串值不容易被人理解和阅读时（例如，一长串数字和字母），可以使用 data 元素的 value 属性显示它，并在元素的内容中提供更容易被人理解的版本（这并不属于结构化数据 - 请参见下面的示例）。

一个属性值为产品 ID 的项目

ID 对人并不友好，因此改为使用产品的名称。

html
<h1 itemscope>
  <data itemprop="product-id" value="9678AOU879">The Instigator 2000</data>
</h1>

对于数值数据，可以使用 meter 元素及其 value 属性。

一个 meter 元素

html
<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Panasonic White 60L Refrigerator</span>
  <img src="panasonic-fridge-60l-white.jpg" alt="" />
  <div
    itemprop="aggregateRating"
    itemscope
    itemtype="http://schema.org/AggregateRating">
    <meter itemprop="ratingValue" min="0" value="3.5" max="5">
      Rated 3.5/5
    </meter>
    (based on <span itemprop="reviewCount">11</span>
    customer reviews)
  </div>
</div>

类似地，对于日期和时间相关数据，可以使用 time 元素及其 datetime 属性。

一个项目，有一个属性“birthday”，其值为日期

html
<div itemscope>
  I was born on
  <time itemprop="birthday" datetime="1984-05-10">May 10th 1984</time>.
</div>

属性也可以是名称-值对的组，方法是在声明该属性的元素上放置 itemscope 属性。每个值可以是字符串或名称-值对的组（即项目）。

一个代表人的外部项目，以及一个代表乐队的内部项目

html
<div itemscope>
  <p>Name: <span itemprop="name">Amanda</span></p>
  <p>
    Band:
    <span itemprop="band" itemscope>
      <span itemprop="name">Jazz Band</span>
      (<span itemprop="size">12</span> players)
    </span>
  </p>
</div>

上面的外部项目有两个属性，“name”和“band”。“name”是“Amanda”，“band”本身就是一个项目，有两个属性，“name”和“size”。乐队的“name”是“Jazz Band”，“size”是“12”。此示例中的外部项目是顶级微数据项目。不属于其他项目的项目称为顶级微数据项目。

所有属性与其项目分离

此示例与前一个示例相同，但所有属性都与其项目分离。

html
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
  <p>Band: <span itemprop="name">Jazz Band</span></p>
  <p>Size: <span itemprop="size">12</span> players</p>
</div>

这与前一个示例产生相同的结果。第一个项目有两个属性，“name”，设置为“Amanda”，以及“band”，设置为另一个项目。第二个项目还有两个属性，“name”，设置为“Jazz Band”，以及“size”，设置为“12”。

一个项目可以有多个具有相同名称但不同值的属性。

带有两种口味的冰淇淋

html
<div itemscope>
  <p>Flavors in my favorite ice cream:</p>
  <ul>
    <li itemprop="flavor">Lemon sorbet</li>
    <li itemprop="flavor">Apricot sorbet</li>
  </ul>
</div>

这将导致一个项目有两个属性，都名为“flavor”，分别具有“Lemon sorbet”和“Apricot sorbet”的值。

引入属性的元素也可以一次引入多个属性，以避免在某些属性具有相同值时出现重复。

一个项目有两个属性，“favorite-color”和“favorite-fruit”，都设置为值“orange”

html
<div itemscope>
  <span
    itemprop="favorite-color
    favorite-fruit"
    >orange
  </span>
</div>

注意：微数据与标记微数据的文档内容之间没有关系。

以两种不同方式标记的相同结构化数据

以下两个示例之间没有语义差异

html
<figure>
  <img src="castle.jpeg" />
  <figcaption>
    <span itemscope><span itemprop="name">The Castle</span></span> (1986)
  </figcaption>
</figure>
html
<span itemscope><meta itemprop="name" content="The Castle" /></span>
<figure>
  <img src="castle.jpeg" />
  <figcaption>The Castle (1986)</figcaption>
</figure>

两者都有一个带有标题的图形，并且两者都与图形完全无关，都包含一个名称-值对的项目，名称为“name”，值为“The Castle”。唯一的区别是，如果用户将 figcaption 从文档中拖出，则该项目将包含在拖放数据中。与该项目关联的图像将不会包含在内。

名称和值

属性是一组无序的唯一标记，这些标记区分大小写并表示名称-值对。属性值必须至少包含一个标记。在下面的示例中，每个数据单元格都是一个标记。

名称示例

项目
itemprop 名称 itemprop 值
itemprop 国家 爱尔兰
itemprop 选项 2
itemprop https://www.flickr.com/photos/nlireland/6992065114/ 凯里环
itemprop img https://www.flickr.com/photos/nlireland/6992065114/
itemprop 网站 flickr
itemprop （标记） （标记）

标记可以是字符串或 URL。如果项目是 URL，则称为类型化项目。否则，它是一个字符串。字符串不能包含句点或冒号（见下文）。

  1. 如果项目是类型化项目，则它必须是：
    1. 一个已定义的属性名称，或者
    2. 一个有效的 URL，它引用词汇表定义，或者
    3. 一个用作专有项目属性名称的有效 URL（即未在公共规范中定义的 URL），或者
  2. 如果项目不是类型化项目，则它必须是：
    1. 一个不包含“.”（U+002E FULL STOP）字符和“:”（U+003A COLON）字符的字符串，并用作专有项目属性名称（同样，未在公共规范中定义）。

注意：上述规则不允许非 URL 值中使用“:”字符，因为否则无法将其与 URL 区分。包含“.”字符的值保留供将来扩展使用。空格字符不允许使用，因为否则值将被解析为多个标记。

值

名称-值对的属性值如下列列表中第一个匹配的情况所示：

  • 如果元素具有 itemscope 属性
    • 该值为元素创建的项目
  • 如果元素是 meta 元素
    • 该值为元素 content 属性的值
  • 如果元素是 audio、embed、iframe、img、source、track 或 video 元素
    • 该值为解析元素 src 属性的值（相对于元素的节点文档（Microdata DOM API 的一部分））在设置该属性时获得的结果 URL 字符串
  • 如果元素是 a、area 或 link 元素
    • 该值为解析元素 href 属性的值（相对于元素的节点文档）在设置该属性时获得的结果 URL 字符串
  • 如果元素是 object 元素
    • 该值为解析元素 data 属性的值（相对于元素的节点文档）在设置该属性时获得的结果 URL 字符串
  • 如果元素是 data 元素
    • 该值为元素 value 属性的值
  • 如果元素是 meter 元素
    • 该值为元素 value 属性的值
  • 如果元素是 time 元素
    • 该值为元素的 datetime 值

否则

  • 该值为元素的textContent。

如果属性的值是 URL，则必须使用 URL 属性元素指定该属性。URL 属性元素是 a、area、audio、embed、iframe、img、link、object、source、track 和 video 元素。

名称顺序

名称彼此之间是无序的，但如果特定名称具有多个值，则它们确实具有相对顺序。

在下面的示例中，“a”属性的值为“1”和“2”，按此顺序，但“a”属性是否在“b”属性之前并不重要。

html
<div itemscope>
  <p itemprop="a">1</p>
  <p itemprop="a">2</p>
  <p itemprop="b">test</p>
</div>

以下是一些等效示例

html
<div itemscope>
  <p itemprop="b">test</p>
  <p itemprop="a">1</p>
  <p itemprop="a">2</p>
</div>
html
<div itemscope>
  <p itemprop="a">1</p>
  <p itemprop="b">test</p>
  <p itemprop="a">2</p>
</div>
html
<div id="x">
  <p itemprop="a">1</p>
</div>
<div itemscope itemref="x">
  <p itemprop="b">test</p>
  <p itemprop="a">2</p>
</div>

表示书籍的结构化数据

此示例使用微数据属性来表示以下结构化数据

itemscope itemtype: itemid https://schema.org/Book: urn:isbn:0-374-22848-5
itemprop title 东部冰原上的猫头鹰
itemprop 作者 乔纳森·C·斯莱特
itemprop 出版日期 2020-08-04

HTML

html
<dl
  itemscope
  itemtype="https://schema.org/Book"
  itemid="urn:isbn:0-374-22848-5<">
  <dt>Title</dt>
  <dd itemprop="title">Owls of the Eastern Ice</dd>
  <dt>Author</dt>
  <dd itemprop="author">Jonathan C Slaght</dd>
  <dt>Publication date</dt>
  <dd>
    <time itemprop="datePublished" datetime="2020-08-04">August 4 2020</time>
  </dd>
</dl>

结果

规范

规范
HTML 标准
# names:-the-itemprop-attribute

另请参阅