Minimales soziales Markup
Artikel vom 19. Oktober 2022. ISSN 1614-3124, #73Â (Feed).
Jede Website und App braucht dieser Tage sogenanntes »soziales Markup«, Metadaten zur ganzheitlichen und hübscheren Darstellung in sozialen Medien und Messenger-Apps. Dieses Markup basiert üblicherweise auf dem Open Graph-Protokoll, aber vor allem Twitter setzt seine eigenen Metadaten ein (von denen einige auf Open Graph zurückfallen).
Für einen Frontend-Entwickler und insbesondere einen Frontend-Minimalist ist vielleicht von Interesse, was das minimalste Markup ist, um noch ein vernünftiges Ergebnis zu erzielen. Ich habe mich mit dieser Frage etwas beschäftigt, als ich mein altes Setup prüfte und optimierte.
Wenn du nicht groß weiterlesen möchtest, hier ist das absolute Minimum, das du benötigst:
<!-- <head> (und <body>) benötigt von LinkedIn -->
<head>
<!-- »twitter:card« und ein Titel benötigt von Twitter -->
<meta name=twitter:card content=summary_large_image>
<meta property=og:title content="Dies ist ein Testtitel">
<!-- Anführungszeichen benötigt von WhatsApp und Signal -->
<meta property="og:description" name="description" content="Dies ist eine Testbeschreibung.">
<meta property="og:image" content="https://hell.meiert.org/core/png/test.png">
Wenn du weiterlesen magst, folgt eine Beschreibung, wie ich auf diesen Code kam.
Anforderungen
Zunächst ist es nützlich, zu wissen, dass ich mich in meiner Arbeit auf minimales HTML konzentriere. Ich bevorzuge, so wenig HTML wie möglich zu verwenden, lasse deshalb normalerweise optionales Markup aus, und mag die Idee ID- und klassenloser Webentwicklung. (Eine Ausnahme hiervon ist, nicht unbedingt auch alle Leerzeichen wegzulassen – “view-source” ist super.)
Wofür aber versuchen wir hier, das geringstmögliche Markup zu finden? Aus meiner Sicht ist dies, was auch immer benötigt wird um:
- den Titel der Seite auszugeben;
- ein Bild anzuzeigen;
- eine Beschreibung zu liefern (optional).
Wo sollte dies alles funktionieren? Ich denke – du magst andere Anforderungen und Vorstellungen haben –, dass dieses Markup auf den folgenden Plattformen und Apps sauber dargestellt werden sollte:
Ein paar andere Netzwerke sind mir ebenfalls wichtig (wie XING), und ich würde mich auch mehr mit anderen Messengern beschäftigen, wenn ich sie benutzen würde (wie Telegram). Ich arbeite hier mit der kleinen Wette, dass andere Netzwerke und Apps ein ähnliches Verhalten wie die oben aufgeführten zeigen. Das scheint soweit aufzugehen. Bitte lass mich wissen, solltest du eine größere Plattform kennen, die ein anderes Verhalten zeigt (oder es woanders Probleme geben sollte).
Soziales Markup
Das Markup fĂĽr diese Anforderungen ist relativ einfach zu ermitteln.
Was den Titel anbelangt, reicht das title
-Element überall aus – außer auf Twitter (warum!). Um »valides« Twitter-Card-Markup zu produzieren, muss man auf og:title
zurĂĽckgreifen:
<meta property=og:title content="Dies ist ein Testtitel">
Um ein Bild anzuzeigen, benötigt Twitter twitter:card
, was ĂĽber den content
-Wert auch zugleich die Größe des Bildes steuert (summary
vs. summary_large_image
):
<meta name=twitter:card content=summary_large_image>
<meta property=og:image content=https://hell.meiert.org/core/png/test.png>
Um eine Beschreibung zu liefern, genĂĽgt es, property=og:description
an eine bestehende description
zu kleben (wobei – danke Amier Saleh – die Reihenfolge wichtig ist):
<meta property=og:description name=description content="Dies ist eine Testbeschreibung.">
Dies fĂĽhrt zu folgendem minimalen Markup (entsprechend meiner eigenen Reihenfolge im Quelltext):
<meta name=twitter:card content=summary_large_image>
<meta property=og:title content="Dies ist ein Testtitel">
<meta property=og:description name=description content="Dies ist eine Testbeschreibung.">
<meta property=og:image content=https://hell.meiert.org/core/png/test.png>
Probleme
Dies allein aber genügt nicht, auch wenn es valid ist (validiere den »Gist«) und den Spezifikationen der entsprechenden Unternehmen entspricht.
Ein Problem besteht in der bisherigen Unfähigkeit von Messenger-Apps, Beschreibung und Bild zu ermitteln, wenn die entsprechenden Attribute nicht in Anführungszeichen gesetzt werden. (Als ich noch WhatsApp benutzte, habe ich diese drei Mal zu dem Bildproblem kontaktiert und Testseiten bereitgestellt, aber dies wurde letztlich nicht weiter verfolgt.)
Ein anderes Problem ist, dass soziales Markup beispielsweise von LinkedIn nicht korrekt identifiziert wird, wenn es keinem <head>
-Start-Tag folgt.
Beides sind, um es deutlich auszudrücken, massive und nahezu peinliche Bugs, weil beides valides HTML bildet. Das heißt, dass dieser Code legitim und mit den HTML-Spezifikationen konform ist. (Die entsprechenden Teams bestehen aus Fachleuten – behebt das.)
Beides fĂĽhrt zu dem Markup, dass ich am Anfang teilte:
<head>
<meta name=twitter:card content=summary_large_image>
<meta property=og:title content="Dies ist ein Testtitel">
<meta property="og:description" name="description" content="Dies ist eine Testbeschreibung.">
<meta property="og:image" content="https://hell.meiert.org/core/png/test.png">
âť§ Und das ist, nach bestem Wissen und Gewissen, nicht nur minimales, sondern das minimalste soziale Markup.
Was ich hierüber denke? Ich habe bereits gesagt, wie ungehalten (aber nicht überrascht) ich bin, dass HTML wie XHTML behandelt wird und dass valides HTML – mit keinem <head>
-Tag und ohne (optionale) Anführungszeichen – nicht vollständig unterstützt wird. Ich glaube aber auch, dass dieses Markup auch so noch zuviel ist – in aller Kürze, Twitter sollte Seitentitel (title
-Element) berĂĽcksichtigen und Open Graph unterstĂĽtzen (was das Absehen von twitter:card
beinhaltet), und generell sollten alle Konsumenten von sozialem Markup Metabeschreibungen beachten. Dann wäre das minimalste Markup, og:image
zu ergänzen – weil sich das sonst nicht auf einer Seite befinden würde.

