OG Image Generator – Social-Media-Bild-Ersteller

Ein Open-Graph-Bild ist das Bild, das erscheint, wenn ein Link in einen Chat, einen Tweet oder einen Slack-Kanal eingefügt wird – und jede Plattform, die eines darstellt, erwartet eine Leinwand von ungefähr 1200×630 Pixeln, jene Größe, für die sowohl Facebooks og:image- als auch Twitters summary_large_image-Karten ursprünglich entworfen wurden. Ist die Größe falsch, wird das Bild beschnitten, unscharf oder gequetscht; stimmt das Layout nicht, wird der Titel zu einem unleserlichen Streifen vor einem unruhigen Foto. Dieses Tool komponiert das Bild in der echten Zielauflösung mit der Canvas-2D-API, sodass das, was Sie in der Vorschau sehen, exakt dem Pixelraster entspricht, das in der PNG-Datei ausgegeben wird.

Wählen Sie einen Hintergrund – eine flache Farbe, einen linearen Verlauf mit zwei frei wählbaren Farben oder ein hochgeladenes Foto, das so beschnitten wird, dass es den gesamten 1200×630-Rahmen ausfüllt, so wie es ein CSS background-size: cover täte, statt verzerrt gestreckt zu werden. Geben Sie einen Titel und einen optionalen Untertitel ein: Beide werden Zeichen für Zeichen anhand der eigenen Schriftmetriken des Canvas vermessen, sodass eine Überschrift, die zu lang für eine Zeile ist, an einer echten Wortgrenze auf eine zweite oder dritte Zeile umbricht, statt über den Rand zu laufen oder unsichtbar abgeschnitten zu werden. Wählen Sie zentrierte oder linksbündige Ausrichtung, eine Textfarbe, die sich vom Hintergrund abhebt, und platzieren Sie optional ein Logo in fester, gut lesbarer Größe in der Ecke.

Unterhalb des Canvas zeigen vier kleine Karten annähernd, wie das fertige Bild aussieht, sobald eine echte Plattform es in ihre eigene Darstellung einbettet: Twitter/X zeigt nur die Domain und einen fett gedruckten Titel unter dem Bild ohne Beschreibungszeile, Facebook fügt einen Domain-Balken in Großbuchstaben über einem Block mit Titel und Beschreibung hinzu, LinkedIn setzt die Domain unter den Titel ganz ohne Beschreibung, und Discords Embed platziert Domain, Titel und Beschreibung im eigenen dunklen Theme über dem Bild. Dies sind gestaltete Annäherungen zu Planungszwecken – klar als illustrativ gekennzeichnet, mit einer von Ihnen selbst eingegebenen Domainzeile – und kein Live-Abruf oder Screenshot der tatsächlichen Plattformen, denn erst das Teilen eines Links, bei dem der eigene Crawler der Plattform die echten og:image- und og:title-Meta-Tags Ihrer Seite liest, erzeugt die echte Live-Karte.

Alles wird lokal auf einem HTML-Canvas-Element in Ihrem Browser gerendert: Titel, Untertitel, hochgeladener Hintergrund und Logo verlassen niemals Ihr Gerät, und die exportierte Datei ist eine saubere PNG-Datei via canvas.toBlob(), die nur das enthält, was Sie komponiert haben – keine Mockup-Rahmen, künstlichen Browserleisten oder Plattform-Logos werden in das heruntergeladene Bild eingebacken. Falls Sie die exportierte PNG-Datei anschließend noch in der Größe ändern oder konvertieren müssen, schließen die Bildgrößenänderungs- und Bildkonvertierungstools dieser Website nahtlos dort an, wo dieses Tool aufhört.