HTML-Attribut `itemprop` (global)

Das folgende Beispiel zeigt den Quellcode 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 er mithilfe des <a>-Elements und seinem href-Attribut, des <img>-Elements und seinem src-Attribut oder anderer Elemente ausgedrückt, die auf externe Ressourcen verlinken oder diese einbetten.

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

Wenn ein Zeichenkettenwert nicht leicht lesbar und von einer Person verständlich ist (z.B. eine lange Zeichenfolge aus Zahlen und Buchstaben), kann er unter Verwendung des value-Attributs des data-Elements angezeigt werden, wobei die für Menschen verständlichere Version im Inhalt des Elements (der nicht Teil der strukturierten Daten ist – siehe Beispiel unten) angegeben wird.

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

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

Für numerische Daten können das meter-Element und sein value-Attribut 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 daten- und zeitbezogene Daten das time-Element und sein 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 dem Element gesetzt wird, das die Eigenschaft deklariert. Jeder Wert ist entweder eine Zeichenkette oder eine Gruppe von Name-Wert-Paaren (d.h. ein Element).

<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 Element oben hat zwei Eigenschaften, "name" und "band". Der "name" ist "Amanda" und die "band" ist ein eigenes Element mit zwei Eigenschaften, "name" und "size". Der "name" der Band ist "Jazz Band" und die "size" ist "12". Das äußere Element in diesem Beispiel ist ein oberstes Mikrodatenelement. Elemente, die nicht Teil anderer Elemente sind, werden oberste Mikrodatenelemente genannt.

Dieses Beispiel ist das gleiche wie das vorherige, aber alle Eigenschaften sind von ihren Elementen 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 Element hat zwei Eigenschaften, "name", festgelegt auf "Amanda", und "band", festgelegt auf ein anderes Element. Dieses zweite Element hat zwei weitere Eigenschaften, "name", festgelegt auf "Jazz Band", und "size", festgelegt auf "12".

Ein Element 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 Element 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 Duplikationen 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 eine Abbildung mit einer Bildunterschrift und beide, völlig unabhängig von der Abbildung, ein Element mit einem Name-Wert-Paar mit dem Namen "name" und dem Wert "The Castle". Der einzige Unterschied besteht darin, dass, wenn der Benutzer die figcaption aus dem Dokument herauszieht, das Element in den Drag-and-Drop-Daten enthalten sein wird. Das mit dem Element verknüpfte Bild wird nicht enthalten sein.

Eine Eigenschaft ist eine ungeordnete Menge von eindeutigen Token, die Groß- und Kleinschreibung beachten und die Name-Wert-Paare darstellen. Der Eigenschaftswert muss mindestens ein Token haben. Im folgenden Beispiel ist jede Datenzelle ein Token.

Token sind entweder Zeichenketten oder URLs. Ein Element wird als typisiertes Element bezeichnet, wenn es eine URL ist. Andernfalls ist es eine Zeichenkette. Zeichenketten können keinen Punkt oder Doppelpunkt enthalten (siehe unten).

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

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

2. Wenn das Element kein typisiertes Element ist, muss es:

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

Der Eigenschaftswert eines Name-Wert-Paares wird wie in der folgenden Liste angegeben für den ersten übereinstimmenden Fall gegeben:

• Wenn das Element ein itemscope-Attribut hat

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

• Wenn das Element ein meta-Element ist

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

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

  • Der Wert ist die resultierende URL-Zeichenfolge, die sich aus dem Parsen des Wertes des src-Attributs des Elements relativ zum Knotendokument (Teil der Microdata DOM API) des Elements ergibt, wenn das Attribut gesetzt ist

• Wenn das Element ein a, area oder link-Element ist

  • Der Wert ist die resultierende URL-Zeichenfolge, die sich aus dem Parsen des Wertes des href-Attributs des Elements relativ zum Knotendokument des Elements ergibt, wenn das Attribut gesetzt ist

• Wenn das Element ein object-Element ist

  • Der Wert ist die resultierende URL-Zeichenfolge, die sich aus dem Parsen des Wertes des data-Attributs des Elements relativ zum Knotendokument des Elements ergibt, wenn das Attribut gesetzt ist

• Wenn das Element ein data-Element ist

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

• Wenn das Element ein meter-Element ist

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

• Wenn das Element ein time-Element ist

  • 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 unter Verwendung eines URL-Eigenschaftselements angegeben werden. Die URL-Eigenschaftselemente sind die Elemente a, area, audio, embed, iframe, img, link, object, source, track und video.

Namen sind relativ zueinander ungeordnet, aber wenn ein bestimmter Name mehrere Werte hat, haben diese 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 gleichwertige 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 Mikrodatenelemente, 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 unterschiedliche globale Attribute
• Andere microdatenbezogene globale Attribute:
  • itemid
  • itemref
  • itemscope
  • itemtype