Globales HTML-Attribut itemprop
Das itemprop-globale Attribut wird verwendet, um einem Item Eigenschaften hinzuzufügen. Für jedes HTML-Element kann ein itemprop-Attribut angegeben werden. Ein itemprop besteht aus einem Name-Wert-Paar. Jedes Name-Wert-Paar wird als Eigenschaft bezeichnet; eine Gruppe aus einer oder mehreren Eigenschaften bildet ein Item. Eigenschaftswerte sind entweder Zeichenfolgen oder URLs und können mit vielen verschiedenen Elementen verknüpft werden, darunter <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source>, <track> und <video>.
Wert
Der Eigenschaftswert eines Name-Wert-Paares ergibt sich aus dem ersten zutreffenden Fall in der folgenden Liste:
-
Wenn das Element ein
itemscope-Attribut hat:- Der Wert ist das vom Element erzeugte Item.
-
Wenn das Element ein
meta-Element ist:- Der Wert ist der Wert des
content-Attributs des Elements.
- Der Wert ist der Wert des
-
Wenn das Element ein
audio-,embed-,iframe-,img-,source-,track- odervideo-Element ist:- Der Wert ist die URL-Zeichenfolge, die sich ergibt, wenn der Wert des src-Attributs des Elements relativ zum Node-Dokument des Elements (Teil der Microdata DOM API) zum Zeitpunkt des Setzens des Attributs geparst wird.
-
Wenn das Element ein
a-,area- oderlink-Element ist:- Der Wert ist die URL-Zeichenfolge, die sich ergibt, wenn der Wert des href-Attributs des Elements relativ zum Node-Dokument des Elements zum Zeitpunkt des Setzens des Attributs geparst wird.
-
Wenn das Element ein
object-Element ist:- Der Wert ist die URL-Zeichenfolge, die sich ergibt, wenn der Wert des data-Attributs des Elements relativ zum Node-Dokument des Elements zum Zeitpunkt des Setzens des Attributs geparst 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.
- Der Wert ist der Wert des
-
Wenn das Element ein
time-Element ist:- Der Wert ist der
datetime-Wert des Elements.
- Der Wert ist der
Andernfalls:
- Der Wert ist der textContent des Elements.
Wenn der Wert einer Eigenschaft eine URL ist, muss die Eigenschaft über ein URL-Eigenschaftselement angegeben werden. URL-Eigenschaftselemente sind die Elemente a, area, audio, embed, iframe, img, link, object, source, track und video.
Reihenfolge der Namen
Die Namen haben untereinander keine festgelegte Reihenfolge. Wenn ein bestimmter Name jedoch mehrere Werte hat, ist deren Reihenfolge festgelegt.
Im folgenden Beispiel hat die Eigenschaft „a“ die Werte „1“ und „2“, in dieser Reihenfolge. Ob die Eigenschaft „a“ vor der Eigenschaft „b“ steht, ist dagegen unerheblich.
<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>
Strukturierte Daten für ein Buch darstellen
Dieses Beispiel verwendet Microdata-Attribute, um die folgenden strukturierten Daten darzustellen:
| itemscope | itemtype: itemid | https://schema.org/Book: urn:isbn:0-374-22848-5 | |
| itemprop | title | Owls of the Eastern Ice | |
| itemprop | author | Jonathan C Slaght | |
| itemprop | datePublished | 2020-08-04 | |
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
Beispiele
Das folgende Beispiel zeigt den Quelltext einer Gruppe von Elementen, die mit itemprop-Attributen ausgezeichnet sind. Darauf folgt eine Tabelle mit den resultierenden strukturierten Daten.
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>
Strukturierte Daten
| Item | ||
|---|---|---|
| itemprop-Name | itemprop-Wert | |
| itemprop | name | Avatar |
| itemprop | director | James Cameron |
| itemprop | genre | Science fiction |
| itemprop | trailer | ../movies/avatar-theatrical-trailer.html |
Eigenschaften
Eigenschaften haben Werte, die entweder Zeichenfolgen oder URLs sind. Wenn ein Zeichenfolgenwert eine URL ist, wird er durch das <a>-Element und dessen href-Attribut, das <img>-Element und dessen src-Attribut oder andere Elemente ausgedrückt, die auf externe Ressourcen verlinken oder diese einbetten.
Drei Eigenschaften mit Zeichenfolgenwerten
<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>
Eine Eigenschaft „image“, deren Wert eine URL ist
<div itemscope>
<img itemprop="image" src="google-logo.png" alt="Google" />
</div>
Wenn ein Zeichenfolgenwert für Menschen nicht leicht lesbar und verständlich ist (z. B. eine lange Folge aus Zahlen und Buchstaben), kann er mithilfe des value-Attributs des data-Elements angegeben werden. Im Inhalt des Elements steht dann eine für Menschen leichter verständliche Version, die nicht Teil der strukturierten Daten ist (siehe folgendes Beispiel).
Ein Item mit einer Eigenschaft, deren Wert eine Produkt-ID ist
Die ID ist nicht benutzerfreundlich. Deshalb 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 dessen value-Attribut verwendet werden.
Ein meter-Element
<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>
Entsprechend können für Datums- und Zeitangaben das time-Element und dessen datetime-Attribut verwendet werden.
Ein Item mit einer Eigenschaft „birthday“, deren Wert ein Datum ist
<div itemscope>
I was born on
<time itemprop="birthday" datetime="1984-05-10">May 10th 1984</time>.
</div>
Eigenschaften können auch Gruppen aus Name-Wert-Paaren sein. Dazu wird das itemscope-Attribut auf das Element gesetzt, das die Eigenschaft deklariert. Jeder Wert ist entweder eine Zeichenfolge oder eine Gruppe aus Name-Wert-Paaren (also ein Item).
Ein äußeres Item, das eine Person darstellt, und ein inneres Item, das eine Band darstellt
<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“. „name“ hat den Wert „Amanda“, und „band“ ist selbst ein Item mit den beiden Eigenschaften „name“ und „size“. Der „name“ der Band ist „Jazz Band“, und ihre „size“ ist „12“. Das äußere Item in diesem Beispiel ist ein Microdata-Item auf oberster Ebene. Items, die nicht Teil anderer Items sind, werden als Microdata-Items auf oberster Ebene bezeichnet.
Alle Eigenschaften von ihren Items getrennt
Dieses Beispiel entspricht dem vorherigen, 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>
Das ergibt dasselbe Ergebnis wie das vorherige Beispiel. Das erste Item hat zwei Eigenschaften: „name“ mit dem Wert „Amanda“ und „band“ mit einem weiteren Item als Wert. Dieses zweite Item hat wiederum zwei Eigenschaften: „name“ mit dem Wert „Jazz Band“ und „size“ mit dem Wert „12“.
Ein Item kann mehrere Eigenschaften mit demselben Namen und unterschiedlichen Werten haben.
Eiscreme mit zwei Geschmacksrichtungen
<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>
Das ergibt ein Item mit zwei Eigenschaften, die beide „flavor“ heißen und die Werte „Lemon sorbet“ und „Apricot sorbet“ haben.
Ein Element, das eine Eigenschaft einführt, kann auch mehrere Eigenschaften gleichzeitig einführen. So lässt sich eine Wiederholung vermeiden, wenn einige Eigenschaften denselben Wert haben.
Ein Item mit zwei Eigenschaften, „favorite-color“ und „favorite-fruit“, die beide den Wert „orange“ haben
<div itemscope>
<span
itemprop="favorite-color
favorite-fruit"
>orange
</span>
</div>
Hinweis: Zwischen den Microdata und dem Inhalt des Dokuments, in dem sie ausgezeichnet sind, besteht kein Zusammenhang.
Dieselben strukturierten Daten auf zwei verschiedene Arten ausgezeichnet
Zwischen den folgenden beiden Beispielen besteht kein semantischer Unterschied.
<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 enthalten eine Abbildung mit einer Bildunterschrift und – völlig unabhängig von der Abbildung – ein Item mit einem Name-Wert-Paar, dessen Name „name“ und dessen Wert „The Castle“ ist. Der einzige Unterschied besteht darin, dass das Item in die Drag-and-Drop-Daten aufgenommen wird, wenn der Benutzer das figcaption aus dem Dokument zieht. Das mit dem Item verknüpfte Bild wird nicht aufgenommen.
Namen und Werte
Eine Eigenschaft ist eine ungeordnete Menge eindeutiger Tokens, bei denen die Groß- und Kleinschreibung beachtet wird und die die Name-Wert-Paare darstellen. Der Eigenschaftswert muss mindestens ein Token haben. Im folgenden Beispiel ist jede Datenzelle ein Token.
Beispiele für Namen
| Item | ||
|---|---|---|
| itemprop-Name | itemprop-Wert | |
| 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) |
Tokens sind entweder Zeichenfolgen oder URLs. Ein Item wird als typisiertes Item bezeichnet, wenn es eine URL ist. Andernfalls ist es eine Zeichenfolge. Zeichenfolgen dürfen weder einen Punkt noch einen Doppelpunkt enthalten (siehe unten).
-
Wenn das Item ein typisiertes Item ist, muss es eines der folgenden sein:
- Ein definierter Eigenschaftsname oder
- eine gültige URL, die auf die Definition des Vokabulars verweist, oder
- eine gültige URL, die als proprietärer Name einer Item-Eigenschaft verwendet wird (d.h. als Name, der nicht in einer öffentlichen Spezifikation definiert ist).
-
Wenn das Item kein typisiertes Item ist, muss es Folgendes sein:
- Eine Zeichenfolge, die weder
.-Zeichen (U+002E FULL STOP) noch:-Zeichen (U+003A COLON) enthält und als proprietärer Name einer Item-Eigenschaft verwendet wird (also als Name, der nicht in einer öffentlichen Spezifikation definiert ist).
- Eine Zeichenfolge, die weder
Hinweis: Die obigen Regeln verbieten „:“-Zeichen in Werten, die keine URLs sind, da sie sich sonst nicht von URLs unterscheiden ließen. Werte mit „.“-Zeichen sind für zukünftige Erweiterungen reserviert. Leerzeichen sind nicht zulässig, da die Werte sonst als mehrere Tokens geparst würden.
Spezifikationen
| Spezifikation |
|---|
| HTML> # names:-the-itemprop-attribute> |
Siehe auch
- Weitere globale Attribute
- Weitere globale Attribute im Zusammenhang mit Microdata: