Neue SenSEO Rich Snippet Vorschau

Neue SenSEO Rich Snippet Vorschau

Etwas später als bei Twitter angekündigt, kommt heute der Artikel zur Implementierung der Rich Snippet Vorschau in SenSEO.

Das Feature
Das Google Webmaster Central Blog hat in letzter Zeit immer wieder die Darstellung neuer Mikroformate in den Google SERPs beworben (der offizielle Name ist Rich Snippets). Zu den unterstützen Mikroformaten zählen unter anderem Personen, Ereignisse, Bewertungen oder auch Rezepte. Wie das dann aussehen kann, zeigt sich am Beispiel der Suche nach "thai green mango salad".



Das zusätzliche Bild und die Bewertungs-Skala werden von Google dargestellt, weil die Macher von about.com ihre Rezepte mit speziellen Auszeichnungen versehen haben. Um diesen und anderen Entwicklern im Vorfeld eine Möglichkeit zu bieten, diese Daten zu testen, bietet Google das Rich Snippets Testing Tool als Google Webmaster Tool an. Vor einigen Tagen hatte ich nun die Idee, dieses Tool in SenSEO 1.4.0 zu integrieren. Ein solche Vorschau bietet sich an, da SenSEO als Extension auf On-Page Optimierungen ausgerichtet ist. Läßt man von SenSEO eine Rich Snippet Vorschau der erwähnten Rezept-Seite generieren, sieht diese so aus:



Die Umsetzung
Die Umsetzung der Vorschau basiert im Wesentlichen auf dem Yahoo-Service YQL. Mit YQL ist es möglich, Inhalte einer fremden Seite zu extrahieren und in die eigene Website (oder Extension) zu integrieren. Diese Möglichkeit habe ich genutzt, um von der aktuell im Browser angezeigten Seite im Hintergund eine Vorschau mit dem Rich Snippet Testing Tool zu erstellen und diese in SenSEO zu integrieren. Die gesamte Umsetzung geschieht mit JavaScript direkt im Browser - serverseitige Scripte sind nicht nötig.

Zu Beginn wird ein XHR-Request erzeugt, welcher mit Hilfe von YQL aus dem Google Tool die Vorschau für das Rich Snippet extrahiert:

var req = new XMLHttpRequest();

req.open('GET', "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fwww.google.com%2Fwebmasters%2Ftools%2Frichsnippets%3Furl%3D" + encodeURIComponent(content.window.location) + "%22%20and%20xpath%3D'%2F%2Fdiv%5B%40class%3D%22onebox%22%5D'", true);

Als Response wird ein XML-Dokument geliefert, in dem der Code-Schnipsel der aufgerufenen Webseite verpackt ist. Um an diesen Schnipsel zu kommen, nutze ich die XPath-Implementierung des Firefox:

var xmlDoc = req.responseXML;

var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement);

var nodesSnapshot = xmlDoc.evaluate('/query/results/node()', xmlDoc, nsResolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );

Um die so entstandenen XML-Knoten in das Dokument integrieren zu können, müssen diese im letzten Schritt in einen String serialisiert werden:

var xmlString = (new XMLSerializer()).serializeToString(nodesSnapshot.snapshotItem(0));

SENSEO.Panel.panelDocument.getElementById('snippet-container').innerHTML = xmlString;

Fazit
Durch diese Lösung erspare ich mir das "Nachprogrammieren" des Rich Snippet Testing Tools. Die Generierung der Vorschau wird somit weiterhin von diesem Tool erledigt. Unterstützt Google in Zukunft neue Mikroformate, werden diese auch sofort in SenSEO angezeigt. Ein Schwachpunkt dieser Lösung ist die Selektion des Code-Schipsels anhand von HTML-Elementen. Sollten die Entwickler von Google den Aufbau ihres Dokuments ändern, könnte die Selektion von einer Minute zur Nächsten scheitern und die Vorschau wäre hinüber. In einem solchen Fall ist eine neue Version von SenSEO mit angepasster Selektion nötig.

Geschrieben von Nico Steiner in Referenzen um 22:59 | Kommentare (0) | Trackbacks (0)

Kommentare

Ansicht der Kommentare: (Linear | Verschachtelt)

Noch keine Kommentare

Kommentar schreiben

Name
E-Mail
Homepage
Antwort zu	[ Ursprung ]
Kommentar	Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert. Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten Sie, dass Ihr Browser Cookies unterstützen muss um dieses Verfahren anzuwenden. Hier die Zeichenfolge der Spamschutz-Grafik eintragen:
	Daten merken? Bei Aktualisierung dieser Kommentare benachrichtigen