Wie integriert man Strukturierte Daten?

Lektion Fortschritt:

Links aus den Videos:

Transkript

In der ersten Lektion von Modul 2 erkläre ich, wie Sie Strukturierte Daten in Ihre WordPress-Seite integrieren können.

Servus! Ich bin Florian, der WordPress-Typ und Entwickler hinter SNIP, dem Strukturierten Daten Plugin für WordPress. Schön, dass Sie mit dabei sind in meinem Kurs zum Thema Strukturierte Daten. Legen wir los!

In der letzten Lektion von Modul 1 hab ich Ihnen gezeigt, wie Sie die richtigen Datentypen und deren Attribute bzw. Eigenschaften finden können. Lassen Sie uns das noch einmal wiederholen.

Schema Typen identifizieren

Als erstes müssen Sie identifizieren welchen Schema-Typen Sie überhaupt integrieren wollen. Sagen wir, Sie bieten auf Ihrer Website eine handgemachte Tee-Tasse an. Sie wissen also, dass Sie eine Schema-Klasse für einen Tee-Tasse brauchen, falls so etwas existiert.

Wie Sie es gelernt haben, wechseln Sie zuerst auf die Übersicht aller Schema-Typen bei schema.org. Dort prüfen Sie, ob es Schemata für Tassen oder gar Tee-Tassen gibt

Sie suchen unterhalb von „CreativeWork“ weil Sie denken, dass Ihre Tee-Tasse ja genau das ist: etwas kreatives. Aber Sie stellen schnell fest, dass es da nicht wirklich etwas gibt, was ganz genau passen würde. Was also tun?

Natürlich könnten Sie hier jetzt den Schema-Typen „CreativeWork“ benutzen denn – wie gerade erwähnt – ist Ihre handgefertigte Tee-Tasse ja genau das: selbstgemacht. Da es keinen Schema-Typen für Tassen oder Tee-Tassen gibt, könnten Sie den nächsten Schema-Typen nutzen, der passt.

Von den vorherigen Lektionen wissen Sie allerdings, dass der Schema-Typ „CreativeWork“ keine Rich Snippets in Suchresultaten erzeugt. Sie wollen aber hervorstechen. So, wie Sie es in der ersten Lektion von Modul 1 gesehen haben. Denn das ist, was für den Benutzer optisch einfach attraktiver ist. Es besteht kein Zweifel, dass hier deutlich öfter geklickt wird.

Sie merken schon: das Produkt-Schema würde hier am besten passen. Sie entscheiden sich, es damit zu versuchen.

Check der Leitfäden

Nun wechseln Sie zu Googles-Leitfäden um zu sehen, wie so ein Rich Snippet in Suchresultaten denn überhaupt aussieht und was Sie dafür alles tun müssen. Sprich: welche Eigenschaften bzw. Attribute der Produkt-Schema-Typ braucht.

Sie sollten jetzt damit beginnen, die Beschreibung und den Leitfaden für ein Produkt-Schema genau durchzulesen. Wenn Sie dem englischen nicht mächtig sind oder die Seite von Google-Mitarbeitern noch nicht übersetzt wurde, können Sie einen Online-Übersetzer wie etwa Deepl nutzen.

Das Lesen ist wichtig. Denn nur so verstehen Sie, was wichtig ist und was Sie dürfen und was nicht. Wie im letzten Video angemerkt: legen Sie sich nicht mit Google an. Wenn Sie versuchen zu schummeln, merkt die Suchmaschine das und es kann sein, abgestraft zu werden. Dies könnte zur Folge haben, dass nie mehr Rich Snippets für Ihre Website möglich sind.

Haben Sie fertig gelesen? Prima. Scrollen wir weiter nach unten zur Attributliste des Produkts. Hier finden Sie alle Eigenschaften die required, also notwendig und andere, die recommended, also empfohlen sind. Ich gehe später noch näher auf den Unterschied ein.

Nun wissen Sie schon einmal welchen Schema-Typen Sie nutzen möchten und welche Attribute dafür notwendig sind.

Als nächstes müssen wir den Code für das Produkt-Schema bauen. Dafür gibt es mehrere Möglichkeiten.

Sie können mein WordPress-Plugin namens SNIP zu verwenden das Produkt-Schnippsel direkt in eine WordPress-Seite, einen Artikel oder einen anderen Artikeltypen einzubauen. Zum Beispiel in eine WooCommerce-Produkt-Seite. Leider konnte ich das Plugin nicht zusätzlich in diesen Kurs als kostenlosen Download anbieten da es über eine Web-Plattform exklusiv angeboten wird und es mir daher nicht erlaubt ist, es auf einer anderen Seite zu verkaufen. Für den Kurs und für den Einbau von Strukturierten Daten ist das Plugin aber auch nicht notwendig. Sie können diese Kurs auch ohne Plugin erfolgreich abschließen. Das Plugin nimmt Ihnen – wie Sie später merken werden – allerdings sehr viel Arbeit ab. Es kann z.B. automatisch Strukturierte Daten für all Ihre Produkte anlegen. Sie erstellen dann quasi nur ein Produkt-Schema mit dem Generator, welches dann auf alle Produkte angewandt werden kann.

Und da kommen wir zu Möglichkeit zwei: der Generator, der im Plugin eingebaut ist, finden Sie kostenlos auf der Website des Plugins. Er ist zwar auch auf englisch aber ich verspreche Ihnen: er ist ganz einfach zu nutzen, wenn Sie alle Lektionen bis hierhin angeschaut und bereits das Grundverständnis von Strukturierten Daten sich angeeignet haben.

Die Dritte und letzte Möglichkeit ist, dass Sie selbst Hand anlegen. Das bedeutet: Sie laden sich einen Editor Ihrer Wahl auf Ihren Rechner und fangen an, Code selbst zu schreiben. Da sich vielen Menschen oft schon beim Gedanken an Code die Haare bergauf stellen lasse ich diesen Schritt aus. Denn Sie brauchen das nicht zu tun. Sie können den kostenlosen Generator nutzen. Das ist deutlich einfacher und bequemer. Der Generator liefert Ihnen dann ohnehin den fertigen Code. Diesen können Sie dann – wenn Sie wollen – im Nachhinein noch selbst bearbeiten.

Fangen wir mit dem Generator an. Sie finden ihn unter dieser Adresse. Den richtigen Link finden Sie ebenfalls unter diesem Video.

Sie können gleich Live mitmachen, wenn Sie sich ein neues Browser-Fenster oder einen neuen Tab im Browser öffnen.

Nomenklatur

Vorher möchte ich aber noch auf ein paar Begriffe eingehen. Speziell in meinem Plugin finden Sie oft die Bezeichnung „Snippet“ wieder. Damit meine ich einen Code-Schnippsel. Also den fertig generierten Code für Strukturierte Daten der durch den Generator entsteht.

Das Wort „Snippet“ steht aber gleichzeitig auch für einen Suchtreffer bei Suchmaschinen. Wie Sie ja bereits wissen ist ein „Rich Snippet“ ein mit strukturierten Daten angereichertes Suchresultat.

Der Generator

Nun gehen wir aber zum Generator über …

Unter „Select a thing“ geben Sie „Produkt“ ein, um nach dem Schema-Typen für Produkte zu suchen.

Kurz darauf erscheint ein Ausklapp-Menü mit Vorschlägen. Wenn Sie ganz nach unten scrollen finden Sie das Standard-„Product“, welches Sie auswählen.

Alternativ können Sie auch auf den „Product“-Button hier klicken.

Beides führt dazu, dass der Generator eine Liste von Eigenschaften lädt.

Über die Links „Edit“ und „Delete“ lässt sich eine Eigenschaft bearbeiten, respektive löschen.

