So zeichnen Sie Ihre Website mit Microdata nach schema.org aus

Microdata ist Teil des HTML-Standards der WHATWG (Web Hypertext Ap­pli­ca­ti­on Tech­no­lo­gy Working Group). Mit dieser Syntax zeichnen Sie struk­tu­rier­te Daten direkt im HTML-Code aus: Zu­sätz­li­che Attribute machen bei­spiels­wei­se erkennbar, welcher Text einen Un­ter­neh­mens­na­men be­zeich­net und welches Bild das zu­ge­hö­ri­ge Logo ist. Als Vokabular für diese ma­schi­nen­les­ba­ren Zu­sam­men­hän­ge dient in diesem Tutorial Schema.org. Such­ma­schi­nen können diese Angaben nutzen, um Inhalte besser zu verstehen und Such­ergeb­nis­se mit Zu­satz­in­for­ma­tio­nen an­zu­rei­chern. Eine er­wei­ter­te Dar­stel­lung ist dadurch jedoch nicht ga­ran­tiert.

Microdata im Vergleich zu anderen Da­ten­for­ma­ten

Als separates Modul für HTML5 wurde Microdata ur­sprüng­lich als Al­ter­na­ti­ve zum damaligen Standard RDFa ein­ge­führt, dem vom W3C emp­foh­le­nen Format zur Be­schrei­bung von Metadaten in HTML und XHTML. Ziel war eine ver­ein­fach­te Syntax bei ver­gleich­ba­rer Funk­tio­na­li­tät. An Bedeutung gewann Microdata durch das Projekt schema.org – einer ge­mein­sa­men In­itia­ti­ve der Such­ma­schi­nen­an­bie­ter Google, Bing, Yahoo und Yandex, die ausgehend vom Microdata-Markup ein ein­heit­li­ches Vokabular für die se­man­ti­sche An­no­ta­ti­on zur Verfügung stellt.

Schema.org stellt das Vokabular bereit; Microdata, RDFa und JSON-LD sind un­ter­schied­li­che Formate, um dieses Vokabular ein­zu­bin­den. Microdata und RDFa verwenden dafür Attribute an HTML-Elementen. JSON-LD hält die struk­tu­rier­ten Daten dagegen in einem separaten <script type="application/ld+json">-Block auf derselben Seite.

Google un­ter­stützt alle drei Formate und empfiehlt in der Regel JSON-LD, weil es sich besonders bei um­fang­rei­chen Websites einfacher im­ple­men­tie­ren und pflegen lässt. Maß­geb­lich sind jeweils die An­for­de­run­gen des ge­wünsch­ten Such­ergeb­nis-Features; die aktuelle Ein­ord­nung finden Sie in Googles Ein­füh­rung zu struk­tu­rier­ten Daten. Microdata bleibt eine un­ter­stütz­te Option, etwa wenn Sie be­stehen­de HTML-Templates direkt aus­zeich­nen möchten. Dieses Tutorial zeigt Ihnen die dafür nötige Syntax und typische An­wen­dungs­fäl­le.

Die Microdata-Syntax

Microdata fasst Ei­gen­schaf­ten als Namen-Wert-Paare zu einem Item zusammen. Die Aus­zeich­nung lässt sich in drei Schritten erklären: Zuerst markieren Sie ein HTML-Element als Item. An­schlie­ßend weisen Sie ihm einen Typ aus dem Schema.org-Vokabular zu. Danach ergänzen Sie die zu­ge­hö­ri­gen Ei­gen­schaf­ten (Pro­per­ties). Dafür verwenden Sie die HTML-Attribute itemscope, itemtype und itemprop:

• itemscope eröffnet ein neues Item. Das boolesche Attribut benötigt keinen Wert und ist nicht auf <div> be­schränkt.
• itemtype legt den Typ des Items fest, bei­spiels­wei­se https://schema.org/Organization. Es steht am selben HTML-Element wie itemscope.
• itemprop benennt eine Ei­gen­schaft des Items, etwa name oder logo. Welche Ei­gen­schaf­ten und Werttypen passen, entnehmen Sie der Schema.org-Website.

Die Ein­bin­dung der Attribute in den HTML-Code erfolgt bei­spiels­wei­se nach folgendem Grund­sche­ma:

Grund­sche­ma des Microdata-Markups für ein Item:

<div itemscope itemtype="https://schema.org/Organization">
    <span itemprop="name">Name des Unternehmens</span>
</div>

Das Microdata-Markup in der Anwendung

