MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

itemprop

概要

itemprop属性は、アイテムにプロパティを追加するために使用されます。すべてのHTML要素は、itemprop属性を指定することができ、itempropは、名前-値ペアで構成されます。それぞれの名前-値ペアは、プロパティと呼ばれ、1つ以上のプロパティのグループは、アイテムを形成します。プロパティの値は、文字列かURLのいずれかであり、audioembediframeimglinkobjectsourcetrackvideoを含む非常に幅広い要素と関連付けることができます。

簡単な例

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="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

 

構造化されたデータ

  Item
itemprop name itemprop value
itemprop name Avatar
itemprop director James Cameron
itemprop genre Science fiction
itemprop trailer ../movies/avatar-theatrical-trailer.html

プロパティ

プロパティは、文字列かURLのいずれかとなる値を持ちます。 文字列の値がURLである場合、img要素とsrc属性のような、要素とその要素の属性、またはリンクする他の要素や埋め込み外部リソースを用いて表現されます。

文字列である値をもつ3つのプロパティ

<div itemscope>
 <p>My name is <span itemprop="name">Neil</span>.</p>
 <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
 <p>I am <span itemprop="nationality">British</span>.</p>
</div>

値がURLとなる"image"プロパティ

<div itemscope>
 <img itemprop="image" src="google-logo.png" alt="Google">
</div>

文字列が人によって簡単に読むことや理解することができない場合(例えば、長い数字や文字)、要素のコンテンツで与えられるより人に理解しやすいもの (これは構造化されたデータの一部ではありません―下記の例を参照)とともに、data要素のvalue属性を用いて表示することができます。

値がプロダクトであるプロパティをもつアイテム。IDは人に優しいものでなく、プロダクト名はIDの代わりに人に読めるテキストを使用します。

<h1 itemscope>
 <data itemprop="product-id" value="9678AOU879">The Instigator 2000</data>
</h1>

数値データの場合、meter要素とvalue属性を使用することができます。

meter要素の例

<div itemscope itemtype="http://schema.org/Product">
 <span itemprop="name">Panasonic White 60L Refrigerator</span>
 <img src="panasonic-fridge-60l-white.jpg" alt="">
  <div itemprop="aggregateRating"
       itemscope itemtype="http://schema.org/AggregateRating">
   <meter itemprop="ratingValue" min=0 value=3.5 max=5>Rated 3.5/5</meter>
   (based on <span itemprop="reviewCount">11</span> customer reviews)
  </div>
</div>

同様に、日付や時間に関連するデータについて、time要素とdatetime属性を使用することができます。

この例で、アイテムは値が日付である"birthday"プロパティを持ちます。

<div itemscope>
 I was born on <time itemprop="birthday" datetime="2009-05-10">May 10th 2009</time>.
</div>

プロパティはまた、 プロパティを宣言する要素でitemscope属性を置くことによって、名前-値ペアのグループを持つことができます。それぞれの値は、文字列か名前-値ペア(すなわちアイテム)のいずれかです。

この例で、外側のアイテムは人を表し、内側のアイテムはバンドを表します。

<div itemscope>
 <p>Name: <span itemprop="name">Amanda</span></p>
 <p>Band: <span itemprop="band" itemscope> <span itemprop="name">Jazz Band</span> (<span itemprop="size">12</span> players)</span></p>
</div>

上の外側のアイテムは、"name"と"band"の2つのプロパティを持ちます。"name"は"Amanda"であり、"band"は2つのプロパティ"name"と"size"とともに、それ自身でアイテムです。バンドの"name"は"Jazz Band"であり、"size"は"12"です。この例における外側のアイテムは、トップレベルmicrodataアイテムです。他の一部でないアイテムは、トップレベルmicrodataアイテムと呼ばれます。

この例は1つ前の例と同じですが、すべてのプロパティがアイテムから分離されます

<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
 <p>Band: <span itemprop="name">Jazz Band</span></p>
 <p>Size: <span itemprop="size">12</span> players</p>
</div>

これは1つ前の例と同じ結果を与えます。最初のアイテムは2つのプロパティを持ちます。"name"は"Amanda"に設定され、"band"はもう1つのアイテムに設定されます。2つ目のアイテムはさらに2つのプロパティを持ち、"name"は"Jazz Band"に設定され、"size"は"12"に設定されます。

アイテムは同じ名前かつ異なる値をもつ複数のプロパティを持つことができます。

この例は2つのフレーバーをもつ、アイスクリームを説明します。

<div itemscope>
 <p>Flavors in my favorite ice cream:</p>
 <ul>
  <li itemprop="flavor">Lemon sorbet</li>
  <li itemprop="flavor">Apricot sorbet</li>
 </ul>
</div>

これは、名前"flavor"と値"Lemon sorbet"および"Apricot sorbet"の両方の、2つのプロパティをもつアイテムをもたらします。

プロパティを導入する要素はまた、複数のプロパティが同じ値を持つ場合に重複を避けるために、一度に複数のプロパティを導入することができます。

ここでどちらも値"orange"に設定される、2つのプロパティ"favorite-color"と"favorite-fruit"をもつアイテムを見てみましょう。

<div itemscope>
 <span itemprop="favorite-color favorite-fruit">orange</span>
</div>

注:microdataがマークアップされる場所で、microdataと文書のコンテンツとの間の関係は存在しません。

次の2つの例との間にセマンティックな違いはありません。

<figure>
 <img src="castle.jpeg">
 <figcaption><span itemscope><span itemprop="name">The Castle</span></span> (1986)</figcaption>
</figure>
<span itemscope><meta itemprop="name" content="The Castle"></span>
<figure>
 <img src="castle.jpeg">
 <figcaption>The Castle (1986)</figcaption>
</figure>

両者はcaptionを伴うfigureを持ち、両者とも、figureに完全に関連しない、名前"name"と値"The Castle"をもつ名前-値ペアのアイテムを持ちます。唯一の違いは、ユーザーが文書の外にfigcaptionをドラッグする場合、アイテムがドラッグ&ドロップデータに含まれることです。アイテムに関連付けられる画像は含まれません。

名前と値

プロパティは、大文字・小文字を区別して名前-値ペアを表す一意なトークンの順序なしセットです。下記の例で、それぞれのデータセルはトークンです。

名前の例

  Item
itemprop name itemprop value
itemprop country Ireland
itemprop Option 2
itemprop https://www.flickr.com/photos/nlireland/6992065114/ Ring of Kerry
itemprop img https://www.flickr.com/photos/nlireland/6992065114/
itemprop website flickr
itemprop (token) (token)

トークンは、文字列かURLのいずれかです。アイテムは、URLの場合に型付きアイテムと呼ばれます。そうでなければ、文字列です。文字列は、ピリオドまたはコロンを含むことができません(下記参照)。

  1. アイテムが型付きアイテムの場合、次のいずれかでなければなりません:
    1. 定義されたプロパティ名。
    2. または、妥当なURL。これは、語彙定義を参照します。
    3. または、A valid URL that is used as a 所有者のアイテムプロパティ名(すなわち、パブリックな仕様で定義されないもの)として使用される妥当なURL。
  2. アイテムが型付きアイテムでない場合は次のようにならなければなりません:
    1. "."(U+002E FULL STOP)文字と":"(U+003A COLON)文字を含まず、 所有者のアイテムプロパティ名(パブリックな仕様で定義されないもの)として使用される文字列。

注: 上記の規則は非URLの値で":"を許可しません。なぜならそうでなければURLと区別できないからです。"."文字をもつ値は、将来の拡張のために予約されます。空白文字は複数のトークンとして解析されるために許可されません。

名前-値ペアのプロパティ値は、次のリストで最初にマッチするものに与えられます:

  • 要素がitemscope属性を持つ場合
    • 値は要素によって作成されたアイテムを持つ
  • 要素がmeta要素である場合
    • 値は、要素のコンテンツ属性の値である
  • 要素がaudioembediframeimgsourcetrackvideo要素である場合
    • 値は、属性が設定される時に要素のノード文書(Microdata DOM APIの一部)に関連する要素のsrc属性の解析する値に由来する結果のURL文字列である
  • 要素がaarealink要素である場合
    • 値は、属性が設定される時に要素のノード文書に関連する要素のhref属性の解析する値に由来する結果のURL文字列である
  • 要素がobject要素である場合
    • 値は、属性が設定される時に要素のノード文書に関連する要素のdata属性の解析する値に由来する結果のURL文字列である
  • 要素がdata要素である場合
    • 値は、要素のvalue属性の値である
  • 要素がmeter要素である場合
    • 値は、要素のvalue属性の値である
  • 要素がtime要素である場合
    • 値は、要素のdatetime値である

その他

  • 値は、要素のtextContentである。

プロパティの値がURLである場合、プロパティはURLプロパティ要素を使用して指定されなければなりません。URLプロパティ要素は、aareaaudioembediframeimglinkobjectsourcetrackvideo要素です。

名前の順序

名前は互いに順不同の関係がありますが、特定の名前が複数の値を持つ場合、その値は相対的な順序を持ちます。

次の例で、"a"プロパティは その順序で値"1"と"2"を持ちますが、"a"プロパティが"b" property"プロパティの前に来るかどうかは重要ではありません

<div itemscope>
 <p itemprop="a">1</p>
 <p itemprop="a">2</p>
 <p itemprop="b">test</p>
</div>

次の例は等価です

<div itemscope>
 <p itemprop="b">test</p>
 <p itemprop="a">1</p>
 <p itemprop="a">2</p>
</div>

次も同様です

<div itemscope>
 <p itemprop="a">1</p>
 <p itemprop="b">test</p>
 <p itemprop="a">2</p>
</div>

次もです

<div id="x">
 <p itemprop="a">1</p>
</div>
<div itemscope itemref="x">
 <p itemprop="b">test</p>
 <p itemprop="a">2</p>
</div>

HTML

<dl itemscope 
    itemtype="http://vocab.example.net/book" 
    itemid="urn:isbn:0-330-34032-8"
 <dt>Title <dd itemprop="title">The Reality Dysfunction 
 <dt>Author <dd itemprop="author">Peter F. Hamilton 
 <dt>Publication date 
 <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time> </dl>

構造化されたデータ

itemscope itemtype: itemid
http://vocab.example.net/book: urn:isbn:0-330-34032-8
itemprop title The Reality Dysfunction
itemprop author
Peter F. Hamilton
itemprop pubdate 1996-01-26

Result

仕様

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

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

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

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