Customer Experience Digital Data Layer

Die Digitalisierung und im speziellen das E-Commerce Business boomt nach wie vor ungebremmst. Unternehmen sehen sich einer immer größeren Anzahl von Plattformen, Dienstleistern und Tools gegenüber. Wenn Sie heutzutage im Bereich des digitalen Marketings auf allen Kanälen mithalten wollen, benötigen Sie am besten ein zentrales Customer Relationship Managementy System (CRM) um einen umfassenden Blick auf (potenzielle) Kundenprofile zu bekommen und den Customer Lifetime Value zu ermitteln. Des Weiteren brauchen Sie ein Content Management System für die Pflege Ihrer Websites und Apps, ein Web Analyse Tool zur Erfassung von Besucherstatistiken auf Ihren Websites und Apps, eine Marketing Automatisierungssoftware für das Aussteuern von personalisierten Nachrichten in verschiedene Kanäle wie E-Mail oder Mobile Push, ein Social Media Publishing/Monitoring/Listening Tool zum Bespaßen der Sozialen Medien, eine Lösung für Ihr Display Advertising, ein SEO-Tool und so weiter, und so weiter…

Da wird es schon allein schwierig organisatorisch den Überblick zu behalten. Den organisatorischen Herausforderungen widme ich mich aber in einem anderen Artikel. In diesem Artikel möchte ich eher einen Blick auf die die technische Ebene und deren Datenflüsse werfen, denn all diese Systeme müssen Daten untereinander austauschen und das ist eine nicht zu unterschätzende Herausforderung. Einen Lösungsansatz für einen vereinfachten Datenaustausch im Bereich der digitalen Marketing Tools möchte ich hier genauer beleuchten: den Digital Data Layer.

Was ist ein Digital Data Layer?

Ein Digital Data Layer (DLL) ist eine standardisierte Art und Weise Informationen von Websites oder Webapplikationen in maschinenlesbarer Form für Drittanbieter zur Verfügung zu stellen. Es gibt bereits verschiedenste Ansätze wie Microformats, RDFa oder Rich Snippets, aus dem Bereich des Semantic Web, die alle darauf abzielen, den HTML-Code von Websites mit zusätzlichen Informationen anzureichern, um die Bedeutung der Inhalte (Texte, Bilder, Videos, etc.) für andere Systeme wie bspw. Suchmaschinen verständlich zu machen. Hier ein kleines Beispiel um das Ganze zu veranschaulichen: Der Code einer Website wird mit Metainformationen angereichert, damit Google weiß, dass „Sicherheitskonferenz München“ nicht nur irgendein Text ist, sondern ein Event der an einem Ort (München) zu einem bestimmten Zeitpunkt stattfindet. Dieser Event kann dann bspw. auch direkt in den Kalender gespeichert werden, wenn er korrekt verstanden wurde.

Was macht nun ein Digital Data Layer? Einen DDL können Sie sich wie der Name schon sagt, als weitere Ebene vorstellen, die die Inhalte der Website in strukturierter, standardisierter, maschinenlesbarer Form darstellt. Die mit vollem Namen „Customer Experience Digital Data Layer 1.0“ benannte Spezifikation des W3C wurde am 16.12.2013 veröffentlicht. Der Hintergrund der Initiative war, dass viele Produkte von kleinen und großen, namhaften Firmen wie Adobe, Google oder IBM eine Vielzahl von Daten in sehr kurzer Zeit austauschen müssen, Stichwort Real-time Marketing. Der Schlüssel zu diesem Datenaustausch ist ein gemeinsames Vokabular, das alle angebundenen Systeme verstehen müssen, um die Daten in korrekter Form verarbeiten zu können. All diese Systeme wie bspw. Tag Manager, Web Analyse Tools, Advertising Plattformen, E-Commerce Lösungen, Data Management Plattformen, etc. benötigen eine Codeintegration in der jeweiligen Website um Nutzungsdaten von dort auslesen zu können. Damit man nun nicht jedes Mal das Rad neu erfinden muss, wurde der DDL Standard ins Leben gerufen: eine zentrale Datenebene, die alle nötigen Informationen enthält und die von allen angebundenen Systemen gemeinsam ausgelesen werden kann. Auf der Website www.w3cdigitaldatatoolkit.com ist das Thema sehr schön beschrieben.

CEDDL-Architektur
CEDDL-Architektur

Hier ein Beispiel wie ein DDL in der Praxis aussieht. In diesem Fall habe ich bei einer lokalen Magento Demo-Installation ein entsprechendes Plugin installiert, das den DDL zur Verfügung stellt. Das DDL Objekt kann man sich gut im Firebug ansehen. Wechseln Sie einfach in den Reiter „DOM“ und suchen Sie nach dem Objekt Window.digitalData.

Digital Data Layer Page Object
Digital Data Layer Page Object

Wozu brauche ich einen Digital Data Layer?

