Microformats2 für eine persönliche Website - Seiten für Maschinen verständlich machen

Als ich erstmals einen RSS-Feed und Webmentions zu einer persönlichen Website hinzufügte, sahen die Seiten für menschliche Besucher genauso aus wie zuvor. Unter der Oberfläche waren sie jedoch für andere Werkzeuge leichter verständlich geworden. Microformats2 folgt derselben Idee: Gewöhnliches, lesbares HTML bleibt erhalten und ein kleines Vokabular erklärt zusätzlich, was die einzelnen Inhalte bedeuten.

Es geht nicht darum, eine persönliche Website in eine komplizierte Datenplattform zu verwandeln. Eher ist es so, als würden die Schubladen in einer Werkstatt klare Beschriftungen erhalten. Menschen können sie weiterhin ganz normal öffnen, während Software nicht mehr erraten muss, wo Schrauben, Kabel oder Messwerkzeuge liegen.

Was Microformats2 tatsächlich leistet

HTML beschreibt bereits Strukturen. Eine Überschrift ist eine Überschrift, ein Link ist ein Link und ein Absatz ist ein Absatz. Es sagt aber nicht unbedingt, dass ein bestimmter Block eine Person, einen Artikel, eine Veranstaltung oder eine Antwort darstellt. Microformats2 ergänzt diese Bedeutung durch Klassennamen wie h-card, h-entry, p-name und u-url.

Der erste Buchstabe vermittelt die Art des Wertes. Eine h-*-Klasse kennzeichnet ein vollständiges Objekt, p-* einfachen Text, u-* eine URL, dt-* ein Datum oder eine Uhrzeit und e-* eingebetteten HTML-Inhalt. Ein Parser kann diese Eigenschaften erfassen, während ein Browser sie lediglich als normale CSS-Klassen behandelt. Dieses reibungslose Zusammenspiel ist der größte Reiz.

Mit einer h-card für die eigene Identität beginnen

Eine h-card beschreibt eine Person oder Organisation. Auf einer persönlichen Homepage kann sie Name, Profilbild, kanonische URL, kurze Biografie und Social Links miteinander verbinden. So erhalten IndieWeb Reader, Kontaktwerkzeuge und andere Parser eine verlässliche Darstellung des Website-Eigentümers, ohne dass eine separate API erforderlich ist.

<section class="h-card">
  <img class="u-photo" src="/static/img/profile.jpg" alt="Portrait of Adam Muiz">
  <h2 class="p-name">Adam Muiz</h2>
  <p class="p-note">I write about the personal web, security, and self-hosting.</p>
  <a class="u-url" href="https://adammuiz.com/" rel="me">adammuiz.com</a>
</section>

Der sichtbare Text bleibt auch dann nützlich, wenn kein Parser vorhanden ist. Das ist ein wichtiger Designtest: Microformats2 sollte eine Seite bereichern und kein Vorwand sein, wesentliche Angaben zur Identität in Metadaten zu verstecken, die Leser nie sehen. Das Attribut rel="me" hilft außerdem zu bestätigen, dass verlinkte Profile derselben Person gehören.

Einen Artikel mit h-entry beschreiben

Bei einem Blogbeitrag ist das zentrale Objekt normalerweise eine h-entry. Ihre Eigenschaften können Titel, Veröffentlichungsdatum, Autor, Permalink, Zusammenfassung, Kategorien und vollständigen Inhalt kennzeichnen. Man kann sie sich wie ein Versandetikett auf einem Paket vorstellen: Das Paket bleibt der Artikel, doch das Etikett ermöglicht verschiedenen Systemen eine einheitliche Zuordnung und Interpretation.

<article class="h-entry">
  <h1 class="p-name">A Practical Guide to Microformats2</h1>
  <p>By <a class="p-author h-card" href="https://adammuiz.com/">Adam Muiz</a></p>
  <time class="dt-published" datetime="2026-08-09T18:00:00+07:00">9 August 2026</time>
  <a class="u-url" href="https://adammuiz.com/microformats2-personal-website/">Permalink</a>
  <div class="e-content">
    <p>The complete article belongs here.</p>
  </div>
</article>

Im Attribut datetime sollte ein ISO-8601-Wert stehen, einschließlich Zeitzone, wenn die Uhrzeit relevant ist. Das menschenlesbare Datum zwischen den Tags kann der Sprache und dem Stil der Seite folgen. Diese Trennung verhindert, dass Maschinen ein mehrdeutiges Datum wie 08/09/2026 falsch interpretieren.

Eigenschaften nach Bedeutung statt Aussehen wählen

Ein häufiger Fehler besteht darin, jede Eigenschaft aus einem Beispiel zu übernehmen. Ausgangspunkt sollten die Informationen sein, die eine Seite wirklich enthält. Für einen Artikel bilden p-name, dt-published, p-author, u-url und e-content eine sinnvolle Grundlage. p-category, u-photo oder p-summary kommen nur hinzu, wenn diese Elemente eine echte Entsprechung in der Oberfläche haben.