Microdata-Attribute lassen sich an vor­han­de­nen HTML-Elementen ergänzen. Sie müssen dafür nicht alle Inhalte in zu­sätz­li­che <div>- oder <span>-Elemente verpacken: Auch Über­schrif­ten, Links oder Bilder können die passenden Attribute tragen. Die Regeln für zulässige HTML-Ver­schach­te­lun­gen gelten weiterhin.

Diese Zuordnung der Werte be­schreibt der HTML-Standard der WHATWG. Microdata ersetzt dabei weder ver­ständ­li­che Bild-Alt-Texte noch eine zu­gäng­li­che HTML-Struktur.

Grafiken mit Microdata aus­zeich­nen

Einen typischen An­wen­dungs­be­reich bilden ein­ge­bet­te­te Fir­men­lo­gos. Mit Microdata geben Sie aus­drück­lich an, dass eine Grafik das Logo einer be­stimm­ten Or­ga­ni­sa­ti­on ist:

Markup eines Un­ter­neh­mens­lo­gos:

<div itemscope itemtype="https://schema.org/Organization">
<a itemprop="url" href="https://www.beispielfirma.de/">Startseite</a>
<img itemprop="logo" src="https://www.beispielfirma.de/logo.png" alt="Logo des Unternehmens" />
</div>

Das <div>-Element um­schließt ein Item vom Typ Organization. Die Ei­gen­schaft url erhält ihren Wert aus dem href des Links, logo aus dem src des Bildes. So werden Or­ga­ni­sa­ti­on, Homepage und Logo aus­drück­lich mit­ein­an­der verknüpft. Diese Angaben können Such­ma­schi­nen beim Ver­ständ­nis einer Or­ga­ni­sa­ti­on un­ter­stüt­zen; sie ga­ran­tie­ren jedoch keinen Eintrag im Knowledge Graph.

Im Falle eines Mar­ken­lo­gos käme folgendes schema.org-Markup zum Einsatz:

Markup eines Mar­ken­lo­gos:

<div itemscope itemtype="https://schema.org/Brand">
<span itemprop="name">Name der Marke</span>
<img itemprop="logo" src="https://www.beispielmarke.de/logo.png" alt="Logo der Marke" />
</div>

Das Element innerhalb des itemsco­pes ist gemäß schema.org als „Brand“ ge­kenn­zeich­net. Als Ei­gen­schaf­ten werden der Name der Marke und das Logo inklusive Spei­cher­ort angegeben.

Kon­takt­da­ten mit Microdata aus­zeich­nen

Auch Kon­takt­da­ten lassen sich einer Or­ga­ni­sa­ti­on zuordnen. Das folgende fiktive Beispiel zeigt ins­be­son­de­re, wie Sie eine Adresse als eigenes Item innerhalb der Or­ga­ni­sa­ti­on ver­schach­teln. Die Angaben sind Platz­hal­ter, keine realen Un­ter­neh­mens­kon­takt­da­ten:

Markup von Un­ter­neh­mens­kon­takt­da­ten:

<div itemscope itemtype="https://schema.org/Organization">
    <span itemprop="name">Beispielfirma</span>
    Kontaktdaten:
    <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
        <span itemprop="streetAddress">Beispielstraße 1</span>
        <span itemprop="postalCode">12345</span>
        <span itemprop="addressLocality">Beispielstadt</span>
        <span itemprop="addressCountry">DE</span>
    </div>
    E-Mail: <span itemprop="email">kontakt@example.com</span>
</div>

Das äußere Item hat den Typ Organization und die Ei­gen­schaf­ten name, address und email. Der Wert einer Ei­gen­schaft kann selbst ein Item sein: address wird hier durch ein zweites Element mit eigenem itemscope und dem Typ PostalAddress be­schrie­ben. Die Ei­gen­schaf­ten streetAddress, postalCode, addressLocality und addressCountry gehören dadurch zur Adresse. Weitere Kon­takt­da­ten können Sie bei­spiels­wei­se mit telephone und faxNumber ergänzen.

Web­sei­ten­in­hal­te mit Microdata für Rich Snippets aus­zeich­nen

Struk­tu­rier­te Daten können eine Vor­aus­set­zung für Rich Results sein, etwa zu Produkten, Rezepten, Be­wer­tun­gen, Ver­an­stal­tun­gen, Software, Videos oder Artikeln. Welche Typen und Ei­gen­schaf­ten Google für eine bestimmte Dar­stel­lung un­ter­stützt, richtet sich nach der je­wei­li­gen Feature-Do­ku­men­ta­ti­on, nicht allein nach dem Schema.org-Vokabular. Auch korrektes Markup ga­ran­tiert keine er­wei­ter­te Anzeige.

Das folgende fiktive Ho­tel­an­ge­bot ver­an­schau­licht die Microdata-Syntax und die Ver­schach­te­lung von Items. Es ist keine voll­stän­di­ge Im­ple­men­tie­rung eines Google-Such­ergeb­nis-Features. Zunächst zeichnen Sie Name, Be­schrei­bung und Bild des Hotels aus:

Markup der Grund­in­for­ma­tio­nen für Hotel-Angebote:

<div itemscope itemtype="https://schema.org/Hotel">
    <span itemprop="name">Name des Hotels</span>
    <span itemprop="description">Beschreibung des Hotels</span>
    <img itemprop="image" src="https://example.com/images/hotel.jpg" alt="Außenansicht des Hotels" />
</div>

Das Attribut itemtype in Zeile 01 verweist auf das vor­de­fi­nier­te Schema Hotel. Diesem werden in den Zeilen 02 bis 04 die Ei­gen­schaf­ten „name“, „de­scrip­ti­on“ und „image“ mit ent­spre­chen­den Werten zu­ge­wie­sen. Diesem Grund­ge­rüst können beliebig viele weitere In­for­ma­tio­nen als itemprops oder un­ter­ge­ord­ne­te itemsco­pes hin­zu­ge­fügt werden. Dabei ist darauf zu achten, dass un­ter­ge­ord­ne­te div-Elemente innerhalb des div-Tags des über­ge­ord­ne­ten itemsco­pes platziert werden. Folgender Code erweitert die se­man­ti­sche An­no­ta­ti­on für Hotel-Angebote um eine Preis­an­ga­be.

Markup für Ho­tel­prei­se

<div itemprop="makesOffer" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">400</span> Euro
    <meta itemprop="priceCurrency" content="EUR" />
</div>

Dieses Fragment wird innerhalb des Hotel-Items eingefügt: makesOffer verweist auf ein Angebot vom Typ Offer. Preis und Währung werden getrennt angegeben: price enthält den Zah­len­wert 400, priceCurrency den Wäh­rungs­code EUR. Die sichtbare Angabe bleibt „400 Euro“. In einer echten An­ge­bots­sei­te muss außerdem eindeutig sein, auf welche Leistung sich der Preis bezieht. Weitere passende Ei­gen­schaf­ten des Hotels sind paymentAccepted für Zah­lungs­ar­ten, hasMap für einen Kar­ten­link und review für eine Bewertung. In das Grund­ge­rüst in­te­griert ergibt sich folgendes sche­ma­ti­sches Markup:

Aus­führ­li­ches Markup für ein Hotel-Angebot

<div itemscope itemtype="https://schema.org/Hotel">
    <span itemprop="name">Name des Hotels</span>
    <span itemprop="description">Beschreibung des Hotels</span>
    <img itemprop="image" src="https://example.com/images/hotel.jpg" alt="Außenansicht des Hotels" />
    <div itemprop="makesOffer" itemscope itemtype="https://schema.org/Offer">
        <span itemprop="price">400</span> Euro
        <meta itemprop="priceCurrency" content="EUR" />
    </div>
    <span itemprop="paymentAccepted">Überweisung, Kreditkarte etc.</span> 
    <a itemprop="hasMap" href="https://example.com/karte/">Standort auf der Karte</a>
    <div itemprop="review" itemscope itemtype="https://schema.org/Review">
        <span itemprop="name">Titel der Bewertung</span>
        <span itemprop="author" itemscope itemtype="https://schema.org/Person">
            <span itemprop="name">Name der bewertenden Person</span>
        </span>
        <span itemprop="reviewBody">Bewertungstext</span>
        <time itemprop="datePublished" datetime="2026-10-01">1. Oktober 2026</time>
    </div>
</div>

Das Hotel bildet das über­ge­ord­ne­te Item. Angebot und Bewertung sind als eigene Items darin ver­schach­telt; der Autor der Bewertung ist wiederum eine Person mit einer name-Ei­gen­schaft. Das Datum ist ein frei gewählter Bei­spiel­wert. Ersetzen Sie sämtliche Platz­hal­ter durch die tat­säch­lich auf Ihrer Seite gezeigten Inhalte. Die aktuellen Ei­gen­schaf­ten finden Sie in der Schema.org-Referenz für Hotels.

Auch eine Ster­ne­be­wer­tung lässt sich als eigenes Rating innerhalb eines Er­fah­rungs­be­richts be­schrei­ben. Das folgende Beispiel zeigt nur das Prinzip, nicht sämtliche An­for­de­run­gen für Google-Rich-Results:

Markup für einen Er­fah­rungs­be­richt mit Bewertung:

