itemprop

Das folgende Beispiel zeigt den Quelltext für eine Reihe von Elementen, die mit itemprop-Attributen versehen sind, gefolgt von einer Tabelle, die die resultierenden strukturierten Daten zeigt.

Eigenschaften haben Werte, die entweder eine Zeichenkette oder eine URL sind. Wenn ein Zeichenkettenwert eine URL ist, wird diese mit dem <a>-Element und dessen href-Attribut, dem <img>-Element und dessen src-Attribut oder anderen Elementen, die mit externen Ressourcen verknüpfen oder einbetten, ausgedrückt.

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

Wenn ein Zeichenkettenwert nicht leicht lesbar und verständlich für eine Person ist (z.B. eine lange Zeichenfolge aus Zahlen und Buchstaben), kann dieser mit dem Wertattribut des data-Elements angezeigt werden, wobei die für Menschen leichter verständliche Version im Inhalt des Elements angegeben wird (dies ist nicht Teil der strukturierten Daten – siehe Beispiel unten).

Die ID ist nicht menschenfreundlich, daher wird stattdessen der Produktname verwendet.

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

Für numerische Daten können das meter-Element und dessen Wertattribut verwendet werden.

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

Ähnlich können für datums- und zeitbezogene Daten das time-Element und dessen datetime-Attribut verwendet werden.

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

Eigenschaften können auch Gruppen von Name-Wert-Paaren sein, indem das itemscope-Attribut auf das Element gesetzt wird, das die Eigenschaft deklariert. Jeder Wert ist entweder eine Zeichenkette oder eine Gruppe von Name-Wert-Paaren (d.h. ein Item).

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

Das äußere Item oben hat zwei Eigenschaften, "name" und "band". Der "name" ist "Amanda", und die "band" ist ein eigenes Item mit zwei Eigenschaften, "name" und "size". Der "name" der Band ist "Jazz Band", und die "size" ist "12". Das äußere Item in diesem Beispiel ist ein Mikrodata-Top-Level-Item. Items, die nicht Teil anderer sind, werden als Mikrodata-Top-Level-Items bezeichnet.

Dieses Beispiel ist das gleiche wie das vorherige, aber alle Eigenschaften sind von ihren Items getrennt.

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

Dies ergibt das gleiche Ergebnis wie das vorherige Beispiel. Das erste Item hat zwei Eigenschaften, "name", festgelegt auf "Amanda", und "band", festgelegt auf ein weiteres Item. Dieses zweite Item hat zwei weitere Eigenschaften, "name", festgelegt auf "Jazz Band", und "size", festgelegt auf "12".

Ein Item kann mehrere Eigenschaften mit demselben Namen und unterschiedlichen Werten haben.

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

Dies ergibt ein Item mit zwei Eigenschaften, beide mit dem Namen "flavor" und den Werten "Lemon sorbet" und "Apricot sorbet".

Ein Element, das eine Eigenschaft einführt, kann auch mehrere Eigenschaften gleichzeitig einführen, um Duplikate zu vermeiden, wenn einige der Eigenschaften denselben Wert haben.

Es gibt keinen semantischen Unterschied zwischen den folgenden beiden Beispielen

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

Beide haben ein Bild mit einer Beschriftung, und beide, vollständig unabhängig vom Bild, haben ein Item mit einem Name-Wert-Paar mit dem Namen "name" und dem Wert "The Castle". Der einzige Unterschied ist, dass, wenn der Benutzer die figcaption aus dem Dokument zieht, das Item in die Drag-and-Drop-Daten eingeschlossen wird. Das mit dem Item verknüpfte Bild wird nicht eingeschlossen.

Eine Eigenschaft ist eine ungeordnete Menge einzigartiger Tokens, die case-sensitiv sind und die Name-Wert-Paare darstellen. Der Eigenschaftswert muss mindestens ein Token haben. Im untenstehenden Beispiel ist jede Datenzelle ein Token.

