Silas Wolf

Die Sonne am Horizont

Was ist Schema Markup und wie verwendet man es?

Schema Markup wird verwendet um Daten zu strukturieren, damit Suchmaschinen sie besser verstehen. Alles was du wissen musst erfährst du hier.

Das Wichtigste auf einen Blick

  1. Schema Markup wird zur Strukturierung von Daten verwendet
  2. Schema Markup hilft Suchmaschinen, deine Daten zu verstehen
  3. Schema Markup kann zu erweiterten Darstellungen der Suchergebnisse führen, sogenannten Rich Results.

Was ist Schema Markup und wie verwendet man es?

Schema Markup ist von enormer Bedeutung für SEO. Mit Schema Markup kannst du Suchmaschinen erklären, wie deine Daten strukturiert sind. Das ermöglich Google und Anderen, deine Inhalte benutzerfreundlich anzuzeigen – beispielsweise als Rezept, Film oder Unternehmen (mehr dazu später). In diesem Artikel erfährst du die wichtigsten Dinge über Schema Markup – sei gespannt! Im Detail behandeln wir folgendes:

  1. Einführung in Schema.org
  2. Vorteile der Implementierung von Schema Markup
  3. Implementierung von Schema Markup
  4. Zukunft von Schema Markup
  5. Hilfreiche Tools

1. Einführung in Schema.org

Schema.org hilft bei der Implementierung von Schema Markup. Eine grobe Beschreibung über Schema Markup hast du ja schon ganz oben bekommen, aber jetzt mal richtig: Was ist Schema.org?

1.1 Was ist Schema.org?

Die offizielle Website beschreibt Schema.org folgendermaßen:

Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.

Schema.org ist also eine Gruppierung, die versucht, Schemata für das Internet, Websites, E-Mails und mehr zu entwerfen. Schemata sind dabei als die Struktur von Daten zu verstehen. Aber Achtung: Schema.org ist nicht nur irgendeine Gruppierung von ambitionierten Nerds, sondern wurde von Google, Microsoft, Yahoo and Yandex gegründet.

Zusammenarbeit der Suchmaschinen und der Wert von strukturierten Daten

Für die großen Suchmaschinen (Google, Bing, Yahoo etc.) ist es von immensem Wert, strukturierte Daten auf Websites zu finden — ein Artikel ist dann nicht mehr nur ein für Maschinen schlecht verständliches Text-Gewirr, sondern ein strukturierter Datensatz mit Autor, Erscheinungsdatum, einem Bild und verschiedenen anderen Randinformationen. Das erste wichtige Learning also? Schema Markup ist wichtig für Suchmaschinen.

Rich Results und SEO-Vorteile

Die richtige Implementierung wird von den Suchmaschinen belohnt — nicht nur mit einem höheren SEO-Ranking (bestenfalls), sondern gleichzeitig auch mit sogenannten Rich Results in den Suchergebnissen.

Was sind Rich Results? Rich Results sind eine erweiterte Darstellungsform der Suchergebnisse, die das Nutzerlebnis mit zusätzlichen visuellen oder interaktiven Elementen und Funktionen erheblich verbessern. Du hast das garantiert schon unbewusst auf Google gesehen: Lokale Unternehmen, Bücher, Lernvideos, Filme, Rezepte — all diese Inhalte werden oft in einer anderen Form dargestellt. Das sind dann zum Beispiel so aus: Screenshot der Google Rich Results für Pizza rezepte Eine Liste aller von Google unterstützen Schemata findest du hier: Markup für strukturierte Daten, das von der Google Suche unterstützt wird | Google Search Central  |  Dokumentation  |  Google for Developers

1.2 Arten von Schema Markup

Es gibt unglaublich viele Schemata auf Schema.org. Also – wirklich viele. Du findest eine Liste aller Schemata auf der offiziellen Website.

Es gibt drei verschiedene Möglichkeiten, wie man die Schemata auf einer Website einbauen kann: Microdata, JSON-LD und RDFa. Die gängigsten Varianten sind meines Erachtens nach Microdata und JSON-LD. Aber was ist das überhaupt?

Was ist JSON-LD?

JSON-LD steht für “JavaScript Object Notation for Linked Data”. Mit JSON-LD lassen sich verknüpfte Daten im JSON-Format abbilden. Ich gehe nachher genauer auf Microdata ein und zeige dir detailliert, wie du es verwendest.

Was ist Microdata?

Microdata ist einfach eine Auswahl an Elementen beziehungsweise Eigenschaften in HTML5, mit denen man Suchmaschinen mehr Informationen über bestimmte Daten auf der Website geben kann. Auf der offiziellen Website gibt es ein gute Erklärung mit Beispiel zu Microdata. Ich gehe nachher genauer auf Microdata ein und zeige dir detailliert, wie du es verwendest.


2. Vorteile der Implementierung von Schema Markup

Ich habe schon grob die Vorteile von Schema Markup erläutert, aber hier gehe ich nochmal etwas mehr ins Detail. Es gibt 3 zentrale Vorteile von Schema Markup.

1. Verbesserte Suchergebnisse und Nutzerfreundlichkeit

Im Mai 2018 veröffentlichte Google eine Fallstudie zu Rakuten. Schema-Markup hätte, so Google, die Zugriffe auf Rakuten über die Suchmaschine um das 2,7-fache, und die Sitzungsdauer um das 1,5-fache erhöht! In einer weiteren Fallstudie zu Eventbrite wird geschildert, dass Eventbrite mit strukturierten Event-Daten einen 100% Anstieg des Wachstums auf die Veranstaltungsseiten (im Jahresvergleich) erzielte. ZipRecruiter und StyleCraze können ähnliche, bemerkenswerte Ergebnisse mit strukturierten Daten und Schema Markup erreichen. Das sind total verschiedene Unternehmen in total verschiedenen Branchen – aber die Schemata sind so vielseitig, dass für jeden etwas dabei ist. Was heißt das für dich? Schema-Markup ist ein wahrer Game-Changer!

2. Chance auf besseres SEO-Ranking

Ob die Verwendung von Schema-Markup dein Website-Ranking direkt beeinflusst ist umstritten. Was sich an den oben aufgeführten Beispielen jedoch zeigt ist, dass sich mit Schema-Markup Kern-Metriken wie die Click-Through-Rate (CTR) oder die Verweildauer auf der Website verbessern lassen – und diese Faktoren beeinflussen das SEO-Ranking auf jeden Fall.

Es ist eigentlich ganz einfach: Schema-Markup bietet einen simplen Weg, die Suchergebnisse nutzerfreundlicher zu gestalten und belohnt dich mit mehr Traffic und einem besseren SEO-Ranking. Also, worauf wartest du noch?

3. Sprach-Suche

Die Sprach-Suche wird immer populärer und wichtiger. Sprach-Suche ist die Suche über Sprach-Assistenten wie Siri, Alexa oder den Google Assistant.

Google hat deshalb ein Beta-Feature entwickelt, mit dem du festlegen kannst, was Google als Sprach-Suchergebnisse von sich gibt. Du siehst also: Schema-Markup ist auch zukünftig relevant!


3. Implementierung von Schema Markup

Jetzt geht’s ans Eingemachte! Du kennst jetzt die Vorteile von Schema Markup, weißt, was es ist und wer dahintersteckt. Aber trotzdem weißt du jetzt immer noch nicht, wie man das ganze überhaupt verwendet — deshalb: los geht’s!

Implementierung von Schema mit JSON-LD

Google hat wirklich gute Inhalte zu dem Thema. Hier schonmal ein sehr guter Artikel: Einführung in die Funktionsweise von Markup für strukturierte Daten | Google Search Central  |  Dokumentation  |  Google for Developers. Hier ist das Beispiel von diesem Artikel:

<html>
   
  <head>
       
    <title>Apple Pie by Grandma</title>
       
    <script type="application/ld+json">
      {
        "@context": "https://schema.org/",
        "@type": "Recipe",
        "name": "Apple Pie by Grandma",
        "author": "Elaine Smith",
        "image": "https://images.edge-generalmills.com/56459281-6fe6-4d9d-984f-385c9488d824.jpg",
        "description": "A classic apple pie.",
        "aggregateRating": {
          "@type": "AggregateRating",
          "ratingValue": "4.8",
          "reviewCount": "7462",
          "bestRating": "5",
          "worstRating": "1"
        },
        "prepTime": "PT30M",
        "totalTime": "PT1H30M",
        "recipeYield": "8",
        "nutrition": {
          "@type": "NutritionInformation",
          "calories": "512 calories"
        },
        "recipeIngredient": [
          "1 box refrigerated pie crusts, softened as directed on box",
          "6 cups thinly sliced, peeled apples (6 medium)"
        ]
      }
    </script>
     
  </head>
   
  <body>
     
  </body>
</html>

Du brauchst Unterstützung bei der Implementierung von Schema Markup?

Dann melde dich bei mir. Ich helfe gern.

Jetzt kontaktieren

Der Teil, der jetzt wichtig für dich ist ist der Inhalt von <script type="application/ld+json">. Für “@type” kannst du anstelle von “Recipe” jedes andere Schema nehmen (beispielsweise “Movie”). Wie schon erwähnt: Du findest eine Liste aller Typen auf der offiziellen Website.

Außerdem gibt es ein grandioses Tool, dass das Script für dich erstellen kann: Schema Markup Generator (JSON-LD). Auch ein Tool von Google kann dir helfen: Strukturierte Daten: Markup-Hilfe

Implementierung von Schema mit Microdata

Ich verwende der Einfachheit halber das Beispiel der Schema.org-Website.

Für die Erklärung der Verwendung von Microdata verwenden wir den Typen “Movie”. Wir gehen von einer einfachen Website aus, auf der der Film “Avatar” (sehr guter Film, übrigens) vorgestellt wird. Das geschrieben HTML könnte dann ungefähr so aussehen:

<div>
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954)</span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Wenn du jetzt Schema-Markup einbauen willst, solltest du erstmal identifizieren, in welchem Element alle Informationen stecken. In diesem Fall finden wir alle Informationen über den Film innerhalb des “div” elements. Diesem Div-Element musst du jetzt das “itemscope”-Tag hinzufügen. Damit weiß die Suchmaschine, dass sich hier die Informationen verstecken.

<div itemscope>
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954) </span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Wenn du das getan hast, kannst du direkt den Schema-Typen angeben. In unserem Fall zeigen wir einen Film, also verwenden wir den Typen “Movie”:

<div itemscope itemtype="https://schema.org/Movie">
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954)</span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Die restlichen Informationen über den Film geben wir jetzt mit “itemprop” an.

<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="../movies/avatar-theatrical-trailer.html" itemprop="trailer"
    >Trailer</a
  >
</div>

Du brauchst Unterstützung bei der Implementierung von Schema Markup?

Dann melde dich bei mir. Ich helfe gern.

Jetzt kontaktieren

Du kannst dem Schema “Movie” auf der offiziellen Website verschiedene Eigenschaften (engl. “Properties”) entnehmen. Darunter Eigenschaften, also Attribute, wie Genre, Name oder Regisseur. Die Daten sind schon in unserem HTML enthalten. Um den Suchmaschinen genau zu erklären, wo sie welche Daten finden, nutzen wir das “itemprop”-Tag (siehe Beispiel).

Validieren deiner Implementierung

Hammer 🔨! Du hast jetzt Schema-Markup eingebunden. Eigentlich ganz einfach, wenn man es einmal verstanden hat, oder? (🤫 Pssssttt, wenn du es noch nicht verstanden hast, schreib mir doch einfach eine Nachricht).

Aber wie kann man den jetzt sicherstellen, dass das Schema Markup wirklich richtig eingebunden wurde? Mach dir bitte gar keinen Stress: Google kommt zur Rettung! Schau dir einfach diese Seite an, hier wirst du garantiert fündig.


4. Zukunft von Schema Markup

Schema Markup wird ständig weiterentwickelt – deshalb solltest du immer auf dem Laufenden bleiben, um zu garantieren, dass deine Seite immer optimiert bleibt. Besonders interessant ist die Zukunft von Schema Markup für die Sprachsuche über Voice-Assistants wie den Google Assistant, Alexa oder Siri. Auf der offiziellen Website sowie auf dem offiziellen Blog findest du immer top aktuelle Infos.


5. Hilfreiche Tools

Hier findest du eine kurze Zusammenstellung von Tools, die dir mit Schema Markup helfen können.


Fazit

In diesem Artikel hast du viel gelernt! Du weißt jetzt, dass Schema Markup wichtig ist, um deine Daten in einer strukturierten Form zur Verfügung zu stellen, was Suchmaschinen beim Verständnis hilft. Also – worauf wartest du noch? Implementiere noch heute Schema Markup auf deiner Website! Viel Spaß und danke für deine Aufmerksamkeit.

Du brauchst Unterstützung bei der Implementierung von Schema Markup?

Dann melde dich bei mir. Ich helfe gern.

Jetzt kontaktieren