HTML - Mikrodaten

Einführung in Microdata

Microdata ist eine Spezifikation, die es ermöglicht, strukturierte Daten in HTML-Dokumente einzufügen. Sie bietet eine Möglichkeit, Inhalte mit spezifischen Informationstypen wie Produkten, Veranstaltungen, Bewertungen oder Rezepten zu kennzeichnen. Durch das Hinzufügen von Microdata zu Ihrem HTML machen Sie Ihre Inhalte für Suchmaschinen, Web-Crawler und andere Anwendungen, die strukturierte Daten verarbeiten, besser verständlich.

Die Verwendung von Microdata in Ihrem HTML bietet mehrere Vorteile. Es hilft Suchmaschinen, den Inhalt Ihrer Webseiten besser zu verstehen, was zu verbesserten Suchpositionen und relevanteren Suchergebnissen führen kann. Microdata ermöglicht es Suchmaschinen auch, Rich Snippets anzuzeigen. Dies sind erweiterte Auflistungen, die zusätzliche Informationen wie Sternebewertungen, Preise oder Daten enthalten. Rich Snippets lassen Ihre Webseiten in den Suchergebnissen hervorstechen und können die Klickraten erhöhen.

Microdata funktioniert mit HTML, indem es Attribute verwendet, um Elemente mit spezifischen Informationstypen zu annotieren. Um Microdata zu Ihrem HTML hinzuzufügen, verwenden Sie die Attribute itemscope, itemtype und itemprop. Das Attribut itemscope zeigt an, dass der Inhalt innerhalb eines Elements sich auf ein bestimmtes Element bezieht. Das Attribut itemtype gibt den Typ des beschriebenen Elements an und verwendet dazu eine URL, die das Vokabular definiert. Das Attribut itemprop wird verwendet, um die Eigenschaften eines Elements zu identifizieren, wie seinen Namen, seine Beschreibung oder seinen Preis.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Product Name</h1>
  <p itemprop="description">Product description goes here.</p>
  <span itemprop="price">$99.99</span>
</div>

Das div-Element ist mit dem Attribut itemscope gekennzeichnet, was anzeigt, dass es Informationen über ein Element enthält. Das Attribut itemtype gibt an, dass es sich bei dem Element um ein Produkt handelt, wobei das Vokabular von schema.org verwendet wird. Die itemprop-Attribute werden verwendet, um den Namen, die Beschreibung und den Preis des Produkts zu identifizieren.

Durch das Hinzufügen von Microdata zu Ihrem HTML ermöglichen Sie es Suchmaschinen und anderen Anwendungen, strukturierte Daten aus Ihren Webseiten zu extrahieren, was zu besserer Sichtbarkeit in Suchmaschinen, Rich Snippets und einer verbesserten Benutzererfahrung führt.

Mikrodata-Syntax

Die Mikrodata-Syntax hat drei Hauptattribute: itemscope, itemtype und itemprop. Diese Attribute definieren die Struktur und Bedeutung der Daten innerhalb von HTML-Elementen.

Das itemscope-Attribut zeigt an, dass der Inhalt innerhalb eines Elements ein bestimmtes Element beschreibt. Es ist ein boolesches Attribut, was bedeutet, dass es keinen Wert benötigt. Wenn Sie das itemscope-Attribut zu einem Element hinzufügen, erstellen Sie ein neues Element, das eigene Eigenschaften haben kann.

<div itemscope>
  <!-- Elementinhalt kommt hier hin -->
</div>

Das itemtype-Attribut wird zusammen mit dem itemscope-Attribut verwendet, um den Typ des beschriebenen Elements anzugeben. Es verwendet eine URL als Wert, die auf ein Vokabular verweist, das den Elementtyp definiert. Das am häufigsten verwendete Vokabular ist Schema.org, das viele Elementtypen wie Person, Produkt, Ereignis und mehr enthält.

<div itemscope itemtype="https://schema.org/Product">
  <!-- Produktinhalt kommt hier hin -->
