Was Open Graph ist
Open Graph ist ein Protokoll, das Facebook 2010 eingeführt hat. Es legt fest, wie Websites Informationen für die Vorschau beim Teilen bereitstellen. Inzwischen nutzen es fast alle Plattformen und Messenger: LinkedIn, WhatsApp, Signal, Telegram, Slack, Microsoft Teams, Pinterest, Discord und viele mehr.
Die Angaben stehen als Meta-Tags im Kopfbereich der Seite:
<meta property="og:title" content="Dachsanierung: Kosten, Ablauf & Förderung">
<meta property="og:description" content="Was eine Dachsanierung kostet und wie Sie Fördermittel nutzen.">
<meta property="og:image" content="https://www.beispiel.de/bilder/dachsanierung-og.jpg">
<meta property="og:url" content="https://www.beispiel.de/ratgeber/dachsanierung">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Dachdeckerei Müller">
<meta property="og:locale" content="de_DE">
Die wichtigsten Tags
| Tag | Inhalt | Hinweis |
|---|---|---|
| og:title | Titel der Vorschau | darf vom Title-Tag abweichen, etwa ohne Markenname und emotionaler |
| og:description | kurze Beschreibung | etwa 1–2 Sätze |
| og:image | Vorschaubild | absolute URL, ausreichend groß |
| og:url | kanonische URL der Seite | sollte dem Canonical entsprechen |
| og:type | Art des Inhalts | meist website oder article |
| og:site_name | Name der Website | Marke |
| og:locale | Sprache und Region | de_DE für Deutschland |
Für Artikel gibt es ergänzende Angaben wie article:published_time, article:modified_time und article:author.
Das Vorschaubild
Das Bild ist das auffälligste Element der Vorschau und entscheidet oft über den Klick.
| Eigenschaft | Empfehlung |
|---|---|
| Größe | 1200 × 630 Pixel (Seitenverhältnis 1,91:1) |
| Mindestgröße | 600 × 315 Pixel für große Vorschauen |
| Format | JPG oder PNG, WebP wird nicht von allen Diensten unterstützt |
| Dateigröße | unter etwa 1 MB, für WhatsApp möglichst deutlich kleiner |
| Inhalt | aussagekräftig, auch klein erkennbar; wichtige Elemente mittig, da manche Dienste quadratisch zuschneiden |
| Text im Bild | sparsam, gut lesbar |
Ein einheitliches Vorschaubild für die ganze Website ist besser als gar keines. Noch besser sind individuelle Bilder für wichtige Seiten, etwa Ratgeber, Produkte oder Veranstaltungen.
X (Twitter) Cards
X, vormals Twitter, nutzt eigene Tags, fällt aber auf Open Graph zurück, wenn sie fehlen. Sinnvoll ist meist nur eine Angabe:
<meta name="twitter:card" content="summary_large_image">
Damit wird die große Bildvorschau aktiviert. Titel, Beschreibung und Bild übernimmt X aus den Open-Graph-Tags.
Was passiert ohne Open Graph?
Fehlen die Tags, versuchen die Dienste, die Vorschau selbst zu erzeugen: aus dem Title-Tag, der Meta Description und einem zufälligen Bild der Seite – manchmal dem Logo, manchmal einem Icon, manchmal gar keinem. Das Ergebnis ist oft unansehnlich und uneinheitlich.
Einfluss auf SEO
Open-Graph-Tags sind kein Rankingfaktor für Google. Sie wirken indirekt:
- Mehr Klicks auf geteilte Links bringen mehr Besucher und Bekanntheit.
- Ansprechende Vorschauen werden häufiger weitergeteilt, was zu Erwähnungen und gelegentlich zu Links führt.
- Einheitliches Erscheinungsbild stärkt die Marke.
Für die Präsenz in KI-Systemen und für Markenwahrnehmung sind geteilte Inhalte ebenfalls ein Baustein, weil sie die Verbreitung der Marke fördern.
Vorschauen testen
| Werkzeug | Plattform |
|---|---|
| Sharing Debugger von Meta | Facebook, Instagram, WhatsApp (teilweise) |
| Post Inspector von LinkedIn | |
| Vorschau-Tools von Drittanbietern | mehrere Plattformen gleichzeitig |
Die Dienste speichern Vorschauen zwischen. Wenn Sie ein Bild oder einen Titel ändern, zeigen sie oft noch die alte Version. Die Debugger von Meta und LinkedIn bieten eine Funktion, um die Vorschau neu abzurufen. Bei WhatsApp hilft es manchmal, einen Parameter an die URL anzuhängen, um eine neue Abfrage zu erzwingen.
Umsetzung im CMS
- WordPress: SEO-Plugins wie Yoast, Rank Math oder SEOPress erzeugen Open-Graph-Tags automatisch und erlauben individuelle Angaben pro Seite.
- Shopify: Viele Themes geben Open-Graph-Tags aus, das Standardbild lässt sich in den Einstellungen festlegen.
- Individuelle Systeme: Die Tags werden im Template aus den vorhandenen Seitendaten erzeugt.
Achten Sie darauf, dass Tags nicht doppelt ausgegeben werden, etwa durch Theme und Plugin gleichzeitig. Widersprüchliche Angaben führen zu unvorhersehbaren Vorschauen.
Checkliste
- og:title, og:description, og:image und og:url auf allen wichtigen Seiten
- Vorschaubild in 1200 × 630 Pixeln, auch klein gut erkennbar
- og:url entspricht der kanonischen URL
- twitter:card mit
summary_large_image - Keine doppelten Tags durch Theme und Plugin
- Vorschau mit den Debuggern von Meta und LinkedIn geprüft
Gut zu wissen
Muss ich für jede Seite ein eigenes Vorschaubild erstellen?
Nicht zwingend. Ein gut gestaltetes Standardbild genügt für viele Seiten. Für häufig geteilte Inhalte wie Ratgeber, Produkte oder Veranstaltungen lohnen sich individuelle Bilder.
Warum zeigt WhatsApp kein Bild an?
Häufige Ursachen sind zu große Bilddateien, ein fehlendes oder relatives og:image, ein Bild hinter einem Login oder eine zwischengespeicherte alte Vorschau.
Beeinflusst Open Graph, wie Google meine Seite anzeigt?
Nein, Google nutzt für die Suchergebnisse eigene Quellen wie Title-Tag und Meta Description. Open Graph betrifft die Vorschau in sozialen Netzwerken und Messengern.