itemscope

概要

Itemscopeは（通常）、ブロックに含まれるHTMLが特定のアイテムに関するものであることを指定するために、itemtypeと一種に動作します。Itemscopeは、アイテムを作成し、そのアイテムと関連付けられるitemtypeの範囲を定義します。itemtypeは、 is a valid URL of a vocabulary (such as ) that describes アイテムとアイテムのプロパティコンテキストを説明する（schema.orgのような）語彙の妥当なURLです。下記の例で、使用される語彙は、schema.org由来のものです。すべてのHTML要素は、itemscope属性を指定されてもよいです。関連するitemtypeを持たないitemscope要素は、itemrefを持ちます。

簡単な例

HTML

<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のID

指定されたitemscope属性をもつ要素は、名前-値ペアのグループで構成される新しいアイテムを作成します。itemscope属性とitemtype属性をもつ要素は、それがウェブの他のページ上の他のアイテムに関連することができるように、アイテムのグローバル識別子を与えるために、（itemidではなく、itemref要素を参照する）id属性を指定されてもよいです。

例

この例では3つのitemscopeが存在します。 3つのitemscopeは順番に、3つの対応するitemtypesの範囲を設定します。 3つのitemtypesは、Recipe、AggregateRating、NutritionInformationです。これらのitemtypeはレシピのための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

構造化されたデータ