itemscope

itemscope 是一个布尔类型的 全局属性,它定义了相关元数据的范围。为元素指定 itemscope 属性会创建一个新项目,从而生成一些与该元素相关的名称-值对。

一个相关的属性,itemtype,用于指定词汇表(例如 schema.org)的有效 URL,该词汇表描述了项目及其属性的上下文。在以下每个示例中,词汇表都来自 schema.org

每个 HTML 元素都可以指定 itemscope 属性。没有关联 itemtypeitemscope 元素必须有一个关联的 itemref

注意:https://schema.org/Thing 了解更多关于 itemtype 属性的信息。

itemscope id 属性

当您为元素指定itemscope 属性时,就会创建一个新项目。该项目由一组名称-值对组成。对于具有itemscope 属性和itemtype 属性的元素,您也可以指定id 属性。您可以使用id 属性为新项目设置全局标识符。全局标识符使项目能够与 Web 上其他页面中找到的其他项目相关联。

示例

表示电影的结构化数据

以下示例将itemtype 指定为"http://schema.org/Movie",并指定了四个相关的itemprop 属性。

itemscope 项目类型 电影
itemprop (itemprop 名称) (itemprop 值)
itemprop 导演 詹姆斯·卡梅隆
itemprop 类型 科幻
itemprop 名称 阿凡达
itemprop 预告片 https://youtu.be/0AY1XIkX7bY
html
<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="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
</div>

表示食谱的结构化数据

以下示例中有四个itemscope 属性。每个itemscope 属性都设置了其对应itemtype 属性的范围。以下示例中的itemtypeRecipeAggregateRatingNutritionInformationschema.org 结构化数据的一部分,用于表示食谱,如第一个itemtypehttp://schema.org/Recipe 所指定的那样。

itemscope itemtype 食谱
itemprop 名称 奶奶的假日苹果派
itemprop 图片 https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
itemprop 发布日期 2022-11-05
itemprop 描述 这是我奶奶的苹果派食谱。我喜欢加一点肉豆蔻。
itemprop 准备时间 PT30M
itemprop 烹饪时间 PT1H
itemprop 总时间 PT1H30M
itemprop 食谱产量 1 个 9 英寸派(8 份)
itemprop 食谱食材 薄片苹果:6 杯
itemprop 食谱食材 白糖:3/4 杯
itemprop 食谱说明 1. 切割并去皮苹果 2. 将糖和肉桂混合。对于酸苹果,可以使用更多的糖。
itemprop 作者 [Person]
itemprop 名称 卡罗尔·史密斯
itemscope itemprop[itemtype] aggregateRating [AggregateRating]
itemprop 评分值 4.0
itemprop 评价数量 35
itemscope itemprop[itemtype] 营养 [NutritionInformation]
itemprop 一份量 1 块中等大小
itemprop 卡路里 250 卡路里
itemprop 脂肪含量 12 克

注意: 谷歌的丰富结果测试工具 是一个用于从 HTML 中提取微数据结构的实用工具。请在显示的 HTML 代码上试用一下。

HTML

html
<div itemscope itemtype="https://schema.org/Recipe">
  <h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
  <img
    itemprop="image"
    src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg"
    width="50"
    height="50" />
  <p>
    By
    <span itemprop="author" itemscope itemtype="https://schema.org/Person">
      <span itemprop="name">Carol Smith</span>
    </span>
  </p>
  <p>
    Published:
    <time datetime="2022-11-05" itemprop="datePublished">
      November 5, 20022
    </time>
  </p>
  <span itemprop="description">
    This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
  </span>
  <br />
  <span
    itemprop="aggregateRating"
    itemscope
    itemtype="https://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.0</span> stars based on
    <span itemprop="reviewCount">35</span> reviews
  </span>
  <br />
  Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time>
  <br />
  Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour</time>
  <br />
  Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time>
  <br />
  Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span>
  <br />
  <span
    itemprop="nutrition"
    itemscope
    itemtype="https://schema.org/NutritionInformation">
    Serving size: <span itemprop="servingSize">1 medium slice</span><br />
    Calories per serving: <span itemprop="calories">250 cal</span><br />
    Fat per serving: <span itemprop="fatContent">12 g</span><br />
  </span>
  <p>
    Ingredients:<br />
    <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br /></span>
    <span itemprop="recipeIngredient">White sugar: 3/4 cup<br /></span></p>
  Directions: <br />
  <div itemprop="recipeInstructions">
    1. Cut and peel apples<br />
    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br /></div>
</div>

结果

规范

规格
HTML 标准
# attr-itemscope

另请参见