Microformats

Wer Webmentions benutzt und diese unter den eigenen Beiträgen anzeigen möchte, ist auf solche Daten angewiesen. Auch bestimmte Automatismen können verfeinert werden, indem wir ihnen Informationen als solche Kennzeichnen, auf die sie sonst nicht zugreifen könnten.

Daten anreichern

Es gibt unterschiedliche Wege, unsere Webseiten mit Daten anzureichern, bzw bestehende Daten besser lesbar zu machen. Da hätten wir beispielsweise JSON-LD, was sich ergänzend zur eigentlichen Seite im Quellcode derer versteckt und zum Beispiel von Suchmaschinen genutzt wird.

Mikroformate, offiziell "Microformats" genannt, sind eine weitere und besonders einfache Methode, um Daten besser maschinenlesbar zu gestalten.

Diese Microformats tauchen als Klassennamen im HTML-Code auf und sind auf diese Weise besonders leicht in bestehende Seiten zu integrieren. Um eine Information als Zusammenfassung zu kennzeichnen, können wir folgende Klasse in den HTML-Tag schreiben:

<p class="p-summary">Das hier ist eine Zusammenfassung</p>

Struktur und Hirarchie

Ganz so einfach wie oben beschrieben, ist es in der Praxis leider nicht, denn verschiedene Klassennamen können in verschiedenen Kontexten genutzt werden, sind also für sich alleinstehend nicht eindeutig.

Nehmen wir als Beispiel die Klasse p-name, die wir in zwei verschiedenen Kontexten nutzen können:

<p class="h-card">
  <span class="p-name">Anna Blogs</span>
</p>

<article class="h-entry">
  <h1 class="p-name">The title of my blog post</h1>
</article>

Im ersten Beispiel haben wir mit p-name ausgewiesen, dass es sich bei der Information um den Namen des Autors handelt. Im zweiten Beispiel haben wir mit der selben Klasse ausgewiesen, dass es sich bei der Information um den Namen, oder besser den Titel, der Seite handelt.

Der Kontext, den wir mit h-card und h-entry definieren ist also wichtig und macht hoffentlich deutlich, warum wir eine gewisse Struktur benötigen, damit Daten korrekt ausgelesen werden können.

Klassentypen

In den vorangegangenen Beispielen wird schon deutlich, dass wir verschiedene Arten von Klassennamen haben. Die Klassennamen für den Namen und die Zusammenfassung beginnen jeweils mit einem p-, die anderen beiden mit einem h-.

Die Bezeichnung p-summary hat also nichts damit zu tun, dass sie sich in einem P-Tag befindet. Viel mehr helfen diese Prefixe dabei, schneller zu sehen (und auszulesen), um was für einen Typ Information es sich handelt.

Insgesamt gibt es fünf Typen:

1. h- Typen stehen in der Hirarchie ganz oben und definieren, zu was alle untergeordneten Klassennamen gehören
2. p- Typen weisen reinen Text aus (plain text), alles was in dem ausgewiesenem Tag steht, kann demnach 1:1 als Text verwendet werden
3. u- Typen weisen eine URL aus
4. dt- Typen weisen ein Datum aus (date time)
5. e- Typen weisen Elemente aus, die wiederrum eine eigene Hirarchie besitzen und die gesamte Hirarchie den Inhalt darstellt

Manche HTML-Tags können auch eine Kombiniation aus diesen Typen enthalten. Nehmen wir den Namen des Autors vom vorherigen Beispiel und wollen diesen verlinken, sieht das so aus:

<a class="p-name u-url" href="https://example.org">Anna Blogs</a>

Wie man sieht, teilen wir mit, dass der Inhalt des Tags, also der Name, reiner Text ist, der Tag aber noch eine URL enthält.

Die meisten Parser sind so schlau, dass sie alle möglichen Kombinationen abbilden können. Denn wir können die URL-Property auch wie folgt nutzen:

<p class="u-url">https://example.org</p>

Das ist syntaktisch fragwürdig, wäre aber in den Microformats möglich.

An dieser Stelle alle möglichen Klassen aufzulisten, würde zu weit führen, wer sich darin vertiefen möchte, wird hier fündig:

microformats2 - Microformats Wiki

Beispiele

Wir werden uns stattdessen ein paar Beispiele ansehen, die die meisten von uns vermutlich in der Form direkt in die eigene Webseite integrieren können.

