Open Graph vs Twitter Card: Was ist der Unterschied?
Sie sind sich nicht sicher, welche Tags Ihre Seite hat?
Überprüfen Sie Ihre Open Graph-Tags kostenlos mit Proovd – fügen Sie eine URL ein und sehen Sie genau, wie sie auf X, LinkedIn, Slack, Discord, WhatsApp und Reddit aussieht.
Schnelle Antwort
- Open Graph (og:) wurde 2010 von Facebook erstellt
- Twitter Cards (twitter:card) wurden von Twitter separat erstellt
- Die meisten Plattformen unterstützen beide, aber X/Twitter bevorzugt twitter:card
- Stellen Sie beide für maximale Kompatibilität ein
Open Graph – Der Facebook-Standard
Open Graph wurde 2010 von Facebook eingeführt. Vor den OG-Tags wählte die Plattform, wenn jemand einen Link auf Facebook teilte, zufällig ein Bild und einen Text von der Seite aus. Das Ergebnis war unvorhersehbar und oft unattraktiv.
Facebook sagte: „Geben wir Webmastern eine Standardmethode zur Steuerung ihrer Linkvorschauen.“ Sie haben eine Reihe von Meta-Tags erstellt, die jede Website hinzufügen kann:
<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />Andere Plattformen haben den Open Graph-Standard übernommen. LinkedIn, Discord, Slack, WhatsApp und Reddit lesen alle og: Tags zum Rendern von Linkvorschauen.
Twitter Cards – Der Twitter-Standard
Twitter hat ein eigenes System namens „Twitter Cards“ erstellt, bevor Open Graph weit verbreitet war. Twitter Cards Verwenden Sie eine andere Attributbenennungskonvention:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />Twitter Cards haben zwei Haupttypen:
- Zusammenfassung – Kleine Miniaturansicht auf der rechten Seite des Tweets
- summary_large_image – Großes Bild, das den größten Teil der Karte einnimmt (empfohlen)
Plattformkompatibilität
Hier sehen Sie, welche Plattformen welche Tags verwenden:
| Platform | Primary Tags | Fallback |
|---|---|---|
| X / Twitter | twitter:card | og: tags |
| og: tags | twitter:card tags | |
| Discord | og: tags | twitter:card tags |
| Slack | og: tags | twitter:card tags |
| og: tags | twitter:card tags | |
| og: tags | twitter:card tags |
Warum Sie beides einstellen sollten
Auch wenn die meisten Plattformen beide Tag-Typen unterstützen, gibt es gute Gründe, beide festzulegen:
- X/Twitter bevorzugt twitter:card Tags. X kann zwar auf OG-Tags zurückgreifen, diese werden jedoch möglicherweise nicht korrekt dargestellt. Wenn Sie beides festlegen, wird sichergestellt, dass X den richtigen Kartentyp anzeigt.
- Zukunftssicher. Wenn eine neue Plattform auf den Markt kommt und einen Standard dem anderen vorzieht, stellt die Kompatibilität beider sicher.
- Konsistenz. Wenn Sie beides verwenden, wird sichergestellt, dass Ihre Vorschau korrekt aussieht, unabhängig davon, welche Plattform welche Tags liest.
Das komplette Setup
Hier ist die empfohlene Einrichtung für jede Seite:
<!-- Open Graph (LinkedIn, Discord, Slack, WhatsApp, Reddit) -->
<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />
<!-- Twitter/X (X/Twitter) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />Quick-Fix-Checkliste
- Legen Sie alle vier und folgenden Tags fest (Titel, Beschreibung, Bild, URL).
- twitter:card mit Wert „summary_large_image“ setzen
- Stellen Sie twitter:title und twitter:image ein
- Verwenden Sie für og:image und twitter:image dieselbe Bild-URL.
- Testen Sie mit Proovd, um dies auf allen Plattformen zu überprüfen
Häufig gestellte Fragen
Kann ich nur OG-Tags verwenden und Twitter Cards überspringen?
Sie können, aber X/Twitter stellt Ihre Karte möglicherweise nicht korrekt dar. Stellen Sie immer beides ein, um auf allen Plattformen die besten Ergebnisse zu erzielen.
Benötige ich unterschiedliche Bilder für OG und Twitter Card?
Nein. Verwenden Sie für og:image und twitter:image dieselbe Bild-URL. Die Plattformen verwenden das von ihnen bevorzugte Tag.
Verwandte Artikel
Überprüfen Sie sowohl OG- als auch Twitter Card-Tags
Überprüfen Sie Ihre Open Graph-Tags kostenlos mit Proovd – fügen Sie eine URL ein und sehen Sie sich die Vorschau auf X, LinkedIn, Slack, Discord, WhatsApp und Reddit an.