SEO für Einsteiger – Teil 6: Markup, strukturierte Daten & Co.

18. Juni 2018 | Von in SEO

Ein Begriff, den jeder SEO-Einsteiger einmal gehört haben sollte, lautet Markup. Der Begriff taucht häufig im Zusammenhang mit anderen Begriffen, wie z. B. strukturierten Daten, JSON-LD oder Rich Snippets, auf. Was hinter den einzelnen Begriffen steckt und was das Ganze mit der Suchmaschinenoptimierung zu tun hat, werde ich in diesem Beitrag erläutern.

Markup im Zusammenhang mit SEO

Ganz allgemein ist mit Markup eine Auszeichnungssprache gemeint, die von Maschinen gelesen werden kann und mit der Informationen gegliedert und formatiert werden können. Eine solche Sprache, die wir alle kennen, ist HTML (Hypertext Markup Language). Zeichnet man also im HTML-Code eine Überschrift mit einem <h1>-Tag aus und schließt diese mit </h1>-Tag ab, dann kann ein Browser interpretieren, dass es sich um eine Überschrift handelt. Auch Webcrawler (wie der Googlebot) können erkennen, dass es sich um eine Überschrift handelt.

Die Strukturierung des Quellcodes kann aber noch ein Stück weitergehen. Mit sogenannten strukturierten Daten kann man dem Quellcode weitere Informationen hinzufügen, die von Suchmaschinen interpretiert werden können. Damit kann man der Suchmaschine mitteilen, von welchem Typ eine Seite ist, z. B. ein lokales Geschäft. Dem Typ sind weitere Objekte, wie z. B. die Adresse und die Öffnungszeiten, zugeordnet. Warum können Suchmaschinen das richtig interpretieren? Nun, die großen Suchmaschinen haben sich auf ein einheitliches Vokabular geeinigt und die Community schema.org gegründet. Dort sind die unterschiedlichen Schemata auffindbar, die sich aus Typen und Objekten zusammensetzen. Wenn wir SEOs von Markup sprechen, meinen wir also häufig die erweiterte Strukturierung des Quellcodes durch strukturierte Daten von schema.org.

Vorteile von Markup

Zwei große Vorteile bietet die Verwendung von Markup:

1.      Strukturen sind für die Suchmaschine besser erkennbar

Da es sehr viele unterschiedliche Typen von strukturierten Daten gibt (über 500), ist es möglich, der Suchmaschine die Verarbeitung der Informationen zu erleichtern. Warum das so ist, erläutere ich einmal an Hand von zwei Beispielen. Zum einen am Organization Markup und zum anderen am Product Markup.

Beispiel #1 – Organization Markup

Mittels Organization Markup kann man Google u. a. die Adress- und Kontaktdaten des Unternehmens, das Logo der Website und die dazugehörigen sozialen Kanäle mitteilen. Das Organization Markup muss in der Startseite implementiert werden und kann z. B. so aussehen:

Quelle: Screenshot von http://schema.org/Organization

Es wird deutlich, dass durch Festlegung von Typen und Objekten die Informationen besser und logisch aufbereitet sind. Google kann zwar viele der Informationen auch so erkennen, hat aber über Markup die Bestätigung, dass die Informationen auch so gemeint sind, wie sie auf der Website dargestellt werden.

Beispiel #2 – Product

Beim Markup für Produkte kann man eine Vielzahl von Produktinformationen – wie z. B. die Farbe, ein Produktbild, Produktbewertungen, den Namen des Herstellers oder den Preis – strukturiert an die Suchmaschine übergeben.

Quelle: Screenshot von http://schema.org/Product

2.      Rich Snippets – mit Markup die Darstellung der Suchergebnisse pimpen

Ob auf einer Seite Markup verwendet wird, ist für den Nutzer zunächst nicht erkennbar. Ebenso wie beim HTML-Code bekommt der Nutzer in einem Browser nur das zu sehen, was der Browser aus HTML, CSS und JavaScript interpretieren kann. Was sich mit Markup beeinflussen lässt, ist die Darstellung der Suchergebnisse. Ein Rich Snippet ist eine spezielle Darstellung für ein Suchergebnis. Reichert man den Quellcode mit strukturierten Daten an, kann es sein, dass Google daraufhin die Darstellung in den Suchergebnissen ändert. Ob Google diese Informationen nutzt, ist aber nicht garantiert. Der Vorteil ist klar – ein attraktiveres Suchergebnis regt zum Klicken an, was die Klickrate bzw. die Click-Through-Rate erhöht. Auch dafür habe ich einige Beispiele vorbereitet:

Rich Snippet Beispiel #1 – Veranstaltungen/Events

Sucht man z. B. nach „konzert robbie williams“, erscheinen mehrere Einträge. Wie der Sceenshot zeigt, sticht ein Ergebnis hervor:

 

Beispiel für das Event Markup

Schaut man in den Quellcode der Seite hinein, stellt man fest, dass hier ein Event Markup verwendet wurde. In diesem speziellen Fall wurde sogar das MusicEvent Markup benutzt, dass das Event gleich mit dem Typ Musikevent spezifiziert.

Rich Snippet Beispiel #2 – Breadcrumb

Häufig verfügen Seiten über eine Breadcrumb bzw. eine Breadcrumb-Navigation, die dem Nutzer dabei hilft, sich zu orientieren (Beispiel: Home>Kategorie 1>Beitrag X). Diese Informationen können mit dem Breadcrumb Markup stukturiert werden und somit die Darstellung der URL in den Suchergebnissen beeinflussen. Anhand der folgenden beiden Screenshots wird der Unterschied deutlich:

Darstellung der Suchergebnisse ohne Breadcrumb Markup

 

Darstellung der Suchergebnisse mit Breadcrumb Markup

Mit dem Breadcrumb Markup kann die Darstellung der URL positiv beeinflusst werden. Während im ersten Beispiel die komplette URL ausgegeben wird, erfolgt im zweiten Beispiel eine strukturierte Darstellung. Sie erleichtert es, dem Nutzer den Beitrag in eine Kategorie einzuordnen und gibt ihm so eine bessere Orientierung.

Rich Snippet Beispiel #3 – Rating

Ein weiteres sehr wichtiges Markup, das signifikant die Darstellung in den Suchergebnissen beeinflussen kann, ist das Markup für Ratings bzw. Bewertungen.

Betrachtet man die vier Snippets, fällt das Produkt direkt ins Auge, bei dem die Bewertungssternchen ausgegeben werden. Das Rating Markup kann für Produkte, Kategorien oder die Bewertung der gesamten Marke implementiert werden.

In diesem Beispiel lassen sich aber noch weitere Rich Snippets finden, wenn man sich die anderen Einträge anschaut. Im obersten Beispiel ist ein Hinweis auf eine Kategorieseite mit der dazugehörigen Produktanzahl zu finden. Im dritten Eintrag werden durch das hinterlegte Product Markup Informationen für den Preis und die Verfügbarkeit im Shop angezeigt.

 

Wie implementiere ich Markup?

Für die Implementierung von Markup hat Google einige Richtlinien veröffentlicht, die Structured Data General Guidelines. Dort nennt Google drei Varianten, die es ermöglichen, dass Rich Snippets angezeigt werden:

  1. JSON-LD
  2. Microdata
  3. RDFa

Bei den Varianten Microdata und RDFa erfolgt eine direkte Auszeichnung durch Markup im Quellcode am jeweiligen Element. Es muss also jede Überschrift, jeder Paragraph etc. einzeln ausgezeichnet werden.

Mit JSON-LD werden die Informationen über ein Skript vom Inhalt der Seite getrennt. Google empfiehlt die Implementierung über JSON-LD (JavaScript Object Notation für Linked Data). Da dies ein Artikel für Einsteiger ist, gehe ich an dieser Stelle lediglich ganz kurz auf diese Möglichkeit etwas näher ein:

Zunächst kann ich Entwarnung geben, nur weil es sich um ein Skript handelt, ist in der Regel kein wirklicher Programmieraufwand erforderlich. Die Seite schema.org bietet auf jeder Seite ausführliche Beispiele für jeden Markup Typ. Das Skript sollte laut Google im <head>-Bereich einer Seite eingebaut werden. An dieser Stelle greife ich nochmal das zuvor genannte Beispiel des Organization Markups auf. Im Prinzip kann man die genannten Beispiele sehr gut als Vorlage nutzen und anpassen. Schaut man sich das Organization Markup auf schema.org genauer an, wird schnell deutlich, dass einem zahlreiche Spezifizierungen zur Verfügung stehen. Das erfordert sicherlich etwas mehr Einarbeitungszeit.