Autorinformationen

Im ersten Beispiel weisen wir uns als Autoren aus. Wir beginnen sehr klein und ergänzen dann immer mehr Informationen.

Die kleinste Variante enthält nur den Namen der Autorin:

<span class="h-card">Anna Blogs</span>

Wie man sieht, enthält das Beispiel lediglich den Typen h-card der zum Ausweisen von Personen und Organisationen genutzt werden kann. Parser, die das auslesen, sind angewiesen, die angegebene Information als reinen Text zu interpretieren. Es entspricht also:

<div class="h-card">
    <p class="p-name">Anna Blogs</p>
</div>

In beiden Fällen, würde ein Programm, welches die Seite ausliest, folgende Information und Struktur erhalten:

{
"type": ["h-card"],
    "properties": {
      "name": ["Anna Blogs"] 
    }
}

Im ausführlichen Beispiel haben wir diese Information explizit ausgewiesen. Im kurzen Beispiel weiß der Interpreter durch die h-card, um was für einen Typ Information es sich handelt und geht, da keine weitere Ausweisung folgt, davon aus, dass mindestens der Name enthalten ist.

Interpreter sollten sogar so schlau sein, dass sie folgende Information richtig interpretieren können:

<a class="h-card" href="http://example.com">Anna Blogs</a>

Wieder ist bekannt, dass es sich um eine Person oder Organisation handelt und zumindest der Name vorhanden sein wird. Da es sich aber zudem noch um einen Anchor-Tag, also einen Link handelt, wird dieser auch eine URL enthalten:

{ 
    "type": ["h-card"],
    "properties": {
      "name": ["Anna Blogs"],
      "url": ["http://example.com"]
    }
}

Wollen wir dies expliziet ausweisen, sähe das so aus:

<div class="h-card">
    <a class="p-name u-url" href="http://example.com">Anna Blogs</a>
</div>

Damit lassen wir keinen Interpretationsspielraum. Das Ergebnis ist dasselbe. Wer sichergehen will, dass alle Informationen korrekt ausgelesen werden, sollte möglichst detailiert sein.

In unserem Beispiel wollen wir nun noch das Bild der Autorin hinterlegen und eine Kontaktmöglichkeit:

<div class="h-card">
    <a class="p-name u-url" href="https://example.org">Anna Blogs</a>
    <img class="u-photo" src="https://example.org/photo.png" alt="Annas Avatar" />
    <a class="u-email" href="mailto:anna.blogs@example.com">anna.blogs@example.com</a>,
</div>

Wir haben unsere h-card mit vier verschiedenen Datensätzen angereichert:

1. Dem Namen p-name der Autoren
2. Einem Link zu ihr mit u-url
3. Ihrem Avatar mit u-photo
4. Ihrer E-Mail-Adresse mit u-email

Hier sieht man auch noch einmal die unterschiedlichen Arten von Properties. Der Name, vorangestellt mit p- ist reiner Text, alle anderen Informationen tragen ein vorangestelltes u- sind also URLs.

Wir könnten noch weitaus mehr Informationen ergänzen, den Geburtstag, das Geschlecht, die Position im Unternehmen. Alle diese Möglichkeiten finden sich hier.

Blogbeiträge

Im nächsten Beispiel wollen wir unseren Blogbeitrag so ausweisen, dass andere Seiten alle wichtigen Informationen finden. Das ist zum Beispiel wichtig, wenn wir Webmentions versenden.

<article class="h-entry">
    <h1 class="p-name">Hello World</h1>
    <p class="p-summary">This is my first post.</p>
    <p class="e-content">This is the <strong>full</strong> text of my blog post.</p>
    <a class="u-url" href="https://example.org/hello-world">Permalink</a>
    <time class="dt-published" datetime="2025-08-22 09:00:00">22.08.2025</time>
</article>

Unser Haupttyp ist in diesem Fall ein h-entry. Dieser Typ wird für Blogposts, Notizen und ähnliche Inhalte genutzt.

Innerhalb von h-entry tauchen bereits bekannte Eigenschaften auf:

• Mit p-name weisen wir den Namen, also Titel, des Beitrags aus
• Mit p-summary weisen wir die Zusammenfassung aus
• Mit e-content sagen wird, dass alles darin enthaltene der eigentliche Inhalt des Beitrags ist
• Mit u-url weisen wir die URL des Beitrags aus
• Mit dt-published weisen wir der Veröffentlichungsdatum aus

