itemscope
itemscope
是一个布尔类型的 全局属性,它定义了相关元数据的范围。为元素指定 itemscope
属性会创建一个新项目,从而生成一些与该元素相关的名称-值对。
一个相关的属性,itemtype
,用于指定词汇表(例如 schema.org)的有效 URL,该词汇表描述了项目及其属性的上下文。在以下每个示例中,词汇表都来自 schema.org。
每个 HTML 元素都可以指定 itemscope
属性。没有关联 itemtype
的 itemscope
元素必须有一个关联的 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 |
<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
属性的范围。以下示例中的itemtype
,Recipe
、AggregateRating
和NutritionInformation
是schema.org 结构化数据的一部分,用于表示食谱,如第一个itemtype
、http://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
<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 |