itemscope
Please take two minutes to fill out our short survey.
itemscope
是一个布尔值的 全局属性 。它定义了一个与元数据关联的数据项。就是说一个元素的 itemscope
属性会创建一个项,包含了一组与元素相关的键值对。相关的属性 itemtype
通常表示表中一个有效的 URL(比如 schema.org)来表述项目和上下文。下面每个例子中的概念表都来自 schema.org.
每个 HTML 元素都可以有指定的 itemscope
属性。一个具有 itemscope
属性的元素可以没有关联的 itemtype
,但必须有相关的 itemref
。
备注: Schema.org 提供了一份共享的词汇表,站长可以使用它来标记网页,而这些标记则被主要的搜索引擎:Google,Microsoft,Yandex 和 Yahoo!所支持。
备注:
获取更多关于 itemtype
属性的信息: http://schema.org/Thing
简单示例
HTML
下面一个例子指定的 itemscope
属性,设置了 itemtype
为 "http://schema.org/Movie",并且有 3 个关联的 itemprop
属性(name、director、genre)。
<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="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
</div>
结构化数据
下表展示了上面例子当中的结构化数据。
itemscope | Itemtype | Movie | |
itemprop | (itemprop name) | (itemprop value) | |
itemprop | director | James Cameron | |
itemprop | genre | Science Fiction | |
itemprop | name | Avatar | |
itemprop | https://youtu.be/0AY1XIkX7bY | Trailer |
itemscope
id 属性
当你表述一个元素的 itemscope
属性时,就创建了一个新的数据项。数据项包含了一组键值对。如果一个元素包含了 itemscope
和 itemtype
属性,你同时也就阐述了一个 id
属性。你可以用 id
属性为数据项设置一个全局的身份识别。这样你就可以通过这个识别与页面中其他的数据进行交互。
示例
下面示例中有 4 个 itemscope
属性。每一个 itemscope
设置了相应的 itemptype
属性。例子中itemtype
,Recipe
,AggregateRating
,以及 NutritionInformation
通过指定了 itemptype
,也就是 http://schema.org/Recipe
,也都是 schema.org 提供的一个食谱的结构化数据的一部分。
<div itemscope itemtype="http://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="http://schema.org/Person">
<span itemprop="name">Carol Smith</p></span>
</span>
<p>Published: <time datetime="2009-11-05" itemprop="datePublished">
November 5, 2009</p></time>
<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span>
<span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span>
Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time>
Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time>
Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time>
Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span>
<span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
Serving size: <span itemprop="servingSize">1 medium slice<br></span>
Calories per serving: <span itemprop="calories">250 cal<br></span>
Fat per serving: <span itemprop="fatContent">12 g<br></span>
</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
下面例子是上述例子的补充:
结构化数据
itemscope | itemtype | Recipe | |
itemprop | name | Grandma's Holiday Apple Pie | |
itemprop | image | https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg | |
itemprop | datePublished | 2009-11-05 | |
itemprop | description | This is my grandmother's apple pie recipe. I like to add a dash of nutmeg. | |
itemprop | prepTime | PT30M | |
itemprop | cookTime | PT1H | |
itemprop | totalTime | PT1H30M | |
itemprop | recipeYield | 1 9" pie (8 servings) | |
itemprop | recipeIngredient | Thinly-sliced apples: 6 cups | |
itemprop | recipeIngredient | White sugar: 3/4 cup | |
itemprop | recipeInstructions | 1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples . | |
itemprop | author [Person] | ||
itemprop | name | Carol Smith | |
itemscope | itemprop[itemtype] | aggregateRating [AggregateRating] | |
itemprop | ratingValue | 4.0 | |
itemprop | reviewCount | 35 | |
itemscope | itemprop[itemtype] | nutrition [NutritionInformation] | |
itemprop | servingSize | 1 medium slice | |
itemprop | calories | 250 cal | |
itemprop | fatContent | 12 g |
备注: Google 提供了一个方便地从 HTML 提取微数据结构的工具:结构化数据测试工具。你可以通过上面的 HTML 试一下。
规范
Specification |
---|
HTML # attr-itemscope |