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?
Moderne Feeds bewerten stark, wie Nutzer mit Inhalten interagieren. Eine klare, visuell überzeugende Vorschau steigert die Klickrate und damit indirekt Reichweite und Sichtbarkeit. In Messenger-Apps wie WhatsApp, Telegram oder Signal wirkt eine vollständige Vorschau professionell und erhöht die Wahrscheinlichkeit eines Klicks. Auch dezentrale Plattformen wie BlueSky nutzen OG-Tags als Grundlage für ihre Link-Darstellung.
Ohne definierte OG-Tags greifen Plattformen auf Zufallswerte zurück: den <title>-Tag, die Meta-Description oder das erste große Bild im Content. Das Ergebnis ist häufig unattraktiv oder abgeschnitten.
Wie SISTRIX bei der Onpage-Optimierung hilft
Open Graph ist eine Schicht von vielen. Ob Title Tags, Meta Descriptions oder strukturierte Daten: Technische Metadaten entfalten ihre Wirkung nur, wenn sie vollständig und fehlerfrei gesetzt sind. Mit dem Onpage-Tool von SISTRIX kannst du deine gesamte Domain auf genau diese Lücken prüfen.
Du siehst auf Seitenebene, welche Meta-Tags fehlen, welche Titel zu lang oder zu kurz sind und wo Bilder ohne Alt-Text ausgeliefert werden. So findest du systematisch, was einer guten Vorschau im Weg steht, ohne jede URL einzeln prüfen zu müssen.
Teste SISTRIX 14 Tage kostenlos und prüfe, wo deine Seiten technisches Potenzial lassen.
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.
Du kannst og:image außerdem mehrfach angeben. Plattformen wählen dann das passendste Bild aus.
Spezielle Tags für Artikel
Wenn og:type=“article“ gesetzt ist, kannst du zusätzlich article:published_time, article:modified_time, article:author und article:tag definieren. Das erhöht die semantische Klarheit deiner Inhalte.
So setzt du Open Graph um
Methode A: Manueller Einbau im HTML
Die Tags gehören in den <head>-Bereich deines Dokuments. Mehr zu HTML Meta Tags und ihrer SEO-Relevanz findest du im Frag-SISTRIX-Handbuch.
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. Mit dem Meta Sharing Debugger oder dem LinkedIn Post Inspector lässt sich die URL erneut scrapen und der Cache leeren.
2. Falsches Bildformat: Quadratische oder zu kleine Bilder erscheinen nur als Miniatur. Empfohlen sind 1200 × 630 Pixel, Mindestgröße bei Meta 600 × 315 Pixel.
3. Relative oder unsichere URLs: Bilder ohne https:// oder mit relativen Pfaden werden oft ignoriert. 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.
WordPress: Rank Math SEO und Yoast SEO 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 zusätzlich eine realistische Vorschau für verschiedene Plattformen, bevor du veröffentlichst.
Dynamic OG Images: Wer viele Beiträge veröffentlicht, sollte Vorschaubilder nicht mehr manuell erstellen. Placid.app verbindet sich mit Webflow, Shopify oder per API und fügt den Blog-Titel automatisch in ein Design-Template ein. Bannerbear erzeugt auf Basis eines Templates individuelle Social-Media-Bilder für jede neue Seite. Krumzi ist ein AI-First-Dienst, der per Chat-Befehl Social-Grafiken generiert. Wie gut das funktioniert, muss jeder selbst beurteilen.
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.
Headless & Static Sites: Bei Frameworks wie Next.js oder Astro ist @vercel/og beliebt. Die Bibliothek wandelt HTML und CSS in Echtzeit in Bilder um und eignet sich gut für datengetriebene Anwendungen mit automatisierten OG-Bildern.
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
