MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

概要

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を持ちます。

注:itemtype属性に関するさらなる情報は、http://schema.org/Thingで見つけることができます。

簡単な例

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 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属性をもつ要素は、それがウェブの他のページ上の他のアイテムに関連することができるように、アイテムのグローバル識別子を与えるために、(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

構造化されたデータ

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からmicrodata構造を抽出するための便利なツールは、Googleの構造化データテストツールです。上に示したHTML上で試してみてください。

仕様

仕様 状態
itemscope WG Note - もはや積極的に開発されていません 【訳注: [1]】

【訳注: [1] 英語版の仕様に関する情報がW3C NoteとWHATWG HTML Standardと混ざったものになっているため、不正確な情報です。】

ドキュメントのタグと貢献者

 このページの貢献者: momdo
 最終更新者: momdo,