HTML itemscope globales Attribut

itemscope ist ein boolesches globales Attribut, das den Geltungsbereich der zugehörigen Metadaten definiert. Die Angabe des itemscope-Attributs für ein Element erstellt ein neues Item, das eine Anzahl von Name-Wert-Paaren mit dem Element verknüpft.

Ein verwandtes Attribut, itemtype, wird verwendet, um die gültige URL eines Vokabulars (wie schema.org) anzugeben, das das Item und seinen Eigenschaften-Kontext 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 zugehörigen itemtype hat, muss ein zugehöriges itemref haben.

Hinweis: Erfahren Sie mehr über itemtype-Attribute unter https://0buq682g7c.proxynodejs.usequeue.com/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 ganzen Web zu beziehen.

Beispiele

Strukturierte Daten für einen Film darstellen

Im folgenden Beispiel wird itemtype als "https://d7l6xbpelc.proxynodejs.usequeue.com/Movie" angegeben und vier zugehörige itemprop-Attribute spezifiziert.

itemscope Itemtype Movie
itemprop (itemprop-Name) (itemprop-Wert)
itemprop director James Cameron
itemprop genre Science Fiction
itemprop name Avatar
itemprop Trailer https://8h4xwk56hq.proxynodejs.usequeue.com/0AY1XIkX7bY
html
<div itemscope itemtype="https://0buq682g7c.proxynodejs.usequeue.com/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://8h4xwk56hq.proxynodejs.usequeue.com/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
</div>

Strukturierte Daten für ein Rezept darstellen

Das folgende Beispiel enthält vier itemscope-Attribute. Jedes itemscope-Attribut legt den Geltungsbereich 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 durch den ersten itemtype, https://d7l6xbpelc.proxynodejs.usequeue.com/Recipe angegeben.

itemscope itemtype Recipe
itemprop name Omas Feiertags-Apfelkuchen
itemprop image https://vcm4qi6mrv.proxynodejs.usequeue.com/1/30/42759561_8631e2f905_n.jpg
itemprop datePublished 2022-11-05
itemprop description Das ist das Apfelkuchen-Rezept meiner Großmutter. Ich füge gerne eine Prise Muskat hinzu.
itemprop prepTime PT30M
itemprop cookTime PT1H
itemprop totalTime PT1H30M
itemprop recipeYield 1 9" Kuchen (8 Portionen)
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 für säuerliche Äpfel 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 mittleres Stück
itemprop calories 250 cal
itemprop fatContent 12 g

Hinweis: Ein praktisches Werkzeug zum Extrahieren von Mikrodatenstrukturen aus HTML ist Googles Rich Results Testing Tool. Versuchen Sie es mit dem hier gezeigten HTML.

HTML

html
<div itemscope itemtype="https://0buq682g7c.proxynodejs.usequeue.com/Recipe">
  <h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
  <img
    itemprop="image"
    src="https://vcm4qi6mrv.proxynodejs.usequeue.com/1/30/42759561_8631e2f905_n.jpg"
    width="50"
    height="50" />
  <p>
    By
    <span itemprop="author" itemscope itemtype="https://0buq682g7c.proxynodejs.usequeue.com/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://0buq682g7c.proxynodejs.usequeue.com/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://0buq682g7c.proxynodejs.usequeue.com/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