Eindrucksvolle Suchtreffer mit diesem Schema WordPress Plugin erzeugen

Hand auf’s Herz: Jeder, der ernsthaft online ein Business betreibt, will auch gefunden werden. Ohne Traffic gibt’s halt kein Umsatz. Deswegen betreiben wir alle ja auch Suchmaschinenoptimierung. Genauer gesagt geht es in diesem Artikel um technische Suchmaschinenoptimierung mit einem speziellen Schema WordPress Plugin. N?mlich SNIP. Ich zeige Schritt f?r Schritt, wie man “sch?ne Suchresultate” bekommt. Zumal man damit mehr Aufmerksamkeit in der Suchtrefferliste erh?lt, was unweigerlich auffallender wirkt und dadurch zu mehr Traffic f?hren kann.

Vorteile eines Schema WordPress Plugins

Kurz und knapp ist ein Schema-Markup eine Auszeichnung mit Daten, die von Suchmaschinen lesbar sind. Zur Belohnung der Auszeichnung seiner Beitr?ge erh?lt man oft (aber nicht immer) ein h?bsches Suchresultat. Dieses erschein oft gr??er und auff?lliger bei den Suchtreffern. M?glicherweise ist man schnell der Einzige im Handy-Display bei den Suchtreffern. Hier ein Beispiel:

Reviews werden in Suchmaschinen gr??er dargestellt.
Zwei Suchergebnisse nehmen den gesamten Bildschirm ein. Mehr in der Bildbeschreibung.

Diese Vorteile, welche man ?ber ein WordPress Plugin wie SNIP, einfach integrieren kann, liegen auf der Hand. Gr??ere und vor allem optisch auffallendere Suchergebnisse die (wie sollte es anders sein) zu einer h?heren Click-Through-Rate (kurz: CTR) f?hren. Obendrein f?hrt das unweigerlich zu mehr Traffic auf Ihrer Website!

Was ist Schema-Markup genau?

Wenn man von “Schema” spricht, meint man meistens strukturierte Daten, die in der Regel von schema.org definiert werden. Dabei handelt es sich – wie man auf der Startseite von denen schon lesen kann – um eine “gemeinschaftliche Initiative mit dem Ziel, Schemas f?r strukturierte Daten im Internet, […] zu pflegen und zu verbreiten”.

Das h?rt sich recht hochtrabend an, ist aber relativ einfach. Denn im Grunde dienen strukturierte Daten nur dazu, dass Maschinen (in der Regel Suchmaschinen) besser verstehen, was sich auf einer Website oder auf einer einzelnen Seite befindet. Folglich gibt man ihnen kontextbezogene Informationen mit auf dem Weg durch das Web.

Aber zur?ck zum Anfang:

Was Suchmaschinen nicht k?nnen

Es war seit jeher schwer f?r Suchmaschinen zu verstehen, was sich auf einer einzelnen Website befindet. Google und Co. haben aber ein Interesse daran, die besten Suchtreffer f?r einen Suchenden zu finden.

Nehmen wir an, man gibt in einer Suchmaschine (wie DuckDuckGo, es muss ja nicht immer gleich Google sein) einen Suchbegriff wie “Kopfh?rer kaufen” ein. Sogar Suchmaschinen ist seit Langem klar, dass der Suchende wohl eine Kaufabsicht hat. Insofern macht es Sinn, dass man ihm nur Seiten mit Produkten oder Vergleichswebsites anzeigt.

Maschinen sind (noch) keine Menschen!

Wenn Sie einen Online-Shop f?r Kopfh?rer betreiben, wollen Sie sichergehen, dass Suchmaschinen verstehen, dass Sie diese Produkte anbieten. Wie erreicht man das? Nat?rlich sind Suchmaschinen mittlerweile sehr schlau. Maschinelles Lernen hat ja immerhin auch schon Einzug gehalten. Trotzdem ist der Aufwand f?r das Erkennen solcher Seiten echt schwierig und frisst viele Ressourcen, ist also teuer. Vor allem, weil alle Produktseiten auf dieser Welt irgendwie anders aussehen.

