Twitter-Card-Vorschau
Twitter-Card-Meta-Tags für Ihre Seiten in der Vorschau anzeigen und erzeugen
Karteneinstellungen
0/70 Zeichen
0/200 Zeichen
Die Zähler mit 70/200 dienen als Orientierung im Editor. Manche Symbole zählen als mehr als ein Zeichen; die tatsächliche Anzeige hängt vom Client ab.
Probieren Sie ein breites Bild, zum Beispiel 1200 × 628 px. Die beispielhafte Vorschau verwendet einen Bildbereich im Format 16:9.
Die Bild-URL wird direkt von Ihrem Browser geladen. Der Bildhost erhält diese Anfrage.
Wird nur für die hier angezeigte Domain verwendet. Ihr @Nutzername dient der Zuordnung zum Konto.
Kartenvorschau
example.com
Hier steht Ihr Kartentitel
Ihre Kartenbeschreibung erscheint hier. Schreiben Sie etwas Ansprechendes, um Ihr Publikum zu begeistern.
Fügen Sie eine Bild-URL hinzu, um das Bild in der Vorschau anzuzeigen.
Diese Vorschau dient der Veranschaulichung. Das tatsächliche Layout, der Zuschnitt, zwischengespeicherte Inhalte und abgerufene Bilder bei X/Twitter können abweichen.
Ihre Meta-Tags
<meta name="twitter:card" content="summary_large_image" />
Tags aktualisiert. Fügen Sie sie in den head-Bereich Ihrer Seite ein und prüfen Sie die veröffentlichte Seite.
Leitfaden zu Kartentypen
Vor der Veröffentlichung
- Verwenden Sie einen Titel und eine Beschreibung, die die Seite beschreiben.
- Wählen Sie ein Bild, dessen wichtige Inhalte auch nach dem Zuschneiden erhalten bleiben.
- Halten Sie die Bild-URL für die Plattform zugänglich, die Ihre Seite abruft.
- Der @Nutzername dient der Zuordnung, nicht als Website-Adresse.
- Prüfen Sie die veröffentlichte Seite und ihre tatsächliche Vorschau beim Teilen; dieser Editor ruft die Kartendaten von X nicht ab.
Über unser kostenloses Twitter/X-Card-Vorschau-Tool
Twitter Cards (jetzt X Cards) ermöglichen es, Tweets, die auf Ihre Website verlinken, um Rich-Media-Inhalte zu ergänzen. Wenn jemand eine URL Ihrer Website teilt, zeigt die Card automatisch eine Vorschau mit dem von Ihnen festgelegten Titel, der Beschreibung und dem Bild an. Mit diesem Twitter-Card-Vorschau-Tool können Sie eine beispielhafte Card ansehen, bevor Sie Ihre Tags veröffentlichen. Es prüft weder den Abruf durch die Plattform noch den Cache oder die endgültige Darstellung.
Das Tool unterstützt beide wichtigen Card-Typen: die Summary Card mit einem kleinen Vorschaubild neben dem Text und die Summary Card with Large Image, die ein großes Bild über Titel und Beschreibung platziert. Sie geben Ihre Inhalte ein, sehen die Vorschau in Echtzeit und kopieren die fertigen HTML-Meta-Tags mit einem einzigen Klick.
Ob Social-Media-Manager, die Linkvorschauen optimieren, Entwickler, die Open-Graph- und Twitter-Meta-Tags umsetzen, oder Content-Marketer, die die Klickrate geteilter Links steigern: Dieses kostenlose Tool vereinfacht Ihren Arbeitsablauf. Zeichenzähler und farbcodierte Balken zeigen die 70/200-Richtwerte dieses Editors an. Sie belegen keine garantierte aktuelle Anzeigegrenze der Plattform.
Hauptfunktionen
- Live-Vorschau für die Card-Typen Summary und Summary Large Image
- Zeichenzähler und farbcodierte Balken in Echtzeit, basierend auf den Richtwerten des Editors für Titel (70) und Beschreibung (200)
- Eingabefeld für die Bild-URL mit empfohlenen Größen für jeden Card-Typ
- Feld für den Site-@handle zur korrekten Twitter-Zuordnung
- Automatisch erzeugte HTML-Meta-Tags, bereit zum Einfügen in den <head>-Bereich Ihrer Seite
- Alle erzeugten Meta-Tags mit einem Klick in die Zwischenablage kopieren
- Vergleichsleitfaden für Card-Typen, der zeigt, wann welches Format passt
- Vorschau nach dem Vorbild des Twitter/X-Card-Layouts (eine Annäherung, keine pixelgenaue Darstellung)
- Vollständige Unterstützung des Dunkelmodus mit responsivem Layout
- Keine Registrierung erforderlich, vollständig kostenlos und unbegrenzt
So verwenden Sie das Twitter-Card-Vorschau-Tool
- Card-Typ wählen: Wählen Sie zwischen Summary (kleines Bild) und Summary Large Image, je nach Inhalt und gestalterischem Ziel.
- Titel eingeben: Schreiben Sie einen ansprechenden Titel mit weniger als 70 Zeichen, der im Twitter-Feed Aufmerksamkeit erregt.
- Beschreibung hinzufügen: Formulieren Sie eine knappe Beschreibung mit weniger als 200 Zeichen, die zum Klicken anregt.
- Bild-URL angeben: Fügen Sie die vollständige URL Ihres Card-Bildes ein (empfohlen sind 1200x628 für Large-Image-Cards und 144x144 für Summary).
- Live-Vorschau prüfen: Sehen Sie im Vorschaubereich der Card eine Annäherung daran, wie sie auf Twitter/X erscheinen wird.
- Meta-Tags kopieren: Klicken Sie auf „Alle Tags kopieren“, um die erzeugten HTML-Meta-Tags zu kopieren, und fügen Sie sie in den <head>-Bereich Ihrer Seite ein.
Anwendungsfälle
- Social-Media-Manager: Linkvorschauen vor dem Teilen ansehen und optimieren, um Interaktionen und Klickraten zu steigern.
- Webentwickler: Korrekte Twitter-Card-Meta-Tags während der Entwicklung erzeugen und die Darstellung vor dem Launch prüfen.
- Content-Marketer: Verschiedene Titel, Beschreibungen und Bilder testen, um die überzeugendste Kombination für geteilte Links zu finden.
- SEO-Profis: Die korrekte Umsetzung der Social-Meta-Tags im Rahmen technischer SEO-Audits sicherstellen.
- E-Commerce-Teams: Vorab ansehen, wie Produktseiten beim Teilen auf Twitter/X erscheinen, um sie auf Conversions zu optimieren.
- Blog-Autoren: Vor der Veröffentlichung prüfen, ob Artikelvorschauen das richtige Titelbild, den richtigen Titel und den richtigen Auszug zeigen.
- PR & Kommunikation: Linkvorschauen von Pressemitteilungen und Ankündigungen prüfen, bevor sie an Medien verschickt werden.
Häufig gestellte Fragen
Ist dieses Tool kostenlos?
Ja, das Twitter-Card-Vorschau-Tool ist vollständig kostenlos, ohne Registrierung und ohne Nutzungsbeschränkungen.
Sind meine Daten sicher?
Die Vorschau und die Erzeugung der Tags erfolgen in Ihrem Browser. Ihre Titel und Beschreibungen werden nicht an unsere Server gesendet. Beim Laden einer Bild-URL sendet Ihr Browser eine Anfrage an den Host dieses Bildes.
Welche Bildgrößen werden empfohlen?
Verwenden Sie für das Design einer kleinen Card ein quadratisches Bild und für eine große Card ein breites Bild. Der Editor bietet Beispielgrößen von 144×144 und 1200×628 Pixel an; sie prüfen weder die aktuellen Anforderungen der Plattform an Dateiformat und Größe noch den Abruf. Kontrollieren Sie das Bild in der Vorschau der veröffentlichten Seite.
Brauche ich sowohl Twitter Cards als auch Open-Graph-Tags?
Open Graph und Twitter-spezifische Metadaten beschreiben Vorschauen in sozialen Netzwerken. Setzen Sie die Tags ein, die die von Ihnen anvisierten Plattformen verlangen, und prüfen Sie das veröffentlichte Ergebnis; dieser Editor bestätigt weder das Fallback-Verhalten noch garantiert er die vollständige Kontrolle über die Darstellung.
Warum wird meine Card nach dem Ändern der Meta-Tags nicht aktualisiert?
Eine Plattform kann zuvor abgerufene Metadaten oder Bilder zwischenspeichern. Stellen Sie sicher, dass die veröffentlichte Seite und die Bild-URLs Ihre Änderungen enthalten, und prüfen Sie dann die tatsächliche Vorschau beim Teilen. Dieser Editor untersucht oder leert den Cache von X nicht und kann weder ein Aktualisierungsintervall noch einen Trick mit Query-Strings versprechen.
Entspricht diese Vorschau genau der tatsächlichen Twitter-Darstellung?
Dies ist eine beispielhafte Vorschau. Layout des Clients, Zuschnitt, zwischengespeicherte Daten und das Abrufen des Bildes können zu einem deutlich anderen Ergebnis führen; prüfen Sie die tatsächliche Vorschau der veröffentlichten Seite beim Teilen.
Tipps und bewährte Vorgehensweisen
- Titel unter 70 Zeichen halten: Längere Titel werden in der Card-Vorschau abgeschnitten, und Ihre Kernaussage geht verloren.
- Handlungsorientierte Beschreibungen schreiben: Verwenden Sie überzeugende Formulierungen, die zum Klicken anregen, und bleiben Sie unter 200 Zeichen.
- Hochwertige Bilder verwenden: Unscharfe oder niedrig aufgelöste Bilder mindern Vertrauen und Interaktion. Verwenden Sie stets die empfohlenen Abmessungen.
- Site-@handle angeben: Das sorgt für eine korrekte Zuordnung und kann die Sichtbarkeit Ihres Kontos erhöhen, wenn Links geteilt werden.
- Vor der Veröffentlichung testen: Sehen Sie sich Ihre Card in diesem Tool an und fügen Sie dann die URL in den Beitragseditor von X ein, um die tatsächliche Card vor dem Posten zu bestätigen.
- Sowohl OG- als auch Twitter-Tags einsetzen: Verwenden Sie Open-Graph-Tags als Grundlage und Twitter-Card-Tags für plattformspezifische Anpassungen.