Ein DDL geht über die bisherigen Konzepte aus dem Semantic Web hinaus. Die traditionellen Ansätze die Microformats oder RDFa lieferten nur Informationen über den Inhalt der Website (Das ist ein Produkt, das Produkt hat diesen Namen, diese Eigenschaften und diesen Preis…). Der DDL liefert zusätzlich zu den Informationen über den Inhalt auch noch Informationen über den Besucher der Website, sprich sein Browsingverhalten, seine technische Ausstattung, etc. Diese Daten können dann in kombinierter Form für Performanceanalysen oder Retargetingmaßnahmen genutzt werden.

Technisch gesehen gibt es einen großen Unterschied zwischen den genutzten Technologien für den Datenaustausch. Bisher fand der Datenaustausch zwischen Systemen oftmals eher im Hintergrund auf Ebene des Backends als gesammelter, regelmäßig wiederkehrender Batch statt. Die Integration war aufwendig und teuer. Bei der Nutzung des DDL-Standards hingegen, werden die Daten einzeln in Echtzeit beim Seitenaufruf über das Frontend gesendet. Dies ermöglicht Betreiber auch in Echtzeit auf das Nutzungsverhalten ihrer Inhalte zu reagieren, vorausgesetzt sie haben Systeme im Einsatz, die mit dieser Flut von Informationen in kürzester Zeit umgehen können. Hierzu wieder ein kleines Beispiel: Über den DDL wird erfasst, dass sich ein Nutzer besonders für Ihren Samsung Fernseher interessiert. Diese Information wird direkt in CRM gespeichert und kann dann genutzt werden um den Interessenten auf anderen Kanälen wieder darauf anzusprechen.

Wie funktioniert ein Digital Data Layer?

Tauchen wir ein bisschen tiefer in die Technik ein. Wie funktioniert das Ganze nun genau? Ein DDL wird in der Regel als JavaScript Object angelegt, auch Universal Data Object (UDO) genannt. Welche Daten der DDL enthalten soll, bestimmen Sie über die Software Ihrer Website oder Ihrer App. Es können bspw. Dinge sein wie Informationen über E-Commerce Transaktionen, Webbrowsing-Verhalten oder Mobile App-Nutzung. Die Technologie nennt sich Customer Experience Digital Data Layer, weil es sich um eine logische Ebene im Technologiestapel handelt, die eine interaktive Kundenerfahrung liefert.

Welche Informationen sollten nun im DDL enthalten sein?

  1. Seitenattribute: Seitenname, URL, Kategorie, etc.
  2. Produktattribute: Produktname, Produktkategorie, Eigenschaften, Preis, etc.
  3. Nutzertyp: Eingeloggt vs. nicht eingeloggt, wiederkehrender Besucher, User ID, Interessen, Kaufhistorie…
  4. User Interaktionen: Kauf, Abschicken von Formularen, Anmeldung, Download, Video angesehen…
  5. Alle weiteren Informationen die evtl. in der Zukunft für weitere Analysen oder Aktionen genutzt werden könnten.

Nun geht’s ans Eingemachte! Hier ein Beispiel, wie ein DDL-JavaScript-Objekt im JSON-Format konkret aussieht:

Der Vorteil bei der Nutzung eines DDL gegenüber semantischen Technologien, ist, dass die Informationen nicht in den HTML-Code der Website integriert sind, sondern als unabhängige Ebene darüber schweben. Das heißt, wenn sich was am HTML-Code ändert, beeinflusst das nicht unseren DDL.

Wie kann ich einen Digital Data Layer nutzen?

Hier noch ein paar mehr Beispiele für den Einsatz im E-Commerce und für die Abbildung der Customer Journey:

Produktinformationen:

Hier nochmal ein Beispiel aus der Magento Instanz:

Digital Data Layer Product Object
Digital Data Layer Product Object

Warenkorbinformationen

Informationen über den Nutzer:

So sieht das User Objekt im Livebetrieb aus:

Digital Data Layer User Object
Digital Data Layer User Object

Zusammenfassend kann man sagen, dass die Nutzung eines DDL eine gute Art ist, digitale Marketingdaten zu sammeln und in strukturierten Form an alle Systeme angebundenen Systeme zu streamen. Sehr hilfreich ist auch der kombinierte Einsatz des DDL zusammen mit einem Enterprise Tag Manager oder mit einer Data Management Platform (DMP). So können bspw. die Daten aus dem DDL im Tag Manager oder im DMP gesammelt und analysiert werden. Die Erkenntnisse aus den Analysen können dann wiederum für Segmentierungen für Werbemaßnahmen genutzt werden.

DDL-Plugins für Ihr CMS

Falls Sie sich nun entschlossen haben, dass Sie einen DDL benötigen und diesen sofort in Ihre Website integrieren möchten, hier ein paar Links zu DDL-Plugins für gängige Open Source Web-Software. Diese Plugins fügen den DDL automatisch Ihrer Website hinzu und befüllen ihn mit den Informationen aus dem jeweiligen CMS.

WordPress DDL-Plugins:

https://de.wordpress.org/plugins/adobe-dtm/

https://wordpress.org/plugins/woocommerce-w3c-digital-data-layer/

Magento DDL-Extensions:

https://www.magentocommerce.com/magento-connect/w3c-digital-data-layer-by-fresh-relevance-w3c-digitaldata.html

https://www.magentocommerce.com/magento-connect/catalog/product/view/id/30682/

Drupal DDL-Plugin:

https://www.drupal.org/project/datalayer

Aktueller Stand des CEDDL-Standards

Wie sieht es mit der konkreten Nutzung dieses Standards aus? Findet der Standard aktuell Anwendung in der digitalen Welt da draußen? Diese Frage kann man ganz klar mit jein beantworten 🙂 Ich weiß, Sie haben sich jetzt eine eindeutige Aussage gewünscht, aber leider ist die Welt nicht so einfach gestrickt und wie es mit Standards oftmals läuft, werden sie entweder ignoriert, nicht einheitlich und konsequent eingesetzt oder brauchen ganz einfach eine Weile, bis sie akzeptiert und etabliert sind. Man denke nur an die HTML-Spezifikation, die heute nach Jahrzehnten endlich einen einigermaßen hohen Grad an Akzeptanz gefunden hat.

Wie in diesem Artikel sehr anschaulich beschrieben wurde, ist das Problem beim CDDL-Standard, dass er nicht einheitlich von den am Entstehungsprozess beteiligten Firmen eingesetzt wird. So nutzt ihn der Google Tag Manager bspw. anders als Qubit oder Tealium. Wirklich schade an der Sache ist, dass die Idee von einem gemeinsam genutzten Vokabular das alle Systeme verstehen aufgebrochen wird. Der Grund dafür liegt allerdings auch in den sehr unterschiedlichen Anforderungen und Prozessen der Kunden. So möchte jeder Kunde andere KPIs tracken und braucht deshalb doch wieder individuelle Variablen.

Viele Systeme wie Data Management Plattformen oder BI-Tools verzichten aus diesen Gründen auf die Nutzung des Digital Data Layers und parsen stattdessen doch wieder den HTML-Code um die nötigen Informationen dort auszulesen. Um individuelle Anpassungen für die Erfassung aller benötigten Daten kommt man aber in der Regel nicht herum.

Es bleibt auf jeden Fall spannend, wie sich diese Technologien weiterentwickeln und ob sich hier tatsächlich ein Standard etabliert. Sehr interessant ist das ganze Thema natürlich auch aus Sicht des Datenschutzes. So möchten Endkunden vielleicht gar nicht, dass ihr gesamtes Verhalten so genau aufgezeichnet und Analysiert wird.

 

Neuerscheinung: Websites optimieren – Das Handbuch

Ich bin stolz verkünden zu können, dass unser Buch Websites optimieren – Das Handbuch in der zweiten Auflage im Springer Verlag erschienen ist. Die neue Auflage wurde nicht nur den neuesten Entwicklungen aus Webtechnologie, Mobile und digitalem Marketing angepasst, sondern auch um einige, interessante Themen erweitert. Hochkarätige Experten wie Christian Wenz, Tobias Hauser, Katja Heinemann und Stefan Fischerländer vermitteln auch dieses Mal wieder auf lockere, verständliche Art und Weise wie Sie Ihre Website bzw. Ihr online Angebot zum Erfolg führen. Prof. Ricardo Büttner vom Institut für Management und Informationssysteme (MIS) der FOM München war so nett uns sein Vorwort zu widmen.

In meinem Kapitel E-Controlling – Erfolgskontrolle im Netz ging ich diesmal etwas mehr in die Tiefe der Web Analyse und ergänzte ein paar Themen in Richtung digitale Kampagnen und Conversion Optimierung.

Websites optimieren - Das Handbuch

Hier die Übersicht der einzelnen Kapitel:

  1. Besser auffindbar – Suchmaschinenoptimierung
  2. Gut vermarktet – Online- und Suchmaschinenmarketing
  3. Gut gesendet – E-Mail- und Permission-Marketing
  4. Erfolgreich im Netzwerk – Social Marketing
  5. Usability – vom Nutzererlebnis zur Conversion-Rate
  6. Websites für alle – Barrierefreiheit
  7. Das Scheunentor – Sicherheitslücken vermeiden
  8. Wider die Langsamkeit – Performance-Optimierung
  9. Alles neu? – Designoptimierung und Relaunch-Konzeption
  10. E-Controlling – Erfolgskontrolle im Netz

Werfen Sie gleich einen Blick hinein: Websites optimieren – Das Handbuch (bei Amazon)

Viel Spaß beim lesen und viel Erfolg mit Ihrem Webauftritt!

WordPress Website gehackt – Was tun?

Es hat viel Schweiß und Herzblut gekostet, bis Ihre WordPress Website so aussah, wie Sie es sich vorgestellt haben und nun das:
Sie bekommen die Meldung dass Ihre Website gehackt wurde!

Da rutscht einem erstmal das Herz in die Hose! Aber keine Angst, es muss nicht unbedingt so schlimm sein, wie es sich anhört. Sie müssen die Website nicht gleich in die Tonne treten. Das passiert täglich tausenden von Leuten.

Ich möchte Ihnen in diesem Post erklären, wie Sie davon erfahren, dass Ihre (WordPress) Website gehackt wurde, welche Gegenmaßnahmen Sie ergreifen können und wie Sie sich in Zukunft davor schützen können, dass so etwas wieder passiert.

Warnung: Website gehackt!

Google Warnung in Suchergebnissen
Google Warnung in Suchergebnissen

Es gibt verschiedene Möglichkeiten, wie Sie davon erfahren können, dass Ihre Website gehackt wurde:

  1. Sie sehen direkt auf Ihrer Website Inhalte die dort nicht hingehören, z.B. Angebote für gefälschte Pässe oder ähnliches.
  2. In den Google Suchergebnissen für Ihre Website erscheint die Meldung „Diese Website wurde möglicherweise gehackt.“.
  3. Beim Aufruf der Seite im Browser erscheint eine Warnung wie „Als Betrugsversuch gemeldete Website“,  „Als attackierend gemeldete Website“, oder „Warnung: Durch das Aufrufen dieser Website wird ihr Computer möglicherweise beschädigt“.
  4. Ihr Provider schreibt Sie direkt an und weist Sie darauf hin, dass sich schadhafter Code auf Ihrer Website befindet und dass diese aus Sicherheitsgründen abgeschaltet wird, falls Sie das Problem nicht schnellstmöglich in den Griff bekommen.
Blockierte Website in Chrome
Blockierte Website in Chrome

Besonders gemein sind schadhafte Inhalte die nicht direkt auf der Website sichtbar sind. So können bspw. versteckte Links untergebracht werden, die man nicht sieht oder der Code wird nur ausgeführt wenn eine Suchmaschine die Seite besucht, nicht aber wenn ein Mensch mit einem Webbrowser die Seite ansteuert.

Warum wurde meine Website gehackt?

Schön und gut, jetzt wissen Sie, dass Ihre WordPress Website gehackt wurde und fragen sich sicherlich: Warum passiert das ausgerechnet mir?

Eines kann ich Ihnen zu Ihrer Beruhigung mitgeben: Es ist relativ unwahrscheinlich dass jemand ganz gezielt Sie als Opfer ausgewählt hat. Meist geschehen solche Angriffe völlig automatisiert. Schadprogramme durchsuchen das Internet nach Sicherheitslücken in der verwendeten Software (z.B. WordPress) und nutzen diese Sicherheitslücken dann aus um Ihre schadhaften Inhalte einzuschleusen. Meist liegt das Problem an veralteter Software, die nicht upgedatet wurde oder an zu simplen Passwörtern.

Das OWASP (Open Web Application Security Project) veröffentlicht seit 2003 jedes Jahr die Top 10 der häufigsten Sicherheitslücken.

Gegenmaßnahmen: Die Website von Schadcode befreien

Ok, was kann ich nun tun um den schadhaften Code/Inhalt wieder loszuwerden?

  1. Als erstes sollten Sie sämtliche Zugangsdaten ändern und mit sämtliche meine ich wirklich alle!!! Also ändern Sie zumindest die Passwörter für den Zugang zum Provider, FTP, SSH, Datenbank, WordPress Backend und WordPress Admin! Noch besser ist es wenn Sie gleich noch die Benutzernamen mit ändern. Und setzen Sie ab jetzt nur sichere Passwörter ein, die mindestens 8 Zeichen lang sind, Klein- und Großbuchstaben, Zahlen und Sonderzeichen enthalten und per Zufall generiert wurden!!! Den WordPress Administrator „admin“ kann man leider nicht so einfach im Backend umbenennen, jedoch direkt über die Datenbank mit phpMyAdmin in der Tabelle wp_users.
  2. Überprüfen Sie die registrierten Benutzer im WordPress Backend. Unter Umständen sind hier neue Nutzer aufgetaucht, die nichts in Ihrem System zu suchen haben. Löschen Sie diese Nutzer umgehend.
  3. Wo kommt der schadhafte Inhalt her? Eine Möglichkeit ist, dass er in die Datenbank geschrieben wurde. Falls Sie die Inhalte nicht direkt in Ihren Posts oder Kommentaren finden, können Sie die Datenbank nach den Stichworten durchsuchen, die auf der Website auftauchen, z.B. mit phpMyAdmin in der Tabelle wp_posts nach „fake passports“ suchen. Löschen Sie die entsprechenden Inhalte.
  4. Eine Andere Möglichkeit ist, dass Schadcode direkt in Dateien geschrieben wurde, bzw. neue Dateien angelegt wurden, die nicht dort hin gehören. Prinzipiell gibt es 3 Orte wo sich Schadcode befinden kann: In Ihren Templates des Themes unter /wp-content/themes/, in den Plugins unter /wp-content/plugins/ oder im WordPress Kern. Am häufigsten sind Themes befallen. Prüfen Sie also z.B. anhand des Änderungsdatums ob einzelne Dateien des Themes geändert wurden, oder durchsuchen Sie gleich die Dateien nach komischem Code der dort nicht hingehört. Oftmals werden die Inhalte von anderen Websites eingeschleust. Dazu werden meist PHP-Funktionen zum laden externer Inhalte wie fopen(), file_get_contents()eval() oder cURL verwendet.
  5. Installieren Sie sich WordPress Sicherheitsplugins wie Antivirus, das Ihre Templates nach Schadcode scannt sowie Acunetix WP Security oder iThemes Security (alternativ, nicht beide!!), welche Ihr WordPress System durch verschiedene Maßnahmen gegen Angriffe absichern.
  6. Überprüfen Sie Ihre Plugins! Sind diese alle noch aktuell? Gibt es Updates? Wann wurde das jeweilige Plugin das letzte Mal vom Hersteller aktualisiert? Wenn es länger als ein Jahr keine Updates für das Plugin gab, wird es wohl nicht mehr weiterentwickelt, bzw. gepflegt. In diesem Fall sollten Sie es deinstallieren und auf ein alternatives Plugin wechseln. Falls es Updates gibt, installieren Sie diese sofort!!!
  7. Sind Updates für das WordPress Kernsystem verfügbar? Wenn ja, sollten Sie diese auch umgehend installieren! Falls nicht, empfiehlt es sich im Falle einer gehackten Website trotzdem das System neu zu installieren. Dazu können Sie im WordPress Backend unter Dashboard / Aktualisierungen die Funktionalität „Erneut installieren“ verwenden. WordPress bietet außerdem seit einiger Zeit die Möglichkeit von automatisierten Updates.
  8. Wenn Sie sich sicher sind, dass Sie alle Maßnahmen unternommen haben und das System wieder sauber ist, begeben Sie sich in die Google Webmaster Tools und überprüfen Sie dort Ihre Site im Bereich Sicherheit. Anschließend schreiben Sie dort eine Benachrichtigung an Google, dass Ihre Website nun wieder vertrauenswürdig ist und dass Sie alle schadhaften Inhalte gelöscht haben. Dann bekommen Sie die Meldung dass Google das überprüft und dass es eine Weile dauern kann, bis die Warnung aus den Suchergebnissen entfernt wird.
  9. Schreiben Sie Ihrem Provider, dass nun wieder alles in Ordnung ist und Ihre Website nun sicher sein sollte.
  10. Bei heise.de werden Sicherheitslücken und Angriffe auf WordPress Installationen gemeldet. Schauen Sie hier ab und zu rein um auf dem Laufenden zu bleiben.
