HTML itemscope 全域性屬性

itemscope 是一個布林型的 全域性屬性,它定義了相關元資料的範圍。為元素指定 itemscope 屬性會建立一個新條目,該條目會生成與該元素相關聯的許多名稱-值對。

一個相關的屬性,itemtype,用於指定描述該條目及其屬性上下文的詞彙表(例如 schema.org)的有效 URL。在以下每個示例中,詞彙表均來自 schema.org

每個 HTML 元素都可以指定 itemscope 屬性。沒有關聯 itemtypeitemscope 元素必須具有關聯的 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
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 屬性的作用域。以下示例中的 itemtypeRecipeAggregateRatingNutritionInformation 是食譜的 schema.org 結構化資料的一部分,由第一個 itemtypehttp://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

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

另見