itemscope
itemscope
は論理型のグローバル属性で、関連付けられたメタデータのスコープを定義します。 itemscope
属性を要素に指定すると、要素に関連付けられた数々の名前と値の組み合わせを持つ新しいアイテムを作成します。関連する属性である itemtype
は、アイテム及びそのプロパティの文脈を記述する語彙 (schema.org など) の妥当な URL を指定するために使用されます。以下のそれぞれの例では、語彙は schema.org からのものです。
あらゆる HTML 要素に itemscope
属性を設定することができます。 itemscope
要素が itemtype
を持たない場合は、関連付けられた itemref
を持つ必要があります。
注: itemtype
属性についての詳細は、 http://schema.org/Thing をご覧ください
単純な例
HTML
以下の例では、 itemscope
属性を指定しています。この例では itemtype
を "http://schema.org/Movie" に設定し、三つの関連する itemprop
属性を定義します。
<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
属性は新しいアイテムにグローバル識別子を設定するために使用することができます。グローバル識別子によって、アイテムをウェブ中のページにあるほかのアイテムに結び付けることができます。
例
以下の例には四つの itemscope
属性があります。それぞれの itemscope
属性は、対応する itemtype
属性のスコープを設定しています。以下の例にある Recipe
, AggregateRating
, NutritionInformation
の itemtype
は、レシピのための schema.org 構造化データの一部であり、最初の itemtype
, http://schema.org/Recipe として定義されています。
<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</span>
</span>
</p>
<p>
Published: <time datetime="2009-11-05" itemprop="datePublished">November 5, 2009</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="http://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 hou</time>r<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="http://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
以下のものは、先ほどのコードの例を表示するものです。
構造化データ
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 |
注: HTML からマイクロデータを抽出するには、 Google の構造化データテストツールが便利です。上の HTML で試してみてください。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Microdata itemscope の定義 |
草案 | |
HTML Living Standard itemscope の定義 |
現行の標準 |
ブラウザーの互換性
BCD tables only load in the browser