Kostenloser Online-OG-Bildgenerator
Erstellen Sie 1200×630 Open-Graph-Vorschaubilder für Facebook, LinkedIn, X und Slack. Wählen Sie aus 16 anpassbaren Vorlagen und laden Sie als JPG oder PNG herunter.
100 % privat. Nichts wird hochgeladen.
Hauptfunktionen
16 fertige Vorlagen
Live-Vorschau beim Tippen
- 100 % browserbasiert – keine Uploads erforderlich
- Kostenlos – Keine Registrierung erforderlich
So erstellen Sie ein OG-Bild in 3 Schritten
Geben Sie Ihren Inhalt ein
Klicken Sie auf „OG-Bild-Editor öffnen" und geben Sie Titel, Beschreibung und Seitenname ein. Die Vorschau aktualisiert sich beim Tippen.
Vorlage und Markenfarbe auswählen
Wählen Sie eine von 16 Vorlagen, etwa Clean, Dark, Gradient oder Grid (Light). Die meisten übernehmen Ihre Markenfarbe. Fügen Sie bei Bedarf unter „Eigenes Bild" ein Logo oder Hintergrundfoto hinzu.
Laden Sie Ihr Bild herunter
Wählen Sie unter „Export" JPG oder PNG und klicken Sie auf „JPG herunterladen" oder „PNG herunterladen". Die Datei ist immer 1200×630 px groß, die Standardgröße für Open-Graph-Bilder.
Wenn Sie ein benutzerdefiniertes OG-Bild benötigen
Blog & Inhalte
- Erstellen Sie vor der Veröffentlichung eine personalisierte Vorschau für jeden Blogbeitrag.
- Erstellen Sie passende OG-Bilder für Ihre Dokumentationsseiten
- Gestalten Sie einheitliche Vorschauen für Newsletter-Archivseiten
- Heben Sie Ihre Artikel-Links bei X, LinkedIn und Slack hervor
Produkt & SaaS
- Erstellen Sie eine markengerechte Vorschau für jede Feature-Seite
- Erstellen Sie OG-Bilder für Changelog- und Release-Beiträge
- Gestalten Sie Karten für Preis-, Über-uns- und Anmeldeseiten
- Entwerfen Sie Vorschauen für jede Kampagnen-Landingpage
Entwickler & Agenturen
- Entwerfen Sie ein Kartendesign, bevor Sie einen dynamischen Generator bauen
- Erstellen Sie ein Standard-OG-Bild für Seiten ohne eigenes Bild
- Erstellen Sie Kundenkarten in deren Markenfarbe mit deren Logo
- Testen Sie mehrere Überschriften-Varianten nebeneinander
Was ist ein Open-Graph-Bild (OG-Bild)?
Ein Open-Graph-Bild, kurz OG-Bild, ist das Bild, das angezeigt wird, wenn jemand einen Link zu Ihrer Seite bei Facebook, LinkedIn, X, Slack oder ähnlichen Apps teilt. Sie legen es mit dem og:image-Tag im HTML Ihrer Seite fest. Ein Bild für Social-Media-Beiträge ist etwas anderes: Das laden Sie selbst direkt auf einer Plattform hoch.
Open-Graph-Bildgröße, -format und -test
Ein gutes OG-Bild hat die richtige Größe, ist leicht genug für schnelles Laden und auf dem Smartphone gut lesbar. Diese Antworten helfen Ihnen, jeden Aspekt richtig umzusetzen.
Welche Größe sollte ein Open-Graph-Bild haben?
Verwenden Sie 1200×630 px im Seitenverhältnis 1,91:1 – das funktioniert auf allen wichtigen Plattformen. Genau diese Größe erzeugt dieser Generator. Jede Plattform hat eigene Vorgaben:
- Facebook: mindestens 1200×630 für scharfe Vorschauen. Unter 600×315 zeigt der Link ein kleines statt ein großes Bild. Dateien dürfen bis zu 8 MB groß sein.
- LinkedIn: mindestens 1200×627 bei 1,91:1, bis zu 5 MB.
- X: Große Karten nutzen ein 2:1-Format, daher kann bei einem 1200×630-Bild oben und unten ein schmaler Streifen abgeschnitten werden. Dateien müssen unter 5 MB bleiben.
JPG oder PNG: Welches Format eignet sich am besten für ein OG-Bild?
JPG ist hier die Standardeinstellung und hält die meisten Karten klein. Der Qualitätsregler reicht von 50 % bis 95 %, die geschätzte Dateigröße wird unter 200 KB grün angezeigt. PNG behält jedes Pixel bei, kann aber 500 KB oder mehr erreichen. Haben Sie bereits ein fertiges Bild? Nutzen Sie stattdessen die Vorlage „Facebook-Beitrag" (1200×630) im Bildgrößenänderer.
Logo oder Hintergrund: Wie fügen Sie Ihr eigenes Bild hinzu?
Wählen Sie den Bildmodus unter „Eigenes Bild". Unterstützt werden JPG-, PNG-, WebP- und SVG-Dateien.
- Logo (Overlay): Ihr Bild erscheint unten links in der gewählten Vorlage, etwa 80 px hoch.
- Hintergrund (Füllung): Ihr Foto bedeckt die gesamte Karte und wird passend zugeschnitten. Die Ränder werden leicht abgedunkelt, und der Text sitzt auf einem dunklen Balken am unteren Rand.
- Der Hintergrundmodus nutzt ein eigenes Textlayout, daher ändert die gewählte Vorlage das Ergebnis nicht.
Was macht ein gutes OG-Bild aus?
Die meisten Nutzer sehen Ihre Karte in Smartphone-Größe, halten Sie den Titel also kurz und prägnant. Vorlagen zeigen etwa 65 bis 70 Zeichen des Titels und 110 bis 120 der Beschreibung an, der Rest wird abgeschnitten. Halten Sie wichtige Wörter von den Rändern fern, da manche Apps diese beschneiden. Verwenden Sie auf jeder Seite dieselbe Vorlage und Markenfarbe, damit Leser Ihre Links wiedererkennen.
Wie testen Sie Ihr OG-Bild?
Veröffentlichen Sie die Seite und fügen Sie die URL in Facebooks Sharing-Debugger oder LinkedIns Beitrags-Inspector ein. Beide zeigen die Karte an und holen eine aktuelle Kopie. Bei X fügen Sie den Link in einen neuen Beitrag ein: Die Kartenvorschau wird angezeigt, ohne dass Sie posten müssen. Wird weiterhin ein altes Bild angezeigt, laden Sie das neue unter einem neuen Dateinamen hoch und aktualisieren Sie das Tag.
Weitere Design- und Generator-Tools
Erstellen, konvertieren und gestalten – alles kostenlos und direkt im Browser.
Screenshot-Generator
Erstellen Sie App-Store-Screenshots mit Gerätemodellen.
Favicon-Generator
Exportieren Sie Favicons in allen gängigen Größen aus einem Bild.
QR-Code-Generator
Erstellen Sie QR-Codes für Links, Text, WLAN-Zugänge oder vCards.
Bild zu Base64
Bilder als Base64-Daten-URLs kodieren, um sie in HTML und CSS einzubetten.
OG Image Generator – Häufig gestellte Fragen
Häufig gestellte Fragen zur Erstellung von Open Graph-Images online
Welche OG-Bildgröße ist korrekt?
Verwenden Sie 1200×630 Pixel im Seitenverhältnis 1,91:1. Dieses Tool exportiert immer genau in dieser Größe. Facebook benötigt mindestens 600×315 für eine große Vorschau, LinkedIn verlangt mindestens 1200×627. Ein 1200×630-Bild funktioniert bei Facebook, LinkedIn und X sowie in den meisten Chat-Apps mit Link-Vorschau.
Welche Größe hat ein Twitter-(X)-Card-Bild?
Die große Bildkarte von X nutzt ein 2:1-Format, mindestens 300×157 px und unter 5 MB. Ein 1200×630-OG-Bild funktioniert dort ebenfalls, X kann jedoch oben und unten einen schmalen Streifen abschneiden. X liest og:image, wenn kein twitter:image-Tag vorhanden ist. Für die große Karte fügen Sie zusätzlich <meta name="twitter:card" content="summary_large_image" /> zu Ihrer Seite hinzu.
Fügt dieser Generator die Meta-Tags zu meiner Website hinzu?
Nein. Er erstellt nur die Bilddatei. Sie laden die Datei selbst auf Ihre Website hoch und fügen das og:image-Tag selbst hinzu, wie in der letzten Frage unten gezeigt. Viele Website-Baukästen und Blog-Plattformen haben auch ein Feld für Social- oder Share-Bilder, in dem Sie es stattdessen hochladen können.
Welche Schriftarten und Sprachen unterstützt das OG-Bild?
Jede Vorlage nutzt die Schriftart Inter in normal und fett. Der Editor lädt nur den lateinischen Zeichensatz von Inter, daher funktionieren Englisch und die meisten westeuropäischen Sprachen. Chinesisch, Japanisch, Koreanisch, Arabisch und Kyrillisch werden nicht korrekt dargestellt. Eigene Schriftarten können nicht hochgeladen werden.
Darf ich diese Originalbilder kommerziell nutzen?
Ja. Die erstellten Bilder gehören Ihnen und dürfen auf privaten und geschäftlichen Websites ohne Wasserzeichen und ohne Namensnennung verwendet werden. Die Schriftart Inter steht unter der SIL Open Font License, die eine kommerzielle Nutzung erlaubt. Wenn Sie ein Logo oder Foto hinzufügen, stellen Sie sicher, dass Sie die Nutzungsrechte dafür besitzen.
Wie füge ich ein Originalbild zu meiner Website hinzu?
Laden Sie das heruntergeladene Bild auf Ihre Website oder ein CDN hoch und fügen Sie dann das og:image-Meta-Tag im <head> Ihrer Seite ein: <meta property="og:image" content="https://ihredomain.de/og/seitenname.jpg" />. Verwenden Sie die vollständige URL, beginnend mit https. Fügen Sie außerdem og:image:width und og:image:height mit den Werten 1200 und 630 hinzu. Nutzen Sie nach der Veröffentlichung Facebooks Sharing-Debugger und LinkedIns Beitrags-Inspector, um die zwischengespeicherte Vorschau zu aktualisieren.