OG-Bilder designen, die Klicks bringen

Ein starkes Open-Graph-Bild kann die Klickrate geteilter Links verdoppeln. Die Design-Regeln sind simpel: eine klare Botschaft, hoher Kontrast, lesbarer Text in Miniaturgröße und Safe Margins, damit Plattformen deine Headline nicht halb abschneiden.

Du brauchst kein Design-Team. Du brauchst ein wiederholbares Template und die Specs aus dem Open-Graph-Bildgrößen-Leitfaden.

Starte mit der 1200 × 630 Leinwand

Alle Tipps unten setzen einen 1200 × 630 px Rahmen bei 1,91:1 voraus. Diese Größe funktioniert auf Facebook, LinkedIn, X, WhatsApp, Discord und Slack. Plattformspezifische Crops stehen im Größen-Guide nach Plattform.

Baue ein Master-Template. Tausche Headline, Hintergrund und Akzentfarbe pro Seite.

Ein Fokuspunkt, eine Botschaft

Link-Vorschau-Karten sind klein. Auf dem Handy kann dein OG-Bild nur etwa 300 px breit sein. Liest niemand die Headline in zwei Sekunden, scrollt er weiter.

Tun

• Eine Headline, maximal 5-8 Wörter
• Ein Supporting-Element (Logo, Foto oder Icon)
• Großzügiger Whitespace

Vermeiden

• Textabsätze
• Mehrere CTAs, die um Aufmerksamkeit kämpfen
• Dünne Dekor-Schriften unter 24 px Exportgröße

Der og:title-Tag trägt die volle Headline. Das Bild unterstützt visuell. Den ganzen Titel musst du nicht in die Grafik quetschen.

Typografie, die das Verkleinern überlebt

Social Plattformen skalieren dein Bild aggressiv herunter. Design für die Miniatur, nicht für die volle Leinwand.

Schriftgrößen-Richtwerte

Nutze fette Sans-Serif: Inter, Helvetica, Arial oder deine Brand-Font in Heavy. Keine Light Weights und keine Serif-Fließtexte in kleiner Rendergröße.

Kontrast

Heller Text auf dunklem Grund oder dunkler Text auf hellem. Mindestens WCAG AA (4,5:1). Verläufe hinter Text sehen in Figma gut aus und scheitern auf dem Handy.

Safe Zone: Wichtiges in der Mitte

Plattformen schneiden Ränder unterschiedlich. Facebook und LinkedIn trimmen oben oder unten in manchen Layouts. Discord und Slack skalieren passend.

Zeichne eine Safe Zone bei 80 % der Canvas-Mitte. Headline, Logo und Gesichter bleiben darin. Nichts Wichtiges innerhalb von 60 px zum Rand.

┌─────────────────────────────────────┐
│  Rand (kein kritischer Inhalt)      │
│   ┌─────────────────────────┐       │
│   │                         │       │
│   │      SAFE ZONE          │       │
│   │   Headline + Logo       │       │
│   │                         │       │
│   └─────────────────────────┘       │
│                                     │
└─────────────────────────────────────┘

Farbe und Brand-Konsistenz

Dein OG-Bild ist ein Billboard für die Seite. Passe Site-Farben, Logo-Platzierung und Ton an.

Praktische Palette

• Maximal 2-3 Farben pro Bild
• Brand-Akzent für Headline oder Unterstreichung
• Neutraler Hintergrund (weiß, dunkelgrau oder Brand Primary entsättigt)
• Kein Neon auf Neon

Logo in jeder Ecke gleich platzieren. Konsistenz baut Wiedererkennung, wenn jemand mehrere Links deiner Domain im Feed sieht.

Fotos vs. Illustrationen

Beides funktioniert. Wähle nach Content-Typ.

Fotos passen zu Artikeln, Case Studies und Produktseiten. Ein starkes Querformat-Foto. Halbtransparenter Overlay, wenn Text oben drauf muss.