Anders gesagt tun wir Menschen uns dagegen relativ einfach. Wir erkennen oft auf einen Blick, dass wir auf einer Produktseite etwas kaufen k?nnen. Wohingegen Suchmaschinen da nicht so schlau sind. Sie sind eben keine Menschen. Aber sie versuchen ohnehin, einen Menschen zu imitieren. Folgerichtig um die besten Suchtreffer im Netz zu finden.

Was man Suchmaschinen mitteilen muss

Nun hatten ein paar schlaue K?pfe die Idee, dass man bestimmte Seiten mit Schema-Markups ausstatten k?nnte. Diese m?ssen nicht zwangsl?ufig sichtbar sein. Es ist ja nur wichtig, dass Maschinen diese lesen k?nnen. Und so kam es dann auch. Es gibt zwar diverse Formate (von denen sich nur eines durchgesetzt hat) aber es war schon immer so, dass durch Schemas f?r den Menschen nicht sichtbar waren. F?r die Suchmaschinen jedoch schon!

Ausgezeichnet werden solche Schemas unter anderem mit einem Schema WordPress Plugin wie SNIP eines ist. Es enth?lt einen umfangreichen Schema-Generator, mit dem man sich seine Schemas einfach zusammenklicken kann.

Was sich auszeichnen l?sst

Klar, man kann derzeit noch nicht die ganze Welt mit schema.org auszeichnen, denn zum Zeitpunkt des Blogposts umfasst die Seite “nur” ca. 800 Schemas (die von SNIP alle unterst?tzt werden!). Jedoch funktionieren die wichtigsten Dinge.

  • Organisationen
    Damit wissen Suchmaschinen, dass es sich um eine Unternehmenswebsite handelt.
  • Job Postings
    Damit lassen sich Job-Angebote in der speziellen Jobsuche von Google und Co. anzeigen.
  • Produkte
    Suchmaschinen haben mittlerweile alle auch eine Produktsuche. Damit Ihre Produkte dort auftauchen, ben?tigen Sie spezielles Schema-Markup f?r Produkte.
  • Kurse und Events
    Auch diese zwei Schema-Typen erzeugen coole und auff?llige Suchresultate.
  • Rezepte
    Mit Sicherheit haben Sie das auch schon gesehen: Ein Bild in den Suchtreffern auf dem man das fertige Gericht sehen kann. Oft sogar inklusive Kalorienangabe!
  • Und viele mehr.

Google unterst?tzt derzeit noch viele weitere Schemas von schema.org. Eine komplette Liste gibt es hier.

Schema Markup WordPress Plugin Beispiele

Nachfolgend sehen Sie ein paar Bilder, die zeigen, wie Suchresultate, die mit SNIP, meinem Schema Markup Plugin, ausgezeichnet wurden, aussehen k?nnten:

Gehen wir mal Schritt f?r Schritt durch.

Beispiel 1: Brotkrumen

Eigentlich fallen sie kaum auf, aber es ist halt einfach so, dass die Brotkrumen mehrere (klickbare) Links in Google darstellen. Die hat eine normale Fundstelle (ohne strukturierte Daten) nicht.

Suchtreffer bei der Suche nach "Vitamin C" enth?lt mehrere Links.

Im Beispielbild oben kann man erkennen, dass die Website netdoktor.de gleich drei Backlinks erh?lt:

  1. Den Link neben dem Favicon (www.netdoktor.de).
  2. Den Link “Ern?hrung”.
  3. Und dann nat?rlich den Hauptlink “Vitamin C: Bedeutung, Tagesbedarf, Fehldosierung – NetDoktor”.

Es gibt noch weitere Links, die aber nicht mit den Brotkrumen-Schema zusammenh?ngen. N?mlich das SiteNavigationElement. Ich will aber nicht n?her darauf eingehen, sonst wird es zu kompliziert.

Beispiel 2: Reviews

Ein ehemaliger Kunden von mir betreibt die Website AllesBeste.de. Ein Suchtreffer nach “Bester Kopfh?rer” sieht beim ihm so aus:

Suchtreffer von AllesBeste nach bestem Kopfh?rer zeigt eine Sternebewertung und ein Bild.

Auch AllesBeste nutzt die Brotkrumen-Navigation und bekommt neben dem Hauptlink noch zus?tzlich drei weitere Links. Dazu kommt auff?llig nat?rlich:

  • Ein gro?es Bild.
  • Eine Sternebewertung.
  • Und nicht zu vernachl?ssigen: Der viele Wei?raum, der das Suchergebnis viel gr??er erscheinen l?sst.

Folglich hat man also nicht nur einen Blickfang, sondern gleich drei Dinge, die ins Auge stechen. Genial, oder?

Beispiel 3: Rezepte

Kommen wir zum dritten Beispiel: den Rezepten. Auch hier habe ich ein weiteres Beispiel von der allseits bekannten Seite chefkoch.de:

Suchtreffer von Chefkoch.de zeigt Bild und weitere Angaben wie Kalorien.

Hier sind die Informationen etwas dichter gepackt, aber dennoch auff?lliger als ein normaler Suchtreffer. Bei einem Rezept-Schema, welche man nat?rlich auch mit meinem Schema WordPress Plugin bauen kann, erh?lt man unter anderem folgende Dinge:

  • Wir sehen ein kleines Vorschaubild.
  • Eine Sterne-Bewertung.
  • Die Zubereitungszeit wird angezeigt.
  • Die Kalorienanzahl wird angezeigt.

Wohoo! Manchmal bekommt man stattdessen auch eine Video-Vorschau. Aber h?ngt nat?rlich damit zusammen, wie man ein Rezept-Schema baut und welche Inhalte man selbst zur Verf?gung stellt.

Schema Markup erstellen

Nun kommen wir zu den technischen Details. ?berspringen Sie diesen Teil, falls es Ihnen zu krass wird. Ich werde zuerst zeigen, wie strukturierte Daten im JSON+LD-Format aussehen (keine Sorge, das ist nicht allzu kompliziert). Danach wollen wir ein Schema Markup direkt in WordPress einbinden und schlie?lich SNIP, das Schema WordPress Plugin, dazu nutzen. Letzteres d?rfte f?r die meisten Menschen die einfachste L?sung sein, da kein Code notwendig ist.

Die einzelnen Formate

Der Schema-Markup von schema.org kann auf drei verschiedene Arten in eine Website eingebaut werden:

  • Microdata
  • RDFa
  • und JSON+LD.

Ich werde die anderen Formate kurz anrei?en, damit Sie sehen, wie kompliziert sie sind. Am Ende werden wir das JSON+LD-Format w?hlen, weil es sehr ?bersichtlich zu lesen und auch das gew?nschte Format ist, welches Google sehen will.

Nehmen wir an, wir verkaufen einen Kopfh?rer und m?chten das Product-Schema-Markup von schema.org nutzen.

Ohne Auszeichnung

Auf unserer Website steht vereinfacht so etwas:

Sony MDR-1000x
[Bild]
? 240,-
Auf Lager
Jetzt kaufen

Irgendwo auf der Website steht also die Produktbezeichnung, ein Preis und wom?glich ein Bild.

JSON+LD

Das JSON+LD Format, welches zus?tzlich auf die Seite eingebettet werden sollte, sieht so aus:

<script type="application/ld+json">
{
  "@context":        "https://schema.org",
  "@type":           "Product",
  "name":            "Sony MDR-1000x",
  "image":           "https://kopfhoerer.site/sony-mdr-1000x.jpg",
    "offers": {
    "@type":         "Offer",
    "availability":  "https://schema.org/InStock",
    "price":         "240.00",
    "priceCurrency": "EUR"
  },
}
</script>

