Kostenloses Tool
OG-Image-Generator
Gestalten Sie das Social-Media-Vorschaubild für Ihre Website: Titel, Farben, Logo, fertig. Alles läuft lokal in Ihrem Browser. Nichts wird hochgeladen, keine Anmeldung nötig.
Text
Hintergrund
Vorlagen
Muster
Textfarbe
Automatisch wählt je nach Hintergrund helle oder dunkle Schrift.
Logo (optional)
Logo-Position
Layout
Schrift
Vorschau
1200 × 630 px. Das exportierte PNG hat immer die volle Größe
Wird als og-image.png gespeichert
100 % clientseitig. Ihre Texte und Ihr Logo verlassen Ihr Gerät nicht. Ihre Einstellungen werden in diesem Browser gespeichert und beim Neuladen wiederhergestellt.
So binden Sie das Bild ein
Laden Sie das PNG auf Ihre Website hoch (z. B. als /og-image.png) und fügen Sie diese Tags in den <head> jeder Seite ein:
<meta property="og:image" content="https://www.example.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />Open-Graph-Bilder, kurz erklärt
Was ist ein OG-Image?
Das Open-Graph-Bild ist das Vorschaubild, das erscheint, wenn jemand Ihren Link auf LinkedIn, Facebook, WhatsApp, Slack oder im Chat teilt. Es wird über einen einzigen Meta-Tag, og:image, im Head der Seite definiert. Links mit einem starken Vorschaubild bekommen deutlich mehr Klicks als eine nackte URL. Das macht das OG-Image zu einem der günstigsten Marketingmittel überhaupt.
Die richtige Größe: 1200 × 630 Pixel
Der De-facto-Standard sind 1200 × 630 Pixel, ein Seitenverhältnis von 1,91:1. Diese Größe wird auf allen großen Plattformen scharf dargestellt und bleibt deutlich unter den Dateigrößen-Limits. Halten Sie wichtigen Text von den Rändern fern: Manche Plattformen beschneiden das Bild leicht oder legen UI-Elemente darüber. Ein Sicherheitsabstand von etwa 60–80 Pixeln pro Seite ist eine gute Faustregel.
Twitter / X: summary_large_image
X (ehemals Twitter) nutzt ein eigenes Card-System, greift aber problemlos auf Ihre Open-Graph-Tags zurück. Fügen Sie '<meta name="twitter:card" content="summary_large_image">' hinzu, und X zeigt Ihr 1200 × 630-Bild als große Karte statt als kleines Thumbnail. Ein separates Bild brauchen Sie nicht. Ein gut gemachtes OG-Image deckt alle Plattformen ab.
Ein Bild pro Seite schlägt ein Bild pro Website
Ein generisches Bild für die ganze Website funktioniert, aber Bilder pro Seite erzielen meist bessere Ergebnisse: Setzen Sie den Seitentitel ins Bild, damit die Vorschau Ihre Botschaft wiederholt. Mit diesem Generator erstellen Sie in Minuten einen konsistenten Satz mit gleichem Hintergrund, gleichem Logo und anderer Überschrift.
Vorschau testen, bevor Sie teilen
Plattformen cachen OG-Bilder aggressiv. Prüfen Sie Ihre URL nach einer Änderung mit einem dieser Debugger, um den Cache zu aktualisieren und das Ergebnis zu kontrollieren:
- Facebook Sharing Debugger: Zeigt genau, was Facebook ausliest, und erzwingt ein erneutes Crawlen.
- LinkedIn Post Inspector: Aktualisiert den LinkedIn-Cache und zeigt die Karten-Vorschau.
- opengraph.xyz: Vorschau für Facebook, X, LinkedIn und Discord an einem Ort.
Brauchen Sie eine Website, die man gerne teilt?
Wir konzipieren und entwickeln schnelle, wartbare Websites und Apps, vom ersten Pixel bis zu den Meta-Tags. Wenn Ihr Webauftritt mehr braucht als ein frisches OG-Image: Sprechen wir darüber.