Testingtool für strukturierte Daten

Ob das Markup korrekt eingebaut wurde, lässt sich mit dem Testtool für strukturierte Daten feststellen, das von Google bereitgestellt wird. Dort kann einfach eine URL eingegeben werden. Auf der linken Seite wird der überprüfte HTML-Quellcode der zugehörigen Seite ausgegeben. Alle Markups, die gefunden werden, werden auf der rechten Seite aufgelistet. Sollten dabei Fehler gemacht worden sein, weist Google darauf hin und spricht darüber hinaus Warnungen aus, wenn z. B. Informationen für ein Feld nicht auffindbar sind. Ein kleiner Tipp für das bessere Auffinden des Markups im Quellcode: Ein Doppelklick auf ein Markup – wie hier im Beispiel „Organization“ – genügt und schon wird die entsprechende Zeile im HTML-Code auf der linken Seite markiert.

Ein spannendes Feature zum Fixen von Fehlern im Markup ist, dass Veränderungen im Quellcode direkt über das Tool validiert werden können. Dazu kann zunächst der Quellcode links bearbeitet werden und mit einem Klick auf den Button „Validieren“ (sieht aus wie ein Play-Button) werden die gemachten Änderungen in der Vorschau wirksam. Selbstverständlich müssen die Fehler anschließend noch im eigentlichen Quellcode gefixt werden.

Wer noch mehr über das Thema Markup erfahren möchten, dem lege ich das Webinar „Markup und SEO“ von Markus Hövener ans Herz.

Fazit

Alles in allem ist das Thema Markup super spannend. Auch als Einsteiger kommt man nicht so wirklich um das Thema herum. Der Einsatz von Markup hilft Suchmaschinen dabei, die Informationen auf einer Website besser zu verstehen. Ebenso nutzt Google diese Informationen, um die Darstellung in den Suchergebnissen anzupassen. Die Implementierung ist nicht ganz so leicht und erfordert meist etwas Einarbeitung. Dennoch hilft das Testtool für strukturierte Daten dabei, dass das Markup fehlerfrei eingebaut wird.

Weitere Artikel aus der Serie SEO für Einsteiger

Teil 1: Die Funktionsweise von Suchmaschinen

Teil 2: Wie baue ich meinen ersten Link auf?

Teil 3: Keywords, Keywords, Keywords

Teil 4: Wo fange ich eigentlich mit SEO an?

Teil 5: Tipps für die Homepage

Unser nächstes Webinar am 25. Januar 2019: 10 SEO-Mythen: Was stimmt, was stimmt nicht?

Das weiß doch jeder: Duplicate Content führt zu Abstrafungen. Blogs sind gut für SEO. Soziale Signale sind wichtig für organische Rankings. Oder etwa doch nicht? In diesem Webinar gibt es einen differenzierten Blick auf viele bekannte Mythen, denn im manchen Mythos steckt natürlich trotzdem ein bisschen Wahrheit.

Jetzt kostenlos anmelden:
10 SEO-Mythen: Was stimmt, was stimmt nicht?

Alle kommenden Webinare:
Bloofusion-Webinare im Überblick

The following two tabs change content below.

Andreas Engelhardt

Andreas Engelhardt ist SEO-Consultant bei der Online-Marketing-Agentur Bloofusion.

In seiner Freizeit spielt er gerne Gesellschaftsspiele und Darts, liest Fantasy-Romane und treibt gerne Sport. Außerdem ist er Fan von Borussia Dortmund.

Andreas Engelhardt ist unter anderem in den folgenden sozialen Netzwerken zu finden:

2 Kommentare zu “SEO für Einsteiger – Teil 6: Markup, strukturierte Daten & Co.”

  1. Lothar

    Danke für den informativen Beitrag. Ich dachte bisher, dass der Begriff „Markup“ sich nur auf die Auszeichnung von Keywords bezieht. Was er alles wirklich einschließt, wird durch den Artikel sehr schön beschrieben.

    Nochmals vielen Dank!

    LG

  2. Andreas Engelhardt

    Danke für dein Feedback! Freut mich, dass dir der Artikel gefällt. 😉

Kommentieren