Open Graph vs. Twitter-Card-Tags

Social Plattformen lesen zwei parallele Meta-Tag-Systeme: Open Graph (og:*) und Twitter Cards (twitter:*). Sie überlappen stark, sind aber nicht identisch — beide richtig zu setzen lohnt sich.

Open-Graph-Tags

Definiert mit property="og:...". Genutzt von Facebook, LinkedIn, Discord, WhatsApp, Slack, iMessage und vielen anderen. Das ist deine primäre Sharing-Schicht.

<meta property="og:title" content="Seitentitel">
<meta property="og:image" content="https://example.com/og.jpg">

Twitter-Card-Tags

Definiert mit name="twitter:...". Genutzt von X (ehemals Twitter). Fehlen Twitter-Tags, greift X auf Open Graph zurück — explizite Tags geben dir aber mehr Kontrolle.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Seitentitel">
<meta name="twitter:image" content="https://example.com/og.jpg">

Wichtige Unterschiede

Minimales Dual-Setup

Für die meisten Marketing-Seiten spiegelst du Open-Graph-Werte in Twitter-Tags:

<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="https://...">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="...">
<meta name="twitter:description" content="...">
<meta name="twitter:image" content="https://...">

Nutze immer summary_large_image, außer du willst bewusst eine kleine Karte.

Wann Werte abweichen sollten

• X-spezifische Crops — X schneidet manchmal anders zu. Nur auf X falsch? Eigenes twitter:image setzen.
• @site / @creator — twitter:site und twitter:creator für Attribution auf X.

Beide Schichten prüfen

OpenGraph Check zeigt Facebook-, LinkedIn-, X-, WhatsApp- und Discord-Vorschauen nebeneinander — Abweichungen zwischen OG und Twitter siehst du sofort.