Zum Hauptinhalt springen
← Blog

Open Graph vs. Twitter-Card-Tags

Wann og:-Tags vs. twitter:-Tags sinnvoll sind, wie sie sich unterscheiden und das Minimum-Setup für X und alle anderen Plattformen.

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

| Aspekt | Open Graph | Twitter Cards | |--------|-----------|---------------| | Attribut | property | name | | Bildtypen | Ein großes Standardbild | summary, summary_large_image, player | | Fallback | — | Greift auf og:* zurück | | Hauptnutzer | Facebook, LinkedIn, Slack… | X (Twitter) |

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.