</div>

Das itemprop-Attribut identifiziert die Eigenschaften eines Elements. Es wird zu Elementen innerhalb eines itemscope hinzugefügt, um den Namen und Wert jeder Eigenschaft anzugeben. Der Wert des itemprop-Attributs entspricht einer Eigenschaft, die im durch das itemtype angegebenen Vokabular definiert ist.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Produktname</h1>
  <p itemprop="description">Produktbeschreibung kommt hier hin.</p>
  <span itemprop="price">99,99 €</span>
</div>

Mikrodata ermöglicht auch das Verschachteln von Elementen ineinander. Dies ist nützlich für komplexe Datenstrukturen, die mehrere Elemente mit eigenen Eigenschaften enthalten. Um Elemente zu verschachteln, fügen Sie ein weiteres itemscope-Attribut innerhalb eines bestehenden itemscope hinzu.

<div itemscope itemtype="https://schema.org/Person">
  <h1 itemprop="name">Max Mustermann</h1>
  <p itemprop="jobTitle">Software-Entwickler</p>
  <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <span itemprop="streetAddress">Hauptstraße 123</span>
    <span itemprop="addressLocality">Musterstadt</span>,
    <span itemprop="addressRegion">BY</span>
    <span itemprop="postalCode">12345</span>
  </div>
</div>

In diesem Beispiel enthält das Person-Element eine address-Eigenschaft, die ein Element vom Typ PostalAddress mit eigenen Eigenschaften wie streetAddress, addressLocality, addressRegion und postalCode ist.

Gängige Microdata-Vokabulare

Beim Hinzufügen von Microdata zu Ihrem HTML müssen Sie ein Vokabular verwenden, das die Arten von Elementen und deren Eigenschaften definiert. Ein Vokabular ist eine Reihe von Definitionen für Elementtypen und deren Eigenschaften. Es gibt verschiedene gängige Vokabulare, die mit Microdata verwendet werden, darunter Schema.org, Dublin Core und Open Graph Protocol.

Schema.org ist das am häufigsten verwendete Vokabular für Microdata. Es wurde in Zusammenarbeit von großen Suchmaschinen wie Google, Bing, Yahoo! und Yandex erstellt. Schema.org bietet eine Sammlung gemeinsamer Vokabulare, die Webmaster verwenden können, um ihre Seiten so zu kennzeichnen, dass sie von den großen Suchmaschinen verstanden werden können.

Das Schema.org-Vokabular umfasst eine breite Palette von Elementtypen wie Person, Organisation, Ort, Produkt, Veranstaltung, Bewertung und viele mehr. Jeder Elementtyp hat eine Reihe von Eigenschaften, die verwendet werden können, um das Element detailliert zu beschreiben. Ein Produkt-Element kann beispielsweise Eigenschaften wie Name, Beschreibung, Preis, Marke und Bewertung haben.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Acme Laptop</h1>
  <p itemprop="description">Ein leistungsstarker Laptop für Arbeit und Freizeit.</p>
  <span itemprop="brand" itemscope itemtype="https://schema.org/Brand">
    <span itemprop="name">Acme</span>
  </span>
  <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">1.199,99 €</span>
    <span itemprop="priceCurrency">EUR</span>
  </span>
</div>

Dublin Core ist ein weiteres Vokabular, das mit Microdata verwendet wird, insbesondere im Zusammenhang mit Metadaten für digitale Ressourcen. Das Dublin Core-Vokabular umfasst Eigenschaften wie Titel, Ersteller, Thema, Beschreibung, Herausgeber, Datum, Typ, Format und Kennung. Dieses Vokabular wird häufig von Bibliotheken, Museen und anderen Organisationen verwendet, die digitale Assets verwalten.

<div itemscope itemtype="http://purl.org/dc/terms/">
  <h1 itemprop="title">Der große Gatsby</h1>
  <span itemprop="creator">F. Scott Fitzgerald</span>
  <span itemprop="date">1925</span>
  <span itemprop="format">Druck</span>
  <span itemprop="identifier">ISBN: 978-0-123-45678-9</span>