Achtung: Das Ganze sieht komplizierter aus, als es ist. Gehen wir Schritt f?r Schritt durch:

  • Zeile 1, 2, 13 und 14 sind Standard und werden ben?tigt, um den Suchmaschinen mitzuteilen, dass sich dazwischen JSON+LD-Code befindet. Der Browser wei? dann auch, dass er den Code nicht anzeigen muss. Denn er ist ja nur f?r Suchmaschinen wichtig.
  • Zeile 3 und 4 teilt der Suchmaschine mit, dass es sich um ein Produkt-Markup von schema.org handelt.
  • In Zeile 5 geht’s dann aber auch schon los. Die Produktbezeichnung, die wir verwendet haben.
  • Zeile 6 ist ein Link auf das Bild, das wir verwendet haben.
  • Zeile 7 bis 12 enth?lt ein Sub-Schema. Also ein Schema, welches in das obere Produkt-Schema eingebunden ist.
    • Auch hier definiert man in Zeile 8 wieder, um welches Schema es sich hier handelt. N?mlich um das Offer-Schema von schema.org.
    • In Zeile 9 zeigen wir, dass das Produkt lieferbar ist.
    • Und in den zwei letzten Zeilen teilen wir der Suchmaschine mit, was der genaue Preis ist.

Wunderbar! Damit sind wir durch und die Suchmaschine wei? nun genau, dass es sich bei der Seite um eine Produktseite handelt. Sie wei? auch, dass das Produkt auf Lager ist und wie viel es kostet.

Sie k?nnten jetzt behaupten, dass die Daten ja redundant sind, wenn man sie zus?tzlich zum eigentlichen Website-Code angeben muss. Das stimmt. Nichtsdestotrotz hat sich das JSON+LD Format durchgesetzt und ist seit Jahren nun schon das Mittel der Wahl.

Microdata

Man k?nnte auch eine andere Auszeichnungsart nutzen. Diese funktionieren genauso und k?nnen ebenfalls von Suchmaschinen gelesen werden. Sie werden direkt in den Code eingebaut. Die Daten sind dadurch zwar nicht mehr redundant, aber der Code ist unglaublich kompliziert, wie man gleich sehen wird:

<div itemscope itemtype="https://schema.org/Product">
    <span itemprop="name">Sony MDR-1000x</span>
    <img itemprop="image" src="https://kopfhoerer.site/sony-mdr-1000x.jpg" />
    <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
        <span itemprop="priceCurrency" content="EUR">?</span><span
                itemprop="price" content="240.00">240,-</span>

        <link itemprop="availability" href="https://schema.org/InStock"/>
        Auf Lager
    </div>
</div>

Wenn Sie genau hinsehen, werden Sie die gleichen Daten finden wie im JSON+LD-Format. Nur sind die Daten zur Darstellung auf der Website und der eigentliche Schema-Code vermischt. Das ist:

  • Schwieriger f?r Suchmaschinen zu analysieren.
  • F?r den Menschen schwieriger zu lesen.
  • Und f?r den Entwickler sehr fehleranf?llig (weil viel verschachtelter Code).

Mein Tipp: Lieber weglassen!

RDFa

Es gibt noch ein weiteres Format. Auch dieses wird direkt in die Website eingebunden, findet aber mittlerweile fast keine Anwendung mehr. Als Referenz sei sie hier noch dargestellt:

<div vocab="https://schema.org/" typeof="Product">
    <span property="name">Sony MDR-1000x</span>
    <img property="image" src="https://kopfhoerer.site/sony-mdr-1000x.jpg" />
    <div property="offers" typeof="Offer">
        <span property="priceCurrency" content="EUR">?</span><span
                property="price" content="240.00">240,-</span>
        <link property="availability" href="https://schema.org/InStock"/>
        Auf Lager
    </div>
</div>

Wie sich ein Schema ohne WordPress Plugin hinzuf?gen l?sst

Wir k?nnen den Code von oben einfach kopieren und in WordPress einf?gen. Wie das genau geht, habe ich im Artikel Wie man Schema zu WordPress ohne Plugin (englisch) im Detail beschrieben. Hier deswegen nur die Kurzform:

  1. ?ffnen Sie einen Artikel Ihrer Wahl in WordPress.
  2. Am Ende des Artikels klicken Sie das +-Zeichen um einen neuen Block im Block-Editor hinzuzuf?gen.
  3. W?hlen Sie den HTML-Block aus.
  4. In diesen HTML-Code kopieren Sie jetzt eines der Beispiele oben.