Natürlich könnten wir das auch anders kombinieren. Der Permalink könnte Teil des Titels sein:

<h1 class="p-name"><a class="u-url" href="https://example.org/hello-world">Hello World</a></h1>

Wir sind also nicht auf eine feste HTML-Struktur angewiesen. Solange wir Informationen eindeutig ausweisen können und die Hierarchie stimmt, ist alles gut.

Ein Wort noch zu e-content, um das deutlich zu machen. Im Beispiel enthält das Element nur einen Satz, das muss nicht so sein. Wir sollten auf keinen Fall mehrere P-Tags mit e-content ausweisen. Stattdessen geht e-content davon aus, dass alles innerhalb des Tags zum Inhalt gehört:

<div class="e-content">
    <p>This is the <strong>full</strong> text of my blog post</p>
    <p>It can have multiple paragraphs</p>
</div>

Webmentions

Bevor wir zum Ende kommen, möchte ich noch kurz zeigen, wie wir unsere Webmentions verfeinern können.

Wir können unseren Webmentions nämlich in unterschiedliche Typen einordnen, was gerade bei kurzen Notizen sinnvoll sein kann.

Gehen wir davon aus, dass Anna einen Bereich "Notizen" hat und dort verschiedene Arten von kurzen Beiträgen veröffentlicht:

• Kurze Texte
• Antworten auf Blogposts anderer Autorinnen
• Bookmarks
• Likes

Verschickt Anna eine Webmention ohne diese weiter zu definieren, werden alle diese Beiträge als Antwort auf den verlinkten Beitrag interpretiert. Anna kann das aber verfeinern, mit Microformats.

Gehen wir davon aus, dass Anna auf verschiedene Blogbeiträge von Maria reagieren möchte. Diese Reaktionen verschickt sich als Webmention, weil beide Seite dies unterstützen.

Um die Art der Webmention zu definieren, kann sie dem Link eine Microformats-Klasse anfügen.

Für eine kurze Antwort auf einen Blogpost fügt Anne u-in-reply-to an:

<a class="u-in-reply-to" href="https://marias.blog/post">https://marias.blog/post</a>

Damit ist klar, hier hat Anna auf Marias Beitrag geantwortet. Maria könnte diese Antwort nun als Kommentar unter ihrem Beitrag anzeigen.

Hat Anna die URL nur als Lesezeichen gepostet, also nicht weiter kommentiert, kann sie u-bookmark-of nutzen:

<a class="u-bookmark-of" href="https://marias.blog/post">https://marias.blog/post</a>

Damit dürfte klar sein, wie die Unterscheidungen funktionieren. Folgende Möglichkeiten gibt es:

• u-like-of für ein "gefällt mir"
• u-bookmark-of für ein Lesezeichen
• u-in-reply-to für eine Antwort
• u-repost-of um den Link zu teilen

In allen Fällen liegt es allerdings an Maria, ob sie diese Information (korrekt) interpretiert und unterschiedlich anzeigt.

Wenn Du ein CMS benutzt und ein entsprechendes Plugin im Einsatz hast, ist die Change groß, dass es diese Unterscheidungen vornehmen und entsprechend darstellen kann. Mein IndieConnector-Plugin tut dies zum Beispiel.

Kombinieren

Zuletzt sei noch erwähnt, dass alle Informationen natürlich kombiniert werden können. Der Blogpost wird nicht nur die Informationen innerhalb von h-entry enthalten, sondern wahrscheinlich auch eine a-card mit Informationen über die Autorin. Im Beitrag verlinkte Blogs könnten zudem noch als Likes oder Bookmarks ausgewiesen werden.

Es gibt noch zahlreiche weitere Typen für Events, Produkte, Einladungen, Geo-Daten, Reviews und und und. Alle Informationen findet du hier:

microformats2 - Microformats Wiki

Natürlich ist das Thema nicht ganz trivial, aber auch nicht so kompliziert wie es auf dem ersten Blick scheint. Ich hoffe, ich konnte einen guten Einblick geben.

Das Ausweisen solcher Informationen halte ich für wichtig, wenn wir unsere Blogs und Webseiten besser vernetzen und uns von den großen Plattformen loslösen wollen.

Viel Erfolg beim Einbauen!