2026-03-28

Checkliste für Bildgröße und Vorschau der Twitter-Karte

Wählen Sie die richtige Twitter-Kartenbildgröße, Metadaten, WebP-Export und Fehlerbehebungsprüfungen aus, damit geteilte Links auf X und anderen sozialen Feeds sauber dargestellt werden.

Checkliste für Bildgröße und Vorschau der Twitter-Karte

Letzte Aktualisierung: 28. Juni 2026

Ein Twitter-Kartenbild ist das Vorschaubild, das angezeigt wird, wenn jemand eine URL auf

Dieser Leitfaden bietet Ihnen eine praktische Veröffentlichungs-Checkliste: Abmessungen, Tags, Dateiformat, CDN-Prüfungen und Korrekturen für Karten, die sich nicht aktualisieren lassen.

Kurze Antwort: Welches Twitter-Kartenbild sollten Sie verwenden?

Verwenden Sie für die meisten freigegebenen Links 1200 x 630 Pixel WebP oder JPEG, insbesondere wenn Sie eine große Bildkarte wünschen. Halten Sie das wichtige Thema von den Rändern fern, machen Sie den Text in Miniaturbildgröße lesbar und verwenden Sie sowohl intwitter:imageals auch inog:imageeine absolute HTTPS-URL.

Setzen Sie für Xtwitter:cardaufsummary_large_image, wenn das Bild die Hauptattraktion ist. Halten Sie die Datei möglichst unterhalb der dokumentierten Grenzwerte für Kartenbilder und vergewissern Sie sich vor der Veröffentlichung, dass die endgültige CDN-URL HTTP 200 zurückgibt.

Die zuverlässige Einrichtung ist einfach:

  • Exportieren Sie ein 1200 x 630 großes Bild für die Vorschau. – Verwenden Sie eine endgültige CDN-URL, keinen relativen Pfad.
  • Fügen Sietwitter:title,twitter:descriptionundtwitter:imagehinzu. – Fügen Sie passendeog:title,og:descriptionundog:imageals Fallback hinzu.
  • Testen Sie die Live-URL nach der Bereitstellung und aktualisieren Sie dann die Plattform-Caches, wenn das alte Bild noch angezeigt wird.

Was ist ein Twitter-Kartenbild?

Ein Twitter-Kartenbild ist die in Seitenmetadaten deklarierte Bild-URL, damit X eine umfangreiche Vorschau erstellen kann. Es ist nicht dasselbe wie das erste Bild in Ihrem Artikel. Ein Crawler liest den HTML-Kopf, findet die Karten-Tags, ruft das Bild ab und speichert eine zwischengespeicherte Vorschau für die freigegebene URL.

Xs eigene Karten-Markup-Beispiele beschreiben in der Entwicklerdokumentation und in den Beispielen immer noch die Kartentypensummaryundsummary_large_image. Der praktische Unterschied liegt in der Vorschaugröße:summary_large_imagegibt dem Bild genügend Platz, um einen Blog-, Produkt-, Tool- oder Kampagnenlink zu tragen.

Open Graph ist wichtig, weil viele soziale Plattformen, Chat-Apps und Linkvorschausystemeog:imagelesen. Das Open Graph-Protokoll definiertog:title,og:type,og:imageundog:urlals Kernmetadaten. Verwenden Sie sowohl Twitter/X-Tags als auch Open Graph-Tags, damit ein fehlender Parser nicht jede Vorschau unterbricht.

Metadatenfeld Benutze es für Praktischer Hinweis
twitter:card Wählt Zusammenfassung oder großes Bildlayout Verwenden Siesummary_large_imagefür die meisten Artikel- und Zielseitenfreigaben
twitter:image Primäres X-Vorschaubild Verwenden Sie eine absolute HTTPS-Bild-URL
og:image Fallback-Vorschaubild für soziale und Messaging-Apps Entspricht normalerweisetwitter:image, es sei denn, eine Plattform benötigt einen anderen Zuschnitt
og:url Kanonische URL für die freigegebene Seite Passen Sie die URL der öffentlichen kanonischen Seite an
title- unddescription-Tags Browser- und Suchkontext Sorgen Sie dafür, dass sie mit den sozialen Metadaten konsistent sind

Für verwandte Bildmetadatenarbeiten kombinieren Sie dies mit dem Leitfaden Bildoptimierung für SEO und der Vollständigen Bildoptimierungs-Checkliste.

Welche Größe sollte ein Twitter-Kartenbild haben?

Beginnen Sie mit 1200 x 630 Pixel. Es entspricht dem üblichen 1,91:1-Social-Preview-Zuschnitt, bietet Plattformen genügend Pixel für eine saubere Verkleinerung und funktioniert gut, wenn dasselbe Bild alsog:imagewiederverwendet wird.