Google Webmaster Tools
Google Webmaster Tools
Google Webmaster Tools Sicherheit
Google Webmaster Tools Sicherheit

Ich hoffe ich konnte Ihnen mit diesem Post helfen und ein bisschen Licht ins Dunkle bringen.
Viel Erfolg mit Ihrer sicheren Website!

RWD – So setzen Sie das neue responsive Theme in Magento 1.9 ein

Magento Commerce ist derzeit die führende eCommerce Lösung für online Shops auf dem Open Source Markt. Mit Erscheinen der Magento Version 1.9 wurde seit langem mal wieder ein richtig revolutionäres, neues Feature eingeführt, nämlich ein responsive Theme! Zwar gibt es schon seit einer ganzen Weile freie und kommerzielle responsive Themes von Drittanbietern, nun hat dieser Ansatz für adaptive Designs des Shop Systems aber endlich auch Einzug in den Core von Magento gehalten. Schauen wir uns also das RWD getaufte Theme genauer an! „RWD – So setzen Sie das neue responsive Theme in Magento 1.9 ein“ weiterlesen

Bedeutungsvoller Code – Für mehr Semantik im Web

Entwicklungsstufen des Webs

Wir befinden uns in einer sehr spannenden Zeit! Aktuell geht das Web gerade mit uns durch! Fast täglich entdeckt man neue Dienste, Trends und Technologien. Wenn man die Entwicklungsstufen des WWW betrachtet, so kann man erkennen, wo die Reise hingeht: In den Anfängen haben statische Inhalte das Web dominiert, mit dem Web 2.0 bekamen Nutzer die Möglichkeit selbst Inhalte zu generieren, Stichwort User Generated Content. Durch den Erfolg sozialer Netzwerke können Nutzer sich vernetzen um Inhalte zu teilen und zu diskutieren. Das Ganze ist nun Dank Smartphones und Tablets auch von unterwegs möglich. Der Trend geht nun dahin, dass sämtliche Geräte miteinander übers Web vernetzt sind und miteinander kommunizieren, seien es Autos mit integriertem Internet Zugang à la Connected Drive oder Kühlschränke die selbst Essensnachschub bestellen.

Entwicklungsstufen des Webs
Entwicklungsstufen des Webs

Doch hier tritt ein Problem des „alten“ Webs auf, das es zu lösen gilt: Webseiten werden in der Regel für Menschen entwickelt, nicht für Maschinen! Wie kann man das verstehen? Wenn man den HTML-Code einer typischen Website betrachtet, so enthält dieser ein bisschen Text, vielleicht ein paar Bilder und ein Video. Der Sinn dieser Inhalte erschließt sich für menschliche Betrachter sofort. Ein Menü wird als Menü erkannt, eine Adresse als Adresse, ein Name als Name und das Foto des Autors als Foto des Autors, usw. 😉

