Globale HTML-Attribut `itemscope`
itemscope ist ein boolesches globales Attribut, das den Gültigkeitsbereich der zugehörigen Metadaten definiert. Das Angeben des itemscope-Attributs für ein Element erstellt ein neues Item, das zu einer Anzahl von Name-Wert-Paaren führt, die dem Element zugeordnet sind.
Ein verwandtes Attribut, itemtype, wird verwendet, um die gültige URL eines Vokabulars (wie z.B. schema.org) anzugeben, das das Item und den Kontext seiner Eigenschaften beschreibt. In jedem der folgenden Beispiele stammt das Vokabular von schema.org.
Jedes HTML-Element kann ein itemscope-Attribut spezifiziert haben. Ein itemscope-Element, das keinen zugeordneten itemtype hat, muss einen zugeordneten itemref haben.
Hinweis: Mehr Informationen über itemtype-Attribute finden Sie unter https://schema.org/Thing
itemscope-ID-Attribute
Wenn Sie das itemscope-Attribut für ein Element angeben, wird ein neues Item erstellt. Das Item besteht aus einer Gruppe von Name-Wert-Paaren. Für Elemente mit einem itemscope-Attribut und einem itemtype-Attribut können Sie auch ein id-Attribut angeben. Sie können das id-Attribut verwenden, um einen globalen Bezeichner für das neue Item festzulegen. Ein globaler Bezeichner ermöglicht es dem Item, sich auf andere Items auf Seiten im gesamten Web zu beziehen.
Beispiele
Strukturierte Daten für einen Film darstellen
Das folgende Beispiel gibt den itemtype als "http://schema.org/Movie" an und spezifiziert vier verwandte itemprop-Attribute.
| itemscope | Itemtype | Movie | |
| itemprop | (itemprop name) | (itemprop value) | |
| itemprop | director | James Cameron | |
| itemprop | genre | Science Fiction | |
| itemprop | name | Avatar | |
| itemprop | Trailer | https://youtu.be/0AY1XIkX7bY | |
<div itemscope itemtype="https://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="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a> </div> Strukturierte Daten für ein Rezept darstellen
In dem folgenden Beispiel gibt es vier itemscope-Attribute. Jedes itemscope-Attribut legt den Gültigkeitsbereich seines entsprechenden itemtype-Attributs fest. Die itemtypes, Recipe, AggregateRating und NutritionInformation im folgenden Beispiel sind Teil der strukturierten Daten von schema.org für ein Rezept, wie sie vom ersten itemtype, http://schema.org/Recipe, angegeben werden.
| itemscope | itemtype | Recipe | |
| itemprop | name | Grandma's Holiday Apple Pie | |
| itemprop | image | https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg | |
| itemprop | datePublished | 2022-11-05 | |
| itemprop | description | Dies ist das Apfelkuchenrezept meiner Großmutter. Ich füge gern eine Prise Muskat hinzu. | |
| itemprop | prepTime | PT30M | |
| itemprop | cookTime | PT1H | |
| itemprop | totalTime | PT1H30M | |
| itemprop | recipeYield | 1 9" pie (8 portions) | |
| itemprop | recipeIngredient | Dünn geschnittene Äpfel: 6 Tassen | |
| itemprop | recipeIngredient | Weißer Zucker: 3/4 Tasse | |
| itemprop | recipeInstructions | 1. Äpfel schneiden und schälen 2. Zucker und Zimt mischen. Zusätzlichen Zucker bei sauren Äpfeln verwenden. | |
| itemprop | author [Person] | ||
| itemprop | name | Carol Smith | |
| itemscope | itemprop[itemtype] | aggregateRating [AggregateRating] | |
| itemprop | ratingValue | 4.0 | |
| itemprop | reviewCount | 35 | |
| itemscope | itemprop[itemtype] | nutrition [NutritionInformation] | |
| itemprop | servingSize | 1 mittlere Scheibe | |
| itemprop | calories | 250 cal | |
| itemprop | fatContent | 12 g | |
Hinweis: Ein praktisches Werkzeug zum Extrahieren von Mikrodatensätzen aus HTML ist Googles Tool zum Testen von Rich-Ergebnissen. Probieren Sie es mit dem hier gezeigten HTML aus.
HTML
<div itemscope itemtype="https://schema.org/Recipe"> <h2 itemprop="name">Grandma's Holiday Apple Pie</h2> <img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50" /> <p> By <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span itemprop="name">Carol Smith</span> </span> </p> <p> Published: <time datetime="2022-11-05" itemprop="datePublished"> November 5, 20022 </time> </p> <span itemprop="description"> This is my grandmother's apple pie recipe. I like to add a dash of nutmeg. </span> <br /> <span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"> <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews </span> <br /> Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time> <br /> Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour</time> <br /> Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time> <br /> Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span> <br /> <span itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation"> Serving size: <span itemprop="servingSize">1 medium slice</span><br /> Calories per serving: <span itemprop="calories">250 cal</span><br /> Fat per serving: <span itemprop="fatContent">12 g</span><br /> </span> <p> Ingredients:<br /> <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br /></span> <span itemprop="recipeIngredient">White sugar: 3/4 cup<br /></span> … </p> Directions: <br /> <div itemprop="recipeInstructions"> 1. Cut and peel apples<br /> 2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br /> … </div> </div> Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # attr-itemscope |
Siehe auch
- Andere verschiedene globale Attribute
- Andere mikrodatenspezifische globale Attribute: