Open Graph ist ein Protokoll, das bestimmt, wie eine Website aussieht, wenn sie in sozialen Netzwerken, Messenger-Apps oder Chat-Programmen geteilt wird. Über spezielle Meta-Tags im HTML-Head definieren Webentwickler Titel, Beschreibung und Vorschaubild der Linkvorschau.
Wie Open Graph funktioniert
Wenn ein Link auf Facebook, LinkedIn, WhatsApp oder Slack geteilt wird, ruft die Plattform die Website auf und liest die Open Graph Meta-Tags aus. Diese Tags bestimmen, wie die Vorschau aussieht:
- og:title: Der Titel in der Linkvorschau
- og:description: Eine kurze Beschreibung (max. 200 Zeichen)
- og:image: Das Vorschaubild (1200x630px empfohlen)
- og:url: Die kanonische URL der Seite
- og:type: Art des Inhalts (website, article, product)
- og:site_name: Name der Website
Warum Open Graph wichtig ist
Klickraten steigern
Ansprechende Linkvorschauen mit einem aussagekräftigen Bild erzielen deutlich höhere Klickraten als Links ohne oder mit fehlerhafter Vorschau. Ein professionelles OG-Image kann die Klickrate um 30-50% steigern.
Markenkonsistenz
Jede geteilte Seite wird zur Visitenkarte. Konsistente OG-Images mit Markenfarben, Logo und einem einheitlichen Layout stärken die Markenwahrnehmung über alle Plattformen.
SEO-Unterstützung
Google nutzt OG-Tags teilweise für die Darstellung in den Suchergebnissen. Ein optimiertes OG-Image kann als Thumbnail in den SERPs erscheinen.
Twitter Cards
Twitter nutzt ein eigenes Metadaten-System: Twitter Cards. Die wichtigsten Tags sind twitter:card (summary, summary_large_image), twitter:title, twitter:description und twitter:image. Sind keine Twitter-Tags vorhanden, greift Twitter auf Open Graph Tags zurück.
OG-Images erstellen
Statische OG-Images
Ein fest designtes Bild pro Seite. Für die Startseite und wichtige Landingpages die beste Wahl. Erstellt in Figma mit Markenfarben und Logo.
Dynamische OG-Images
Automatisch generierte Bilder, die Seitentitel und Kategorie enthalten. Next.js bietet mit ImageResponse eine Methode, OG-Images zur Build-Zeit oder on-demand zu generieren.
Open Graph in Next.js
Die Metadata-API von Next.js macht Open Graph einfach: Im Page-Export werden openGraph-Objekte mit Titel, Beschreibung und Bild definiert. Next.js generiert die korrekten Meta-Tags automatisch.
Open Graph debuggen
Facebook bietet den Sharing Debugger, Twitter den Card Validator und LinkedIn den Post Inspector. Diese Tools zeigen, wie die Linkvorschau aussehen wird, und cachen das Ergebnis neu.
Für professionelles Webdesign ist Open Graph kein optionales Feature, sondern ein wesentlicher Bestandteil der digitalen Außenwirkung – jeder geteilte Link ist eine Marketingchance.