Wenn Sie weiter nach unten scrollen sehen Sie auch die Möglichkeit, weitere Eigenschaften anzufügen. Das hier blau hervorgehobene Textfeld funktioniert, wie das Pendant ganz oben. Sie geben ein Suchwort ein und der Generator spuckt eine Liste von Eigenschaften aus, die in diesem Schema-Typ möglich sind.

Hier im Beispiel möchte ich das „manufacturer“-Attribut an das Produkt-Schema anfügen. Ein Klick darauf, fügt es hinzu.

Es wird dann an die Liste angehängt.

Nun wollen wir ein Attribut bearbeiten. Hier benutze ich das „name“ Attribut.

Nach dem Klick auf den „Edit“-Link öffnet sich das Attribut und Sie haben dann die Möglichkeit, die Werte zu verändern.

  • Sie finden hier eine Beschreibung,
  • können den Feldtyp einstellen und
  • können den eigentlichen Wert eingeben.

Die Auswahl-Box beim Feld-Typ ist – je nach Attribut – immer etwas anders. In der Regel geben Sie nur einen selbst gewählten Text ein. Deswegen ist es sinnvoll, hier „Direct Text Input“ auszuwählen. Auf deutsch heißt das „Direkte Texteingabe“.

Erinnern Sie sich noch an das „offers“ Attribut? Es enthielt eine Kind-Schema-Klasse mit der Bezeichnung „Offer“. Der Generator erkennt ganz intelligent, welche Kind-Schemas möglich sind und bietet Ihnen diese zur Auswahl an. Hier im Beispiel wären das „AggregateOffer“ oder „Offer“.

Bleiben wir gleich bei diesem Beispiel und wählen „Offer“ aus.

Der Generator lädt dann das Kind-Schema in das „offers“-Attribut hinein. Dazu liefert es gleich ein paar Attribute des Offer-Schemas mit. Sie kenne diese ja bereits aus den vergangenen Videos. Ich habe sie immer mal wieder erwähnt. Da wären die Verfügbarkeit, englisch availability, die priceCurrency, der Preis selbst, und die Kategorie.

Wir können nun die Attribute füllen…

Nach dem Klick auf „Generate Output“ generiert der Generator dann die finalen strukturierten Daten mit Ihren Inhalten. Diesen Text können Sie dann kopieren. Wir brauchen Ihn gleich, wenn wir ihn in WordPress einfügen wollen.

Hier noch ein kurzer Hinweis: Die nächsten Schritte entfallen komplett, wenn Sie mit meinem Plugin arbeiten. Denn dieses generiert diese strukturierten Daten automatisch und fügt sie im entsprechenden Format auf eine WordPress-Seite ein. Wenn Sie also bereits mit dem Plugin arbeiten (ich gehe später in diesem Video noch näher darauf ein), können sie einfach vorspulen.

Code in WordPress einfügen

Ich nutze zum Editieren von Code ein Text-Editor Programm namens Sublime-Text. Man kann es unter dieser URL downloaden. Es ist kostenlos verfügbar und existiert für Windows, Mac und Linux-Systeme. Natürlich können Sie aber auch ein anderes Tool Ihrer Wahl nutzen.

Nun ist es so, dass wir diese strukturierten Daten nicht einfach so in WordPress einfügen können bzw. dürfen. Denn die Suchmaschinen könnten dann nicht unterscheiden ob es sich um reinen Text oder aber um strukturierte Daten handelt. Deswegen müssen wir um diesen Code noch etwas drumrum fügen.

<script type="application/ld+json">
… hier kommen die Daten …
</script>

Und zwar diese zwei Zeilen, die mit einer Dreiecks-Klammer beginnen. Dazwischen – hier in grau dargestellt – befinden sich dann unsere strukturierten Daten. Wie Sie unschwer erkennen können, wurde als Datentyp hier „application/ld+json“ festgelegt. Die Suchmaschine weiß dann, dass die Daten, die zwischen diesen zwei Zeilen stehen, JSON+LD-Daten sind. Also genau das Format, für das wir uns am Anfang dieses Kurses festgelegt hatten.

