OG-Images erstellen — Vorschaubilder für Social Sharing
Das og:image ist das wichtigste visuelle Element beim Teilen von Links in sozialen Netzwerken. Ein starkes OG-Image erhöht die Klickrate deutlich, während ein fehlendes oder schlechtes Bild im Feed untergeht. Dieser Artikel erklärt, wie man OG-Images erstellt, welche Dimensionen für welche Plattform optimal sind und wie der WikiPlus OG-Preview-Tool hilft, das Ergebnis vor dem ersten Share zu testen.
OG-Image-Dimensionen für alle Plattformen
Die optimalen OG-Image-Dimensionen unterscheiden sich leicht zwischen den Plattformen, aber ein universell gut funktionierendes Format deckt die wichtigsten Plattformen ab. Der universelle Standard: 1200x630 Pixel (Verhältnis 1.9:1). Dieses Format funktioniert optimal auf: Facebook (1200x630 empfohlen), Twitter bei summary_large_image (1200x628 empfohlen), LinkedIn (1200x627 empfohlen), WhatsApp (400x210 wird angezeigt, 1200x630 wird auf 400x210 skaliert), iMessage und Telegram. Wichtig: 'Sichere Zone' — halte wichtige Inhalte (Text, Logo) 50-100 Pixel von den Rändern entfernt, da einige Plattformen das Bild leicht zuschneiden oder Text-Overlays über die Ränder legen. Dateiformat: JPG oder PNG. JPG ist kleiner, PNG unterstützt Transparenz. WEBP wird von allen modernen Plattformen akzeptiert. Maximale Dateigröße: Twitter 5 MB, Facebook 8 MB — halte Bilder unter 1 MB für schnellere Ladezeiten.
OG-Image-Design: Was auf Social Media funktioniert
Beim Design von OG-Images gelten andere Regeln als bei klassischen Website-Grafiken. Das Bild wird oft sehr klein angezeigt (im Feed zwischen anderen Beiträgen), muss also auch in kleiner Größe erkennbar und ansprechend sein. Effektive Design-Elemente: Hoher Kontrast: Helles auf dunklem Hintergrund oder umgekehrt. Kleine Details gehen verloren, klare Kontraste bleiben wahrnehmbar. Großer, lesbarer Text: Falls Text im Bild, mindestens 30-40 Pixel Schriftgröße für die Hauptaussage. Markenbezug: Logo und Unternehmensfarben sollten erkennbar sein. Bilder von Personen: Gesichter erzeugen emotionale Reaktionen und erhöhen Engagement. Klare Hauptaussage: Ein OG-Image sollte eine Kernbotschaft kommunizieren — nicht zu viele Infos. Hintergrund: Einfarbige oder gradient-Hintergründe funktionieren oft besser als überfüllte Fotohintergründe.
Tools für OG-Image-Erstellung
Für die Erstellung von OG-Images gibt es verschiedene Ansätze je nach Budget und technischem Know-how. Canva (canva.com): Kostenlose Online-Plattform mit OG-Image-Vorlagen (1200x630 als Format wählbar). Einsteigerfreundlich, viele Designvorlagen. Figma: Professionelles Design-Tool, ideal für konsistente OG-Image-Templates. Kostenfrei für Einzelpersonen. Adobe Express: Schnelle Bildbearbeitung mit Templates. Für Entwickler: Automatisierte OG-Image-Generierung mit open-graph-image-gen (Next.js/Vercel), Satori (JSX zu SVG zu PNG), Puppeteer (HTML zu Screenshot), oder Cloudflare Images Transformations. Automatisierte Generierung lohnt sich bei Websites mit vielen Seiten (Blogs, E-Commerce), wo für jeden neuen Artikel oder jedes Produkt automatisch ein OG-Image mit Titel und Kategorie erzeugt wird. Nach der Erstellung immer mit dem WikiPlus OG-Preview-Tool testen.
Dynamische OG-Images mit Next.js und Vercel
Für Websites, die auf Next.js basieren, bietet Vercel eine elegante Lösung für automatisch generierte OG-Images. Mit dem Paket @vercel/og können OG-Images als JSX-Komponenten definiert werden, die bei Bedarf als PNG gerendert werden. Grundstruktur: // app/og/route.jsx import { ImageResponse } from '@vercel/og'; export async function GET(request) { const { searchParams } = new URL(request.url); const title = searchParams.get('title'); return new ImageResponse(<div style={{ display: 'flex', background: '#0011ff', width: '1200px', height: '630px', alignItems: 'center', justifyContent: 'center' }}><h1 style={{ color: 'white', fontSize: 60 }}>{title}</h1></div>, { width: 1200, height: 630 }); }. Die og:image-URL wäre dann: https://example.com/og?title=Mein+Seitentitel. Jede Seite bekommt automatisch ein individuelles OG-Image mit dem richtigen Titel — ohne manuelle Bildbearbeitung.
Häufig gestellte Fragen
- Muss das og:image-Bild auf dem eigenen Server liegen?
- Die og:image-URL muss über HTTPS öffentlich zugänglich sein. Es kann auf dem eigenen Server, einem CDN oder einem externen Bildhosting-Dienst liegen. Wichtig: keine passwortgeschützten oder authentifizierungsgeschützten URLs — Crawler der sozialen Netzwerke haben keinen Login-Zugang.
- Kann man verschiedene OG-Images für Facebook und Twitter verwenden?
- Ja, og:image wird von beiden Plattformen genutzt, aber twitter:image kann explizit für Twitter gesetzt werden. Wenn beide Tags vorhanden sind, nutzt Twitter das twitter:image-Bild. So können für beide Plattformen optimierte Bilder mit unterschiedlichen Dimensionen oder Designs verwendet werden.
- Wie viele KB sollte ein OG-Image maximal haben?
- Die meisten Plattformen akzeptieren bis zu 5-8 MB, aber für schnelle Ladezeiten sollte das OG-Image unter 200 KB bleiben. JPG mit 80% Qualitätsstufe bei 1200x630 px liegt typischerweise zwischen 80 und 150 KB — ein guter Kompromiss aus Qualität und Ladezeit.