Illustrationen und Flat Graphics passen zu Docs, SaaS-Landingpages und Tools. Bleiben bei JPG-Kompression lesbar. Textlastige Designs als PNG exportieren, wenn JPG-Artefakte sichtbar werden.

Templates, die mit der Site skalieren

Manuelles OG-Design skaliert nicht über ein Dutzend Seiten. Richte Stufen ein:

Nutze den kostenlosen OG-Bild-Generator bei OpenGraph Check für ein Basis-Template ohne Photoshop. Export bei 1200 × 630, Upload ans CDN.

Häufige Design-Fehler

Text zu klein

Sieht auf dem Monitor gut aus. Unleserlich in WhatsApp. Auf 25 % in deinem Tool zoomen und Headline neu lesen.

Unruhige Hintergründe

Stock-Fotos mit viel Detail kämpfen gegen Text. Hintergrund blurren, abdunkeln oder Farbblock hinter die Headline.

Quadrat- oder Hochformat-Quelle

Plattformen croppen auf Querformat. Von Anfang an in 1,91:1 designen.

Dark Mode im Feed ignorieren

LinkedIn- und X-Feeds sind oft dark. Schwarzer Grund mit dunkelgrauem Text verschwindet. Auf hellem und dunklem UI testen.

Mismatch mit og:title

Bild sagt „Gratis Guide", og:title sagt „Preise". Nutzer fühlen sich getäuscht. Bild-Headline an Meta-Titel anpassen.

Pre-Export-Checkliste

• Canvas 1200 × 630 px
• Headline bei 25 % Zoom lesbar
• Logo und Text in Safe Zone
• Datei unter 300 KB (JPG) oder optimiertes PNG
• Headline passt zu og:title
• Vorschau mit OpenGraph Check gescannt

Design auf echten Vorschauen testen

Design-Tools lügen über Karten-Rendering. Immer die Live-URL validieren.

1. Bild auf öffentlichen HTTPS-Pfad hochladen.
2. og:image, og:title, og:description setzen.
3. Mit OpenGraph Check für Facebook, LinkedIn, X, WhatsApp und Discord prüfen.
4. Test-Link an dich selbst auf WhatsApp oder Slack schicken.

Sieht das Bild falsch aus, Design oder Specs fixen, bevor die Kampagne live geht. Siehe Open Graph Tags testen für den vollen Workflow.

FAQ

Was macht ein OG-Bild klickstark?

Eine klare Headline, hoher Kontrast, erkennbares Branding und ein Visual, das zur Seite passt. Klarheit schlägt Dekoration.

Wie viel Text ins OG-Bild?

5-8 Wörter in der Grafik. Den vollen Titel in og:title, nicht in die Grafik quetschen.

Logo auf jedem OG-Bild?

Ja, an fester Position. Kleine Eck-Logos funktionieren. Keine riesigen Wasserzeichen.

Kann ich Canva für OG-Bilder nutzen?

Ja. Custom Size 1200 × 630 px. JPG für Fotos, PNG für textlastige Layouts.

Brauchen OG-Bilder Alt-Text?

Open Graph hat kein Alt-Attribut für og:image. Sinnvoller Inhalt gehört in og:title und og:description.

OG-Bilder für einen Blog mit hunderten Posts?

Dynamische OG-Generierung (Next.js ImageResponse oder Template-Pipeline). Siehe Dynamische OG-Bilder erklärt.

Welche Schriftgröße für mobile Link-Vorschauen?

Headline bei 48-72 px auf 1200 × 630. Bei 25 % Zoom im Editor prüfen.

Fazit

Design OG-Bilder bei 1200 × 630 px mit einer fetten Headline, starkem Kontrast und zentrierter Safe Zone. Visual an og:title anpassen, unter 300 KB exportieren und vor jedem Launch mit OpenGraph Check previewen. Gutes Design ist der schnellste Weg zu mehr Klicks ohne Content-Änderung.