ForHosting KIT · Websites auslesen & überwachen

Twitter-Card-Tags für Social-Media-Vorschauen generieren

Geben Sie einen Titel wie Build & Ship ein und erhalten Sie Twitter-Card-Tags zum Einfügen in den head-Bereich Ihrer Seite, das Und-Zeichen sicher als & geschrieben. Wählen Sie die kompakte Karte oder die mit großem Bild; leere optionale Tags entfallen. Kostenlos in Ihrem Browser.

Kostenlos
Läuft in Ihrem Browser
Ohne Anmeldung
Ihre Daten bleiben auf Ihrem Gerät

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailTelegramApp bald

Erstellen Sie einen vollständigen Satz von Twitter-Card-Meta-Tags, ohne Eigenschaftsnamen auswendig zu kennen oder unsichere Zeichen in HTML-Attributen fürchten zu müssen. Wählen Sie einen unterstützten Kartentyp, geben Sie den Vorschautitel ein und ergänzen Sie bei Bedarf eine Beschreibung sowie eine absolute Bild-URL. Der Generator liefert strukturierte Tag-Datensätze und einen direkt einsetzbaren HTML-Block. Er arbeitet deterministisch und ohne Netzwerkanfragen. Deshalb erzeugt dieselbe Eingabe stets dasselbe Markup, und Ihre Daten werden nicht an externe Vorschaudienste übertragen.

Wählen Sie das passende Format für Ihre Vorschau

Entscheiden Sie zuerst, wie ein geteilter Link visuell erscheinen soll. Die Karte summary ist die kompakte Variante. Andere Twitter-Card-Typen benötigen zusätzliche Felder, die nicht Bestandteil dieses Vertrags sind.

Wenn Sie einen nicht unterstützten Typ senden, gibt die Funktion einen typisierten Eingabefehler zurück, statt unbemerkt unvollständiges Markup zu erzeugen. So kann weder ein Tippfehler noch eine unpassende Auswahl als scheinbar plausibler Tag-Satz weitergegeben werden, der die gewünschte Karte tatsächlich nicht korrekt darstellt.

Stellen Sie HTML-sichere Inhalte bereit

Der Titel ist erforderlich und muss Text enthalten, der nicht nur aus Leerzeichen besteht. Beschreibung und Bild sind optional. Wenn Sie diese Angaben weglassen, fehlen auch die entsprechenden Tags; die Ausgabe ersetzt fehlende Felder niemals durch leere Tags oder Nullwerte.

Relative Pfade funktionieren möglicherweise auf Ihrer eigenen Website, doch soziale Crawler benötigen eine Adresse, die sie unabhängig abrufen können. Deshalb weist der Generator relative Pfade zurück. Text wird für ein HTML-Attribut in doppelten Anführungszeichen maskiert.

Kaufmännische Und-Zeichen, Anführungszeichen, spitze Klammern und Apostrophe werden in Zeichenreferenzen umgewandelt. Dadurch bleibt der sichtbare Wortlaut erhalten, ohne die Attributgrenze zu durchbrechen. Die strukturierten Datensätze behalten normalisierte, lesbare Werte; der HTML-Block enthält dagegen die für das Markup maskierte Darstellung.

Anwendungen können Metadaten somit getrennt von dem Ausschnitt prüfen oder speichern, der in den Dokumentkopf eingefügt wird.

Bauen Sie die Tags ein und prüfen Sie das Ergebnis

Kopieren Sie die ausgegebenen HTML-Zeilen in das head-Element der Seite, die geteilt werden soll. Prüfen Sie nach der Veröffentlichung den Seitenquelltext über eine öffentliche URL. So stellen Sie sicher, dass der Server die Tags tatsächlich im ursprünglichen HTML ausliefert.

Clientseitiger Code, der Metadaten erst nach dem Laden ergänzt, kann für Crawler unsichtbar bleiben. Auch ein privates oder geschütztes Bild lässt sich trotz syntaktisch korrekter URL nicht abrufen. Der Generator validiert Ihre Metadaten, kontaktiert jedoch weder Ihre Website noch lädt er das Bild herunter, misst dessen Abmessungen oder sagt den Zuschnitt einer Social-Media-Plattform voraus.

Auch der Cache wird von der abrufenden Plattform gesteuert, sodass nach einer Änderung vorübergehend eine ältere Vorschau erscheinen kann.

Anwendungsfälle

Social Tags in einen Static-Site-Build einfügen

Erzeugen Sie für jede Seite vorhersagbare Datensätze und HTML, ganz ohne Netzwerkdienst oder eigene Tag-Vorlage.

Nicht unterstützte Kartentypen erkennen

Weisen Sie unpassende oder falsch geschriebene Typen zurück, bevor unvollständige Metadaten die Produktion erreichen.

Häufige Fragen

Was geschieht ohne Beschreibung?

Das Tag twitter:description entfällt vollständig. Die Ausgabe erzeugt weder ein leeres Tag noch ein Feld mit Nullwert.

Werden Anführungszeichen und Und-Zeichen maskiert?

Ja. Zeichen, die ein HTML-Attribut beschädigen könnten, werden kodiert; die strukturierten Datensätze bleiben lesbar.

Prüft das Werkzeug die Darstellung der veröffentlichten Karte?

Nein. Es erzeugt und validiert die Metadaten lokal, ohne die Seite abzurufen, das Bild zu prüfen oder einen sozialen Dienst zu kontaktieren.

Welchen Kartentyp sollte ich wählen?

Wählen Sie die kompakte Karte, wenn Titel und Beschreibung im Vordergrund stehen und das Bild nur ein Vorschaubild ist, etwa bei Artikeln, Dokumentation oder Produktseiten. Die Variante mit großem Bild passt, wenn die Grafik selbst Inhalt trägt, etwa bei Reportagen, Produktstarts, Portfolios oder Rezepten.

Wohin kommen die erzeugten Tags?

In den head-Bereich der Seite, die geteilt wird. Prüfen Sie danach den Quelltext unter der öffentlichen Adresse, denn Tags, die erst ein Skript nach dem Laden einfügt, sehen Crawler oft nicht, und ein geschütztes Bild lässt sich nicht abrufen.

Für Entwickler — API-Zugang

Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.

Endpunkt

POSThttps://api.kit.forhosting.com/web/twitter-card-generate

Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.

Aufruf aus Ihrem Stack

curl -X POST https://api.kit.forhosting.com/web/twitter-card-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"card_type":"summary_large_image","title":"A Practical Guide to Accessible Forms"}'

const res = await fetch("https://api.kit.forhosting.com/web/twitter-card-generate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "card_type": "summary_large_image",
    "title": "A Practical Guide to Accessible Forms"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/twitter-card-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "card_type": "summary_large_image",
    "title": "A Practical Guide to Accessible Forms"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/twitter-card-generate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"card_type":"summary_large_image","title":"A Practical Guide to Accessible Forms"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"card_type":"summary_large_image","title":"A Practical Guide to Accessible Forms"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/twitter-card-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Beispiel-Anfrage

{
  "card_type": "summary_large_image",
  "title": "A Practical Guide to Accessible Forms"
}

Beispiel-Antwort

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.twitter_card_generate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Preis

pro Anfrage$0.002

Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.

Limits

`timeout_sec`	30
`max_crawl_pages`	25

Fehler

HTTP	Code	Bedeutung
`401`	`unauthorized`	Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer).
`402`	`insufficient_balance`	Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht.
`404`	`unknown_type`	Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog.
`429`	`rate_limited`	Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Technische Hinweise

Wählen Sie das passende Format für Ihre Vorschau

Sie eignet sich für Artikel, Dokumentationen, Produktseiten und andere Links, bei denen Titel und Beschreibung im Vordergrund stehen sollen, während ein Bild als unterstützende Miniatur dient. summary_large_image räumt dem Bild deutlich mehr Platz ein und passt zu redaktionellen Beiträgen, Produkteinführungen, Portfolios, Rezepten und Seiten, deren Gestaltung wichtigen Kontext vermittelt. Dieser Generator unterstützt bewusst diese beiden universellen Formate, weil Kartentyp, Titel, Beschreibung und Bild ausreichen, um sie vollständig zu beschreiben.

Stellen Sie HTML-sichere Inhalte bereit

Ein angegebenes Bild muss eine absolute HTTP- oder HTTPS-URL verwenden.

Bauen Sie die Tags ein und prüfen Sie das Ergebnis

Verwenden Sie je ein Tag für twitter:card und twitter:title sowie twitter:description und twitter:image, wenn die optionalen Werte vorhanden sind. Für automatisierte Veröffentlichungen kostet die API $0.002 pro Anfrage; die Browserfassung nutzt dieselbe deterministische Logik.

Integrationsbeispiele

Metadaten für einen neuen Artikel vorbereiten

Wandeln Sie Überschrift, Kurztext und URL des Titelbilds in einen einsetzbaren summary_large_image-Block um.

Technische Fragen

Welche Twitter-Card-Typen werden unterstützt?

Der Generator unterstützt summary und summary_large_image. Jeder andere Typ führt zu einem invalid_input-Fehler.

Ist ein Bild erforderlich?

Nein. Ohne image fehlt twitter:image. Falls Sie ein Bild angeben, ist eine absolute HTTP- oder HTTPS-URL erforderlich.

Was kostet die Erzeugung über die API?

Jede API-Anfrage kostet $0.002. Die Browserfassung läuft lokal mit demselben deterministischen Algorithmus.

Vollständige KIT-Dokumentation lesen →

Twitter-Card-Tags für Social-Media-Vorschauen generieren

Im Browser ausführen – kostenlos

Wählen Sie das passende Format für Ihre Vorschau

Stellen Sie HTML-sichere Inhalte bereit

Bauen Sie die Tags ein und prüfen Sie das Ergebnis

Anwendungsfälle

Social Tags in einen Static-Site-Build einfügen

Nicht unterstützte Kartentypen erkennen

Häufige Fragen

Verwandte Tools

Für Entwickler — API-Zugang

Endpunkt

Aufruf aus Ihrem Stack

Beispiel-Anfrage

Beispiel-Antwort

Preis

Limits

Fehler

Technische Hinweise

Wählen Sie das passende Format für Ihre Vorschau

Stellen Sie HTML-sichere Inhalte bereit

Bauen Sie die Tags ein und prüfen Sie das Ergebnis

Integrationsbeispiele

Metadaten für einen neuen Artikel vorbereiten

Technische Fragen

danke