itemscope

itemscope は論理グローバル属性で、関連付けられたメタデータのスコープを定義します。itemscope 属性を要素に指定すると、要素に関連付けられた数々の名前と値の組み合わせを持つ新しいアイテムを作成します。

関連する属性であるitemtype は、アイテムおよびそのプロパティのコンテキストを記述する語彙（schema.org など）の有効な URL を指定するために使用されます。以下のそれぞれの例では、schema.org からの語彙を使用しています。

あらゆる HTML 要素にitemscope 属性を設定することができます。itemscope 要素がitemtype を持たない場合は、関連付けられたitemref を持つ必要があります。

メモ:itemtype 属性についての詳細は、https://schema.org/Thing をご覧ください

itemscope の id 属性

ある要素にitemscope 属性を指定すると、新しいアイテムが作成されます。アイテムは名前と値の組のグループから構成されます。itemscope 属性とitemtype 属性を持つ要素では、id 属性も指定することができます。id 属性を使用すると、新しいアイテムにグローバルな識別子を設定することができます。グローバルな識別子によって、そのアイテムはウェブ上のページで見られる他のアイテムに関連付けることができます。

例

映画の構造化データの表現

以下の例では、itemscope 属性を指定しています。この例ではitemtype を "http://schema.org/Movie" に設定し、 3 つの関連するitemprop 属性を定義します。

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

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>

レシピの構造化データの表現

以下の例には 4 つのitemscope 属性があります。それぞれのitemscope 属性は、対応するitemtype 属性のスコープを設定しています。以下の例にあるRecipe,AggregateRating,NutritionInformation のitemtype は、レシピのためのschema.org 構造化データの一部であり、最初のitemtype,http://schema.org/Recipe として定義されています。

itemscope	itemtype	Recipe
	itemprop	name	Grandma's Holiday Apple Pie
	itemprop	image	https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
	itemprop	datePublished	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	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

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>