HTML itemprop globales Attribut

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

Eigenschaften haben Werte, die entweder ein String oder eine URL sind. Wenn ein String-Wert eine URL ist, wird er mithilfe des <a>-Elements und seines href-Attributs, des <img>-Elements und seines src-Attributs oder anderer Elemente, die auf externe Ressourcen verweisen oder diese einbetten, ausgedrückt.

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

Wenn ein String-Wert nicht leicht lesbar und verständlich für eine Person ist (z. B. eine lange Zeichenfolge aus Nummern und Buchstaben), kann er mit dem value-Attribut des data-Elements angezeigt werden, wobei die für Menschen besser verständliche Version im Inhalt des Elements angegeben wird (die nicht Teil der strukturierten Daten ist - siehe folgendes Beispiel).

Die ID ist nicht menschenfreundlich, daher wird stattdessen der Name des Produkts 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 datums- 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 ein String 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 das "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 Mikrodatenelement auf oberster Ebene. Elemente, die nicht Teil anderer sind, werden Mikrodatenelemente auf oberster Ebene genannt.

Dieses Beispiel ist dasselbe 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", gesetzt auf "Amanda", und "band", gesetzt auf ein anderes Element. Dieses zweite Element hat zwei weitere Eigenschaften, "name", gesetzt auf "Jazz Band", und "size", gesetzt 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 auf einmal 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 eine Abbildung mit einer Beschreibung, und beide, völlig unabhängig von der Abbildung, haben 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 zieht, das Element in den Drag-and-Drop-Daten enthalten sein wird. Das mit dem Element verknüpfte Bild wird nicht einbezogen.

Eine Eigenschaft ist eine unsortierte Menge von eindeutigen Token, die groß-/kleinschreibungssensitiv sind und die Name-Wert-Paare darstellen. Der Eigenschaftswert muss mindestens ein Token enthalten. Im folgenden Beispiel ist jede Datenzelle ein Token.

Token sind entweder Strings oder URLs. Ein Element wird als typisiertes Element bezeichnet, wenn es sich um eine URL handelt. Andernfalls ist es ein String. Strings dürfen 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 sein, die sich auf die Vokabulardefinition bezieht, oder
   3. Eine gültige URL sein, die als proprietärer Element-Eigenschaftsname verwendet wird (d.h. einer, der nicht in einer öffentlichen Spezifikation definiert ist), oder

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

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

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

• 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-Attributes des Elements

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

  • Der Wert ist die resultierende URL-Zeichenkette, die sich aus der Analyse des Wertes des src-Attributs des Elements relativ zum Node-Dokument (Teil der Microdata DOM API) des Elements ergibt, wenn das Attribut gesetzt wird

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

  • Der Wert ist die resultierende URL-Zeichenkette, die sich aus der Analyse des Wertes des href-Attributs des Elements relativ zum Node-Dokument des Elements ergibt, wenn das Attribut gesetzt wird

• Wenn das Element ein object-Element ist

  • Der Wert ist die resultierende URL-Zeichenkette, die sich aus der Analyse des Wertes des data-Attributs des Elements relativ zum Node-Dokument des Elements ergibt, wenn das Attribut gesetzt wird

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

Namen sind im Vergleich 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 Mikrodateneigenschaften, 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 Mikrodata verwandte globale Attribute:

  • itemid
  • itemref
  • itemscope
  • itemtype