Leider kann eine Maschine – z.B. eine Suchmaschine – relativ wenig mit diesen Informationen anfangen, das heißt die Bedeutung der Inhalte ist nur für Menschen verständlich.

Glücklicherweise gibt es eine Menge an Bestrebungen um genau dieses Problem zu lösen. Ich möchte die Entwicklungen nun der Reihe nach vorstellen und erklären wie man sie nutzen kann.

  1. Semantik in HTML
  2. RDF & RDFa
  3. Microdata & Microformats
  4. Rich Snippets für Google und Co.
  5. Social Media-Semantik
  6. Nutzen und noch mehr Nutzen

Semantic Web

Die Idee des Semantic Web existiert schon seit den Anfängen des WWW. So hatte sein Erfinder Tim Berners-Lee bereits damals die Vision von Computern, die selbständig Informationen wie Termine austauschen. Das W3C hat sich dann auch mit einer eigenen Working Group dem Problem angenommen und das RDF (Resource Description Framework) entwickelt.

Das Semantic Web kann als Weiterentwicklung des World Wide Web betrachtet werden. Ziel ist, dass Maschinen die von Menschen zusammengetragenen Informationen verarbeiten und verstehen können sollen.  Der Lösungsansatz ist bis heute der gleiche geblieben: Daten/Informationen werden mit eindeutiger Beschreibung ihrer Bedeutung (Semantik) versehen. Dies geschieht ganz einfach durch zusätzlichen Markup in der Webseite, oder wie im Fall von HTML5 durch neuen, aussagekräftigeren Markup.

Mit Hilfe dieser Auszeichnungen können bspw. mobile Geräte Telefonnummern direkt anrufen, Adressen im Routenplaner öffnen oder Termine gleich in den Kalender speichern. Aber auch Suchmaschinen können diese Infos nutzen, um die Suchergebnisse gleich entsprechend schöner darzustellen wie wir später im Fall von Googles Rich Snippets sehen werden. Und natürlich nicht zu vergessen: Die sozialen Netzwerke als heutzutage wichtigster Reichweitentreiber können Metainformationen verarbeiten.

Mehr Semantik in HTML5

HTML5 Logo

Mit HTML5 wurde ein Haufen neuer Tags eingeführt, die einzelne Bestandteile einer Website klarer von einander abgrenzen. Hat man in den Anfängen des Webdesigns Layouts noch mit Tabellen aufgebaut, so wurden sie später hauptsächlich durch ineinander verschachtelte div-Container realisiert. Nur so ein <div>-Tag sagt halt nicht viel mehr aus als „hallo ich bin ein Container“. In HTML5 haben wir nun Tags für den Seitenkopf <header>, Menüs <nav>, Abschnitte <section>, Artikel <article>, die Randspalte <aside>, die Fußzeile <footer>, Abbildungen <figure> und viele mehr bekommen.

HTML5 Seitenaufbau

Neue Attribute in HTML5

Dazu kommen noch Attribute die Beziehungen der Tags erklären, wie bspw. das Relationship Attribut bei Links: Autor rel=“author“, Alternativ rel=“alternate“, Lesezeichen rel=“bookmark“, Hilfe rel=“help“, Lizenz rel=“license“, aber auch zur Seitennavigation rel=“next“ und rel=“prev“, oder zur Suche rel=“search“.Die Vorteile liegen auf der Hand:

  • Echter Content kann besser von anderen Elementen abgegrenzt werden
  • Positive Auswirkung auf die OnPage Optimierung

Es gibt aber auch Gefahren:

  • Stuffing (überladener HTML-Code)
  • Längere Ladezeiten weil viel mehr Code interpretiert werden muss

Deshalb sollte man seinen Code nicht zu sehr mit Semantik überladen.

RDF

Wie schon erwähnt steht RDF für „Resource Description Framework“, also einfach gesagt eine Methode bzw. ein Rahmen zur Beschreibung von Dingen. Das Tolle an RDF ist, dass man damit nicht nur Dinge beschreiben kann, sonder auch ihre Beziehung zueinander. Da RDF prinzipiell erst mal nur ein Konzept ist, kann es sehr unterschiedlich dargestellt werden, z.B. graphisch mit Pfeilen usw., aber natürlich auch mit Code, genauergesagt mit XML-Code. Das W3C hat für RDF eigens einen XML-Dialekt entwickelt.

Da RDF grundsätzlich etwas kompliziert ist, will ich an dieser Stelle nicht zu tief einsteigen und nur die Grundzüge erklären. Für das ordinäre Web ist nämlich der kleine Bruder RDFa meiner Meinung nach relevanter.