p-* sollte nicht allein deshalb gewählt werden, weil etwas wie Text aussieht. Ein Permalink bleibt eine URL und gehört daher in u-url. Umfangreicher Artikelinhalt gehört in e-content, weil seine Links, Hervorhebungen, Listen und Codeblöcke relevant sind. Semantisches Markup ähnelt dem Benennen von Variablen: Präzision erleichtert spätere Integrationen, während unklare Namen die Verwirrung nur weiterreichen.

Microformats2 mit Webmentions und POSSE verbinden

Microformats2 ist besonders nützlich, wenn eine Website am breiteren Social Web teilnimmt. Ein Webmention-Empfänger kann die verlinkende Seite abrufen und nach einer h-entry suchen, um Autor und Inhalt zu bestimmen und zu erkennen, ob es sich um eine Antwort, ein Like, ein Lesezeichen oder einen Repost handelt. Eigenschaften wie u-in-reply-to, u-like-of und u-repost-of machen diese Beziehungen eindeutig.

Auch ein POSSE-Workflow kann den Quelleintrag analysieren, bevor er ihn an eine andere Plattform verteilt. Statt ein zweites, privates Inhaltsschema zu pflegen, kann der Publisher Titel, Inhalt, Bild und kanonische URL aus der öffentlichen Seite extrahieren. Microformats2 wirkt damit wie verbindendes Gewebe: Es ersetzt weder RSS noch Webmentions oder IndieAuth, hilft diesen Komponenten aber beim Austausch klarerer Informationen.

Das Markup wartbar halten

Microformats2-Klassen gehören in die Templates, die Profile und Beiträge ohnehin darstellen. Unsichtbare Duplikate derselben Inhalte sollten vermieden werden, denn sichtbare und versteckte Kopien werden früher oder später voneinander abweichen. Verwendet ein CMS ein gemeinsames Artikel-Template, kann eine kleine Änderung alle bestehenden und zukünftigen Beiträge verbessern.

Ebenso sinnvoll ist die Trennung von Styling-Klassen und semantischen Klassen. Eine Klasse wie article-title kann die Typografie steuern, während p-name die Bedeutung vermittelt. Beide dürfen auf demselben Element stehen. Dadurch entfernt ein visuelles Redesign nicht versehentlich die strukturierten Daten, und das Vokabular kann einen Theme-Wechsel überstehen.

Prüfen, was Parser erkennen

Eine im Browser korrekt aussehende Seite beweist noch keine richtige Struktur. Eine öffentliche URL lässt sich mit dem Microformats Parser unter pin13.net/mf2 testen. Im erzeugten JSON sollte die erwartete h-card oder h-entry mit den richtigen Eigenschaften erscheinen. Ein Test der bereitgestellten Seite deckt außerdem Fehler bei Templates, Cache und kanonischer URL auf, die ein lokales Snippet verbergen könnte.

Danach folgt die menschliche Prüfung. CSS kann deaktiviert oder die Seite mit Blick auf Screen Reader untersucht werden. Bilder benötigen weiterhin aussagekräftige Alt-Texte, Überschriften müssen geordnet bleiben und Links sollten auch außerhalb ihres visuellen Kontextes verständlich sein. Microformats2 verbessert die Maschinenlesbarkeit, repariert aber kein unzugängliches HTML. Gute Semantik beginnt mit einem soliden Dokument.

Schrittweise einführen

Niemand muss an einem Abend das gesamte Archiv auszeichnen. Ein guter Anfang sind die h-card auf der Homepage und das zentrale h-entry-Template. Beide werden validiert und mit bestehenden IndieWeb Tools beobachtet. Eigenschaften für Antworten, Lesezeichen, Veranstaltungen oder Rezensionen kommen erst hinzu, wenn die eigenen Veröffentlichungsanforderungen sie tatsächlich brauchen.

Dieses schrittweise Vorgehen ähnelt dem Ordnen einer Küche, während dort weiter gekocht wird: Zuerst wird der meistgenutzte Schrank beschriftet, dann der Nutzen geprüft und anschließend Regal für Regal fortgefahren. Das Ziel ist nicht das größtmögliche Vokabular. Das Ziel ist langlebiges HTML, das Menschen lesen, Browser darstellen und unabhängige Werkzeuge ohne Erlaubnis einer zentralen Plattform verstehen können.

Fazit

Microformats2 bietet einer persönlichen Website eine bescheidene, aber wirkungsvolle Verbesserung. Mit einigen sorgfältig ausgewählten Klassennamen wird ein Profil zur erkennbaren h-card und ein Beitrag zur portablen h-entry. Die Website bleibt gewöhnliches HTML, doch RSS Reader, Webmention Tools, IndieWeb Clients und künftige Integrationen erhalten einen zuverlässigeren Kontext.

Der beste Ausgangspunkt sind sichtbare Inhalte, ein kleinstmöglicher Satz sinnvoller Eigenschaften und die Validierung des veröffentlichten Ergebnisses. Wer Microformats2 bereits auf der eigenen Website verwendet, kann in den Kommentaren teilen, welcher Parser oder welche Integration am meisten davon profitiert. Ein kleines Beispiel aus einer echten Website kann anderen helfen, ihre Ecke des Webs verständlicher zu machen.