Ergänzen wir unseren Code also um diese zwei Zeilen. Der gesamte Code würde dann so aussehen:

<script type="application/ld+json">
{
    "sku": "Tassen",
    "mpn": "XA-12345",
    "gtin8": "XA-123456",
    "image": {
        "height": "800",
        "width": "800",
        "url": "https://meine-website.de/tasse.jpg",
        "@context": "http://schema.org",
        "@type": "ImageObject"
    },
    "name": "Tee-Tasse",
    "offers": {
        "priceCurrency": "EUR",
        "price": "11.90",
        "category": "Tasse",
        "@context": "http://schema.org",
        "@type": "Offer"
    },
    "description": "Eine handgemachte Tee-Tasse aus dem Bay. Wald.",
    "brand": {
        "name": "Super Tee-Tassen-Hersteller",
        "@context": "http://schema.org",
        "@type": "Brand"
    },
    "@context": "http://schema.org",
    "@type": "Product"
}
</script>

War also gar nicht so schwer. Lassen wir dieses Code-Fenster geöffnet und wechseln dann zum WordPress-Editor.

Code in den Classic Editor einfügen

Seit Ende 2018 gibt es in WordPress einen neuen Editor. Er wurde „Gutenberg“ getauft und arbeitet mit so genannten Blöcken. Oft kommt aber noch der zuvor genutzte Editor zum Einsatz. Er nennt sich Classic Editor. Da ich nicht weiß, wie Ihre Website aktuell aufgebaut ist und welche Version Sie nutzen, werde ich beide Vorgehensweisen zeigen.

Zuerst den Classic-Editor. Die Integration hier ist etwas umständlicher als mit dem neuen Editor. Aber Sie werden es gleich sehen…

[Screencast]

Code in den Gutenberg-Editor einfügen

Kommen wir nun zum Gutenberg-Editor. Es ist deutlich einfacher, hier Code einzufügen.

[Screencast]

Code via Plugin einfügen

Nun möchte ich Ihnen zeigen, wie Sie die gleichen Strukturierten Daten mit meinem Plugin, einfacher, schneller und deutlich bequemer einfügen können.

Ich gehe davon aus, dass Sie das Plugin installiert und aktiviert haben. Bevor wir beginnen, stellen Sie bitte sicher, dass unter den Einstellungen auch der Post-Typ „Seiten“ ausgewählt ist. Sonst werden Sie den Generator später nicht sehen können.

[Screencast]

Fazit

Fassen wir noch einmal zusammen.

  • In diesem Video habe ich noch einmal gezeigt, wie Sie den richtigen Schema-Typen finden können.
  • Ich habe aufgezeigt, welches Möglichkeiten es gibt, Strukturierte Daten zu genieren. In diesem Beispiel haben wir den Online-Generator genutzt, weil er am einfachsten zu nutzen ist und Sie nicht selbst Code erstellen müssen.
  • Wir haben ein Product-Snippet und dessen Eigenschaften mit Inhalt gefüllt. Dabei mussten wir auch einige Kind-Schema erstellen. Zum Beispiel beim „offer“-Attribut.
  • Ich habe gezeigt, wie Sie Ihren neuen Code in den Classic- sowie dem Gutenberg-Editor einfügen können.
  • Ich habe darauf hingewiesen, dass Sie mit SNIP – meinem Plugin für WordPress solche strukturierten Daten noch einfacher, schneller und bequemer erstellen können.

Phuu! Das war ganz schön viel neuer Inhalt, nicht wahr? Aber Sie befinden sich auf der Zielgeraden.

Es geht weiter mit dem Video bei dem wir uns mit dem Testen von Strukturierten Daten genauer befassen.

Ich hoffe, ich sehe Sie gleich wieder!