Es reicht heute nicht mehr nur, gute Inhalte für Suchmaschinen zu produzieren. Ein Großteil des Traffics entsteht über soziale Netzwerke, Messenger wie WhatsApp oder Telegram und dezentrale Plattformen. Ob jemand auf deinen Link klickt oder weiterscrollt, entscheidet oft allein die Vorschau.
Das Open Graph Protokoll (OG) gibt dir die Kontrolle darüber, wie dein Inhalt beim Teilen aussieht.
Was ist Open Graph?
Open Graph ist ein 2010 von Facebook eingeführtes Protokoll zur Standardisierung von Metadaten für soziale Netzwerke. Es sorgt dafür, dass Webseiten als „rich objects“ dargestellt werden.
Plattformen wie Facebook, LinkedIn, X, Threads, BlueSky oder Messenger-Apps lesen diese Metadaten aus und erzeugen daraus eine sogenannte Link-Card mit Titel, Beschreibung und Bild.
Warum ist Open Graph so wichtig?
Algorithmische Feeds
Moderne Feeds bewerten stark, wie Nutzer mit Inhalten interagieren. Eine klare, visuell überzeugende Vorschau steigert die Klickrate und damit indirekt Reichweite und Sichtbarkeit.
Messenger-Vorschauen
Rich Previews in WhatsApp, Telegram oder Signal erzeugen Vertrauen. Eine vollständige Vorschau wirkt professionell und erhöht die Wahrscheinlichkeit eines Klicks.
Dezentrale Netzwerke
Plattformen wie BlueSky nutzen OG-Tags ebenfalls als Grundlage für ihre Link-Darstellung.
Was passiert ohne Open Graph?
Ohne definierte OG-Tags greifen Plattformen auf Zufallswerte zurück:
- <title>-Tag
- <meta name=“description“>
- Erstes großes Bild im Content
Das Ergebnis ist häufig unattraktiv oder abgeschnitten.
Die wichtigsten Open Graph Tags im Überblick
Mit den folgenden Elementen kannst du deine Vorschauen im Detail optimieren.
Die Core Tags (Pflicht)
og:title
Der Titel deines Beitrags.
Best Practice 2026: 40–60 Zeichen, präzise formuliert. Den Markennamen besser in og:site_name auslagern.
og:type
Die Art deines Inhalts.
Für Blogartikel meist article, für statische Seiten website.
og:image
Die URL zum Vorschaubild.
Empfohlen: 1200 × 630 Pixel (Seitenverhältnis 1.91:1).
Optimierte Dateigröße (z. B. unter 300 KB) für schnelles Laden.
og:url
Die kanonische URL der Seite – ohne Tracking-Parameter wie UTM-Tags.
Wichtig: Immer absolute HTTPS-URLs verwenden. Relative Pfade wie /images/bild.jpg funktionieren häufig nicht.
Erweiterte Tags für maximale Kontrolle
og:description
120–160 Zeichen. Soll Neugier wecken und den Mehrwert klar machen.
og:site_name
Name deiner Marke oder Website.
og:locale
Sprache des Inhalts, z. B. de_DE.
og:image:alt
Beschreibt das Bild für Screenreader und verbessert die Barrierefreiheit.
Ein direkter Rankingeffekt ist nicht offiziell bestätigt, aber barrierefreie Inhalte gelten als Qualitätsmerkmal.
og:image:width und og:image:height
Hilft Plattformen, das Layout schneller korrekt zu berechnen.
Mehrere Bilder definieren
Du kannst og:image mehrfach angeben. Plattformen wählen das passendste Bild aus.
Spezielle Tags für Artikel
Wenn og:type=“article“ gesetzt ist, kannst du zusätzlich definieren:
- article:published_time
- article:modified_time
- article:author
- article:tag
Das erhöht die semantische Klarheit deiner Inhalte.
Du willst wissen, wie du bei Google abschneidest? SISTRIX liefert die Antwort. Teste SISTRIX jetzt 14 Tage kostenlos.
So setzt du Open Graph um
Methode A: Manueller Einbau im HTML
Die Tags gehören in den <head>-Bereich deines Dokuments.
Achte unbedingt auf gerade Anführungszeichen („). Typografische Anführungszeichen („“) führen zu Fehlern.
<head>
<meta property=“og:title“ content=“Open Graph Guide 2026: Alles was du wissen musst“ />
<meta property=“og:description“ content=“Erfahre, wie du deine Website-Vorschauen für Facebook, LinkedIn und BlueSky optimierst.“ />
<meta property=“og:image“ content=“https://deineseite.de/images/og-vorschaubild.jpg“ />
<meta property=“og:image:width“ content=“1200″ />
<meta property=“og:image:height“ content=“630″ />
<meta property=“og:image:alt“ content=“Ein Smartphone zeigt eine optimierte Link-Vorschau in einem sozialen Netzwerk.“ />
<meta property=“og:url“ content=“https://deineseite.de/open-graph-guide/“ />
<meta property=“og:type“ content=“article“ />
<meta property=“og:site_name“ content=“Deine Brand“ />
<meta property=“article:published_time“ content=“2026-03-30T08:00:00+00:00″ />
<meta property=“article:modified_time“ content=“2026-04-01T10:15:00+00:00″ />
<meta property=“article:author“ content=“Max Mustermann“ />
<meta name=“twitter:card“ content=“summary_large_image“ />
<meta name=“twitter:title“ content=“Open Graph Guide 2026″ />
</head>
Hinweis: X (ehemals Twitter) nutzt eigene Twitter-Card-Tags. Für optimale Darstellung sollten diese ergänzt werden.
Methode B: CMS-Plugins
WordPress
Plugins wie Yoast SEO oder Rank Math bieten Social-Media-Vorschau-Bereiche pro Seite und Beitrag.
Shopify / Webflow
In den Seiteneinstellungen gibt es Felder für Social Sharing oder Open Graph.
Die 3 häufigsten Fehler
1. Veralteter Cache
Plattformen speichern Vorschauen zwischen.
Lösung: Mit dem Meta Sharing Debugger oder dem LinkedIn Post Inspector die URL erneut scrapen.
2. Falsches Bildformat
Quadratische oder zu kleine Bilder erscheinen nur als Miniatur.
Lösung: 1200 × 630 Pixel verwenden. Mindestgröße bei Meta: 600 × 315 Pixel.
3. Relative oder unsichere URLs
Bilder ohne https:// oder mit relativen Pfaden werden oft ignoriert.
Lösung: Immer absolute HTTPS-URLs verwenden.
Open Graph vs. Schema.org
Open Graph steuert die Darstellung in sozialen Netzwerken.
Schema.org (meist als JSON-LD implementiert) liefert strukturierte Daten für Suchmaschinen wie Google, z. B. für Rich Snippets.
Beide Standards ergänzen sich und sollten parallel genutzt werden.
Open Graph automatisieren
Manuelles Setzen von OG-Tags ist heute nur noch selten nötig. Je nach System kannst du Open Graph vollständig automatisieren, inklusive dynamischer Bildgenerierung.
1. WordPress: Die All-in-One-Lösung
In WordPress übernehmen moderne SEO-Plugins fast alles automatisch.
Rank Math SEO / Yoast SEO
Diese Plugins generieren OG-Tags automatisch aus deinen SEO-Einstellungen. Du kannst Standard-Vorschaubilder definieren und für einzelne Beiträge individuelle Social-Bilder festlegen.
Social Snap
Zeigt dir eine realistische Vorschau für verschiedene Plattformen, bevor du veröffentlichst.
2. Automatisierte Bild-Generierung (Dynamic OG Images)
Wer viele Beiträge veröffentlicht, sollte Vorschaubilder nicht mehr manuell erstellen. Heute setzen viele Websites auf automatisierte Lösungen.
Placid.app
Verbindet sich mit Webflow, Shopify oder per API. Der Blog-Titel wird automatisch in ein Design-Template eingefügt und als 1200×630 Bild generiert.
Bannerbear
Du erstellst ein Template, Bannerbear erzeugt automatisch individuelle Social-Media-Bilder für jede neue Seite.
Krumzi
Ein AI-First-Dienst, der per Chat-Befehl Social-Grafiken generiert, abgestimmt auf deine Markenfarben. Wie gut das funktioniert, muss jeder selbst beurteilen.
3. E-Commerce & Sitebuilder
Shopify
Unter Online Store > Preferences kannst du ein globales Social-Sharing-Bild definieren. Für Produkte wird automatisch das Hauptproduktbild als og:image verwendet.
Webflow
CMS-Felder wie Titel oder Beschreibung lassen sich direkt mit Open-Graph-Feldern verknüpfen. Neue Inhalte erhalten automatisch korrekte OG-Tags.
4. Für Entwickler: Headless & Static Sites
Bei Frameworks wie Next.js oder Astro sind dynamische Lösungen besonders beliebt.
@vercel/og
Eine Bibliothek, die HTML und CSS in Echtzeit in Bilder umwandelt für datengetriebene Anwendungen und automatisierte OG-Bilder.
Open Graph Checkliste 2026
- Core-Tags gesetzt (title, type, image, url)
- Bild im Format 1200 × 630 Pixel
- Absolute HTTPS-Bild-URL
- og:image:alt ergänzt
- Twitter-Card integriert
- Article-Tags bei Blogbeiträgen gesetzt
- Vorschau mit Debugger getestet
- Cache nach Änderungen geleert
SISTRIX kostenlos testen
- Kostenloser Testaccount für 14 Tage
- Unverbindlich, keine Kündigung notwendig
- Persönliches Onboarding durch Experten
