1. Rich Snippets & Co:
HTML5 aus SEO-Sicht
SEO CAMPIXX 2012, 11. März 2012, Helge Cramer, Cramer & Consorten GmbH
1
2. Ein paar Worte zu mir
Helge Cramer
-Studium Physik und Journalistik (Berufswunsch war Wissenschaftsjournalist)
-Seit 1996 geschäftlich im Internet unterwegs
-2000 Agenturgründung (Cramer & Consorten GmbH)
- aktuell 16 Mitarbeiter, davon 6 in der Entwicklung tätig
- Kunden: von ganz klein bis zu ganz groß ;-)
-eine Frau , ein Kind , kein Hund
3. HTML4 zu HTML5
Wichtigste Änderungen in HTML5:
-Neue, beschreibende/semantische Tags (<nav>, <article>, <aside>, <footer>
-Neue Elemente zur Einbindung von Mediendaten ohne Plugins (<canvas>, <video>)
-Geo-Lokalisierung
-...
4. Einführung Rich Snippets bei Google
Google mochte strukturierte Daten schon immer
-Mai 2007: Einführung Universal Search
-Mai 2009: Einführung Rich Snippets (Bewertungen und Personen)
-Juni 2011: Einführung schema.org (mit Bing und Yahoo), Entfall der Anmeldung
5. Prinzipieller Aufbau (Microdata)
Neue globale Attribute (HTML5)
-itemscope Kategorie der Informationen („Klammer“)
-Itemtype Typ/Schema der Information (Beschreibung, Bild, Bewertung, Event etc)
-itemprop (Priorisiertes) Informationsattribut
-itemid eindeutiger Bezeichner
-itemref Information außerhalb der definierten Kategorie/des gewählten Scopes
6. Prinzipieller Aufbau (Microdata)
Wo ziehen Google & Co die Inhalte?
Netterweise gilt eine einfache Faustregel:
(In der Regel) ziehen die Suchmaschinen je nach (HTML5-) Tag die Infos immer von dort, wo man es erwarten darf:
-area, link u.ä: href-Attribut aus dem selben Tag
-meta content-Attribut aus dem selben Tag
-audio, embed, img, track, video u.ä. src-Attribut aus dem selben Tag
-time datetime-Attribut aus dem selben Tag
-object data-Attribut
Bei allen anderen HTML-Tags (span, p, div etc) wird der Content verwendet, der von dem Tag eingeschlossen ist.
7. Prinzipieller Aufbau (Microdata)
Die Mutter aller Dinge
<div itemscope itemtype=“http://schema.org/Thing“>
<div itemprop=“name“>Name</div>
<div itemprop=“url“>Deeplink</div>
<div itemprop=“description“>Kurzbeschreibung</div>
<div itemprop=“image“>Bild-URL</div>
</div>
Alle Kategorien leiten sich vom „Thing“-Objekt ab
- vollständiges Schema unter http://schema.org
8. Snippets – Event-Snippets
Was wird angezeigt?
Was kann das Objekt noch?
-Events (Einzelevent oder Eventliste)
-startDate (ISO 8601, 2012-03-05T13:42Z)
-endDate (ISO 8601)
-Duration (ISO 8601, , z.B. PT30M für 30 Minuten)
-Location (mit Unterobjekt Place oder PostalAdress)
-Offers (mit Unterobjekt offer)
-Performers (Person oder Organization)
-subEvents (wieder vom Typ Event)
Wie wird es implementiert? -superEvent (wieder vom Typ Event)
Eltern-Objekt Thing:
Spezifischere Unter-Objekte
<div itemscope itemtype=http://schema.org/Event> -BusinessEvent
<div itemprop=“name“>Name des Events</div> -ChildrensEvent
<div itemprop=“url“>Deeplink</div> -ComedyEvent
<div itemprop=“description>Kurzbeschreibung</div> -MusicEvent
<div itemprop=“image“>Bild-URL</div> -... (http://schema.org)
</div>
9. Snippets – aggregierte Bewertung
Was wird angezeigt?
Darstellung auf der Website (sichtbarer Bereich!)
- Bewertungen (aggregiert)
Wie wird es implementiert?
<div itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<span itemprop="v:itemreviewed"></span>
<span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/
Rating" class="text">
<img src="http://1.2.3.13/bmi/www.ils.de/images/ILS2/sterne.png">
Aktuell: Note 1,5 (
<span itemprop="average">4.5</span> von
<span itemprop="best">5</span>Sterne bei
<span itemprop="votes">1096</span> Befragungen)</span>
</div>
10. Snippets – Erfahrungsbericht Detailansicht
Was wird angezeigt?
Darstellung auf der Website (sichtbarer Bereich!)
-Ein konkreter Erfahrungsbericht
Wie wird es implementiert?
<div itemscope itemtype="http://data-vocabulary.org/Review">
<span itemprop="itemreviewed">Geprüfte/r Fachpraktiker/in für Massage,
Wellness und Prävention</span>
<time itemprop="dtreviewed" datetime="2012-01-25">25.01.12</time>
<span itemprop="reviewer">Kristina S., Hannover</span>
<span class="note_1">1</span> (
<span itemprop="rating">5</span> von
<span itemprop="best">5</span> Sternen)
<span itemprop="summary">In die Selbstständigkeit starten<br/>....in die
Selbstständigkeit starten.</span>
</div>
11. Snippets – Produkte
Was wird angezeigt?
Wie wird es implementiert?
-Ein konkretes Produkt sehr schöne Kombinationen mit
Bewertungen möglich: Eltern-Objekt Thing:
<div itemscope itemtype=http://schema.org/Product>
<div itemprop=“name“>Name des Events</div>
<div itemprop=“url“>Deeplink</div>
<div itemprop=“description>Kurzbeschreibung</div>
<div itemprop=“image“>Bild-URL</div>
</div>
Was kann das Objekt noch?
-aggregateRating (vom Typ AggregateRating)
-brand (vom Typ Organization)
-manufacturer (vom Typ Organization)
-model (Text)
-offers (vom Typ Offer)
-productID (vom Typ Text, z.B. EAN/ISBN)
-reviews (vom Typ Review)
12. Snippets – Event-Snippets
Was wird angezeigt?
Was kann das Objekt noch?
-Events (Einzelevent oder Eventliste)
-startDate (ISO 8601, 2012-03-05T13:42Z)
-endDate (ISO 8601)
-Duration (ISO 8601, , z.B. PT30M für 30 Minuten)
-Location (mit Unterobjekt Place oder PostalAdress)
-Offers (mit Unterobjekt offer)
-Performers (Person oder Organization)
-subEvents (wieder vom Typ Event)
Wie wird es implementiert? -superEvent (wieder vom Typ Event)
Eltern-Objekt Thing:
Spezifischere Unter-Objekte
<div itemscope itemtype=http://schema.org/Event> -BusinessEvent
<div itemprop=“name“>Name des Events</div> -ChildrensEvent
<div itemprop=“url“>Deeplink</div> -ComedyEvent
<div itemprop=“description>Kurzbeschreibung</div> -MusicEvent
<div itemprop=“image“>Bild-URL</div> -... (http://schema.org)
</div>
13. Bevorzugt Google korrekt ausgezeichnete Seiten?
Der Mensch ist willig, doch die Maschine ist schwach
Man darf gesichert davon ausgehen, dass Google den Content möglichst komplett auslesen will und deswegen häufige Fehler
zu erkennen (und korrigieren) versucht. Ebenso wird sicher daran gearbeitet, semantische Informationen zu erkennen, auch
wenn der Content nicht semantisch ausgezeichnet wird.
-nicht geschlossene Tags
-Inkorrekte doctype-Deklarationen
-In Tabellen gegossene nicht-tabellarische Informationen
-Aufzählungen (z.B. Menus) ohne Listenauszeichnung
-...
Da die Anzahl möglicher Fehler und „Fehlerchen“ aber sogar die geballte Vorstellungskraft aller Google-Entwickler übersteigt
und Google auf der anderen Seite absolut datenhungrig ist, darf man ebenso gesichert davon ausgehen, dass
-der Google Crawler sich auch mal verschluckt und eine Seite somit nicht korrekt bzw. gar nicht indexiert
-(korrekt) implementierte Strukturelemente und Mikrodaten vom Bot gierigst aufgenommen werden
14. Bevorzugt Google korrekt ausgezeichnete Seiten?
Manipulation!?
Sehr häufig hört man den Einwand - besonders bei Bewertungen, die ja als Sternchen in den SERPs auftauchen – dass dem
Missbrauch Tür und Tor geöffnet ist, da man diese einfach so reinschreiben kann. Dazu lässt sich sagen:
-Es stimmt!
-Aber:
- Die Mikrodaten müssen sich im sichtbaren Bereich der Seite befinden. Versteckte Informationen (z.B. durch
display:none;) bekommen auch keinen RichSnippet
- Google gibt damit nur wieder, was der Seiteninhaber selbst über seine Seite schreibt- also nichts anderes als das, was
Google auch mit der Wiedergabe der description oder des titles tut...
Damit zieht Google sich bequem auf seine Rolle als Suchmaschine zurück: Schließlich kontrolliert man ja auch textlichen Inhalt
nicht auf den Wahrheitsgehalt, sondern straft nur ab, wenn die Maschine etwas anderes sieht als der User.
Persönliche Meinung:
Konsequent wäre es, wenn Google hinter dieser „Verteidigungslinie“ bleibt und sich nicht zum „Zensor“ aufschwingt, indem z.B.
nur noch Bewertungen zugelassen werden, die „gesichert“ sind durch Ciao, ekomi und Co. Sollten die SERPs irgendwann zu
„sternig“ werden, wäre ein Abschalten oder ein Zuspielen aus Google-eigenen Quellen die glaubwürdigste Alternative.
15. Bringen RichSnippets höhere Klickraten?
(Nicht-repräsentative) Messung
-Vergleichszeitraum Monat (mit Sternchen) mit Vormonat (ohne Sternchen)
-Beschränkt auf ausgewählte Keywords:
- Keine Änderung im Ranking im Vergleich zum Vormonat
- Keine wesentliche Schwankung im Suchvolumen lt. Google
-Ergebnis: Der auch im Schnitt sehr deutliche Zuwachs an Traffic muss (zumindest im Wesentlichen) von einer verbesserten
CTR und damit durch den Einsatz von RichSnippets kommen (im Schnitt etwa +20-25%)
16. Bringen RichSnippets höhere Klickraten?
Achtung, Gegenverkehr!
-Da RichSnippets für den User idR eine „positive Nutzererfahrung“ bieten, wird Google dies sicher weiter ausbauen
-Aus SEO- und Webmaster-Sicht sollte man sich also unbedingt – wenn nicht schon geschehen – da einarbeiten
-Sinnvoll im Sinne einer höheren CTR bei
- Bewertungen (Per aspera ad astra)
- Produkten
-Da Informationen, für die man sonst bei Google in den SERPs klicken musste, jetzt schon dort ohne weiteren Klick für den
User zu haben sind, kann es allerdings auch mal zu einer niedrigeren CTR und damit zu Trafficverlusten kommen,
insbesondere bei
- Firmeninformationen
- Rezepten
- Events (Termin passt nicht)
- Preisinformationen (andere Snippets mit niedrigeren Preisen)
- ...
17. Fazit
Was nun, Herr SEO?
-Insgesamt syntaktisch korrektes und semantisch sinnvolles XHTML, HTML4, HTML5, HTMLwhatever tut nicht weh, dient der
Quellcode-Hygiene und verhindert, dass sich Crawler an hervorhängenden Nägeln weh tun.
-Aufmerksam verfolgen wohin die Reise geht
-Semantische Auszeichnung lt. schema.org oder data-vocabulary.org bei Bewertungen und Produkten können eigentlich
uneingeschränkt empfohlen werden- wenig Aufwand und teilweise starker Einfluss auf den Traffic, insbesondere bei den
Keywords, wo in den SERPs noch wenig oder keine Sterne auftauchen (ja, die gibt es...)
-Vorsichtig bei allen Informationen in den SERPs, aus denen der User alles das sieht, wozu er sonst die Seite aufgesucht hätte.
18. Links
Ressourcen zum Thema
- RichSnippet-Generatoren:
- http://www.ebusiness-unibw.org/tools/grsnippetgen/
- http://www.microdatagenerator.com/
- Google Testing Tool http://www.google.com/webmasters/tools/richsnippets
- Getting started: http://schema.org/docs/gs.html
- schema.org FAQ: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=1211158
- Guter Einstieg bei t3n: http://t3n.de/news/html5-seo-rich-snippets-suchergebnisse-revolutionieren-323101/