Minimales soziales Markup

Artikel vom 19. Oktober 2022. ISSN 1614-3124, #73. Schwerpunkt: Webentwicklung (RSS-Feed für alle Themen).

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:

Twitter (Tester [aktuell unzuverlässig])
LinkedIn (Tester)
Facebook (Tester)
Signal
WhatsApp

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.

Die Straße führt immer tiefer. Nach 900 Höhenmetern ist er auf Meeresspiegelhöhe. Das Tote Meer, das in der Backofenhitze flimmert, liegt noch weitere 300 Meter tiefer.

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

Über mich

Jens Oliver Meiert, am 9. November 2024.

Ich bin Jens (lang: Jens Oliver Meiert), und ich bin ein Frontend-Engineering-Leiter und technischer Autor/Verleger. Ich habe als technischer Leiter für Firmen wie Google und als Engineering Manager für Firmen wie Miro gearbeitet, bin Mitwirkender an verschiedenen Webstandards und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.

Ich experimentiere gerne, nicht nur in der Webentwicklung (und im Engineering Management), sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Erfahrungen und Ansichten. (Bitte sei kritisch, interpretiere wohlwollend und gib Feedback.)