18 Aug 2016
Das Theme mit strukturierten Daten anreichern, Der Puzzle-Mann in Paris, Bild: microble.eu

Das Theme mit strukturierten Daten anreichern,
Der Puzzle-Mann in Paris, Bild: microble.eu

SEO hin oder SEO her… Egal, denn wir sollen auf jeden Fall so viel als möglich machen um Google zu gefallen. Daher ist es sinnvoll wenn du dein Theme mit strukturierten Daten für die Suchmaschine ergänzt. Aber fangen wir am Anfang an: Warum sollten wir uns dieses Getue mit den strukturierten Daten überhaupt antun?

Warum solltest du mit strukturierten Daten in WordPress arbeiten?

Eigentlich sind Webseiten für Suchmaschinen perfekt. Es ist reiner Text und schnell lesbar. Aber sie haben ein großes Problem mit unseren Seiten: Es sind so verdammt viele Informationen und es noch schwerer diese zu verstehen. Uns Menschen fällt es sehr leicht den Kontext der Informationen zu verstehen, aber für Google, Yahoo!, Bing und Konsorten ist es oft unmöglich.
Darum haben sich die großen Suchmaschinen auf einen gemeinsamen Nenner geeinigt und die Strukturierten Daten erschaffen: schema.org. Oder wie sie es erklären:

Welcome to Schema.org
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.

Aber warum sollen wir jetzt für den Kram auch noch Zeit investieren? Ganz klar, es kann (und ziemlich sicher wird es) deine Zugriffszahlen von den Suchmaschinen verbessern. Wir liefern großartigen Content (sagt der SEO-Gott) und die Suchmaschinen wollen ihren LeserInnen den relevantesten und besten Content ausliefern. Wenn du jetzt klar darstellst um was es in deinen Posts geht, dann wird dir Google (oder andere Suchmaschinen) mehr vertrauen und dich besser behandeln.
Die Studie Schema.org – U.S. 2014: Rich Snippets With HTML Microdata And RDF von Searchmetrics ist zwar schon älter, trotzdem wird sich nicht viel geändert haben. Wenn ich so auf den Seiten herumsurfe, haben viele noch keine strukturierten Daten eingebaut. Damals waren es ganze 0,03% der Webseiten, welche online sind. Also wenn du es verwendest – und Zeit investierst – hast du sicher einen Vorteil. Genauso wie bei den AMP-Seiten, die werden auch noch immer sehr stiefmütterlich angewendet.

Welche Möglichkeiten mit strukturierten Daten zu arbeiten gibt es?

Eigentlich unendlich viele oder wie man auch gerne sagt: Das kommt darauf an! Und es stimmt, je nach dem über welches Thema du auf deinem Blog schreibst, musst du auch das passende Schema auswählen. Schau ich habe dir eine kleine Aufzählung zusammengestellt:

Und gerade der letzte ist für uns am interessantesten.

Mein WordPress-Theme anpassen

Nun müssen wir natürlich ein wenig programmieren. Denn so ganz automatisch kann WordPress keine strukturierten Daten einfügen. Aber ich helfe dir mit einer Schritt für Schritt Anleitung und schon kannst auch du deine Posts mit schema.org anreichern.
Fangen wir mit den Grundlagen an. Bevor du irgendetwas an deinem Theme änderst, machst du ein Backup (kopiere dir das Theme auf die Festplatte). Und danach legst du auf jeden Fall ein Child-Theme an. Denn nur so kannst du das originale Theme immer updaten.

Den Artikel erkennen

Natürlich können wir den speziellen Typ für einen Blogpost verwenden, aber ich habe mich für den allgemeineren Typ Artikel entschieden. Denn dieser ist wirklich für die meisten von euch verwendbar. Die Anpassungen müssen wir im Loop vornehmen. Das ist jetzt nicht so einfach zu finden und von deinem Theme abhängig. Die Ausgabe der Posts kann direkt in der index.php erfolgen oder auch in einer Datei content.php oder content-standard.php oder wo auch immer. Da musst du jetzt ein wenig in deinem Theme suchen um den article-Element oder auch einen div-Element mit der css-Klasse post-entry zu finden.

Den öffnenden Tag ergänzt du vor dem >-Zeichen mit den Basisinformationen: role="article" itemprop="hasPart" itemscope="" itemtype="http://schema.org/Article", wie du es in der Zeile 1 siehst.

Den Post-Titel markieren

Nun kommt auch schon der Titel des Posts dran. Ich nehme das Beispiel aus meinem Theme, aber deines wird ziemlich ähnlich aussehen.

Hier haben wir auch zwei Ergänzungen. Im öffnenden h1-Tag (bei dir kann es auch ein h2-Element sein, das hängt vom Theme ab) ergänzt du wieder vor dem >-Zeichen das Attribut itemprop="headline". Da bei den meisten Blogposts der Titel verlinkt ist, müssen wir auch das a-Element mit einem Attribut (itemprop="url") erweitern.

Wann wurde der Post veröffentlicht?

Jetzt ergänzen wir die gesamten Meta-Infos unseres Posts. Das ist eben das Veröffentlichungsdatum, der Autor, die Kategorien und die Schlagwörter. Fangen wir einfach mit dem Datum an.

