Du teilst einen Link auf X (Twitter) und bekommst eine kleine Textkarte mit grauem Platzhalter statt großer Bildvorschau. X braucht Twitter-Card-Tags und eine erreichbare Bilddatei. Fehlendes twitter:card, falscher Card-Typ oder kaputte twitter:image-URL sind die üblichen Ursachen.
Kurzantwort
twitter:card auf summary_large_image setzen, twitter:image mit absoluter HTTPS-URL ergänzen und passendes og:image als Fallback. Unter cards-dev.twitter.com/validator prüfen, dann auf Xs Cache-Update warten. Scheitert das Bild weiterhin: Dateigröße, Abmessungen und ob der Server Xs Crawler blockiert.
Wie X das Karten-Layout wählt
X unterstützt mehrere Card-Typen. Die Bildgröße steuert twitter:card:
| Card-Typ | Ergebnis |
|---|---|
summary_large_image | Großes Bild oben, Text darunter (Standard für die meisten Sites) |
summary | Kleines Quadrat links |
player | Video/Audio-Embed |
app | App-Download-Karte |
Fehlt twitter:card, nutzt X summary (kleines Thumbnail). Lädt das Bild nicht, bleibt eine Textkarte mit Platzhalter-Icon.
Pflicht-Tags für große Bildkarte:
<meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Dein Seitentitel"><meta name="twitter:description" content="Kurze Beschreibung."><meta name="twitter:image" content="https://beispiel.de/og.jpg">Open-Graph-Tags mit einbinden. X greift auf og:image zurück, wenn Twitter-Tags unvollständig sind. Details: Open Graph vs. Twitter Card.
Schritt 1: Tags im Server-HTML bestätigen
Xs Crawler (Twitterbot) liest die erste HTML-Antwort. Kein JavaScript.
- Seitenquelltext anzeigen.
- Nach
twitter:cardundtwitter:imagesuchen. twitter:cardmusssummary_large_imagesein, nichtsummary.
Tags nur in DevTools nach Page Load? Dann serverseitig ausliefern (SSR, generateMetadata in Next.js oder statisches HTML).
Schritt 2: Bild-URL testen
twitter:image (oder og:image) im Browser öffnen:
- HTTP 200
- HTTPS
- Kein Login nötig
- Kein Redirect auf HTML-Seite
- Empfohlen: 1200 × 630 px, unter 5 MB
Dynamische OG-Image-Routen (z. B. /opengraph-image) können scheitern bei Timeout, HTML-Fehlern oder Bot-Block. Statisches .jpg oder .png auf dem CDN ist zuverlässiger.
Schritt 3: X-Cache validieren und aktualisieren
- cards-dev.twitter.com/validator öffnen.
- URL einfügen und Preview card klicken.
- Warnungen und Fehler prüfen.
- Nach Fixes erneut previewen.
X cached Karten-Daten aggressiv. Eine Validierung aktualisiert Live-Tweets nicht immer sofort. 15-30 Minuten einplanen, dann neuen Tweet testen.
Anders als Facebook gibt es bei X keinen separaten „Erneut scrapen"-Button außer erneutem Validator-Lauf.
Warum kleine statt große Karte
twitter:card auf summary
Auf summary_large_image ändern. Häufigster Fix.
Bild zu klein
Unter 300 × 157 px rendert X oft kein Large Card. 1200 × 630 px nutzen.
Nur og:image, keine Twitter-Tags
Funktioniert meist, explizite twitter:card und twitter:image sind aber sicherer.
twitter:image weicht von og:image ab
Zeigt twitter:image auf kaputte URL, og:image aber funktioniert, kann X die kaputte nehmen. Beide auf dieselbe funktionierende URL setzen.
Dynamische Image-Route scheitert für Bots
Next.js opengraph-image.tsx kann für Crawler timeouten oder 404 liefern. Bild-URL direkt testen. Statisches Fallback erwägen.
Server-Probleme, die Twitterbot blockieren
robots.txt
Twitterbot erlauben:
User-agent: Twitterbot
Allow: /
Firewall / Bot-Schutz
Twitterbot in Cloudflare oder WAF whitelisten. Aggressive Bot-Challenges blockieren Bild-Abrufe.
SSL- oder Redirect-Probleme
Abgelaufene Zertifikate und lange Redirect-Ketten verursachen Fetch-Fehler. Tags auf finale HTTPS-URL zeigen.
X-Cache vs. kaputtes Bild
| Situation | Was du siehst | Fix |
|---|---|---|
| Nie ein Bild gezeigt | Platzhalter vom ersten fehlgeschlagenen Fetch | Tags und Bild-URL fixen, neu validieren |
| Bild war da, jetzt alt | Gecachte Karte vom alten Scrape | Neu validieren, warten, erneut tweeten |
| Große Karte wurde klein | twitter:card auf summary geändert | summary_large_image setzen |
| Validator OK, Tweet nicht | Cache-Verzögerung | 30 Min. warten, frische URL mit ?x=1 posten |
Allgemeine Fixes für fehlende Bilder: Fehlendes OG-Bild beheben.
Bild-Specs für X (2026)
| Eigenschaft | Wert |
|---|---|
| Empfohlene Größe | 1200 × 630 px (1.91:1) |
| Minimum für Large Card | 300 × 157 px |
| Formate | JPG, PNG, WEBP, GIF (kein animiertes GIF in Cards) |
| Max. Dateigröße | 5 MB |
| URL | Absolute HTTPS |
FAQ
Nutzt X Open Graph oder Twitter Card?
Beides. Twitter-Card-Tags haben Priorität. og:image ist Fallback.
Warum auf Facebook OK, auf X nicht?
Getrennte Crawler und Caches. Twitter-Tags separat fixen und auf X validieren.
Brauche ich twitter:site fürs Bild?
Nein. twitter:site verlinkt den Account, ist für Bildkarten nicht Pflicht.
Gleiches Bild für alle Plattformen?
Ja. 1200 × 630 JPG funktioniert für X, Facebook, LinkedIn und WhatsApp.
Warum wird mein Next.js opengraph-image nicht erkannt?
Die Route muss öffentlich erreichbar sein, Image-Content-Type liefern und innerhalb von Xs Timeout antworten. URL im Inkognito-Tab testen.
Löscht ein Tweet den Karten-Cache?
Nein. X cached pro URL. Query-String ändern oder nach Tag-Fix auf Cache-Ablauf warten.
Fazit
Fehlendes Bild auf X beginnt mit twitter:card = summary_large_image und funktionierender twitter:image-URL im Server-HTML. Im Card Validator prüfen, Bot-Zugriff und Bild-Specs fixen, frischen Tweet testen. Facebook-Fixes allein lösen X-spezifische Card-Probleme nicht.