Tokens sind entweder Zeichenketten oder URLs. Ein Item wird als typisiertes Item bezeichnet, wenn es eine URL ist. Andernfalls ist es eine Zeichenkette. Zeichenketten dürfen keinen Punkt oder Doppelpunkt enthalten (siehe unten).

1. Wenn das Item ein typisiertes Item ist, muss es entweder sein:

   1. Ein definierter Eigenschaftsname, oder
   2. Eine gültige URL, die auf die Vokabular-Definition verweist, oder
   3. Eine gültige URL, die als proprietärer Item-Eigenschaftsname verwendet wird (d.h. einer, der nicht in einer öffentlichen Spezifikation definiert ist), oder

2. Wenn das Item kein typisiertes Item ist, muss es sein:

   1. Eine Zeichenkette, die keine . (U+002E FULL STOP)-Zeichen und keine :-Zeichen (U+003A COLON) enthält und als proprietärer Item-Eigenschaftsname verwendet wird (wiederum einer, der nicht in einer öffentlichen Spezifikation definiert ist).

Der Eigenschaftswert eines Name-Wert-Paares ist wie folgt angegeben:

• Hat das Element ein itemscope-Attribut

  • Der Wert ist das Item, das durch das Element erstellt wird

• Ist das Element ein meta-Element

  • Der Wert ist der Wert des content-Attributs des Elements

• Ist das Element ein audio, embed, iframe, img, source, track oder video-Element

  • Der Wert ist der resultierende URL-String, der durch das Parsen des Wertes des src-Attributs des Elements relativ zum Knotendokument (Teil der Mikrodaten-DOM-API) des Elements entsteht, wenn das Attribut gesetzt wird

• Ist das Element ein a, area oder link-Element

  • Der Wert ist der resultierende URL-String, der durch das Parsen des Wertes des href-Attributs des Elements relativ zum Knotendokument des Elements entsteht, wenn das Attribut gesetzt wird

• Ist das Element ein object-Element

  • Der Wert ist der resultierende URL-String, der durch das Parsen des Wertes des data-Attributs des Elements relativ zum Knotendokument des Elements entsteht, wenn das Attribut gesetzt wird

• Ist das Element ein data-Element

  • Der Wert ist der Wert des value-Attributs des Elements

• Ist das Element ein meter-Element

  • Der Wert ist der Wert des value-Attributs des Elements

• Ist das Element ein time-Element

  • Der Wert ist der datetime-Wert des Elements

Andernfalls

• Der Wert ist der textContent des Elements.

Wenn der Wert einer Eigenschaft eine URL ist, muss die Eigenschaft mit einem URL-Eigenschaftselement spezifiziert werden. Die URL-Eigenschaftselemente sind die a, area, audio, embed, iframe, img, link, object, source, track, und video-Elemente.

Namen sind relativ zueinander ungeordnet, aber wenn ein bestimmter Name mehrere Werte hat, haben sie eine relative Reihenfolge.

Im folgenden Beispiel hat die Eigenschaft "a" die Werte "1" und "2", in dieser Reihenfolge, aber ob die Eigenschaft "a" vor der Eigenschaft "b" kommt oder nicht, ist nicht wichtig.

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

Hier sind mehrere äquivalente Beispiele:

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

Dieses Beispiel verwendet Mikrodata-Attribute, um die folgenden strukturierten Daten darzustellen:

HTML

<dl
  itemscope
  itemtype="https://schema.org/Book"
  itemid="urn:isbn:0-374-22848-5<">
  <dt>Title</dt>
  <dd itemprop="title">Owls of the Eastern Ice</dd>
  <dt>Author</dt>
  <dd itemprop="author">Jonathan C Slaght</dd>
  <dt>Publication date</dt>
  <dd>
    <time itemprop="datePublished" datetime="2020-08-04">August 4 2020</time>
  </dd>
</dl>

Ergebnis

• Andere verschiedene globale Attribute

• Andere mit Mikrodaten zusammenhängende globale Attribute:

  • itemid
  • itemref
  • itemscope
  • itemtype