RDF funktioniert arbeitet mit Beziehungstripeln die immer aus Subjekt, Prädikat und Objekt bestehen, wie wir das aus der Grammatik kennen. Ein einfaches RDF-Tripel sieht z.B. so aus: „Thomas arbeitet für Arrabiata“. Die Ressource Thomas (Subjekt) hat also die Beziehung Arbeitsverhältnis (Prädikat) zu der Ressource Arrabiata (Objekt). Die einzelnen Ressourcen können dabei mit URIs (Uniform Ressource Identifier – die Mutter der URLs) eindeutig identifiziert werden, in der Web-Logik wäre das z.B. jeweils eine URL zum Profil der Person und zum Profil der Firma. Zu guterletzt lassen sich mit diesen Tripeln riesige Wissensdatenbanken mit unzähligen Beziehungen aufbauen. Diese nennt man dann Ontologien. Aber nun genug Semantic Web für den Anfang.

RDFa

w3c sm rdfa

RDFa steht für „RDF in Attributes“ und ist sozusagen die Vereinfachung von RDF für das Web. Das Prinzip ist denkbar simpel: In HTML kann man wunderbar Attribute nutzen um die einzelnen Ressourcen und deren Beziehungen zueinander zu beschreiben. RDFa ist deshalb auch die offizielle Empfehlung des W3C zur Einbettung von computerlesbaren Zusatzinformationen.

RDFa kann natürlich manuell in HTML-Code eingebettet werden, es gibt aber auch diverse Content Management Systeme wie Drupal oder WordPress, die RDFa schon standardmäßig unterstützen, oder es über Plugins verfügbar machen.

Einen kleinen Haken gibt es allerdings noch an der Sache: Es gibt nicht den einen Standard, sondern mehrere Vokabulare, die man für verschiedene Zwecke nutzen kann.

Die Standard-Vokabulare von RDFa sind:

RDFa in Action

Nun aber endlich mal ein kleines Bespiel wie RDFa-Code aussieht:

Wie ihr seht, handelt es sich um ganz normalen HTML-Code, der um ein paar Attribute wie property=“v:name“ für den Namen oder property=“v:affiliation“ für die Firma erweitert wurde.

Mikrodaten / Microdata

So, um das Ganze etwas unübersichtlicher zu machen, gibt es nicht nur RDFa sondern auch noch Mikrodaten und Microformats 🙂 Beide sind irgendwie ähnlich, aber auch doch wieder anders, getreu dem Motto „same same but different“!

Microdata ist eine WHATWG (Web Hypertext Application Technology Working Group) HTML Spezifikation die darauf abzielt HTML-Content mit Metadaten anzureichern – kennen wir irgendwie schon. Microdata nutzt  allerdings <span>- und <div>-Tags als zusätzlichen Markup, die ebenfalls mit speziellen Attributen angereichert werden. Hier ein Beispiel:

Datum & Zeit

Bewertungen

Microformats

Und nun die Microformats – wie gesagt, alles irgendwie ähnlich. Aber keine Angst, bald kommt die Auflösung! Microformats sind kleine HTML-Muster zur Repräsentation häufig publizierter Objekte wie Menschen, Events, Blogbeiträgen, Reviews und Tags in Webseiten. Sie sind vermutlich der schnellste und einfachste Weg eine API zu den Daten und Informationen Ihrer Website bereitzustellen.

Microformats nutzen allerdings im Gegensatz zu RDFa und Microdata Klassen zur Identifikation von Entitäten (Dingen). Hier ein Beispiel:

Wie Ihr seht, sind die Zusatzinfos im Code sprich die Metadaten in den Namen der Klassen gebunden: Straße class=“street-address“, Postleitzahl class=“postal-code“, etc. Das schränkt einen natürlich irgendwie bei der Gestaltung ein, kann allerdings auch praktisch sein, weil man sich keine Gedanken darüber machen muss, wie man die Klassen benennt.

schema.org

Nun das große Finale! Happy happy 🙂 Unter schema.org werden diese 3 Ansätze unter einen Hut gebracht. schema.org ist eine gemeinsame Initiative (man staunt…) der großen Suchmaschinen Bing, Google und Yahoo! Man hat hier versucht ein gemeinsames Set von Schemas (Vokabularen) für strukturierte Daten in Webseiten zu definieren. Dabei können alle 3 Methoden eingesetzt werden:

  • RDFa
  • Microformats
  • Mikrodaten

Es bleibt euch überlassen, für welche Methode ihr euch entscheidet.

Google Rich Snippets

Was macht nun eine Suchmaschine genau mit diesen Informationen aus den Metadaten? Ganz einfach: Die Suchergebnisse lassen sich hübscher darstellen! Sie lassen sich z.B. durch hilfreichen Zusatzinformationen wie Bilder, Bewertungen oder Öffnungszeiten anreichern. Suchergebnisse werden dadurch informativer und emotional ansprechender. Sie vermitteln einen ersten Eindruck darüber welche Inhalte einen auf der Seite erwarten und nicht zuletzt steigern sie die Clickthrough-Rate (CTR) um etwa 20 – 30%. Außerdem verhelfen sie dem Seitenbetreiber zu qualifizierteren Besuchern, die sich wirklich für das Angebot der Website interessieren. Natürlich ist diese ganze Thematik besonders wichtig für alle Leute, die etwas über das Internet verkaufen wollen.

Events in Suchergebnissen (SERP)