Das GIF zeigt nochmal animiert, wie das funktioniert:

Strukturierte Daten ohne Schema WordPress Plugin hinhzuf?gen. Die Animation zeigt das Einf?gen des Codes ?ber den Code-Block.

Hier ist noch einmal der Beispiel-Code von oben:

<script type="application/ld+json">
{
  "@context":        "https://schema.org",
  "@type":           "Product",
  "name":            "Sony MDR-1000x",
  "image":           "https://kopfhoerer.site/sony-mdr-1000x.jpg",
    "offers": {
    "@type":         "Offer",
    "availability":  "https://schema.org/InStock",
    "price":         "240.00",
    "priceCurrency": "EUR"
  },
}
</script>

Abspeichern und fertig! Rein theoretisch m?sste man dies jetzt f?r alle Produktseiten machen. Das ist ein riesiger Aufwand. Ganz zu schweigen davon, dass es ja mehr als nur ein Schema gibt, welches man auf eine Artikelseite packen will. Sicherlich will man auch Breadcrumbs haben.

Zum Problem wird das manuelle Einf?gen dann, wenn …

  • Google die Richtlinien f?r ein Schema ?ndert.
  • man bestimmte Daten erg?nzen will.

F?r Testzwecke ist das manuelle Einbinden sicherlich eine gute Sache. Wer wie ein Profi an die Sache rangehen will, nutzt lieber ein Schema WordPress Plugin, so wie SNIP eines ist. Hier steht, wie es dann geht:

SNIP – Das Schema WordPress Plugin nutzen um ein Schema zu erstellen

Wie oben erw?hnt, nutzt man ein Schema WordPress Plugin immer dann, wenn man hochgradig automatisieren will. Sprich: wenn man eben nicht f?r all seine 200 Produkte ein Schema manuell erg?nzen m?chte. Man spart sich Zeit, viele Nerven und ist auf der sicheren Seite, wenn man etwas aktualisieren will. Dazu kommt, dass beim Deaktivieren des Plugins alle strukturierten Daten auch weg sind.

Jetzt geht’s aber an’s eingemachte:

  1. Loggen Sie sich auf Ihrer Website ein.
  2. Aktivieren Sie SNIP, falls noch nicht geschehen.
  3. Gehen Sie zum Men?punkt “SNIP |?Strukturierte Daten” und dann auf “Global Snippets” oder (je nach Version) auf “Schema Templates”.
  4. Klicken Sie auf “Neue Schema-Vorlage hinzuf?gen”.
  5. Suchen Sie im Feld “W?hle ein Ding” nach “Product” und warten Sie, bis einige Eigenschaften vorgeladen werden (das sind ?brigens die Eigenschaften, die Google as “empfohlen” markiert).
  6. F?llen Sie dann alle Felder aus. In der Animation unten sehen Sie noch, wie ich das Sub-Schema “Offer” hinzuf?ge. Es geht total simpel durch die Nutzung des Auswahlmen?s.
SNIP - Das WordPress Schema Plugin im Einsatz. Es wird ein Schema-Template f?r ein Produkt erstellt.

Wie die einzelnen Felder genau ausgef?llt werden m?ssen, werde ich jetzt nicht lang und breit erkl?ren. Daf?r gibt es hier auf der Website einen sehr gro?en Support-Bereich, der genau das erkl?rt. Dar?ber hinaus gibt es auch von Google Hilfestellung.

Wichtig ist: Sie sollten so viele Daten wie m?glich automatisch laden, um das volle Potenzial von SNIP auszunutzen.

Das Schema WordPress Plugin nutzen um Schema f?r WooCommerce zu erstellen

Kommen wir nun zum Sonderfall WooCommerce. F?r WooCommerce hat SNIP, mein Schema WordPress Plugin, eine direkte Integration. Allerdings nur in der PRO-Version, nicht in der kostenlosen Version des Plugins.