Abbildung: Minimale Gesellschaft. (Copyright King Features Syndicate, Inc., vertrieben durch Bulls.)
Ăśber mich

Ich bin Jens, und ich bin ein Engineering Lead und Autor. Ich habe als technischer Leiter für Google gearbeitet, bin W3C und WHATWG verbunden und schreibe und begutachte Bücher für O’Reilly. Ansonsten experimentiere ich gerne, mitunter in den Bereichen Philosophie, Kunst und Abenteuer. Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen.
Wenn du eine Frage oder Anregung zu dem hast, was ich schreibe, sende bitte jederzeit eine Nachricht. Danke!
Ähnliche Themen
Das könnte dich ebenfalls interessieren:
- Die 6 Arten, HTML zu schreiben (und ihre Kombinationen)
- Der 3-Sekunden-Frontend-Entwickler-Test
- Eine kurze EinfĂĽhrung in minimale Webentwicklung
Schwerpunkt: Webentwicklung.

Freund von optimiertem HTML? Probiere Upgrade Your HTML (2019–2022). Gutes HTML ist nicht einfach. Minimales HTML wird unterschätzt. HTML aus dem Alltag kann man oft verbessern. Diese Buchserie macht das. Erhältlich bei Amazon, Apple Books, Kobo, Google Play Books und Leanpub.