Vermeiden Sie es, eine Karte zu entwerfen, die nur in voller Größe funktioniert. Führt das Zuschneiden, Ändern der Größe und Platzieren von Text um das Bild herum durch. Kleine Beschriftungen, dünne UI-Screenshots und unruhige Hintergründe sehen in einem Design-Tool oft gut aus, sind aber in einer echten Share-Karte nicht mehr lesbar.

Grafik, die ein 1200 x 630 großes Twitter-Kartenbild mit WebP, Dateigröße, HTTPS und Edge-Safe-Designhinweisen zeigt

Anwendungsfall Empfohlenes Bild Warum es funktioniert Achten Sie auf
Blogbeitrag oder Leitfaden 1200 x 630 WebP Großer Vorschauausschnitt, breite Plattformkompatibilität Kleiner Überschriftentext
Produkteinführung 1200 x 630 WebP oder JPEG Das Produkt bleibt nach der Verkleinerung sichtbar Beschneiden der Produktkante
Werkzeugseite 1200 x 630 Screenshot-basierte Grafik Zeigt, was das Tool vor dem Klicken tut UI-Text zu klein zum Lesen
Nur-Logo-Seite 1200 x 630 mit großzügiger Polsterung Verhindert, dass das Logo eng wirkt Leere Vorschau
Quadratfreundliche Kampagne Separate 1200 x 1200-Variante bei Bedarf Nützlich für Plattformen mit quadratischen Kulturen Verwenden Sie sie nicht blind als X-Karte wieder

Verwenden Sie den Artikel Bester Bild-Resizer für soziale Medien, wenn Sie mehrere Plattformzuschnitte benötigen, und verwenden Sie Bildgrößen für Facebook-Anzeigen, wenn das gleiche Motiv auch bezahlte soziale Medien einspeist.

Wie schreibt man die Metadaten?

Fügen Sie die Tags in vom Server gerendertes HTML in die Seite<head>ein. Verlassen Sie sich nicht auf clientseitiges JavaScript, um nach dem Laden soziale Tags einzufügen. Linkvorschau-Crawler führen Ihre App möglicherweise nicht auf die gleiche Weise aus wie ein Browser.

Dreizeiliges Metadatendiagramm mit Twitter-Karten-, Twitter-Bild- und Open-Graph-Bild-Tags für soziale Vorschauen

Verwenden Sie dieses Muster für einen normalen Artikel oder eine Tool-Seite:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Twitter Card Image Size and Preview Checklist">
<meta name="twitter:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta name="twitter:image" content="https://cdn.example.com/blog/twitter-card-image.webp">

<meta property="og:type" content="article">
<meta property="og:title" content="Twitter Card Image Size and Preview Checklist">
<meta property="og:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta property="og:image" content="https://cdn.example.com/blog/twitter-card-image.webp">
<meta property="og:url" content="https://example.com/blog/twitter-card-image">

Behalten Sie diese Überprüfungen bei der Codeüberprüfung bei:

  1. Die Bild-URL ist absolut und beginnt mit https://.
  2. Die Bild-URL ist die endgültige CDN-URL, kein lokaler Build-Pfad.
  3. Der Seitentitel und der soziale Titel beschreiben dieselbe Seite.
  4. Die soziale Beschreibung ist kurz genug, um eine Vorschau einzuscannen.
  5. Die kanonische URL undog:urlverweisen auf dieselbe öffentliche Seite.
  6. Das Kartenbild wird nicht durchrobots.txt, Authentifizierungs- oder Hotlink-Regeln blockiert.
  7. Die Serverantwort enthält einen korrekten Bildinhaltstyp.

In den SEO-Leitlinien für Bilder von Google werden außerdem beschreibender Bildkontext, crawlbare Bild-URLs und unterstützte Formate in Best Practices für Google Bilder empfohlen. Dieser Rat ist nicht spezifisch für Twitter, aber es handelt sich um die gleiche Veröffentlichungsdisziplin: Machen Sie das wichtige Bild für Crawler leicht zu entdecken, abzurufen und zu verstehen.

Sollten Sie WebP, JPEG oder PNG für ein Twitter-Kartenbild verwenden?

Verwenden Sie WebP, wenn Ihre Plattform und Vorschauziele dies unterstützen, insbesondere für Artikelgrafiken, Produktvorschauen und Screenshots mit gemischten Farben. Verwenden Sie JPEG für eine umfassende Kompatibilität oder fotolastige Karten. Verwenden Sie PNG nur, wenn Transparenz oder verlustfreie Kanten ausreichen, um die größere Datei zu rechtfertigen.

