HTML itemscope 全域性屬性
itemscope 是一個布林型的 全域性屬性,它定義了相關元資料的範圍。為元素指定 itemscope 屬性會建立一個新條目,該條目會生成與該元素相關聯的許多名稱-值對。
一個相關的屬性,itemtype,用於指定描述該條目及其屬性上下文的詞彙表(例如 schema.org)的有效 URL。在以下每個示例中,詞彙表均來自 schema.org。
每個 HTML 元素都可以指定 itemscope 屬性。沒有關聯 itemtype 的 itemscope 元素必須具有關聯的 itemref。
注意:有關 itemtype 屬性的更多資訊,請訪問 https://schema.org/Thing
itemscope id 屬性
當您為元素指定 itemscope 屬性時,會建立一個新條目。該條目由一組名稱-值對組成。對於帶有 itemscope 屬性和 itemtype 屬性的元素,您還可以指定一個 id 屬性。您可以使用 id 屬性為新條目設定全域性識別符號。全域性識別符號允許該條目與網頁中找到的其他條目相關聯。
示例
表示電影的結構化資料
以下示例將 itemtype 指定為 "http://schema.org/Movie",並指定了四個相關的 itemprop 屬性。
| itemscope | Itemtype | Movie | |
| itemprop | (itemprop 名稱) | (itemprop 值) | |
| itemprop | director | James Cameron | |
| itemprop | genre | Science Fiction | |
| itemprop | name | Avatar | |
| itemprop | Trailer | 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 | name | Grandma's Holiday Apple Pie | |
| itemprop | 圖片 | https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg | |
| itemprop | 出版日期 | 2022-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 | 評分值 | 4.0 | |
| itemprop | reviewCount | 35 | |
| itemscope | itemprop[itemtype] | nutrition [NutritionInformation] | |
| itemprop | servingSize | 1 medium slice | |
| itemprop | calories | 250 cal | |
| itemprop | fatContent | 12 g | |
注意:用於提取 HTML 中微資料結構的有用工具是 Google 的 富媒體搜尋結果測試工具。可以嘗試用它來測試此處顯示的 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 |
另見
- 其他不同的全域性屬性
- 其他與微資料相關的全域性屬性