Kleine und mächtige Tools für Google

Microformats und RDFa - Einfachere Verschlagwortung für Google

Mit Microformats und RDFa lernen Sie zwei Ansätze kennen, um Infos in Websites zu verschlagworten und mit semantischen Informationen zu versehen, die etwa Google für seine Rich Snippets verwendet.

Microformats und RDFa - reif für die Praxis?

© Archiv

Microformats und RDFa - reif für die Praxis?

Klein und unscheinbar, so lassen sich Microformats am besten zusammenfassen. Sie verstecken sich in der HTML-Seite und versehen einzelne Blöcke mit auf den ersten Blick unsichtbaren Zusatzinformationen. Der Hintergrund ist ein semantischer: Die Bedeutung von einzelnen Blöcken soll für Maschinen deutlich gemacht werden.Der Mensch erkennt auf einer Website schnell, dass in einem bestimmten Block immer Adressdaten stehen. Eine Software tut sich damit wesentlich schwerer. Für sie ist das Muster Adresse nicht so einfach abzulesen, da eine Adresse sehr unterschiedlich geschrieben und angeordnet werden kann. Hier sollen die Microformats Abhilfe schaffen. Sie kennzeichnen den entsprechenden Block als Adresse, sodass eine Software solche Blöcke einfach finden und nutzen kann.

Der entscheidende Sinn ist, dass die Software - beispielsweise eine Suchmaschine - die Informationen aus einer umfangreichen Site herausfiltern, verlinken und mit weiteren Informationen anreichern und verknüpfen kann. So lassen sich Ortsangaben einfach mit einer Karte vernetzen, Kontakte in Adressbücher eintragen oder in sozialen Netzwerken aufrufen.

Microformats

Die eigentlichen Microformats basieren - im Gegensatz zu RDFa - vollständig auf XHTML. Sie verwenden ausschließlich drei Attribute, die im XHTML-Standard schon verankert sind. class ist davon sicherlich das Bekannteste und Wichtigste. class zeigt im Sinne eines Microformats nicht die CSS-Klasse an, sondern bestimmt die semantische Information.

Ein Beispiel sind Kontaktinformationen. Für Kontaktinformationen gibt es schon lange einen Standard, der zum Beispiel den Austausch zwischen verschiedenen E-Mail-Clients ermöglicht: vCard. Der Standard ist bei der IETF, neben dem W3C einem der Gralshüter der Webtechnologien, unter der Nummer 2426 registriert ().

vCard arbeitet wie eine virtuelle Visitenkarte. Die einzelnen Bereiche einer Adressinformation werden mit entsprechenden Kürzeln klassifiziert. Zum Beispiel fn für die Person mit Vor- und Nachname, org für das zugehörige Unternehmen und tel für eine Telefonnummer. Diese Vorgaben von vCard übernimmt hCard, der Vorschlag von der Microformats-Initiative.

Der Standard wird hier ausführlich beschrieben: . Die einzelnen Kürzel vom vCard-Standard werden dazu im (X)HTML-Quellcode einfach in class-Attribute geschrieben:

<div class="vcard"><div class="fn">Person X</div><div class="org">Firma Y</div><div class="tel">089/123456789</div><a class="url" href="http://www.
firmaY.de/"> http://www.firmaY.de/</a></div>

Die hCard selbst ist an der Klasse vCard zu erkennen. Dass es eine hCard ist, ergibt sich einfach daraus, dass sie in (X)HTML eingebunden ist. Die Gliederung der Informationen ist hierarchisch, sprich die class="vcard" steht in einem Tag, das alle anderen Elemente enthält.

Eine weitere Hierarchie gibt es beispielsweise bei adr. In diesem Block sind alle adressrelevanten Informationen wie Land, Ort und Postleitzahl enthalten. Die Angaben, welche Kürzel vorhanden sind, finden Sie sowohl im Microformats-Wiki als auch im vCard-Standard. Sie können sich allerdings auch sehr einfach vom hCard-Creator () erzeugen lassen.

Der HTML-Code ist natürlich noch variabel, denn manches, wie Name und zugehörige URL, wird in Links umgewandelt, obwohl das eventuell nicht gewünscht ist. Sie sehen auch, dass mehrere Klassen einfach durch Leerzeichen getrennt werden - genau wie bei CSS-Klassen. Hier ein Beispiel für eine einfache generierte hCard des Autors:

<div id="hcard-Tobias-Hauser"
class="vcard"><a class="url fn" href="http://
www.arrabiata.de/">Tobias Hauser</a><div class="org">Arrabiata</div><a class="email" href="mailto:tobias.
hauser@arrabiata.de">tobias.hauser@arrabiata.de</a><div class="adr"><span class="country-name">
Deutschland</span></div></div>

Mehr zum Thema

Cover Internet Magazin 6/2010
Praxis-Knowhow für Web-Profis

Ab dem 14. Mail finden Sie die neue Ausgabe des Internet Magazins mit folgenden Themen am Kiosk: Wordpress als CMS einsetzen: Stabil, ausgereift,…
Inhaltsverzeichnis Internet Magazin 7/2010
Praxis-Knowhow für Web-Profis

Ab dem 14. Mail finden Sie die neue Ausgabe des Internet Magazins mit folgenden Themen am Kiosk: HTML5 & CSS3 schon jetzt: Alle neuen Features ohne…
Mobile Webseiten mit jQuery Mobile
Design für Smartphones

Sie wollen eine mobile Webseite oder App erstellen? jQuery Mobile bietet Funktionen und Optik, die für die mobile Nutzung unverzichtbar sind. Zudem…
Mobile Webseiten mit jQuery Mobile
Design für Smartphones

Sie wollen Ihre mobile Webseite übersichtlich gestalten? Wir zeigen Ihnen, wie Sie mit jQuery Mobile ganz einfach Listen, Buttons und eine…
Mobile Webseiten mit jQuery Mobile
Design für Smartphones

Sie wollen Ihrer mobilen Webseite ein individuelles Aussehen geben oder beim Laden der Seite eine Meldung anzeigen lassen? Wir zeigen Ihnen, wie Sie…
News
Video
SciFi-Action mit Ryan Gosling und Harrison Ford
Video
Agatha-Christie-Verfilmung mit Johnny Depp
Video
Kinostart: 23.11.2017