OG-Bild erstellen
OG-Bild erstellen im Format 1200 × 630: Titel, Farben, Logo und Hintergrund wählen und das Open-Graph-Bild als PNG oder JPG speichern.
Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.
Gute Vorschaubilder für geteilte Links
Mit diesem Generator können Sie ein OG-Bild erstellen, also das Open-Graph-Bild, das Facebook, LinkedIn, Messenger und X als Vorschau zeigen, wenn jemand einen Link teilt. Das empfohlene Format ist 1200 × 630 Pixel (oft als 1200x630 geschrieben), ein Seitenverhältnis von 1,91 zu 1. Ein gutes Social-Media-Vorschaubild hat einen großen, kurzen Titel, kräftigen Kontrast und wenig Kleinkram, weil es in Feeds oft nur briefmarkengroß erscheint.
Das Werkzeug zeichnet Titel, Untertitel und Domain auf ein Canvas, bricht den Titel automatisch um und verkleinert ihn, wenn er nicht passt. Optional legen Sie ein Logo oder ein Hintergrundbild darüber; beim Layout „Text links, Bild rechts“ wird das Bild rechts zugeschnitten. Unter der Vorschau steht der passende Code mit og:image, Breite, Höhe und Alternativtext sowie das Twitter Card Bild über twitter:card mit dem Wert summary_large_image. Die restlichen Meta-Tags erzeugt der Open-Graph-Generator.
Grenzen: Die Schrift ist eine Systemschrift Ihres Geräts; auf anderen Geräten sieht nur das gespeicherte Bild gleich aus, nicht die Vorschau. Wichtige Inhalte sollten nicht ganz am Rand stehen, weil manche Plattformen die Ränder beschneiden oder ein quadratisches Format anzeigen. Laden Sie das Bild mit absoluter URL hoch.
Anleitung: OG-Bild erstellen in 4 Schritten
- Tragen Sie unter „Titel“ die Überschrift Ihrer Seite ein und optional einen „Untertitel“ sowie die „Domain oder Marke“.
- Wählen Sie „Layout“, „Hintergrund“, „Textfarbe“ und „Akzentfarbe“; optional laden Sie ein Logo oder Hintergrundbild.
- Prüfen Sie die Vorschau in Originalgröße 1200 × 630 und den Hinweis zur Lesbarkeit.
- Speichern Sie das Bild mit „PNG speichern“ oder „JPG speichern“ und kopieren Sie das passende Meta-Tag.
Typische Anwendungsfälle
- Für jeden Blogartikel ein einheitliches Vorschaubild mit Titel erzeugen, das beim Teilen auf LinkedIn erscheint.
- Ein Standard-og:image für eine Website ohne eigene Bilder gestalten.
- Vorschaubilder für Veranstaltungen, Stellenanzeigen oder Produktseiten ohne Grafikprogramm anlegen.
- Twitter-Card-Bilder für Links in Beiträgen auf X erstellen.
Häufige Fragen
Welche Größe sollte ein OG-Bild haben?
1200 × 630 Pixel. Diese Größe empfehlen Facebook und LinkedIn; X zeigt bei summary_large_image ein ähnliches Querformat. Kleinere Bilder werden oft nur als kleines Vorschaubild angezeigt.
Wie binde ich das Bild ein?
Laden Sie die Datei auf Ihren Server und setzen Sie im head das Tag og:image mit der vollständigen URL. Den passenden Code zeigt das Feld unter der Vorschau.
PNG oder JPG?
Für Grafiken mit Text und Flächen ist PNG schärfer. Mit Foto im Hintergrund ist JPG meist deutlich kleiner bei gutem Ergebnis.
Werden meine Bilder hochgeladen?
Nein. Logo und Hintergrundbild werden nur lokal auf dem Canvas gezeichnet, das Ergebnis speichern Sie direkt.
Welche Dateigröße darf ein OG-Bild haben?
Facebook nennt bis zu 8 MB, für X gelten 5 MB. Ein Bild mit 1200 × 630 Pixel liegt als PNG mit Text meist weit darunter; als JPG wird es noch kleiner.
Warum zeigt LinkedIn noch das alte Vorschaubild?
Plattformen speichern Vorschauen zwischen. Ändern Sie den Dateinamen des Bildes und lassen Sie die URL im Post Inspector von LinkedIn oder im Sharing Debugger von Facebook neu einlesen.
Das könnte auch helfen
Farbumwandler
HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.
ÖffnenFarbpalette aus Bild
Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.
ÖffnenKontrast prüfen (WCAG)
Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.
ÖffnenCSS-Gradient-Generator
Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.
ÖffnenBox-Shadow-Generator
CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.
ÖffnenFlexbox-Generator
Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.
Öffnen