“Integration” hei?t in dem Sinne, dass Sie f?r die einzelnen Produkt-Eigenschaften einzelner Felder w?hlen k?nnen. Zum Beispiel:

  • WooCommerce Stock Keeping Unit.
  • Ein WooCommerce Produkt-Attribut.
  • Das Produkt-Review-Rating von WooCommerce.
  • Und viele mehr.

In dem Video aus meinem Strukturierten Daten Training zeige ich, wie das ganze im Detail relativ einfach und schnell aufgesetzt werden kann (englisch):

Wenn Sie lieber lesen anstatt ein Video schauen, habe ich auch daf?r eine passende L?sung: Im Artikel WooCommerce Schema: Der ultimative Leitfaden k?nnen Sie alles lesen, was rund um WooCommerce Schema alles wichtig ist.

Schema Markups Testen

Am Ende fehlt nur noch eines: Das Testen der strukturierten Daten, die man entweder manuell oder eben mit SNIP, meinem Schema WordPress Plugin, eingef?gt hat. Welche Tools gibt es?

Testtol f?r strukturierte Daten

Das Testtool f?r strukturierte Daten ist leider ein Auslaufmodell. Es ist schade, denn ich habe es immer am liebsten von allen Tools genutzt. Soweit mir bekannt ist, wird es von Google an die schema.org-Organisation ?bergeben und dort dann weitergef?hrt. Ob und wann das soweit ist, ist mir leider nicht bekannt. Ich denke aber, dass das ganze noch im Laufe des Jahres 2021 passieren wird.

Bis zum Umzug kann man es sicher noch weiter benutzen. Allerdings wird es nicht mehr aktualisiert. D.h. auf die Testergebnisse kann man sich immer weniger verlassen. Trotzdem will ich es angesprochen haben.

Testtool f?r strukturierte Daten von Google
Beispiel des Testtools f?r strukturierte Daten von Google

Genial ist das Tool, weil es so einfach ist. Es zeigt links den Code und rechts, was Google richtig verstanden hat (oder eben nicht). Fehler werden als solche angezeigt und man wei? oft sofort, was man anders machen muss.

Test f?r Rich-Suchergebnisse

Oben genanntes Tool wurde vom neuen Testtool f?r Rich Suchergebnisse abgel?st. Ich gebe zu, es sieht ?hnlich aus. Es ist aber leider nicht so intuitiv benutzbar wie das erste Tool:

Test f?r Rich-Suchergebnisse
Das “neue” Testtool f?r Rich Suchergebnisse

Wie man testet

Egal welches Tool Sie benutzen, in beiden gibt man entweder den generierten Code oder aber eine URL ein. Ich empfehle gerne, Letzteres zu tun. Also eine URL einzugeben. Das hat den Vorteil, dass man LIVE testet und so etwaige Fehler auch in anderen Schemas findet, die sich vielleicht (noch) auf der Website befinden.

Beide Google-Tools geben recht kurze, aber jeweils mit Link versehene Fehlermeldungen aus. Damit kann man immer nachlesen, wo noch Verbesserungsbedarf besteht.

Fazit

Keine Frage: Das Hinzuf?gen von strukturierten Daten wird Ihrer Website sicher einen kr?ftigen Schubs nach vorne geben. Schlie?lich lassen sich die Userzahlen oft betr?chtlich steigern. Warum? Weil man eine erh?hte CTR und daher mehr Sichtbarkeit in der Liste der Suchtreffer bekommt.

Auch Suchmaschinen erkennen, dass man auf H?he der Zeit ist mit seinen SEO-Ma?nahmen. Klar ist auch, dass diese technische SEO-Ma?nahmen nicht einfach umzusetzen sind. Denn nicht jeder kann oder will Coden. Hier nehmen Schema WordPress Plugins, wie SNIP eines ist, einem sehr viel Arbeit ab. Nicht zuletzt durch den hohen Grad an Automatisierung.

Zwar ist schema.org schon fast zehn Jahre alt. Ungeachtet dessen nutzen noch sehr wenige Websites diese neue M?glichkeit der Suchmaschinenoptimierung.