Im Bilddateityp-Leitfaden von MDN wird erläutert, dass WebP sowohl verlustbehaftete als auch verlustfreie Komprimierung unterstützt. Diese Flexibilität ist für Social Cards nützlich, da ein einzelnes Bild eine Fototextur, eine flache Markenfarbe und einen Typ enthalten kann.

Für diesen Artikel habe ich vier 1200 x 630 WebP-Grafiken lokal mit ImageMagick codiert und getestet und die Ausgabegrößen vor der Veröffentlichung überprüft. Sie landeten zwischen 14 KB und 28 KB, da es sich um saubere Grafiken mit begrenzter Textur handelt. Echte Produktfotos und detaillierte Screenshots sind in der Regel größer.

Format Gute Passform Typisches Risiko Praktischer Ausgangspunkt
WebP Die meisten Social-Preview-Grafiken und Karten mit gemischten Bildern Einige ältere Tools zeigen möglicherweise keine Vorschau lokaler Entwürfe an Exportieren Sie verlustbehaftetes WebP mit einer Qualität von etwa 80–85
JPEG Fotolastige Vorschauen und konservative Kompatibilitätsanforderungen Keine Transparenz, möglicherweise Nachklingen des Textes Export etwa in der Qualität 82-88
PNG Logos, Transparenz, scharfe, flache Grafiken Große Dateigröße Nur verwenden, wenn Verlustfreiheit erforderlich ist
AVIF Sehr kleine moderne Bilder Das Vorschau-Ökosystem kann weniger vorhersehbar sein Testen Sie es sorgfältig, bevor Sie es als einziges Kartenbild verwenden

Wenn das Kartenbild auch ein Seitenheld ist, befolgen Sie die Anleitung Bildkomprimierungsverhältnis, damit die Vorschau sauber aussieht, ohne dass die Seite zu schwer wird. Wenn Sie moderne Formate vergleichen, lesen Sie AVIF vs. WebP-Vergleich.

Wie macht man das Bild im Feed lesbar?

Entwerfen Sie die Karte an der kleinsten Stelle, an der sie sichtbar ist, und nicht an der Zeichenfläche in Ihrem Editor. Eine Feed-Vorschau kann schmaler sein als das Original und die umgebende Benutzeroberfläche konkurriert um Aufmerksamkeit.

Verwenden Sie diese Designregeln:

  • Platzieren Sie das Hauptthema oder die Hauptüberschrift im sicheren Mittelbereich.
  • Lassen Sie Polsterung um Gesichter, Produkte, Logos und Text herum.
  • Verwenden Sie eine kurze Nachricht, keinen vollständigen Artikeltitel plus Untertitel plus Abzeichen.
  • Überprüfen Sie das Bild mit einer Breite von 600 Pixeln, bevor Sie es genehmigen.
  • Vermeiden Sie Screenshots mit winzigen Beschriftungen, es sei denn, die Benutzeroberfläche selbst ist die Geschichte.
  • Halten Sie den Kontrast hoch genug, um einen schnellen Blick zu ermöglichen.
  • Verwenden Sie kein generisches Archivbild, wenn es auf der Seite um ein Tool, ein Produkt oder einen technischen Arbeitsablauf geht.

Ein nützliches Kartenbild sollte die Antwort „Worum geht es in diesem Link?“ beantworten. bevor der Leser den Titel studiert. Für einen Blogbeitrag kann das ein einfaches Diagramm sein. Bei einem E-Commerce-Leitfaden kann es sich um ein Produktfotobeispiel handeln. Bei einem Konverter oder Resizer kann es sich um einen zugeschnittenen Tool-Screenshot handeln.

Warum wird mein Twitter-Kartenbild nicht angezeigt?

Die meisten fehlerhaften Kartenbilder haben eine von vier Ursachen: Der Crawler kann die URL nicht abrufen, die Metadaten verweisen auf das falsche Bild, die Plattform hat eine alte Version zwischengespeichert oder das Bild ist technisch gültig, aber ein schlechter Vorschaukandidat.

Grafik zur Fehlerbehebungs-Checkliste mit relativen Bild-URLs, Crawler-Blöcken, veralteten Cache-Karten und übergroßen Dateien

