OG-Bild-Generator
Erstellen Sie ein 1200×630 Open-Graph-Bild für Link-Vorschauen auf Blogs, Landingpages und Produktlaunches.
Empfohlene Exportgröße
1200×630 px
Empfohlene Vorlagen
Jede Vorlage öffnet den Editor mit diesem Format-Preset. Alle Vorlagen ansehen
Hero Split
Creator covers, launches, personal branding
Full Image Split
Visual-first covers with a full-bleed image split
Split CTA
Launch posts with a headline and clear call to action
Video Split
Keynote and talk covers with a wide side media panel
Stagger Split
Product stories with a staggered four-card media stack
Communication Pad
Brand-led stories with a hero image and supporting copy
Left Image
Visual-led covers with copy and a clear CTA on the right
Tilted Image
Playful launches with a tilted product visual
Card Split
Offer and launch cards with a bordered white panel and shadow
Diagonal Split
Bold launches with a diagonal text-and-image cut
Clean Editorial
Essays, newsletters, thought leadership
Tutorial Card
Tutorials, guides, how-to content
Data Report
Reports, trends, analysis
Product Update
Product launches, updates, release notes
Creator Bold
Social posts, creator content
So funktioniert’s
- Öffnen Sie den OG-Image-Generator mit dem auf 1200×630 festgelegten Open-Graph-Format.
- Wählen Sie eine Vorlage, die zur Seite passt, die Sie teilen (textbasiert oder geteilte Layouts).
- Bearbeiten Sie Titel und Untertitel und passen Sie Hintergrund, Kontrast sowie optionale Bilder an.
- Exportieren Sie PNG, JPEG oder WebP, 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.
- Verwenden Sie dieselbe Layout-Familie über Beiträge hinweg, damit Shares markenkonform wirken.
- Setzen Sie nach dem Upload og:image (und twitter:image) auf die endgültige öffentliche Datei-URL, nicht auf einen lokalen Pfad.
- 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. Link previews then show your title, description, and graphic across social platforms and messengers.
<!-- 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: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.
- How-to guides
How to Create an Open Graph Image
Learn how to create an Open Graph image for blog posts, landing pages, product launches, and social shares. Use templates to design a clean link preview image online.
- Design ideas
Open Graph Image Examples
Explore Open Graph image examples for blog posts, landing pages, product launches, and social shares. Learn what makes a better link preview image.
- Size guides
Open Graph Image Size: 1200×630 for Link Previews
OG image size cheat sheet: 1200×630 px (~1.91:1). Cropping tips for Slack, LinkedIn & Meta—plus a free OG generator preset that exports the right canvas.
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.