FeatureImgFeatureImg

Alle Vorlagen ansehen

Empfohlene Exportgröße

1200×630 px

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.

Open-Graph-Bilder auf deiner Website einbinden

Lade das erzeugte OG-Bild auf einen öffentlichen Pfad deiner Website und setze og:image (und meist auch twitter:image) auf diese URL. Gib width, height und alt an, damit Crawler die Karte zuverlässig rendern. Bevorzuge PNG oder JPEG für maximale Kompatibilität der Link-Vorschau; teste WebP, bevor du es als og:image verwendest.

<!-- 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