</div>

Das Open Graph Protocol, das von Facebook entwickelt wurde, ist ein Vokabular zur Beschreibung des Inhalts von Webseiten für das Teilen in sozialen Medien. Es umfasst Eigenschaften wie og:title, og:type, og:url, og:image und og:description. Wenn Sie Open Graph-Microdata zu Ihren Seiten hinzufügen, können Social-Media-Plattformen diese Informationen nutzen, um umfangreiche Vorschauen zu erstellen, wenn Ihr Inhalt geteilt wird.

<head>
  <meta itemprop="og:title" content="Meine Webseite">
  <meta itemprop="og:type" content="website">
  <meta itemprop="og:url" content="https://www.meinewebsite.de/">
  <meta itemprop="og:image" content="https://www.meinewebsite.de/bild.jpg">
  <meta itemprop="og:description" content="Eine Beschreibung meiner Webseite.">
</head>

Bei der Auswahl eines Vokabulars für Ihre Microdata sollten Sie den Typ des Inhalts und die Zielgruppe berücksichtigen. Schema.org ist ein hervorragendes Allzweck-Vokabular, das von Suchmaschinen gut verstanden wird. Dublin Core eignet sich am besten für digitale Ressourcen in akademischen oder kulturellen Kontexten, und das Open Graph Protocol ist ideal für Inhalte, die auf Social-Media-Plattformen geteilt werden.

Implementierung von Microdata

Um Microdata in Ihrem HTML zu implementieren, fügen Sie die Attribute itemscope, itemtype und itemprop den entsprechenden Elementen hinzu. Suchen Sie zunächst das Hauptelement oder die Hauptelemente auf Ihrer Seite, wie ein Produkt, ein Ereignis oder eine Person. Fügen Sie dann das Attribut itemscope zu dem Element hinzu, das alle Informationen zu diesem Element enthält.

<div itemscope>
  <!-- Produktinformationen kommen hier hin -->
</div>

Fügen Sie als Nächstes das Attribut itemtype zum selben Element hinzu und geben Sie das Vokabular und den Elementtyp an, den Sie verwenden möchten. Wenn Sie beispielsweise ein Produkt mit dem Schema.org-Vokabular beschreiben, würden Sie folgenden itemtype verwenden:

<div itemscope itemtype="https://schema.org/Product">
  <!-- Produktinformationen kommen hier hin -->
</div>

Fügen Sie nun das Attribut itemprop zu jedem Element hinzu, das eine Eigenschaft des Elements darstellt. Der Wert des itemprop-Attributs sollte mit einer Eigenschaft aus dem im itemtype angegebenen Vokabular übereinstimmen.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Produktname</h1>
  <img src="product-image.jpg" itemprop="image" alt="Produktbild">
  <p itemprop="description">Hier steht die Produktbeschreibung.</p>
  <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">99,99 €</span>
    <span itemprop="priceCurrency">EUR</span>
  </span>
</div>

Neben der direkten Verwendung von Microdata in Ihrem HTML können Sie es auch mit JSON-LD (JavaScript Object Notation for Linked Data) verwenden. JSON-LD ist eine Möglichkeit, verknüpfte Daten mit JSON zu codieren und kann verwendet werden, um strukturierte Daten in einer für Suchmaschinen leicht zu verarbeitenden Form bereitzustellen.

Um Microdata mit JSON-LD zu verwenden, fügen Sie ein script-Element mit dem type-Attribut "application/ld+json" ein. Innerhalb des script-Elements definieren Sie Ihre strukturierten Daten mit der JSON-LD-Syntax.

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Produktname",
  "image": "product-image.jpg",
  "description": "Hier steht die Produktbeschreibung.",
  "offers": {
    "@type": "Offer",
    "price": "99.99",
    "priceCurrency": "EUR"
  }
}
</script>

Bei der Implementierung von Microdata beachten Sie diese Best Practices, um den größtmöglichen Nutzen zu erzielen:

Microdata und SEO

Microdata hilft Suchmaschinen, den Inhalt Ihrer Webseiten besser zu verstehen. Suchmaschinen wie Google, Bing und Yandex nutzen Microdata, um strukturierte Daten aus Ihrem HTML zu extrahieren, was Ihre Suchmaschinenplatzierung und Sichtbarkeit verbessern kann.

Wenn Suchmaschinen Ihre Webseiten durchsuchen, suchen sie nach Microdata, um die Bedeutung und den Kontext Ihres Inhalts zu verstehen. Indem Sie Microdata verwenden, um wichtige Informationen wie Produktdetails, Veranstaltungsinformationen oder Bewertungen auszuzeichnen, erleichtern Sie es Suchmaschinen, Ihren Inhalt zu verarbeiten und zu interpretieren. Dies kann zu besseren Suchmaschinenplatzierungen für relevante Anfragen führen, da Suchmaschinen Ihren Inhalt zuverlässiger mit Benutzersuchen abgleichen können.

Einer der Hauptvorteile von Microdata für SEO ist die Möglichkeit von Rich Snippets in den Suchergebnissen. Rich Snippets sind erweiterte Suchergebnisse, die zusätzliche Informationen wie Sternebewertungen, Preise oder Datumsangaben neben dem Standardtitel, der URL und der Beschreibung enthalten. Wenn Sie Ihren Inhalt mit Microdata auszeichnen, können Suchmaschinen diese Informationen nutzen, um Rich Snippets für Ihre Webseiten anzuzeigen.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Produktname</h1>
  <p itemprop="description">Produktbeschreibung kommt hier.</p>
  <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">99,99 €</span>
  </span>
  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
    <span itemprop="ratingValue">4,5</span> Sterne basierend auf
    <span itemprop="reviewCount">100</span> Bewertungen
  </div>
</div>

In diesem Beispiel enthält die Microdata-Auszeichnung Informationen über den Namen des Produkts, die Beschreibung, den Preis und die Gesamtbewertung. Suchmaschinen können diese Daten nutzen, um ein Rich Snippet mit der Sternebewertung und der Anzahl der Bewertungen anzuzeigen, wodurch das Suchergebnis für Benutzer auffälliger und informativer wird.

Rich Snippets können Ihre Klickraten in den Suchergebnissen erhöhen, da sie Ihre Einträge hervorheben und Benutzern mehr Informationen über Ihren Inhalt liefern. Höhere Klickraten können wiederum zu besseren Suchmaschinenplatzierungen führen, da Suchmaschinen das Benutzerengagement als Signal für Relevanz und Qualität betrachten.

Um die SEO-Vorteile von Microdata zu maximieren, ist es wichtig, es korrekt und konsistent auf Ihrer Website zu verwenden. Befolgen Sie bewährte Praktiken für die Implementierung von Microdata, wie die Verwendung spezifischer Elementtypen und Eigenschaften, die Übereinstimmung von Microdata mit sichtbarem Inhalt und die Aktualisierung Ihrer Microdata. Testen Sie Ihre Microdata mit Tools wie dem Google Structured Data Testing Tool, um sicherzustellen, dass sie fehlerfrei ist und von Suchmaschinen korrekt analysiert werden kann.

Microdata-Werkzeuge und Tests

Bei der Arbeit mit Microdata stehen verschiedene Werkzeuge zur Verfügung, die Ihnen bei der Erstellung, Validierung und dem Testen Ihrer Auszeichnungen helfen. Diese Tools können den Prozess der Hinzufügung von Microdata zu Ihrem HTML vereinfachen und mögliche Fehler oder Probleme aufdecken, bevor Ihre Seiten veröffentlicht werden.

Microdata-Generatoren sind Werkzeuge, die Ihnen helfen, Microdata-Auszeichnungen zu erstellen, ohne den Code manuell zu schreiben. Diese Tools bieten oft eine benutzerfreundliche Oberfläche, in der Sie Ihre Daten eingeben und die passenden Elementtypen und Eigenschaften auswählen können. Einige beliebte Microdata-Generatoren sind:

Diese Generatoren können Ihnen Zeit und Mühe ersparen, besonders wenn Sie neu in der Arbeit mit Microdata sind oder viele Inhalte auszeichnen müssen. Es ist jedoch wichtig, die erzeugten Auszeichnungen zu überprüfen, um sicherzustellen, dass sie Ihre Inhalte genau wiedergeben und den besten Praktiken folgen.

Microdata-Validierer sind Werkzeuge, die Ihre Microdata-Auszeichnungen auf Fehler oder Unstimmigkeiten prüfen. Sie können Ihnen helfen, Probleme wie fehlende oder falsch verschachtelte Tags, ungültige Elementtypen oder Eigenschaften oder Formatierungsprobleme zu erkennen. Einige beliebte Microdata-Validierer sind:

Diese Validierer können bei der Fehlersuche in Ihren Microdata nützlich sein und sicherstellen, dass sie korrekt implementiert sind. Es ist ratsam, Ihre Seiten vor der Veröffentlichung durch einen Validierer laufen zu lassen, um frühzeitig Fehler zu erkennen.

Das Testen Ihrer Microdata mit Googles Structured Data Testing Tool ist besonders wichtig, da Google die größte Suchmaschine ist und Microdata umfassend für Rich Snippets und andere Suchfunktionen nutzt. Mit dem Structured Data Testing Tool können Sie eine URL eingeben oder Ihren HTML-Code einfügen. Es zeigt dann alle Microdata an, die es auf der Seite findet. Außerdem werden Fehler oder Warnungen hervorgehoben, mit Erklärungen, was falsch ist und wie es behoben werden kann.

Beim Testen Ihrer Microdata sollten Sie auf Fehler oder Warnungen achten und diese vor der Veröffentlichung Ihrer Seiten beheben. Einige häufige Microdata-Probleme, auf die Sie achten sollten, sind:

• Fehlende oder falsch verschachtelte itemscope, itemtype oder itemprop Tags
• Verwendung ungültiger oder falsch geschriebener Elementtypen oder Eigenschaften
• Nicht übereinstimmende Microdata mit dem sichtbaren Inhalt auf der Seite
• Wiederholung derselben Information mehrfach in verschiedenen Formaten
• Einbeziehung von Auszeichnungen für Informationen, die für Benutzer nicht sichtbar sind

Wenn Sie auf Probleme mit Ihren Microdata stoßen, beheben Sie diese systematisch. Überprüfen Sie, ob Ihre Auszeichnungen den Syntaxregeln folgen, mit Ihrem Inhalt übereinstimmen und gültige Elementtypen und Eigenschaften aus Ihrem gewählten Vokabular verwenden. Nutzen Sie die Fehlermeldungen und Warnungen der Validierer als Leitfaden und konsultieren Sie bei Bedarf die Dokumentation für Ihr Vokabular.

Durch die Verwendung von Microdata-Werkzeugen und regelmäßiges Testen Ihrer Auszeichnungen können Sie sicherstellen, dass Ihre Microdata korrekt, konsistent und für Suchmaschinen optimiert sind. Dies kann Ihnen helfen, den größtmöglichen Nutzen aus Ihren Microdata zu ziehen, in Form von besserer Sichtbarkeit in Suchmaschinen, Rich Snippets und Benutzerinteraktion.

Microdata-Beispiele

Sie können Microdata verwenden, um verschiedene Arten von Inhalten auszuzeichnen, wie Produkte, Veranstaltungen, Personen und Rezepte. Hier sind einige Beispiele, wie Sie Microdata für verschiedene Inhaltstypen verwenden können:

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Acme Laptop</h1>
  <img src="laptop.jpg" itemprop="image" alt="Acme Laptop">
  <p itemprop="description">Ein leistungsstarker Laptop für Arbeit und Freizeit.</p>
  <span itemprop="brand" itemscope itemtype="https://schema.org/Brand">
    <span itemprop="name">Acme</span>
  </span>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">1.199,99 €</span>
    <span itemprop="priceCurrency">EUR</span>
    <link itemprop="availability" href="https://schema.org/InStock">Auf Lager
  </div>
