In der heutigen digitalen Welt spielen soziale Medien und Messenger-Apps eine zentrale Rolle dabei, wie Inhalte entdeckt und geteilt werden. Die Art und Weise, wie ein Link in diesen Plattformen dargestellt wird, kann maßgeblich darüber entscheiden, ob Nutzer eine Webseite besuchen oder nicht. Meta-Tags in den HTML-Headern einer Webseite sind dafür verantwortlich, wie Link-Vorschauen aussehen. Sie beeinflussen Titel, Beschreibung und Bild, die beim Teilen eines Links angezeigt werden. Doch längst nicht alle sozialen Netzwerke und Messenger unterstützen dieselben Meta-Tags – vielmehr gibt es verschiedene Standards und proprietäre Formate, die in ihrer Verbreitung und Wirkung variieren.
Dieser Artikel beschäftigt sich ausführlich damit, welche Meta-Tags von welchen sozialen Plattformen und Messaging-Diensten bevorzugt werden, welche Standards sich durchgesetzt haben und wie Webseitenbetreiber ihre Meta-Daten am effektivsten gestalten können, um sowohl Sichtbarkeit als auch Klickrate zu erhöhen. Link-Vorschauen sind aus Benutzerperspektive extrem hilfreich. Sie bieten eine kleine Vorschau auf den Inhalt, sparen Zeit und steigern das Vertrauen in die geteilten Links. Für Webseitenbetreiber ist dies eine Chance, die Aufmerksamkeit potenzieller Besucher schon vor dem Klick zu gewinnen. Doch diese Vorschau entsteht nicht zufällig.
Damit ein Dienst die richtigen Titel, Beschreibungen und insbesondere Bilder einblenden kann, müssen entsprechende Meta-Tags im Kopfbereich der Webseite (im sogenannten <head>-Tag) vorhanden sein. Es gibt mehrere etablierte Systeme, über die diese Informationen kommuniziert werden: Das Open-Graph-Protokoll von Facebook, Twitter Cards, Schema.org-Microdata sowie das oEmbed-Format. Open Graph, ursprünglich von Facebook eingeführt, hat sich als der mit Abstand verbreitetste Standard für die Darstellung von Link-Vorschauen etabliert. Es handelt sich dabei um spezielle Meta-Tags, die mit dem Präfix „og:“ im HTML eingebaut werden.
Sie steuern die wichtigsten Elemente einer Link-Vorschau – Titel, URL, Beschreibung und Bild. Die meisten großen sozialen Netzwerke und viele Messenger greifen auf Open Graph zurück, um eine reichhaltige Vorschau darzustellen. Das liegt zum einen daran, dass Facebook die größte Social-Media-Plattform ist und mit seinem Protokoll eine Art De-facto-Standard geschaffen hat. Zum anderen sind die Open-Graph-Tags einfach umzusetzen und erlauben eine sehr klare Kontrolle darüber, wie eine Webseite präsentiert wird. Twitter setzt auf sein eigenes System namens Twitter Cards.
Diese Meta-Tags sind ähnlich aufgebaut wie Open Graph, nutzen jedoch das Präfix „twitter:“ und unterscheiden sich in Details, etwa bei der Definition von Karten-Typen wie Summary, Summary Large Image oder Player Card. Twitter nutzt diese Tags, um vielfältige Vorschauen zu ermöglichen, oft mit prominenten Bildern und zusätzlichen Informationen wie Video- oder Audio-Inhalte. Plattformen wie LinkedIn und viele Messenger verarbeiten hingegen Twitter Cards oft durch eine Art Fallback, greifen also zunächst auf Open Graph zurück, können aber auch Twitter-spezifische Meta-Tags lesen. Ein weiterer wichtiger Ansatz sind Schema.org-Microdata, die vor allem von Suchmaschinen verwendet, um Seiteninhalte besser zu verstehen.
Diese Microdata können ebenfalls zur Gestaltung von Link-Vorschauen genutzt werden, speziell mit den Eigenschaften „name“, „description“ und „image“. Allerdings sind Microdata nicht so universell für soziale Medien verbreitet wie Open Graph oder Twitter Cards. Manche Dienste nutzen sie ergänzend oder in Kombination, anderen reichen klassische Meta-Beschreibungen und das Title-Tag. Das oEmbed-Standardformat ist etwas komplexer und wird vor allem von Plattformen wie Slack, Discord oder Reddit verwendet. Es ermöglicht den automatischen Abruf strukturierter Daten über eine separate JSON- oder XML-Datei, die verlinkt wird.
So kann zum Beispiel ein Messenger weitere Inhalte oder andere Medientypen anzeigen. Es handelt sich um ein flexibles Format, das insbesondere für reiche Inhalte sinnvoll ist. Dennoch wird oEmbed nicht so breit unterstützt wie Open Graph. In der Praxis zeigt sich, dass das beste Ergebnis bei der Darstellung von Link-Vorschauen dann erzielt wird, wenn Open-Graph-Tags korrekt und vollständig implementiert sind. So gut wie alle großen sozialen Netzwerke unterstützen sie, darunter Facebook, Instagram, LinkedIn, Telegram, WhatsApp und viele Messenger-Apps.
Twitter verlangt zusätzlich eigene Twitter Cards, um das volle Spektrum seiner Vorschauoptionen realisieren zu können. Programme wie Slack, Discord oder Reddit greifen neben Open Graph weiterhin auf oEmbed zurück, um erweiterte Inhalte darzustellen. Andere weniger bekannte Plattformen oder Nischen-Messenger wie Signal oder Viber unterstützen meist nur sehr basale Meta-Tags und setzen oftmals auf die Standard-Meta-Beschreibung und das Title-Tag. Die Folge: Eine ansprechende Vorschau mit Bild und Text ist eingeschränkt oder gar nicht möglich. Dennoch lohnt es sich, gerade für diese Fälle zumindest Open-Graph-Tags anzubieten, da sie breit kompatibel sind.
Ein typisches Beispiel für eine minimal notwendige Implementierung, die auf nahezu allen Plattformen funktioniert, umfasst das Title-Tag zur Überschrift, die Meta-Beschreibung für den Text und die Open-Graph-Tags für URL, Typ, Titel, Beschreibung und Bild. Dies wiegt in der Größe zwar ein wenig mehr auf der Webseite, stellt jedoch sicher, die beste Nutzererfahrung beim Teilen von Links zu bieten. Ein standardisiertes Set sieht wie folgt aus: og:title, og:description, og:url, og:type und og:image. Diese Tags steuern, wie der Link auf Facebook, LinkedIn, Telegram und den meisten anderen Netzwerken dargestellt wird. Wer darauf Wert legt, auch auf Twitter eine ansprechende Vorschau zu erzeugen, muss zusätzliche Twitter-Card-Tags hinzufügen.
Für eine große Bildvorschau ist der Kartentyp „summary_large_image“ zu empfehlen, dazu kommen Tags wie twitter:title, twitter:description, twitter:url und twitter:image. Es gibt zahlreiche praktische Tools und Testangebote im Web, mit denen man prüfen kann, wie eine Webseite auf den verschiedenen Plattformen ausgespielt wird. Facebook bietet da beispielsweise den Sharing Debugger an, Twitter die Card Validator, Slack hat einen eigenen Link Preview Tester. Diese Tools helfen, Fehler in der Meta-Deklaration zu erkennen und Vorschauen vor der Veröffentlichung zu prüfen. Die Frage, warum nicht alle sozialen Medien stattdessen einfach nur Schema.
org-Microdata oder oEmbed verwenden, lässt sich auch aus Sicht des Webdesigns und der Performance erklären. Open Graph und Twitter Cards sind schlank, direkt in das HTML eingebunden und benötigen keinen zusätzlichen Serveraufruf wie bei oEmbed. Schema.org alleine gibt keinen so klaren visuellen Rahmen vor, wie eine LinkedIn- oder Facebook-Vorschau auszusehen hat, weshalb diese Microdata eher für bessere Suchmaschinenindizes als für Social Previews genutzt werden. Außerdem sind proprietäre Formate oft genauer auf die jeweiligen Plattform-Funktionen abgestimmt und bieten eine bessere Kontrolle.
Viele Webseitenbetreiber sind jedoch kritisch gegenüber Facebook- und Twitter-spezifischen Meta-Tags, da sie befürchten, dass diese tags den HTML-Code unnötig „verunreinigen“ und Datenschutzbedenken aufkommen. Dennoch bleibt festzuhalten, dass ohne diese Tags oft nur eine sehr rudimentäre und unattraktive Linkvorschau entsteht, was wiederum die Klickrate und Verbreitung negativ beeinflussen kann. Für diejenigen, die möglichst wenig proprietäre Tags verwenden möchten, gibt es Kompromisslösungen. Eine Kombination aus Meta-Beschreibung, Schema.org-Microdata und oEmbed-Links sorgt für relativ gute Vorschauen auf vielen Plattformen ohne Open Graph oder Twitter Cards.
Diese Lösung erfordert jedoch eine sorgfältige Prüfung, da nicht alle Plattformen darauf in vollem Umfang reagieren. Vor allem Bilder werden dann oft nicht angezeigt. Zusammenfassend lässt sich festhalten: Open Graph ist der dominierende Standard für Link-Vorschauen in sozialen Medien. Wer seine Webseite für optimale Social-Media-Präsenz und ansprechende Link-Vorschauen vorbereiten will, sollte Open-Graph-Meta-Tags unbedingt verwenden. Twitter benötigt darüber hinaus eigene Twitter-Cards.
Zusätzliche Formate wie Schema.org und oEmbed können ergänzend verwendet werden, sind aber nicht als Ersatz für Facebooks Open Graph zu verstehen. Eine durchdachte Umsetzung der Meta-Tags erhöht die Sichtbarkeit und das Engagement in sozialen Netzwerken signifikant. Gerade beim Teilen in Facebook, LinkedIn, Telegram, WhatsApp oder Twitter entscheiden gut gepflegte Link-Vorschauen über den ersten Eindruck. Obwohl es technisch möglich ist, auf Meta-Tags zu verzichten oder nur auf Basis der Meta-Beschreibung zu arbeiten, empfehlen Experten die Implementierung der wichtigsten Open-Graph-Tags sowie Twitter Cards, um breite Kompatibilität und attraktive Vorschauen zu gewährleisten.
Abschließend ist zu betonen, dass regelmäßige Tests und Updates notwendig sind, da Facebook, Twitter und weitere Plattformen ihre Algorithmen und Vorschauformate ständig weiterentwickeln. Wer sich up to date hält und seine Webseite entsprechend anpasst, hat langfristig bessere Chancen, die Reichweite maximal zu steigern und die Nutzererfahrung auf allen Kanälen optimal zu gestalten.