Es kann jetzt natürlich sein, dass in deinem Theme noch ein span oder div-Element für das Datum verwendet wird. Natürlich ist das ein guter Zeitpunkt um das richtige Element, nämlich time, zu benutzen. Je besser du die verschiedenen html5-Elemente einsetzt, desto besser werden sie auch von den Suchmaschinen erkannt. Es ist einfach schlauer ein Datum oder eine Zeit mit dem time-Element zu kennzeichnen, als einen span oder was auch immer zu verwenden.

Die strukturierten Daten für Kategorien und Schlagwörter

Die Kategorien und die Tags (Schlagwörter) werden auch bei dir in einem div oder vielleicht auch einem ul-Element liegen. Dieses kannst du jetzt mit den passenden Attributen ergänzen.

Den Autor des Posts erkennen

Nun sollten wir uns auch um den Autor des Posts kümmern. Auch seine Informationen reichern wir mit den passenden Attributen von schema.org an.

Wird nur ein Auszug oder der Inhalt angezeigt?

Nun müssen wir uns aber noch um den echten Inhalt kümmern. Auch den müssen wir mit den passenden Attributen versehen. Dabei müssen wir aber eine Kleinigkeit beachten. Denn entweder geben wir nur einen Auszug (excerpt) oder den vollen Inhalt (content) des Posts aus. Und genau da brauchen wir eine Unterscheidung der Attribute.

Die Daten des Herausgebers ergänzen

Als Letztes ergänzen wir noch den sogenannten Publisher. Das wird bei dir im Theme fehlen und den Herausgeber brauchten wir bis jetzt auch nicht. Aber denk daran je mehr Infos du der Suchmaschine gibst, desto besser wird sie mit deinem Blog zusammenarbeiten. Daher ergänzen wir folgenden Code vor dem schließenden article-Tag.

Die Bilder der Posts mit strukturierten Daten kennzeichnen

Das ist jetzt nicht ganz so einfach. Denn wir haben verschiedene Arten von Bildern in unseren Posts. Einerseits gibt es da das Artikelbild, andererseits fügst du aber auch Bilder zu deinem Post hinzu. Oder du machst es vielleicht wie ich, ich füge immer ein Bild am Anfang des Posts manuell ein und verwende die Artikelbild-Funktion nicht.

Das Artikelbild auszeichnen

Dies ist die einfachste Variante, da das Bild bereits in deinem Loop enthalten ist und wir nur ein „paar“ Attribute hinzufügen müssen.

Wahrscheinlich hast du in deinem Theme nur die Zeilen 1, 4, 5, 6 und 16 gefunden. Das ist ganz normal, mehr hast du bist jetzt nicht gebraucht. Die restlichen Zeilen ergänzt du einfach und legst damit die strukturierten Daten für das Artikelbild fest.

Die Bilder im Post auszeichnen

Dies ist jetzt ein wenig unangenehmer, denn wir wissen ja nie wie viele Bilder in einem Artikel enthalten sind. Aber glücklicherweise haben wir von WordPress die Datei functions.php in unserem Theme bekommen. Falls sie nicht da ist, erstelle einfach eine Textdatei mit dem Namen und füge als erste Zeile <?php und als letzte Zeile ?> ein. Nun verwenden wir einen Filter, welcher den Shortcode caption verändert. Bilder werden immer mit dieser Technik in Artikel eingefügt. Daher ist es von uns schlau, genau diesen Teil auch anzupassen und mit strukturierten Daten zu ergänzen.

Mit dieser Funktion werden jetzt alle Bilder mit den passenden schema.org-Daten versehen. Du siehst in den Zeile 24 und 27 bis 29 diese strukturierten Daten. An und für sich sind es die gleichen wie beim Artikelbild selbst, nur die Technik sie zu ergänzen ist anders.

Der letzte Test für die strukturierten Daten

Testresultat für die strukturierten Daten von Guru 2.0

Testresultat für die strukturierten Daten von Guru 2.0

Wenn du jetzt alles fertig hast, kannst du deinen Blog mit dem Test Tool für strukturierte Daten von Google überprüfen. Hast du alles richtig gemacht, werden die nur die Artikelelemente und das Element für die Seite selbst angezeigt. Aber es gibt eben keine Fehler und Warnungen, wie du es im Bild rechts siehst.

Falls du dich noch weiter mit dem Thema beschäftigen willst, habe ich hier ein paar Links für dich zusammengestellt

Weitere Infos für dich:
http://schema.org/
http://www.searchmetrics.com/knowledge-base/schema/
http://queue.acm.org/detail.cfm?id=2857276
https://developers.google.com/custom-search/docs/structured_data
https://search.google.com/structured-data/testing-tool/u/0/
https://developers.google.com/search/docs/guides/mark-up-content

Und Du?

Ich freue mich über jeden Kommentar. Schreib ruhig wenn Du eine Frage oder einen zusätzlichen Tipp hast. Ich habe auch eine Frage: Hat dir dieser Post genützt und war er einfach genug, oder habe ich zu kompliziert geschrieben? Trau dich und schreib mir eine Antwort in den Kommentaren.

Tags: , , , ,
2 Kommentare
  1. Michael says:

    Vielen Dank für diese ausführliche und trotzdem leicht verständliche Anleitung. =)

Kommentarfunktion deaktiviert.