<div itemscope itemtype="https://schema.org/Review">
    <div itemprop="itemReviewed" itemscope itemtype="https://schema.org/Hotel">
        <span itemprop="name">Name des Hotels</span>
    </div>
    <span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
        <span itemprop="ratingValue">4</span>
    </span> Sterne -
    <b>"<span itemprop="name">Titel der Bewertung</span>"</b>
    <span itemprop="author" itemscope itemtype="https://schema.org/Person">
        <span itemprop="name">Autor</span>
    </span>
    <span itemprop="reviewBody">Bewertungstext</span>
</div>

Bread­crumbs mit Microdata aus­zeich­nen

Bread­crumbs („Brot­kru­men“) be­schrei­ben die Position einer Seite innerhalb der Website-Hier­ar­chie. Die sichtbare Na­vi­ga­ti­on hilft Be­su­che­rin­nen und Besuchern bei der Ori­en­tie­rung; das zu­ge­hö­ri­ge Markup macht den Pfad ma­schi­nen­les­bar. Google do­ku­men­tiert die Bread­crumb-Dar­stel­lung in der Suche derzeit für Desktop-Er­geb­nis­se. Ein typisches Beispiel für einen Bread­crumb-Trail in HTML zeigt folgender Code:

HTML-Markup eines Bread­crumb-Trails:

<ol>
    <li>
        <a href="https://www.anbieter.de/hotels/">Hotels</a>
    </li>
    <li>
        <a href="https://www.anbieter.de/hotels/deutschland/">Hotels in Deutschland</a>
    </li>
    <li>
        <a href="https://www.anbieter.de/hotels/deutschland/berlin/">Hotels in Berlin</a>
    </li>
</ol>

Das Beispiel zeigt ein Lis­ten­ele­ment (ordered list, ol), das die Links ver­schie­de­ner Un­ter­sei­ten einer Website be­inhal­tet. Um diese Na­vi­ga­ti­ons­struk­tur für Programme wie Web­brow­ser oder Such­ma­schi­nen-Crawler als Bread­crumb-Trail aus­zu­zeich­nen, bietet sich folgendes Microdata-Markup nach Schema.org an:

Microdata-Markup für Bread­crumbs nach Schema-org:

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://www.anbieter.de/hotels/">
            <span itemprop="name">Hotels</span></a>
        <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://www.anbieter.de/hotels/deutschland/">
            <span itemprop="name">Hotels in Deutschland</span></a>
        <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://www.anbieter.de/hotels/deutschland/berlin/">
            <span itemprop="name">Hotels in Berlin</span></a>
        <meta itemprop="position" content="3" />
    </li>
</ol>

Das Lis­ten­ele­ment <ol> wird mit itemscope als Item definiert und per itemtype dem Typ BreadcrumbList zu­ge­ord­net. Jede „Brotkrume“ ist ein eigenes ListItem, das über itemListElement zur Liste gehört. name, item und position be­schrei­ben den Namen, die Ziel-URL und die Position im Pfad. Für Googles Bread­crumb-Feature sind min­des­tens zwei Lis­ten­ein­trä­ge nötig; beim letzten Eintrag darf die Ziel-URL entfallen. Weitere An­for­de­run­gen erläutert die Google-Do­ku­men­ta­ti­on zu Bread­crumbs.

Microdata-Markup prüfen

Prüfen Sie vor der Ver­öf­fent­li­chung sowohl die Schema.org-Aus­zeich­nung als auch die An­for­de­run­gen des ge­wünsch­ten Google-Features:

1. Schema prüfen: Geben Sie Ihren HTML-Code oder die Seiten-URL in den Schema Markup Validator ein. Kon­trol­lie­ren Sie, ob die vor­ge­se­he­nen Items, Ei­gen­schaf­ten und Ver­schach­te­lun­gen erkannt werden.
2. Google-An­for­de­run­gen testen: Nutzen Sie den Google Rich Results Test, um un­ter­stütz­te Rich-Result-Typen und gemeldete Fehler zu prüfen. Nicht jeder gültige Schema.org-Typ ent­spricht einem Google-Rich-Result-Feature.
3. Inhalte ab­glei­chen: Stellen Sie sicher, dass die struk­tu­rier­ten Daten die tat­säch­lich gezeigten Inhalte wie­der­ge­ben. Erfinden Sie keine Be­wer­tun­gen und zeichnen Sie keine anderen Preise aus als die auf der Seite an­ge­ge­be­nen.
4. Nach der Ver­öf­fent­li­chung kon­trol­lie­ren: Prüfen Sie die URL in der Google Search Console und be­ob­ach­ten Sie die ver­füg­ba­ren Berichte zu Rich Results. Auch ein feh­ler­frei­er Test ga­ran­tiert keine Anzeige in der Suche.