Was Open-Graph-Tags machen

Open-Graph-Tags legen fest, wie ein geteilter Link aussieht: Titel, Beschreibung und Bild. Messenger und soziale Netze bauen daraus die Vorschau.

So funktioniert es

Teilt jemand deinen Link in WhatsApp, Signal, LinkedIn, Facebook, Slack oder Teams, ruft die Plattform die Seite ab und baut eine Vorschaukarte. Woraus, steht in Meta-Tags nach dem Open-Graph-Protokoll im Kopf der Seite:

<meta property="og:title" content="Steuerberatung für Selbstständige">
<meta property="og:description" content="Kanzlei in Köln, Termine auch online.">
<meta property="og:image" content="https://www.beispiel.de/vorschau.jpg">

Fehlen die Tags, rät die Plattform: Sie nimmt den Seitentitel, irgendeinen Text und irgendein Bild, etwa ein Icon oder ein Bild aus dem Cookie-Banner. Oder sie zeigt nur die nackte Adresse. Eine gute Vorschau wird öfter geklickt.

bytereport prüft, ob og:title, og:description und og:image gesetzt sind.

Worauf es ankommt

  • Alle drei Angaben. Titel, Beschreibung und Bild gehören zusammen. Fehlt eines, ist die Vorschau unvollständig.
  • Bild mit mindestens 1200 × 630 Pixeln. Das ist das übliche Querformat für große Vorschaukarten. Kleinere Bilder zeigen manche Plattformen nur als kleines Vorschaubild oder gar nicht.
  • Absolute Adresse für das Bild. og:image braucht die volle URL mit https://. Ein relativer Pfad wie /vorschau.jpg wird nicht überall verstanden.
  • Bild erreichbar. Das Bild darf nicht hinter einem Login liegen oder in der robots.txt gesperrt sein.
  • Weitere Angaben. Das Protokoll sieht außerdem og:url (die maßgebliche Adresse) und og:type vor, für normale Seiten website. Viele Plattformen kommen ohne sie aus, sie schaden aber nicht.

So richtest du es ein

SEO-Plugins und viele CMS setzen die Tags selbst und übernehmen Titel und Beschreibung der Seite. Das Bild legst du meist pro Seite fest, oft als „Beitragsbild“ oder in einem Bereich „Social Media“; dazu gibt es in der Regel ein Standardbild für die ganze Website. Ohne CMS gehören die drei Zeilen in den <head>:

<meta property="og:title" content="…"> <meta property="og:description" content="…"> <meta property="og:image" content="https://…/preview.jpg">

Plattformen speichern Vorschauen zwischen. Nach einer Änderung kannst du sie mit dem Sharing Debugger von Facebook oder dem Post Inspector von LinkedIn neu laden lassen.

Mehr zu Vorschau und strukturierte Daten

Jetzt deine Website prüfen

Der SEO-Check zeigt, wie Suchmaschinen deine Seite sehen.

Website prüfen