Open Graph Tags richtig einsetzen: So sehen deine Links auf Social Media perfekt aus

Du teilst einen Link auf Facebook, Twitter oder LinkedIn – und es wird nur eine langweilige URL angezeigt, ohne Bild und ohne Beschreibung? Das liegt an fehlenden Open Graph Tags. In diesem Artikel erfaehrst du, was Open Graph Tags sind, warum sie so wichtig fuer die Klickrate deiner geteilten Links sind und wie du sie richtig einsetzt.

Was sind Open Graph Tags?

Open Graph (kurz: OG) ist ein Protokoll, das urspruenglich von Facebook entwickelt wurde. Es ermoeglicht dir, genau zu steuern, wie deine Website dargestellt wird, wenn jemand einen Link auf Social Media teilt. Ohne Open Graph Tags entscheidet die Plattform selbst, welchen Titel, welche Beschreibung und welches Bild sie verwendet – mit oft enttaeuschenden Ergebnissen.

Open Graph Tags sind spezielle <meta>-Tags, die du in den <head>-Bereich deiner HTML-Seite einfuegst. Sie sehen so aus:

<meta property="og:title" content="Dein Seitentitel">
<meta property="og:description" content="Eine kurze Beschreibung">
<meta property="og:image" content="https://example.com/bild.jpg">
<meta property="og:url" content="https://example.com/seite">
<meta property="og:type" content="website">

Warum sind Open Graph Tags wichtig?

Die Klickrate auf geteilte Links haengt stark davon ab, wie attraktiv die Vorschau aussieht. Studien zeigen, dass Beitraege mit Bild bis zu 150 % mehr Engagement bekommen als Beitraege ohne. Open Graph Tags helfen dir bei drei Dingen:

Mehr Klicks: Ein ansprechendes Vorschaubild und ein guter Titel ziehen Aufmerksamkeit auf sich.
Mehr Kontrolle: Du bestimmst, was angezeigt wird – nicht der Algorithmus der Plattform.
Professioneller Auftritt: Links mit vollstaendiger Vorschau wirken serioser und vertrauenswuerdiger.

Die wichtigsten Open Graph Tags

og:title – Der Titel

Der Titel, der in der Vorschau angezeigt wird. Er sollte pragnant sein und neugierig machen. Optimal: 40-60 Zeichen. Zu lange Titel werden von Facebook und LinkedIn abgeschnitten.

og:description – Die Beschreibung

Eine kurze Zusammenfassung des Seiteninhalts. Facebook zeigt ca. 60 Zeichen in der Vorschau, Twitter und LinkedIn etwas mehr. Nutze diesen Platz, um den Leser zum Klicken zu animieren.

og:image – Das Vorschaubild

Das Bild ist das wichtigste Element fuer die Klickrate. Die empfohlene Groesse ist 1200 x 630 Pixel (Seitenverhaeltnis 1.91:1). Dieses Format funktioniert auf allen Plattformen gut. Achte darauf:

Verwende immer HTTPS fuer die Bild-URL
Die Dateigroesse sollte unter 5 MB liegen
Unterstuetzte Formate: JPG, PNG, GIF, WebP
Text im Bild sollte auch auf kleinen Vorschauen lesbar sein

og:url – Die kanonische URL

Die offizielle URL deiner Seite. Plattformen nutzen sie, um doppelte Shares zu erkennen und zusammenzufuehren. Gib immer die vollstaendige URL mit HTTPS an.

og:type – Der Inhaltstyp

Fuer die meisten Seiten verwendest du website. Fuer Blog-Artikel kannst du article nutzen – das ermoeglicht zusaetzliche Tags wie article:published_time und article:author.

Open Graph vs. Twitter Cards

Twitter nutzt ein eigenes System: Twitter Cards. Die gute Nachricht: Wenn Twitter keine eigenen Card-Tags findet, faellt es auf Open Graph Tags zurueck. Trotzdem lohnt es sich, zumindest den Card-Typ zu definieren:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Dein Titel">
<meta name="twitter:description" content="Deine Beschreibung">
<meta name="twitter:image" content="https://example.com/bild.jpg">

Der Typ summary_large_image zeigt ein grosses Bild und ist fuer die meisten Websites die beste Wahl.

Haeufige Fehler bei Open Graph Tags

Kein og:image: Der haeufigste Fehler. Ohne Bild werden Links auf Social Media kaum geklickt.
Falsches Bildformat: Zu kleine Bilder (unter 200x200px) werden von Facebook ignoriert. Zu grosse Bilder laden langsam.
HTTP statt HTTPS: Einige Plattformen blockieren Bilder von HTTP-URLs. Nutze immer HTTPS.
Gleiche Tags fuer alle Seiten: Jede Seite sollte individuelle Open Graph Tags haben – angepasst an den jeweiligen Inhalt.
Cache nicht beachten: Facebook cached Open Graph Daten. Nach Aenderungen musst du den Cache im Facebook Sharing Debugger manuell leeren.

Open Graph Tags testen – kostenlos

Bevor du deinen Link teilst, solltest du pruefen, wie er auf den verschiedenen Plattformen aussieht. Mit unserer kostenlosen Open Graph Vorschau siehst du sofort, wie dein Link auf Facebook, Twitter/X und LinkedIn dargestellt wird.

Das Tool bietet dir:

Live-Vorschau fuer alle drei grossen Plattformen
HTML-Parser: Fuege einfach deinen HTML-Code ein und die Tags werden automatisch erkannt
Validierung: Automatische Pruefung ob Titel, Beschreibung, URL und Bild korrekt gesetzt sind
Keine Anmeldung noetig – komplett kostenlos

Tipp: Nutze auch unseren Meta-Tag-Generator, um alle Meta-Tags inklusive Open Graph und Twitter Cards auf einmal zu erstellen.

Checkliste: Open Graph Tags richtig einsetzen

Setze mindestens og:title, og:description, og:image und og:url
Verwende ein Bild mit 1200 x 630 px und HTTPS-URL
Halte den Titel unter 60 Zeichen
Schreibe eine Beschreibung mit 50-200 Zeichen
Fuege zusaetzlich twitter:card mit summary_large_image hinzu
Teste die Vorschau mit unserem Open Graph Preview Tool
Pruefe jede einzelne Seite – nicht nur die Startseite
Leere den Facebook-Cache nach Aenderungen

Fazit

Open Graph Tags sind ein kleiner Aufwand mit grosser Wirkung. Sie kosten nichts, sind schnell eingebaut und sorgen dafuer, dass deine Links auf Social Media professionell aussehen und mehr geklickt werden. Wenn du eine vollstaendige SEO-Optimierung anstrebst, gehoeren Open Graph Tags genauso dazu wie eine schnelle Ladezeit und strukturierte Daten (Schema Markup).

Teste jetzt kostenlos, wie deine Seite auf Social Media aussieht – mit unserer Open Graph Vorschau.