OG Image Generator – Social Share Image Maker

Ein Open Graph-Bild ist das Bild, das angezeigt wird, wenn ein Link in einen Chat, einen Tweet oder einen Slack-Kanal eingefügt wird – und jede Plattform, die einen Link rendert, erwartet eine Leinwand mit etwa 1200 x 630 Pixeln, der Größe, nach der die Karten og:image von Facebook und summary_large_image von Twitter entworfen wurden. Bei einer falschen Größe erscheint das Bild beschnitten, verschwommen oder gestaucht. Wenn das Layout falsch ist, sieht der Titel wie ein unleserlicher Streifen vor einem belebten Foto aus. Dieses Tool erstellt das Bild mithilfe der Canvas 2D-API in der tatsächlichen Zielauflösung, sodass Sie in der Vorschau genau das Pixelraster sehen, das im PNG enthalten ist.

Wählen Sie einen Hintergrund – eine flache Farbe, einen zweistufigen linearen Farbverlauf, der aus zwei von Ihnen gewählten Farben besteht, oder ein hochgeladenes Foto, das so zugeschnitten wird, dass es den gesamten 1200×630-Rahmen ausfüllt, genau wie ein CSS-Hintergrund-Size:-Cover, anstatt überproportional gestreckt zu werden. Geben Sie einen Titel und einen optionalen Untertitel ein: Beide werden Zeichen für Zeichen anhand der eigenen Schriftartmetriken der Leinwand gemessen, sodass eine Überschrift, die zu lang ist, um in eine Zeile zu passen, an einer echten Wortgrenze in eine zweite oder dritte Zeile umgebrochen wird, anstatt über den Rand hinauszulaufen oder unsichtbar abgeschnitten zu werden. Wählen Sie die Ausrichtung „Mitte“ oder „Links“, wählen Sie eine Textfarbe, die sich gut von Ihrem Hintergrund abhebt, und platzieren Sie optional ein Logo in einer festen, lesbaren Größe in der Ecke.

Unterhalb der Leinwand zeigen vier kleine Karten ungefähr an, wie das fertige Bild aussieht, wenn eine echte Plattform es in ihr eigenes Chrom hüllt: Die Karte von Twitter/X zeigt nur die Domain und einen fett gedruckten Titel unter dem Bild ohne Beschreibungszeile, Facebook fügt einen Domainstreifen in Großbuchstaben über einem Titel- und Beschreibungsblock hinzu, LinkedIn platziert die Domain unter dem Titel ohne jegliche Beschreibung und die Einbettung von Discord platziert die Domain, den Titel und die Beschreibung über dem Bild in einem eigenen dunklen Thema. Hierbei handelt es sich um stilisierte Näherungswerte für Planungszwecke – eindeutig als illustrativ gekennzeichnet, mit einer Domain-Zeile, die Sie selbst eingeben – und nicht um einen Live-Abruf oder Screenshot der tatsächlichen Plattformen, da das Teilen eines Links und das Lesen der echten og:image- und og:title-Meta-Tags Ihrer Seite durch den Crawler jeder Plattform tatsächlich die Live-Karte erstellt.

Alles wird lokal auf einem HTML-Canvas-Element in Ihrem Browser gerendert: Titel, Untertitel, hochgeladener Hintergrund und Logo verlassen nie Ihr Gerät, und die exportierte Datei ist eine saubere „canvas.toBlob()“-PNG-Datei, die nur das enthält, was Sie erstellt haben – keine Mockup-Rahmen, gefälschte Browserleisten oder Plattformlogos werden in das heruntergeladene Bild integriert. Wenn Sie anschließend auch die Größe des exportierten PNG ändern oder konvertieren müssen, machen die Bild-Resizer- und Bildkonverter-Tools dieser Website genau da weiter, wo diese aufhören.