![\"SERP-Snippet](\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/09\/serp-snippet-klassisch.png\")
SERP-Snippet in der klassischen Darstellung mit Titel, URL und Meta-Beschreibung<\/p><\/div>\n
<\/p>\n
![\"SERP-Snippet](\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/09\/serp-snippet-rich-rezept.png\")
SERP-Snippet in Rich Text Darstellung mit Bild, Titel, Website-Namen, Bewertung und Zubereitungszeit.<\/p><\/div>\n
<\/p>\n
Wer sich fragt, wie er diese Darstellung auch f\u00fcr seine eigene Webseite umsetzen kann, sollte sich mit strukturierten Daten auseinandersetzen. Die Vorteile liegen auf der Hand: Die Webseite kann sich besser von der Konkurrenz abheben und der Nutzer bekommt ein besseres \u201eSucherlebnis\u201c. Die Implementierung der dazu notwendigen Auszeichnungen im Quellcode ist relativ einfach umzusetzen, jedoch keine Garantie daf\u00fcr, dass die Darstellung von Google auch tats\u00e4chlich wie gew\u00fcnscht erfolgt. Zudem m\u00fcssen die folgenden Voraussetzungen erf\u00fcllt sein:<\/p>\n
- \n
- Der Inhalt soll f\u00fcr den Nutzer relevant und dem Thema der Seite zuzuordnen sein.<\/li>\n
- Die Auszeichnungen werden technisch korrekt umgesetzt.<\/li>\n
- Die betreffenden Inhalte sind nicht versteckt.<\/li>\n<\/ul>\n
<\/p>\n
Implementierung<\/h2>\n
Strukturierte Daten k\u00f6nnen verschiedenartig im HTML ausgezeichnet werden. Google empfiehlt aber JSON-LD<\/a> zu verwenden \u2013 eine Notation, bei der die Daten in den <head> des HTML-Dokuments geschrieben werden.<\/p>\n
Die Terminologie basiert auf schema.org<\/a>. W\u00e4hrend JSON-LD die Grammatik bzw. Syntax der Markupsprache darstellt, bildet schema.org das umfangreiche Vokabular ab, mit denen Webseiten bzw. deren Inhalte ausgezeichnet werden k\u00f6nnen. Ziel ist es, dass Suchmaschinen ein besseres Verst\u00e4ndnis \u00fcber die Struktur der Webseite gewinnen. Es ist jedoch nicht erforderlich, alle m\u00f6glichen Eigenschaften zu verwenden, sondern nur solche, die von Google empfohlen werden.<\/p>\n
Zu Beginn sollte sichergestellt sein, dass die Webseite in der Google Search Console<\/a> angemeldet ist. Handelt es sich um ein Unternehmen, ist auch die Anmeldung \u00fcber Google My Business<\/a> ratsam. Hier sollten dann bereits soviele Angaben wie m\u00f6glich hinterlegt werden.<\/p>\n
Anschlie\u00dfend kann damit begonnen werden, typische Auszeichnungen zu highlighten, die f\u00fcr die gesamte Webseite g\u00fcltig sind. Dazu geh\u00f6ren Angaben zur Organisation und zur Seitenstruktur.<\/p>\n
<\/p>\n
JSON-LD<\/h3>\n
Die Markup-Auszeichnungen per JSON-LD werden \u00fcber ein Script-Tag eingebunden:<\/p>\n
<script type=\"application\/ld+json\">\r\n{\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"Recipe\",\r\n \"name\": \"Schwarzw\u00e4lder Kirschtorte - super easy\",\r\n \u00a0\"author\": \"Chefkoch\",\r\n ...\r\n}\r\n<\/script><\/pre>\nDarin wird hinter \u201e@type\u201c der Name des Datentyps von schema.org gesetzt. Danach folgt dann der eigentliche Inhalt, der je nach Typ unterschiedlich strukturiert sein kann.<\/p>\n
<\/p>\n
Microdata<\/h3>\n
Alternativ lassen sich die Auszeichnungen auch als Microdata direkt im HTML integrieren. Dazu wird am betreffenden Element ein Attribut \u201eitemscope\u201c definiert, gefolgt von dem Attribut \u201eitemtype\u201c, welches die URL zum Datentyp bei schema.org als Wert enth\u00e4lt:<\/p>\n
<div itemscope itemtype=\"https:\/\/schema.org\/Recipe\">\r\n <h1 itemprop=\"name\">Schwarzw\u00e4lder Kirschtorte - super easy<\/h1>\r\n <div itemprop=\"author\">Chefkoch<\/div>\r\n<\/div><\/pre>\n
Innerhalb des definierten \u201eScope\u201d werden dann per \u201eitemprop\u201d-Attribut die Elemente ausgezeichnet, die Werte der Eigenschaften des Datentyps enthalten.<\/p>\n
<\/p>\n
Empfohlene Auszeichnungen<\/h2>\n
Eine der wichtigsten Auszeichnungen auf der Webseite ist die Breadcrumb. Dazu wird der Typ \u201eBreadcrumbList<\/a>\u201c aus der schema.org-Terminologie verwendet, welcher aus einer Liste von Elementen vom Typ \u201eListItem\u201c besteht. Diese sollten wiederum den Namen des Listenpunktes, eine URL und die Position (ab Position 1 beginnend) enthalten.<\/p>\n
<script type=\"application\/ld+json\">\r\n{\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"BreadcrumbList\",\r\n \"itemListElement\": [{\r\n \"@type\": \"ListItem\",\r\n \"position\": 1,\r\n \"name\": \"B\u00fccher\",\r\n \"item\": \"https:\/\/www.example.org\/autos\"\r\n },{\r\n \"@type\": \"ListItem\",\r\n \"position\": 2,\r\n \"name\": \"Autoren\",\r\n \"item\": \"https:\/\/www.example.org\/autos\/marken\"\r\n },{\r\n ...\r\n }\r\n}<\/pre>\nZudem bietet es sich an, das Logo<\/a> und lokale Unternehmensdaten<\/a> wie \u00d6ffnungszeiten und Kontaktdaten auszuzeichnen. Auch eine integrierte Suche kann bei Google angezeigt werden, wenn diese verf\u00fcgbar ist:<\/p>\n
<script type=\"application\/ld+json\">\r\n{\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"WebSite\",\r\n \"name\": \"Clickstorm\",\r\n \"url\": \"https:\/\/www.clickstorm.de\",\r\n \"potentialAction\": {\r\n \"@type\": \"SearchAction\",\r\n \"target\":\"https:\/\/www.clickstorm.de?q={search_term}\",\r\n \"query-input\": \"required name=search_term\"\r\n }\r\n}\r\n<\/script><\/pre>\nIn Verbindung mit den Sitelinks kann sich dann diese Darstellung in den Suchergebnissen ergeben:<\/p>\n
<\/p>\n
![\"SERP-Snippet](\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/09\/serp-snippet-sitelinks.png\")
SERP-Snippet mit Suche und Sitelinks<\/p><\/div>\n
<\/p>\n
Handelt es sich bei der Webseite um einen Online-Shop, sollten in jedem Fall auf der Produktdetailseite auch die jeweiligen Artikel<\/a> und deren Preise<\/a> ausgezeichnet werden:<\/p>\n
<script type=\"application\/ld+json\">\r\n{\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"Product\",\r\n \"name\": \"Hoody Men\",\r\n \"image\": [\r\n \"https:\/\/www.example.org\/produktbild-1.jpg\",\r\n \"https:\/\/www.example.org\/produktbild-2.jpg\"\r\n ],\r\n \"description\": \"...\",\r\n \"sku\": \"0123456789\",\r\n \"offers\": {\r\n \"@type\": \"Offer\",\r\n \"url\": \"https:\/\/www.example.org\/hoody-men\",\r\n \"priceCurrency\": \"EUR\",\r\n \"price\": \"89.95\",\r\n \"priceValidUntil\": \"2019-12-31\",\r\n \"availability\": \"https:\/\/schema.org\/InStock\"\r\n}\r\n<\/script><\/pre>\nAu\u00dferdem bieten sich f\u00fcr weitere Kategorien Auszeichnungen an:<\/p>\n
- \n
- News- oder Blog-Artikel<\/a><\/li>\n
- Veranstaltungen<\/a><\/li>\n
- Rezepte<\/a><\/li>\n
- B\u00fccher<\/a><\/li>\n
- Rezensionen<\/a><\/li>\n
- Stellenausschreibungen<\/a><\/li>\n
- Videos<\/a><\/li>\n<\/ul>\n
Dabei sollte jedoch bedacht werden, dass die Informationen in der Google-Suche teilweise schon die Suchintention des Nutzers beantworten k\u00f6nnten. Der Nutzer h\u00e4tte somit kein Interesse daran, noch auf den Link zur Webseite zu klicken. Daher sollten die Markups auch nicht \u00fcbertrieben und mit Bedacht eingesetzt werden.<\/p>\n
<\/p>\n
Karussell<\/h3>\n
Interessant mag auch die Darstellung innerhalb eines sogenannten \u201eKarussells<\/a>\u201c sein, d.h. bestimmte \u00dcbersichtsseiten k\u00f6nnen von Google mit einer Art Bilder-Slider dargestellt werden. Daf\u00fcr ist der schema.org-Datentyp \u201eItemList\u201c zu verwenden, bestehend aus einzelnen \u201eListItem\u201c-Elementen, die wiederum ggfs. Links zu den Detailseiten der Elemente und eine Position erhalten.<\/p>\n
Die einzelnen Elemente m\u00fcssen dabei vom selben Typ sein und nat\u00fcrlich auch auf einer vorhandenen Detailseite noch einmal mit dem korrekten schema.org-Markup ausgezeichnet sein. Aktuell l\u00e4sst sich ein solches Karussell f\u00fcr Rezepte, Kurse, Artikel und Restaurants umsetzen.<\/p>\n
![\"Rezepte-Karussell](\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/09\/serp-snippet-karussell.png\")
Rezepte-Karussell in SERPs<\/p><\/div>\n
\u00dcber ein Testtool von Google<\/a> kann \u00fcberpr\u00fcft werden, ob die Auszeichnungen Syntaxfehler aufweisen und wie diese interpretiert werden. Eine vollst\u00e4ndige Auflistung der Markups, die Google ausliest, findet sich in der Developer-Dokumentation<\/a>.<\/p>\n
Zu beachten ist noch, dass die Auszeichnungen immer vollst\u00e4ndig sein sollten. Wenn relevante Informationen vom Markup ausgesperrt werden, kann das schlechtere Rankings zur Folge haben. Nat\u00fcrlich d\u00fcrfen auch keine falschen Informationen, wie z.B. gef\u00e4lschte Rezensionen ausgezeichnet werden. Mehr dazu findet sich in den Qualit\u00e4tsrichtlinien<\/a>.<\/p>\n
<\/p>\n
Strukturierte Daten in ausgew\u00e4hlten Systemen<\/h2>\n
Shopware<\/h3>\n
In Shopware werden strukturierte Daten bereits standardm\u00e4\u00dfig \u00fcber Microdata-Markup ausgezeichnet, dazu geh\u00f6ren alle f\u00fcr Online-Shops relevante Angaben, wie Produkt- und Preisinformationen, Breadcrumbs oder die Navigation.<\/p>\n
![\"HTML-Microdata-Auszeichnung](\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/09\/quellcode-markup-shopware.png\")
HTML-Microdata-Auszeichnung eines Angebots in Shopware<\/p><\/div>\n
Zu beachten ist, dass individuell gestaltete Templates oder \u00c4nderungen im bestehenden Template diese Auszeichnungen \u00fcbernehmen m\u00fcssen.<\/p>\n
<\/p>\n
WordPress<\/h3>\n
In WordPress m\u00fcssen Auszeichnungen entweder direkt im Theme integriert oder \u00fcber ein Plugin automatisiert umgesetzt werden. Beispielsweise kann hier das Plugin Schema Pro<\/a> genutzt werden, welches nach bestimmten Regeln Seitentypen vom Markup ein- oder ausschlie\u00dfen kann.<\/p>\n
Gleichzeitig ist hier noch einmal das Google Testtool integriert, mit dessen Hilfe die Seite auf Fehler bei der Einbindung \u00fcberpr\u00fcft wird.<\/p>\n
<\/p>\n
Typo3<\/h3>\n
\u00c4hnlich funktioniert es auch im TYPO3. Auch hier kann mit Hilfe einer Extension, z.B. https:\/\/extensions.typo3.org\/extension\/schema\/<\/a>, ausgew\u00e4hlt werden, um welchen Seitentyp es sich handelt. Die entsprechenden Inhalte werden dann aus der Datenbank ausgelesen.<\/p>\n
<\/p>\n
Fazit<\/h2>\n
Die Einbindung von strukturierten Daten auf der eigenen Webseite birgt eine Menge Potential. Google m\u00f6chte seinen Nutzern stets die besten Suchergebnisse pr\u00e4sentieren und experimentiert h\u00e4ufig mit neuen Auszeichnungen. Daher lohnt der regelm\u00e4\u00dfige Blick in die Developer-Dokumentation, um auf dem neuesten Stand zu sein, welche M\u00f6glichkeiten sich bei der Verbesserung der Anzeige in den Suchergebnissen ergeben.<\/p>\n
Nat\u00fcrlich nutzt Google diese Auszeichnungen auch zum eigenen Vorteil. Das unterstreicht auch das gelegentlich willk\u00fcrlich erscheinende Vorgehen Googles, auch nicht ausgezeichnete Inhalte anders darzustellen bzw. ausgezeichnete Inhalte nicht darzustellen. Zuletzt wurde bekannt, dass den Webmastern wieder ein St\u00fcck Kontrolle zur\u00fcckgegeben<\/a> werden soll, indem zum Beispiele Texte und Videos in ihrer L\u00e4nge begrenzt werden k\u00f6nnen.<\/p>\n
FAQs, Anleitungen und Wissensbeitr\u00e4ge werden teilweise bereits in den Suchergebnissen selbst dargestellt. Wenn sich Nutzer damit zufrieden geben, kann die Time-on-Site auf der eigenen Webseite auch geringer werden. Dessen sollte man sich trotz der positiven Fallbeispiele in der Developer-Dokumentation stets bewusst sein.<\/p>\n
- Veranstaltungen<\/a><\/li>\n
- News- oder Blog-Artikel<\/a><\/li>\n