FeatureImg
Anmelden

OG-Bild-Generator

Erstellen Sie ein 1200×630 Open-Graph-Bild für Link-Vorschauen—keine Designsoftware und kein Konto nötig. Wählen Sie eine Vorlage, bearbeiten Sie den Titel, exportieren Sie PNG oder JPEG (testen Sie WebP, bevor Sie es als og:image nutzen), und setzen Sie og:image auf Ihrer Seite.

Empfohlene Exportgröße

1200×630 px

Empfohlene Vorlagen

Jede Vorlage öffnet den Editor mit diesem Format-Preset. Alle Vorlagen ansehen

So funktioniert’s

  1. Öffnen Sie den OG-Image-Generator mit dem auf 1200×630 festgelegten Open-Graph-Format.
  2. Wählen Sie eine Vorlage, die zur Seite passt, die Sie teilen (textbasiert oder geteilte Layouts).
  3. Bearbeiten Sie Titel und Untertitel und passen Sie Hintergrund, Kontrast sowie optionale Bilder an.
  4. Exportieren Sie PNG oder JPEG, laden Sie die Datei auf Ihre Website hoch und setzen Sie og:image auf diese URL.

Best Practices

  • Zielen Sie auf etwa 1200×630 px – das gängige Standardmaß für Rich-Link-Vorschauen.
  • Halten Sie die Überschrift kurz genug, damit sie in Feeds und Chats als Vorschaubild lesbar bleibt.
  • Nutzen Sie starken Kontrast; Plattformen komprimieren Bilder oft aggressiv neu.
  • Platzieren Sie die Schlüsselwörter in der ersten Hälfte des Titels, falls Ränder beschnitten werden.
  • Bevorzugen Sie PNG oder JPEG für og:image (Meta nennt JPEG, GIF und PNG für og:image:type). Testen Sie WebP, bevor Sie sich darauf verlassen, und setzen Sie og:image sowie twitter:image auf die endgültige öffentliche URL.
  • Prüfen Sie die Vorschau in Slack oder LinkedIn erneut, nachdem Sie das Bild geändert haben; manche Caches behalten die alte Karte, bis sie aktualisiert wird.

Implement Open Graph images in your website

After you generate an OG image, upload the file to a public path on your site and set og:image (and usually twitter:image) to that URL. Include width, height, and alt so crawlers can render the card reliably. Prefer PNG or JPEG for the widest link-preview compatibility; test WebP before using it as og:image.

<!-- Basic Open Graph tags -->
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://yourdomain.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph image" />
<meta property="og:image:type" content="image/png" />
<meta property="og:url" content="https://yourdomain.com/page" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/og-image.png" />

FAQ

Verwandte Guides

Mehr zu Größen, Best Practices und Wegen, bessere Bilder für dieses Format zu erstellen.

Erstellen Sie Ihr nächstes Feature-Bild

Starten Sie mit einem Format, wählen Sie eine Vorlage und exportieren Sie in Minuten ein sauberes Bild.

OG-Bild erstellen