Handbuch Webdesign: Metadaten

Als Metadaten werden Daten bezeichnet, die andere Daten beschreiben. Das wohl bekannteste Beispiel ist eine Signatur, mit deren Hilfe mensch in einer Bibliothek ein Buch finden kann. In der elektronischen Datenverarbeitung und besonders im WWW, wo die Zahl der Dokumente immens geworden ist, sind Metadaten noch wichtiger. Im Idealfall ermöglichen sie Computerprogrammen, bspw. denen von Suchmaschinen, die Inhalte automatisch zu erfassen und den suchenden Menschen zugänglich zu machen. Und da Sie wollen, dass Ihre neue Webseite gefunden wird, bietet es sich an, die Inhalte mit Metadaten zu ergänzen.

Leider gibt es keinen einheitlichen Standard für Metadaten, daher werden im Folgenden einige für Webseiten einsetzbare vorgestellt.

"Beschreibende" Metadaten

Die folgenden Standards beschreiben den Inhalt einer HTML-Datei. Die Hoffnung dabei ist, das ein Programm, welches auf die Seite zugreift, die Daten nutzt und der Benutzer des Programmes so auf die Seite aufmerksam wird, ein Lesezeichen setzt usw.

HTML

Die grundsätzlichen Metadaten einer Webseite werden im Kapitel HTML beschrieben.

Dublin Core

Dublin Core (DC) wurde explizit für die Auszeichnung von Dokumenten (und Objekten) im Internet geschaffen. Ein Beispiel:

<head profile="http://dublincore.org/documents/dcq-html/">
  <title>Beispieldokument</title>
  <link rel="schema.DC"      href="http://purl.org/dc/elements/1.1/" />
  <link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" />
  <meta name="DC.format"        scheme="DCTERMS.IMT"      content="text/html" />
  <meta name="DC.type"          scheme="DCTERMS.DCMIType" content="Text" />
  <meta name="DC.publisher"     content="Max Mustermann" />
  <meta name="DC.subject"       content="Dublin Core Metadaten-Elemente, Beispiel" />
  <meta name="DC.creator"       content="Maxine Musterfrau" />
  <meta name="DCTERMS.license"  scheme="DCTERMS.URI" content="http://www.gnu.org/copyleft/fdl.html" />
  <meta name="DCTERMS.rightsHolder" content="Muster GmbH & Co KG" />
  <meta name="DCTERMS.modified" scheme="DCTERMS.W3CDTF" content="2013-03-27" />
</head>

Wie Sie sehen, wird das <head>-Tag um die URL zum Profil ergänzt. Die beiden Profile DC und DCTERMS (für erweiterte Angaben) werden zuerst „definiert“. Dann folgen die einzelnen Metadaten, jeweils in einem <meta>-Tag.

Microformats

Angestellte der Firma Technorati, einst eine erfolgreiche Blog-Suchmaschine, haben einige spezialisierte Metadaten vorgeschlagen, die unter dem Namen Microformats bekannt wuden. Sie decken jeweils kleine, spezielle Bereiche ab:

hcards: Kontaktdaten (Person, Organisation) für eine einfache Übernahme in elektronische Kontaktverwaltungen kennzeichnen
hcalendar: dasselbe, nur für Termine
weitere, teilweise noch unfertige Formate sind auf http://microformats.org/ zu finden

Beispiel einer hcard:

<div id="hcard-Max-Mustermann" class="vcard">
 <a class="url fn" href="http://www.example.org">Max Mustermann</a>
 <div class="org">Musterfirma</div>
 <a class="email" href="mailto:max@example.org">max@example.org</a>
</div>

"Darstellende" Metadaten

Eine Reihe von Firmen hat ihre eigenen Metadaten-„Standards“ herausgegeben. Hier geht es darum, wie die Webseite in der Anwendung der jeweiligen Firma dargestellt wird.

Facebook

Zum Vertiefen:

The Open Graph protocol (engl.)

Twitter

Zum Vertiefen:

Twitter Cards (engl.)

Windows 8

Microsoft hat mit Windows 8 die "Kachel"-Oberfläche eingeführt. Eine Kachel kann dabei nicht nur ein Programm, sondern auch eine "angeheftete" Webseite anzeigen. Standardmäßig wird dann das FavIcon der Seite auf der Kachel angezeigt und Windows wählt eine passende Hintergrundfarbe aus. Sollten Sie davon ausgehen, dass Ihre Seite von Windows-Nutzern angeheftet werden wird, kann es sich lohnen, das Aussehen der Kachel anzupassen. Dieses geschieht ebenfalls über das <meta>-Tag einer Webseite:

<meta name="application-name" content="Meine Beispielseite" />
<meta name="msapplication-tooltip" content="Alles über Beispiele" />
<meta name="msapplication-TileImage" content="images/example-144.png"/>
<meta name="msapplication-TileColor" content="#d83434"/>

Das TileImage muss eine Auflösung von 144*144 Pixel besitzen (und bietet damit wesentlich mehr Platz als ein FavIcon) und über einen transparenten Hintergrund verfügen. Die TileColor sollte eine dazu passende Farbe sein.

Zum Vertiefen:

Welche und wie viele Metadaten?

Auch Metadaten sind Inhalte, die erzeugt werden müssen. Daher muss die Frage, welche Art(en) von Metadaten auf Ihrer Webseite eingesetzt werden sollen, immer eine Abwägung sein zwischen Nutzen und Aufwand. Falls möglich, sollten Metadaten automatisch zusammen mit dem Inhalt erzeugt werden. Beispiele sind Datum und Zeit der Erstellung, oder letzten Änderung, der oder die Autoren usw. Andere Daten beziehen sich auf die gesamte Webseite und müssen daher nur einmal als Standard gesetzt werden (Firma, Rechteinhaber, ...).

Weiterführendes

“Like”-able Content: Spread Your Message with Third-Party Metadata A List Apart über kommerzielle Metadaten (engl.)