Social-Card-Generator
Social Card Generator
Setzt ein 1200×630-Teilbild aus Titel, Untertitel, Markenzeile und optionalem Logo auf einer gewählten Vorlage zusammen und schreibt die passenden Meta-Tags dazu.
Setzt eine Vorschaukarte von 1200 × 630 aus einem Titel, einem Untertitel, einer Markenzeile und einem optionalen Logo zusammen und gibt die Meta-Tags aus, die daneben einzufügen sind. Der Text wird direkt auf einen Canvas gezeichnet, mit der koreanischen Schrift des Geräts selbst, wobei Hangul silbenweise und lateinische Schrift wortweise umbrochen wird, und der Titel verkleinert sich selbst, statt überzulaufen.
Vorschau (1200 × 630)
Inhalt
Logo-Bild hier ablegen (optional)
Ein quadratisches PNG oder SVG passt am besten. Ohne Logo steht ein Block in der Akzentfarbe an seiner Stelle.
Aussehen
Meta-Tags für die Seite
Warum 1200 × 630, und eine Anmerkung zur Schrift
Open Graph, X (summary_large_image), KakaoTalk und Slack schneiden alle auf etwa 1,91:1 zu, mit dieser Größe geht also am wenigsten verloren. Der Text wird direkt auf das Canvas gezeichnet, mit der koreanischen Schrift des Geräts selbst — Pretendard, wenn sie installiert ist, sonst Apple SD Gothic Neo, Malgun Gothic oder Noto Sans KR — und Hangul wird silbenweise umbrochen. Deshalb können dieselben Einstellungen auf einem anderen Rechner etwas anders aussehen. Bei 2× exportiert ergibt das 2400 × 1260 und bleibt auf einem hochauflösenden Bildschirm scharf.
Wie sich die Karte tatsächlich aufklappt, zeigt die Link-Vorschau, die die Seite abruft; und für eine Hintergrundtextur baut der Hintergrundmuster-Generator eine.
So funktioniert es
Schreiben Sie den Titel so, wie er gelesen wird
Eine Vorschaukarte wird in Miniaturgröße in einem Feed gelesen, ein kurzer Titel in großer Schrift schlägt also einen vollständigen Satz in kleiner. Die Zeile unter der Vorschau sagt, wie viele Zeilen er gebraucht hat und ob die Größe verkleinert wurde, damit er passt.
Fügen Sie die Markenzeile und die Fußzeile hinzu
Sie werden zwischen Besuchen gemerkt, weil sie die Teile sind, die über jede Karte hinweg gleich bleiben, die Sie machen. Titel und Untertitel nicht.
Wählen Sie eine Vorlage und die beiden Farben
Verlauf, einfarbig, geteilt oder Umriss. Die Hintergrundfarbe und der Akzent leisten die ganze Arbeit; der Schalter für hellen Text ist da, weil ein Hintergrund im Mittelton in beide Richtungen gehen kann und das Auge entscheiden sollte, nicht ein Schwellenwert.
Fügen Sie ein Logo hinzu, wenn Sie ein quadratisches haben
Ein quadratisches PNG oder SVG passt am besten. Ohne eines springt ein Block in der Akzentfarbe ein, was in Miniaturgröße oft genügt.
Exportieren Sie das PNG und kopieren Sie die Meta-Tags
Die Tags tragen Breite und Höhe ebenso wie die URL, und das ist es, was einen Crawler die Karte anordnen lässt, bevor das Bild geladen ist. Ändern Sie die Beispiel-URL dorthin, wo Sie die Datei tatsächlich abgelegt haben.
Häufige Fragen
Warum 1200 × 630?
Weil Open Graph, das summary_large_image von X, KakaoTalk und Slack alle auf etwas nahe 1.91:1 beschneiden, und diese Größe auf allen am wenigsten verliert. Größer zu gehen hilft nicht – jeder Verbraucher rechnet es herunter –, und kleiner zu gehen bedeutet eine weiche Karte auf einem Retina-Bildschirm.
Die Karte sieht auf dem Rechner meines Kollegen etwas anders aus.
Der Text wird mit der koreanischen Schrift gezeichnet, die das jeweilige Gerät hat – Pretendard, wenn installiert, sonst Apple SD Gothic Neo, Malgun Gothic oder Noto Sans KR –, dieselben Einstellungen erzeugen also auf verschiedenen Rechnern leicht verschiedene Buchstabenformen und Zeilenumbrüche. Das exportierte PNG ist fest, sobald Sie es herunterladen; nur die Vorschau variiert.
Mein Titel ist von selbst kleiner geworden.
Er hat in der gesetzten Größe vier Zeilen überschritten, die Größe wurde also verkleinert, bis er passte – und die Zeile unter der Vorschau sagt das. Überlaufender Text wäre schlimmer: Er würde im Export stillschweigend abgeschnitten. Kürzen Sie den Titel, wenn Sie die große Größe zurückwollen.
Wie prüfe ich, ob die Karte tatsächlich gerendert wird?
Legen Sie die Datei zuerst unter der URL in den Meta-Tags ab, dann verwenden Sie das OG-Vorschau-Werkzeug, das die Seite abruft und zeigt, was jede Plattform aus ihren Tags baut. Diese Seite zeichnet nur das Bild – sie kann nicht wissen, ob die Tags auf der Seite sind oder ob die URL auflöst.
Eingabe aus
Link-Vorschau debuggen
Link Preview Debugger
Liest Open-Graph- und Twitter-Card-Tags einer URL und rendert, wie der Link beim Teilen aussehen wird.
Hintergrundmuster-Generator
Background Pattern Generator
Erzeugt kachelbare SVG-Muster – Streifen, Punkte, Raster, Rauschen – mit Farb- und Größensteuerung.
Geräte-Mockup
Device Mockup
Setzt einen Screenshot in einen Smartphone-, Tablet-, Laptop- oder Browser-Rahmen mit Hintergrund und Schatten.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Geräte-Mockup
Device Mockup
Setzt einen Screenshot in einen Smartphone-, Tablet-, Laptop- oder Browser-Rahmen mit Hintergrund und Schatten.
Link-Vorschau debuggen
Link Preview Debugger
Liest Open-Graph- und Twitter-Card-Tags einer URL und rendert, wie der Link beim Teilen aussehen wird.
Hintergrundmuster-Generator
Background Pattern Generator
Erzeugt kachelbare SVG-Muster – Streifen, Punkte, Raster, Rauschen – mit Farb- und Größensteuerung.
PNG-Kompressor
PNG Compressor
Verkleinert ein PNG ohne Upload, komplett im Browser: Die Farbpalette wird quantisiert und der Deflate-Strom neu geschrieben, die Abmessungen bleiben unverändert.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Seitenverhältnis-Rechner
Aspect Ratio Calculator
Berechnet die fehlende Abmessung für ein Zielverhältnis und listet die Standardgrößen auf, die dazu passen.