`itemscope` HTML globales Attribut

itemscope ist ein boolesches globales Attribut, das den Umfang der zugehörigen Metadaten definiert. Das Angeben des itemscope-Attributs für ein Element erzeugt ein neues Element, das eine Anzahl von Name-Wert-Paaren enthält, die mit dem Element verbunden sind.

Ein verwandtes Attribut, itemtype, wird verwendet, um die gültige URL eines Vokabulars (wie schema.org) zu spezifizieren, das das Element und seinen Kontext der 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 ohne zugeordneten itemtype muss einen zugeordneten itemref haben.

Hinweis: Weitere Informationen zu itemtype-Attributen finden Sie unter https://schema.org/Thing

Anwendungshinweise

itemscope id Attribute

Wenn Sie das itemscope-Attribut für ein Element angeben, wird ein neues Element erstellt. Das Element 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 Element festzulegen. Ein globaler Bezeichner ermöglicht es dem Element, Beziehungen zu anderen Elementen herzustellen, die auf Webseiten im gesamten Web zu finden sind.

Beispiele

Strukturierte Daten für einen Film darstellen

Das folgende Beispiel gibt den itemtype als "http://schema.org/Movie" an und spezifiziert vier zugehörige 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

html

<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="proxy.php?url=https%3A%2F%2Fyoutu.be%2F0AY1XIkX7bY" itemprop="trailer">Trailer</a>
</div>

Strukturierte Daten für ein Rezept darstellen

Im folgenden Beispiel gibt es vier itemscope-Attribute. Jedes itemscope-Attribut setzt den Umfang seines entsprechenden itemtype-Attributs. Die itemtypes, Recipe, AggregateRating und NutritionInformation im folgenden Beispiel sind Teil der schema.org strukturierten Daten für ein Rezept, wie es durch das erste itemtype, http://schema.org/Recipe, spezifiziert ist.

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 gerne eine Prise Muskatnuss hinzu.
	itemprop	prepTime	PT30M
	itemprop	cookTime	PT1H
	itemprop	totalTime	PT1H30M
	itemprop	recipeYield	1 9" Kuchen (8 Portionen)
	itemprop	recipeIngredient	Fein 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. Für säuerliche Äpfel mehr Zucker 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 mittelgroße Scheibe
	itemprop	calories	250 cal
	itemprop	fatContent	12 g

Hinweis: Ein praktisches Werkzeug zum Extrahieren von Mikrodat-Strukturen aus HTML ist Googles Rich Results Testing Tool. Testen Sie es mit dem hier gezeigten HTML.

HTML

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>