Was ist Open Graph?
Open Graph ist ein von Facebook entwickeltes Protokoll, mit dem Webseiten über Meta-Tags festlegen, mit welchem Titel, welcher Beschreibung und welchem Bild ein geteilter Link in sozialen Netzwerken und Messengern wie WhatsApp als Vorschau erscheint.
Open Graph: Definition und Bedeutung
Wenn Sie einen Link in WhatsApp, LinkedIn, Facebook oder Slack einfügen, erscheint meist eine Vorschaukarte mit Bild, Titel und Beschreibung. Diese Daten holen sich die Dienste aus den Open-Graph-Tags im Kopf der Seite. Facebook hat das Protokoll 2010 eingeführt, heute lesen es nahezu alle Plattformen und Messenger.
Ohne Open Graph raten die Dienste: Sie nehmen irgendein Bild der Seite, kürzen den Titel unglücklich oder zeigen gar keine Vorschau. Für Unternehmen ist das ein Imageproblem, denn Links werden oft von Dritten weitergeschickt, von Kunden, Partnern und Mitarbeitern, und der erste Eindruck entsteht schon in der Chatvorschau.
Die wichtigsten Open-Graph-Tags
Open-Graph-Angaben stehen als Meta-Elemente mit dem Präfix og: im Kopfbereich der Seite. Vier Tags gelten als Standard, weitere wie og:site_name oder og:locale ergänzen sie. X (ehemals Twitter) nutzt zusätzlich eigene Twitter-Card-Tags, greift ersatzweise aber auf Open Graph zurück.
- og:title – Titel der Vorschau
- og:description – kurze Beschreibung in ein bis zwei Sätzen
- og:image – Vorschaubild, üblich sind 1200 × 630 Pixel (etwa 1,91:1)
- og:url – bevorzugte Adresse der Seite
- og:type – Art des Inhalts, zum Beispiel website oder article
Praxisbeispiel: Dachdeckerbetrieb
Ein Dachdeckerbetrieb verschickt Angebote und Referenzseiten per WhatsApp. Die Vorschau zeigt bisher ein zufälliges Foto und den Text „Startseite“. Nach der Ergänzung der Open-Graph-Tags erscheint ein Referenzbild mit Firmenlogo, ein klarer Titel und ein Satz zum Leistungsumfang. Die Links wirken vertrauenswürdiger.
WhatsApp, Facebook und LinkedIn speichern Vorschauen zwischen. Bei Facebook und LinkedIn lässt sich der Stand mit dem Sharing Debugger bzw. dem Post Inspector aktualisieren, bei WhatsApp kann es etwas dauern, bis die neue Vorschau erscheint. Planen Sie diese Wartezeit bei Änderungen ein.
Vorteile, Grenzen und typische Fehler
Open Graph beeinflusst das Google-Ranking nicht, sorgt aber dafür, dass geteilte Links professionell aussehen. Das erhöht die Chance, dass sie angeklickt werden und Empfänger sofort erkennen, von wem der Link stammt. Gerade bei Angeboten, Stellenanzeigen oder Referenzen, die per Chat verschickt werden, zahlt sich das aus. Typische Stolpersteine:
- Bild fehlt, ist zu klein oder hat das falsche Format
- Relative statt vollständiger Bild-Adresse
- Dieselben Angaben auf allen Unterseiten
- Vorschaubild ohne Logo oder mit Text, der in kleinen Kacheln unlesbar ist
- Bild nicht abrufbar, etwa hinter einem Login
Umsetzung
Nano Concepts baut vollständige Meta- und Social-Sharing-Tags in jedes Webprojekt ein, inklusive eines Beitragsbildes mit Firmenlogo, damit verschickte Links in WhatsApp, LinkedIn und Co. sauber aussehen. Bei Shops und Magazinen lassen sich Titel und Bild pro Seite automatisch aus den Inhalten erzeugen.
Häufige Fragen zu Open Graph (Social-Sharing-Vorschau)
Üblich und von Facebook empfohlen sind 1200 × 630 Pixel, also etwa 1,91:1. Das Bild sollte unter einer vollständigen Adresse abrufbar sein und eine moderate Dateigröße haben. Das Logo gehört in die Mitte, weil die Vorschauen unterschiedlich zugeschnitten werden.
Häufige Ursachen sind fehlende oder fehlerhafte og-Tags, ein zu großes oder nicht abrufbares Bild und ein zwischengespeicherter alter Stand. Prüfen Sie den Quelltext und die Erreichbarkeit der Bild-Adresse und warten Sie nach Änderungen etwas, bis die Vorschau aktualisiert wird.
Nicht unbedingt. X greift auf Open-Graph-Tags zurück, wenn keine Twitter-Card-Tags vorhanden sind. Für eine große Bildkarte sollten Sie jedoch twitter:card auf summary_large_image setzen, sonst erscheint nur eine kleine Vorschau.
Passende Leistungen
Webdesign
Websites, die Ihre Marke klar zeigen und Besucher gezielt zur Anfrage führen – gestaltet mit LOMA DESIGN.
Mehr erfahren
Webentwicklung
Websites mit echter Funktion: Rechner, Formulare, Kundenbereiche und Schnittstellen – sauber programmiert und schnell.
Mehr erfahren
SEO-Technik & Relaunch
Relaunch und technisches SEO mit Weiterleitungsplan, Ladezeit-Optimierung und Monitoring – gemeinsam mit LOMA DESIGN.
Mehr erfahrenVerwandte Begriffe
Relevant für diese Branchen
Passende Magazin-Beiträge
SEO und Suchmaschinen-Sichtbarkeit: Technik, Inhalte, KI-Suche
Gute Rankings entstehen aus Technik, Inhalten und konsequenter Auswertung – und zunehmend aus der Frage, ob auch KI-Suchen Ihre Seiten als Quelle nutzen. So wird Ihre Website sichtbar und bringt qualifizierte Anfragen.
Weiterlesen
Website-Relaunch ohne Rankingverlust: Leitfaden und Checkliste
Neues Design, neues System – und plötzlich bleiben Besucher aus? So sichern Sie Rankings und Anfragen beim Website-Relaunch: mit Redirect-Plan, Technik-Check, Go-live-Checkliste und Monitoring.
Weiterlesen
Conversion-Optimierung für Landingpages: testen statt raten
Die Kampagne läuft, aber kaum jemand fragt an? Mit klarem Aufbau, kurzen Formularen, schneller Technik und Tests auf Basis von Hypothesen machen Sie aus vorhandenem Traffic mehr Anfragen.
Weiterlesen
