OG-Bild-Resizer Online
Erstelle perfekt dimensionierte Open-Graph-Bilder für Facebook, Twitter/X, LinkedIn und Discord. Ändere die Größe und schneide zu auf 1200×630 oder eine beliebige Plattformgröße. Kostenlos, keine Anmeldung.
Datei hier ablegenTippen, um eine Datei auszuwählen
oder
Supports M4A, WAV, FLAC, OGG, AAC, WMA, AIFF, OPUS • Max 100 MB
So erstellst du ein OG-Bild
Hochladen oder Erfassen
Ziehe dein Bild in das Tool — einen Screenshot, ein Foto oder eine Grafik. Oder gib eine Website-URL ein, um automatisch einen Screenshot einer beliebigen Webseite zu erfassen.
Größe wählen
Wähle eine Plattform-Voreinstellung — Facebook 1200×630, Twitter 1200×628, LinkedIn oder Discord. Das Bild wird mittenpunktweise zugeschnitten, um die genauen Abmessungen zu erfüllen.
Herunterladen
Klicke auf Größe ändern & Herunterladen und hole dir dein OG-Bild sofort einsatzbereit. Lade es auf deine Website hoch und referenziere es in deinen <meta>-Tags.
OG-Bildgrößen für jede Plattform (2026)
Jede Plattform hat ihre eigenen empfohlenen Abmessungen für Link-Vorschaubilder. Die Verwendung der falschen Größe führt zu Zuschnitt, Unschärfe oder das Bild wird überhaupt nicht angezeigt.
| Plattform | Verwendung | Größe (px) | Verhältnis | Mindestgröße | Max. Dateigröße |
|---|---|---|---|---|---|
| Link-Freigabe / og:image | 1200 × 630 | 1.91:1 | 600 × 315 | 8 MB | |
| Twitter / X | summary_large_image | 1200 × 628 | ~1.91:1 | 300 × 157 | 5 MB |
| Twitter / X | summary (Quadrat) | 800 × 800 | 1:1 | 144 × 144 | 5 MB |
| Gemeinsamer Link | 1200 × 627 | 1.91:1 | 200 × 200 | 5 MB | |
| Discord | Eingebettete Vorschau | 1200 × 630 | 1.91:1 | — | 8 MB |
| Slack | Unfurl-Vorschau | 1200 × 630 | 1.91:1 | — | — |
| Link-Vorschau | 1200 × 630 | 1.91:1 | 300 × 200 | — | |
| Telegram | Link-Vorschau | 1200 × 630 | 1.91:1 | — | 5 MB |
| Rich Pin | 1200 × 630 | 1.91:1 | — | — | |
| Suchergebnis-Snippet | 1200 × 630 | 1.91:1 | 1200 breit | — |
Profi-Tipp: 1200 × 630 Pixel funktionieren auf allen Plattformen. Wenn du nur ein OG-Bild pro Seite erstellst, verwende diese Größe. Für Twitter Summary-Karten speziell füge ein separates 800×800-Quadratbild über twitter:image hinzu.
Was ist og:image? (Open-Graph-Meta-Tags)
og:image ist ein Open-Graph-Meta-Tag, das Social-Media-Plattformen mitteilt, welches Bild angezeigt werden soll, wenn jemand einen Link zu deiner Seite teilt. Ohne es versuchen die Plattformen, ein Bild automatisch zu erkennen — wählen oft das falsche, verwenden ein kleines Logo oder zeigen gar nichts.
So funktioniert Open Graph
Facebook erstellte das Open-Graph-Protokoll 2010. Wenn eine URL in sozialen Medien geteilt wird, ruft der Crawler der Plattform die Seite ab und liest <meta property="og:...">-Tags aus dem <head>. Das og:image-Tag gibt die URL des Vorschaubilds an.
Heute unterstützen fast alle Plattformen Open Graph: Facebook, Twitter/X (mit Fallback von twitter:image), LinkedIn, Discord, Slack, WhatsApp, Telegram, iMessage, Pinterest und sogar Google für erweiterte Suchergebnisse.
Wesentliche og:image-Tags
| Tag | Purpose |
|---|---|
og:image | URL des Vorschaubilds (erforderlich, muss absolute HTTPS-URL sein) |
og:image:width | Bildbreite in Pixeln (beschleunigt das Rendern — die Plattform muss das Bild nicht zuerst herunterladen) |
og:image:height | Bildhöhe in Pixeln |
og:image:type | MIME-Typ: image/jpeg, image/png oder image/webp |
og:image:alt | Alt-Text für Barrierefreiheit (Screenreader, Fehler beim Laden von Bildern) |
Warum og:image für die Klickrate wichtig ist
Links mit ordnungsgemäßen Vorschaubildern erhalten in sozialen Medien 2–3-mal höhere Klickraten im Vergleich zu Links ohne Bilder. Ein fehlende oder defektes OG-Bild macht geteilte Links unprofessionell aussehen und reduziert das Engagement. Google verwendet auch og:image für Artikel-Snippets in einigen Suchergebnissen.
So fügst du og:image zu deiner Website hinzu
HTML-Meta-Tags
Füge diese Tags im <head> deiner Seite ein:
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="Description of the image">
<!-- Also include these for complete previews -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description">
<meta property="og:url" content="https://example.com/page">Twitter Card-Tags
Twitter verwendet seine eigenen Card-Tags, fällt aber auf og:image zurück, wenn twitter:image nicht vorhanden ist:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/og-image.jpg">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your page description">WordPress
SEO-Plugins wie Yoast, Rank Math und All in One SEO verwalten OG-Tags automatisch. Setze das Feld “Social Image” oder “Facebook Image” im Post-Editor. Lade speziell ein 1200×630-Bild zum Teilen hoch — verlasse dich nicht auf das Featured Image, das möglicherweise ein anderes Seitenverhältnis hat.
Next.js (App Router)
// app/page.tsx
export const metadata = {
openGraph: {
title: 'Your Page Title',
description: 'Your page description',
images: [{
url: 'https://example.com/og-image.jpg',
width: 1200,
height: 630,
alt: 'Description of the image',
}],
},
twitter: {
card: 'summary_large_image',
images: ['https://example.com/og-image.jpg'],
},
};Überprüfung deines OG-Bilds
Nachdem du die Meta-Tags hinzugefügt hast, teste mit diesen Plattform-Debuggern:
- Facebook: Sharing Debugger (developers.facebook.com/tools/debug/) — klicke auf “Scrape Again” um Cache zu aktualisieren
- Twitter: Card Validator (cards-dev.twitter.com/validator)
- LinkedIn: Post Inspector (linkedin.com/post-inspector/)
- Allgemein: opengraph.xyz — testet alle Plattformen auf einmal
Häufige og:image-Probleme (und wie man sie behebt)
Bild wird nicht angezeigt, wenn es geteilt wird
Ursachen: fehlender og:image Meta-Tag, Bild-URL gibt 404 zurück, Bild ist zu klein (unter 200×200), oder deine robots.txt blockiert Social-Media-Crawler. Behebung: überprüfe, ob die Bild-URL in einem Browser geladen wird, stelle sicher, dass es eine absolute HTTPS-URL ist, und überprüfe, dass dein Server den User-Agent der Plattform nicht blockiert.
Falsches Bild wird angezeigt
Plattformen cachen OG-Bilder aggressiv (24+ Stunden). Nachdem du dein og:image aktualisiert hast, verwende das Debugger-Tool der Plattform, um ein erneutes Scraping zu erzwingen. Für Facebook öffne den Sharing Debugger und klicke auf “Scrape Again”. Du kannst auch einen Cache-Breaking-Parameter an die URL anhängen: ?v=2.
Bild wird schlecht zugeschnitten
Deine Bildabmessungen stimmen nicht mit dem erwarteten Verhältnis der Plattform überein. Behebung: ändere die Größe auf 1200×630 und halte wichtige Inhalte (Text, Logos, Gesichter) innerhalb der mittleren 80% des Bildes. Verschiedene Plattformen schneiden an den Rändern leicht unterschiedlich zu.
Bild sieht unscharf aus
Quellbild ist zu klein oder stark komprimiert. Verwende mindestens 1200 Pixel Breite. Für Retina-Displays erwäge 2400×1260 (2x). Speichere als JPG mit Qualität 80+ oder verwende PNG für Grafiken mit scharfem Text.
Funktioniert auf Facebook, aber nicht auf Twitter
Twitter erfordert, dass das twitter:card Meta-Tag vorhanden ist. Ohne es zeigt Twitter möglicherweise kein Bild, auch wenn og:image gesetzt ist. Füge <meta name="twitter:card" content="summary_large_image"> hinzu, um große Bild-Karten zu aktivieren.
og:image Best-Practice-Checkliste
og:image:width und og:image:height Tags hinzu (beschleunigt das Rendern)og:image:alt für Barrierefreiheit hinzuHäufig gestellte Fragen
og:image:width und og:image:height Meta-Tags hinzu, damit Plattformen die Vorschau schneller rendern können, ohne das vollständige Bild zuerst herunterladen zu müssen. og:image Meta-Tag fehlt, die Bild-URL gibt einen 404 zurück, das Bild ist kleiner als 600×315 Pixel, oder deine robots.txt blockiert den Crawler von Facebook. Verwende den Facebook Sharing Debugger (developers.facebook.com/tools/debug/) um das Problem zu diagnostizieren. Klicke auf “Scrape Again”, um Facebook zu zwingen, deine Seite erneut abzurufen und den gecachten Vorschau zu löschen. og:image kein direkter Google-Ranking-Faktor ist, erhalten Seiten mit ordnungsgemäßen OG-Bildern 2–3-mal höhere Klickraten, wenn sie in sozialen Medien geteilt werden, was mehr Traffic und Engagement-Signale fördert. Google verwendet auch og:image für Rich Snippets für Artikel in einigen Suchergebnissen. <head> deiner Seite hinzu: <meta property="og:image" content="https://yoursite.com/image.jpg">. Füge auch og:image:width (1200) und og:image:height (630) hinzu zum schnelleren Rendern. In WordPress verwende das Social Image-Feld von Yoast oder Rank Math. In Next.js verwende den metadata Export in deiner Page-Komponente. OG Image Resizing-API
Führen Sie og image resizing programmatisch über die REST-API aus — kostenlos, ohne Anmeldung, JSON-Antworten.
curl -X POST https://cleverutils.com/api/v1/tools/og-image-resizer \
-F "file=@your-file"