Google unterstützt aktuell Rich Snippets für die folgenden Inhaltstypen:

  • Erfahrungsberichte
  • Personen
  • Produkte
  • Unternehmen und Organisationen
  • Rezepte
  • Veranstaltungen
  • Musik

Der Data Highlighter

Wie kann ich feststellen wie meine Webseite in den Suchergebnissen dargestellt wird? Hierfür bietet Google in den Webmaster Tools den Data Highlighter an. Mit dem Data Highlighter kann man einerseits seine Seite scannen und die Darstellung von Metadaten überprüfen, man kann allerdings auch Muster strukturierter Daten auf der eigenen Website darstellen und Datenfelder mit der Maus markieren und taggen. Unterstützte Datentypen sind: Artikel, Veranstaltungen, Lokale Unternehmen, Restaurants, Produkte, Softwareprogramme und Filme.

Google Webmaster Tools: Data Highlighter

Social Media und Semantik

Natürlich haben auch die sozialen Netzwerke schon längst das Potential von semantischem Markup erkannt und ihre eigenen Lösungen entwickelt.

Facebook Open Graph

Was bei Facebook unter dem Namen Open Graph läuft ist eigentlich auch nichts anderes als RDFa-Code, der in die eigene Website eingebettet wird. Der Hintergrund ist hier allerdigs, dass Facebook die Inforamtionen gezielt nutzen kann um sie im eigenen Netzwerk weiter zu verarbeiten. Mittels „Social Plugins“ können dritte Websites kleine Anwendungen bei minimalem Aufwand in das eigene Portal integrieren. Inhalte können so gezielt im sozialen Netzwerk geteilet werden. Einzelne Artikel oder ganze Seiten werden mittels Open Graph automatisch klassifiziert und semantisch ausgezeichnet. Die Einbettung erfolgt über Meta-Tags im HTML-Header.

Social Plugins machen jeden einzelnen Artikel oder eine Webseite zu einem Graph Objekt mit spezifischer ID (Ressource mit URI). Entwickler können relevante Informationen über die einzelnen Objekte über Facebook abrufen.

Facebook Like
Facebook Like

Hier ein Beispiel von Open Graph Code:

Twitter Cards

Und wieder heißt es „same same – but different“! Twitter hat mit seinen Twitter Cards quasi die Funktionalität von FB Open Graph nachgebaut. Mit Hilfe von Twitter Cards können nicht nur Medien an Tweets angehängt werden, die zum eigenen Content linken, sondern auch Metadaten in Websites integriert werden. Funktion und Syntax sind identisch wie bei Facebook und falls keine speziellen Twitter Tags in der Seite gefunden werden, greift Twitter auf die Facebook Tags zurück, quasi als Fallback-Lösung.

Twitter Card
Twitter Card

Pinterest – Rich Pins

Auch bei Pinterest gibt es eine änliche Funktionalität. Pinterest nennt seine semantischen Tags Rich Pins. Rich Pins bieten allerdings sogar  Informationen in Echtzeit. Aktuell gibt es Rich Pins für Filme, Rezepte und Produkte.
Rich Pins können in verschiedenen Formaten eingebunden werden:

  • oEmbed (Produkte)
  • hRecipe, Microformate (Rezepte)
  • Open Graph (Produkte)
  • Microdaten (schema.org, alle)

Sie müssen allerdings von Pinterest validiert werden.

Pinterest: Rich Pins

Hier ein Beispiel von Pinterest – oEmbed:

Rich Pin
Rich Pin

Im Screenshot ist zu sehen dass der Rucksack noch auf Lager ist. Der Preis wird auch in Echtzeit übermittelt.

Wie nutze ich den semantischen Code?

Wie kommen die Metadaten, Rich Snippets, Twitter Cards, etc. nun in meine Webiste?
In kleinen, manuell erstellten Websites können Sie den Code einfach händisch einfügen.

Semantische Auszeichnung im CMS

Wie sieht es bei einem Content Management System aus?
Es handelt sich hier eigentlich um eine reine Frontend-Angelegenheit. Aus MVC-Perspektive spielt sich alles in der View ab. Das heißt, die Integration lässt sich über die Themes/Templates steuern.
Für die meisten CMS gibt es bereits haufenweise Plugins! Oder wenn sie Glück haben, unterstützt ihr CMS semantischen Code von Haus aus, wie z.B. bei Drupal.

Achtung, es gibt auch Stolperfallen! SEO-Junkies werden vielleicht dazu verleitet hier und da zu tricksen! Davon kann ich nur abraten! Google ist schlauer! Entitäten müssen sichtbar sein!!! Versteckte Inhalte werden abgestraft. Mit Mikrodaten wird genau so viel Schindluder getrieben wie früher mit Meta-Keywords…

Verbreitung

Nur 13 % aller HTML-Seiten verwenden derzeit irgendeine Form strukturierter Auszeichnung.
49,3 % davon nutzen Microformate.
36,3 % nutzen RDFa und
14,4 % nutzen Microdata.

Fazit

Ich kann jedem Website-Betreiber den Einsatz von semantischen Code nur wärmstens empfehlen!

All in! Go for it! Just do it! It is easy!