</div>

<div itemscope itemtype="https://schema.org/Event">
  <h1 itemprop="name">Tech-Konferenz 2023</h1>
  <p itemprop="description">Nehmen Sie am größten Tech-Event des Jahres teil!</p>
  <time itemprop="startDate" datetime="2023-09-01T09:00">1. September 2023, 9:00 Uhr</time> -
  <time itemprop="endDate" datetime="2023-09-03T17:00">3. September 2023, 17:00 Uhr</time>
  <div itemprop="location" itemscope itemtype="https://schema.org/Place">
    <span itemprop="name">Kongresszentrum</span>
    <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
      <span itemprop="streetAddress">Hauptstraße 123</span>
      <span itemprop="addressLocality">Musterstadt</span>,
      <span itemprop="addressRegion">BY</span>
      <span itemprop="postalCode">12345</span>
    </div>
  </div>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">299,99 €</span>
    <span itemprop="priceCurrency">EUR</span>
    <a itemprop="url" href="https://www.beispiel.de/tickets">Tickets kaufen</a>
  </div>
</div>

<div itemscope itemtype="https://schema.org/Person">
  <h1 itemprop="name">Max Mustermann</h1>
  <p itemprop="jobTitle">Softwareentwickler</p>
  <div itemprop="affiliation" itemscope itemtype="https://schema.org/Organization">
    <span itemprop="name">Acme GmbH</span>
  </div>
  <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <span itemprop="streetAddress">Eichenweg 456</span>
    <span itemprop="addressLocality">Musterstadt</span>,
    <span itemprop="addressRegion">BY</span>
    <span itemprop="postalCode">12345</span>
  </div>
</div>

<div itemscope itemtype="https://schema.org/Recipe">
  <h1 itemprop="name">Klassische Schokoladenkekse</h1>
  <img itemprop="image" src="kekse.jpg" alt="Schokoladenkekse">
  <p itemprop="description">Ein Rezept für hausgemachte Schokoladenkekse.</p>
  <ul>
    <li itemprop="recipeIngredient">280 g Mehl</li>
    <li itemprop="recipeIngredient">1 TL Backpulver</li>
    <li itemprop="recipeIngredient">1 TL Salz</li>
    <li itemprop="recipeIngredient">225 g Butter, weich</li>
    <li itemprop="recipeIngredient">150 g Zucker</li>
    <li itemprop="recipeIngredient">150 g brauner Zucker</li>
    <li itemprop="recipeIngredient">1 TL Vanilleextrakt</li>
    <li itemprop="recipeIngredient">2 große Eier</li>
    <li itemprop="recipeIngredient">350 g Schokoladenchips</li>
  </ul>
  <ol itemprop="recipeInstructions">
    <li>Ofen auf 190°C vorheizen.</li>
    <li>Mehl, Backpulver und Salz in einer kleinen Schüssel mischen.</li>
    <li>Butter, Zucker, braunen Zucker und Vanilleextrakt in einer großen Rührschüssel cremig schlagen.</li>
    <li>Eier einzeln hinzufügen und gut unterrühren.</li>
    <li>Mehlmischung nach und nach unterrühren.</li>
    <li>Schokoladenchips unterheben.</li>
    <li>Teig löffelweise auf ungefettete Backbleche geben.</li>
    <li>9 bis 11 Minuten backen oder bis sie goldbraun sind.</li>
    <li>2 Minuten auf dem Backblech abkühlen lassen; dann auf Kuchengitter zum vollständigen Abkühlen legen.</li>
  </ol>
  <div itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation">
    <span itemprop="calories">260 Kalorien</span>,
    <span itemprop="fatContent">12 Gramm Fett</span>
  </div>
</div>