Führen Sie diese Sequenz aus, bevor Sie das Motiv ändern:

  1. Öffnen Sie die endgültige Seitenquelle und bestätigen Sie, dass das Tagtwitter:imagevorhanden ist.
  2. Kopieren Sie die genaue Bild-URL aus dem gerenderten HTML.
  3. Führen Siecurl -Ifür die Bild-URL aus und bestätigen Sie HTTP 200.
  4. Bestätigen Sie, dass der Antwortinhaltstyp ein Bildtyp ist.
  5. Stellen Sie sicher, dass die Bild-URL nicht durch eine Authentifizierungswand umgeleitet wird.
  6. Stellen Sie sicher, dass die Bilddatei nicht riesig ist.
  7. Stellen Sie sicher, dassrobots.txtdas Bild oder die Seite nicht blockiert.
  8. Ändern Sie den Bilddateinamen, wenn Sie einen neuen Cache erzwingen müssen.
  9. Testen Sie die bereitgestellte Seite erneut, nicht eine lokale Vorschau-URL.
  10. Überprüfen Sie die Open Graph-Tags, wenn die Karte in einer App funktioniert, in einer anderen jedoch nicht.
Symptom Wahrscheinliche Ursache Fix
Es erscheint kein Bild Fehlendes oder relativestwitter:image Verwenden Sie eine vollständige HTTPS-CDN-URL
Altes Bild erscheint Zwischengespeicherte Vorschau Veröffentlichen Sie einen neuen Dateinamen und aktualisieren Sie die freigegebene URL
Das Bild scheint schlecht beschnitten zu sein Unsichere Zusammensetzung Reexport mit mehr Polsterung und einem zentralen Thema
Der Titel der Vorschau ist falsch Nicht übereinstimmende Metadaten Richten Sietwitter:title,og:titleund den Seitentitel aus
Funktioniert lokal, aber nicht live Lokaler Pfad, Authentifizierung oder blockiertes CDN Testen Sie die Produktions-URL mitcurl -I

Der Online-Leitfaden zum Zuschneiden von Bildern ist hilfreich, wenn das Motiv einen sichereren Zuschnitt benötigt, und der Bildseitenverhältnis-Changer behandelt den Wechsel des Motivs von quadratisch oder hochformatig in einen sozialen Vorschaurahmen.

Checkliste vor der Veröffentlichung

Bevor Sie eine Seite versenden, die auf Social Sharing basiert, überprüfen Sie das Bild und die Metadaten gemeinsam. Eine perfekte WebP-Datei schlägt immer noch fehl, wenn das Tag auf die URL von gestern verweist. Perfekte Metadaten sind immer noch enttäuschend, wenn das Bild in einem Feed nicht lesbar ist.

Nutzen Sie diese abschließende Checkliste:

  • Das Frontmatter- oder CMS-Bild ist dasselbe Bild, das für soziale Metadaten verwendet wird.
  • Das Bild ist einzigartig für die Seite oder eindeutig relevant für die Seite.
  • Die Bild-URL ist HTTPS und öffentlich.
  • Die Dateierweiterung entspricht dem tatsächlichen Antwortformat. – Das Bild gibt HTTP 200 vom CDN zurück.
  • Der Titel und die Beschreibung sind nicht mit Schlüsselwörtern vollgestopft.
  • Das Vorschaubild enthält beschreibenden Alternativtext an der Stelle, an der er im Artikeltext erscheint.
  • Das Bild wird in der Vorschaugröße für Desktops und Mobilgeräte visuell überprüft.
  • Die Seite hat eine stabile kanonische URL.
  • Die Karte wird nach der Bereitstellung erneut getestet.

Ein gutes Twitter-Kartenbild ist ein kleines Veröffentlichungssystem: eine klare visuelle Darstellung, stabile Metadaten, eine schnelle CDN-URL und eine abschließende Abrufprüfung. Sobald diese Teile vorhanden sind, ist die Wahrscheinlichkeit, dass die Vorschau während eines Starts oder einer Inhaltsaktualisierung unterbrochen wird, deutlich geringer.

Nutze die kostenlosen Werkzeuge, während du der Anleitung folgst.

Bild komprimierenHintergrund entfernen

Weiterlesen

Titelbild für Bildstapel bearbeiten: Vergleich kostenloser Tools und Skripte

Tue Mar 03 2026 19:00:00 GMT-0500 (Eastern Standard Time)

Bildstapel bearbeiten: Vergleich kostenloser Tools und Skripte

Verkleinern Sie Hunderte von Bildern gleichzeitig mit kostenlosen Online-Tools wie ImageMagick, XnConvert und Python-Skripten. Wir zeigen Befehle, voreingestellte Größen und einen praktischen Workflow.

Titelbild für Bester Bild-Resizer für Social Media Workflows

Tue Mar 03 2026 19:00:00 GMT-0500 (Eastern Standard Time)

Bester Bild-Resizer für Social Media Workflows

Passen Sie Social Media Bilder mit den richtigen Verhältnissen an, schneiden Sie sichere Zonen aus, definieren Sie Exportgrößen und Komprimierungseinstellungen sowie einen wiederholbaren Workflow für jede Plattform.