html-einfach.de

SEO & KI · Technisches SEO

Open Graph & Social-Media-Vorschauen

Von Zuletzt geändert am

Wird ein Link geteilt – auf LinkedIn, in Mastodon, per WhatsApp –, baut die Plattform daraus eine Vorschaukarte mit Titel, Beschreibung und Bild. Woher diese Angaben stammen, bestimmst du selbst: über Open-Graph-Tags im <head>. Ohne sie rät die Plattform – oft mit unschönem Ergebnis.

Die wichtigsten Open-Graph-Tags

Das Open-Graph-Protokoll nutzt <meta>-Tags mit dem Präfix og::

<meta property="og:title" content="Open Graph & Social-Media-Vorschauen" />
<meta property="og:description" content="Wie geteilte Links als Vorschaukarte erscheinen." />
<meta property="og:image" content="https://example.de/og/seo-und-ki/open-graph-und-social.png" />
<meta property="og:url" content="https://example.de/seo-und-ki/open-graph-und-social.html" />
<meta property="og:type" content="article" />
  • og:title / og:description dürfen knackiger sein als Title und Meta-Description für die Suche – hier zählt der Klickreiz im Feed.
  • og:image ist das Herzstück: Eine gute Karte lebt vom Bild.
  • og:url sollte die kanonische Adresse sein.

Twitter/X Cards

X (früher Twitter) nutzt eigene Tags, fällt aber auf Open Graph zurück. Für ein großes Vorschaubild genügt meist:

<meta name="twitter:card" content="summary_large_image" />

Das Vorschaubild

  • Format 1200 × 630 px (Seitenverhältnis 1,91:1) ist der verlässliche Standard.
  • Text im Bild groß und kurz halten – es wird oft klein angezeigt.
  • Absolute URL verwenden, kein relativer Pfad.

Randnotiz – automatisch statt von Hand. Für jede Seite ein eigenes Bild zu gestalten, skaliert nicht. Diese Website erzeugt das OG-Bild beim Build automatisch aus demselben og:title, der auch im Markup steht – so können Bild und Seite gar nicht erst auseinanderlaufen, und jede neue Seite bekommt ihre Karte geschenkt.

Testen

Vor dem Teilen lohnt der Blick in die Debugger der Plattformen (etwa der Sharing-Debugger von Facebook/Meta oder der Post-Inspector von LinkedIn). Sie zeigen die Vorschau und decken fehlende oder falsche Tags auf. Praktischer Nebeneffekt: Die Dienste cachen Vorschauen – der Debugger erzwingt eine Aktualisierung.

Häufige Fehler

  • Kein og:image – die Karte wirkt leer und wird seltener geklickt.
  • Relative Bild-URL, die außerhalb der eigenen Seite nicht auflösbar ist.
  • Falsche Bildmaße, wodurch das Motiv beschnitten wird.
  • Veraltete Vorschau, weil der Cache der Plattform nicht erneuert wurde.
  • og:title für jede Seite gleich – dann sehen alle geteilten Links identisch aus.

Häufige Fragen

Sind Open-Graph-Tags ein Rankingfaktor?

Nein, direkt nicht. Sie wirken über die Klickrate auf Social Media – eine attraktive Karte bringt mehr Besuche, was indirekt hilft.

Brauche ich separate Twitter-Tags?

Meist reicht Open Graph plus twitter:card. X nutzt die OG-Angaben als Rückfall, du musst sie nicht doppelt pflegen.

Was, wenn ich kein eigenes Bild habe?

Dann zeigt die Plattform irgendein Bild der Seite oder gar keins. Ein definiertes, passendes og:image ist fast immer besser – idealerweise automatisch erzeugt.

Fazit

Open-Graph-Tags bestimmen, wie deine Links in sozialen Netzen aussehen: og:title, og:description, ein gutes og:image (1200 × 630) und die kanonische og:url. Ein pro Seite automatisch erzeugtes Bild hält das mühelos konsistent. So wird aus einem geteilten Link eine einladende Karte – die Ergänzung zu Title & Meta-Description und Bild-SEO.