Das og:image-Tag gehört zu den wirkungsvollsten Meta-Tags Ihrer Seite: Es ist das Vorschaubild, das erscheint, wenn jemand Ihre URL auf Facebook, LinkedIn, WhatsApp, Slack, Discord oder X teilt. Doch eine Regel stolpert Entwickler immer wieder: Die URL in og:image **muss absolut sein**. Ein relativer Pfad schlägt still fehl und Ihre Link-Vorschau zeigt überhaupt kein Bild. Dieser Leitfaden erklärt, warum diese Anforderung existiert, was „absolute URL“ wirklich bedeutet und wie Sie sie korrekt setzen.
Was ist og:image und warum ist es wichtig?
Open Graph ist ein 2010 von Facebook eingeführtes Protokoll, mit dem Sie steuern, wie eine URL beim Teilen auf Social-Plattformen erscheint. Das Meta-Tag `og:image` definiert das Vorschaubild - das große Thumbnail, das im Feed, in einer Chatnachricht oder in einer Link-Karte Aufmerksamkeit erzeugt. Heute wird es von praktisch jeder Plattform unterstützt, die Link-Vorschauen rendert: Facebook, LinkedIn, WhatsApp, Telegram, Discord, Slack, iMessage und mehr.
Ohne gültiges og:image zeigen Plattformen entweder gar kein Bild oder versuchen, ein zufälliges Bild aus der Seite zu extrahieren - meist etwas Unpassendes oder zu Kleines für eine saubere Darstellung. Ein gut gestaltetes og:image kann die Klickrate geteilter Inhalte drastisch erhöhen und ist damit eines der wirkungsstärksten Meta-Tags, das Sie hinzufügen können.
Die grundlegende Syntax
<meta property="og:image" content="https://example.com/images/article-cover.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A descriptive alt text for the preview image" />Note
Warum og:image eine absolute URL erfordert
Wenn ein Nutzer einen Link auf Facebook, LinkedIn oder WhatsApp teilt, ruft der Crawler der Plattform diese URL auf, um ihre Meta-Tags zu lesen. Entscheidend: Der Crawler ist ein eigenständiger HTTP-Client und hat kein Konzept davon, „von welcher Seite er kommt“. Liest er einen relativen Pfad wie `/images/cover.jpg`, hat er keine Basis-URL, gegen die er ihn auflösen könnte - also ignoriert er das Tag entweder oder meldet einen Fehler.
Eine absolute URL ist dagegen eigenständig. Sie enthält Protokoll, Domain und vollständigen Pfad - alles, was der Crawler braucht, um das Bild aus jedem Kontext zu laden, ohne sich auf die eben gelesene Seite zu verlassen. Deshalb schreibt die Open-Graph-Dokumentation ausdrücklich vor, dass og:image eine absolute URL sein sollte, und deshalb setzen alle großen Plattformen diese Anforderung durch.
Die og:image-URL muss eine absolute URL sein. Relative URLs, protokollrelative URLs und Data-URIs werden nicht unterstützt.
Die drei URL-Formate und welche funktionieren
| URL-Format | Beispiel | Funktioniert als og:image? |
|---|---|---|
| Absolute URL | https://example.com/og.jpg | ✓ Ja - funktioniert immer |
| Protokollrelative URL | //example.com/og.jpg | ✗ Nein - Scheme fehlt |
| Root-relativer Pfad | /images/og.jpg | ✗ Nein - keine Domain |
| Relativer Pfad | images/og.jpg | ✗ Nein - weder Domain noch Root |
| Data-URI | data:image/png;base64,… | ✗ Nein - keine URL |
Warning
Was „absolute URL“ tatsächlich bedeutet
Eine absolute URL identifiziert den Ort einer Ressource im Internet vollständig, unabhängig vom Kontext ihres Auftretens. Sie besteht aus vier Komponenten, die alle vorhanden sein müssen:
- Scheme - das Protokoll: `https://` (immer HTTPS verwenden; HTTP-Bilder können durch Mixed-Content-Regeln auf HTTPS-Seiten blockiert werden)
- Host - Ihr Domainname: `example.com` oder `www.example.com`
- Pfad - der Speicherort der Datei: `/images/og-cover.jpg`
- Optional: Port - nur nötig auf einem Nicht-Standard-Port (z. B. `:8080`). Für Produktivseiten nicht angeben.
https://example.com/images/og-cover.jpg
│ │ │
│ │ └-- Pfad zur Bilddatei
│ └-------------- Hostname (Ihre Domain)
└---------------------- Scheme (immer https://)HTTPS vs. HTTP
Verwenden Sie für Ihre og:image-URL immer `https://`. Zeigt Ihre og:image auf eine HTTP-URL, während Ihre Seite über HTTPS ausgeliefert wird, blockieren Browser und manche Crawler die Mixed-Content-Anfrage. Facebook, LinkedIn und WhatsApp rufen Bilder über HTTPS ab und scheitern still oder zeigen kein Bild, wenn Ihre URL HTTP verwendet.
Tip
So erzeugen Sie die korrekte absolute URL in verschiedenen Frameworks
Die häufigste Ursache für Fehler mit relativen URLs ist, dass Entwickler og:image-Werte per String-Konkatenation bauen, ohne die Origin explizit aufzunehmen. Hier ist das korrekte Muster für die gängigsten Frameworks und Umgebungen.
Next.js (App Router)
Verwenden Sie in Next.js 13+ mit dem App Router die Eigenschaft `metadataBase` in Ihrem Root-Layout. Sie legt fest, welche Origin Next.js beim Auflösen relativer Bildpfade in `openGraph.images` verwendet.
import type { Metadata } from 'next';
export const metadata: Metadata = {
metadataBase: new URL('https://example.com'), // ← setzt die Basis
openGraph: {
images: ['/images/og-cover.jpg'], // Next.js löst zu absoluter URL auf
},
};Ohne `metadataBase` gibt Next.js einen relativen Pfad im HTML aus, und Social-Crawler können das Bild nicht laden. Das ist eine der am häufigsten übersehenen Konfigurationen bei Next.js-Deployments.
Next.js (Pages Router)
Im Pages Router mit `next/head` müssen Sie die vollständige absolute URL manuell konstruieren, üblicherweise über eine Umgebungsvariable für die Site-Origin.
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? 'https://example.com';
<Head>
<meta
property="og:image"
content={`${SITE_URL}/images/og-cover.jpg`}
/>
</Head>Reines HTML / statische Seiten
Hier gibt es keine Framework-Magie: Schreiben Sie die vollständige URL direkt. Die einzige Variable ist, dass Sie die Produktionsdomain und nicht localhost verwenden.
<meta property="og:image" content="https://example.com/images/og-cover.jpg" />WordPress
Plugins wie Yoast SEO, Rank Math und All in One SEO erzeugen automatisch absolute og:image-URLs, indem sie `home_url()` mit dem Pfad des hochgeladenen Bildes kombinieren. Wenn Sie og:image manuell in einem Theme setzen, bauen Sie die absolute URL mit `get_site_url()`, statt die Domain fest zu verdrahten.
$og_image = get_site_url() . '/wp-content/uploads/og-cover.jpg';
echo '<meta property="og:image" content="' . esc_attr($og_image) . '" />';Ansatz über Umgebungsvariablen (empfohlen für jeden Stack)
Die Domain im Code fest zu verdrahten ist fragil: Staging und Produktion nutzen unterschiedliche Domains, und ein Tippfehler bricht überall die Vorschauen. Das sauberste Muster ist, die Basis-URL der Website in einer Umgebungsvariable zu speichern und beim Bauen der og:image-Werte darauf zu verweisen.
NEXT_PUBLIC_SITE_URL=https://example.comexport const SITE_URL =
process.env.NEXT_PUBLIC_SITE_URL ?? 'https://example.com';
export function absoluteOgImage(path: string): string {
// Stellt sicher, dass der Pfad mit / beginnt
const normalized = path.startsWith('/') ? path : `/${path}`;
return `${SITE_URL}${normalized}`;
}
// Verwendung:
// absoluteOgImage('/images/og-cover.jpg')
// → 'https://example.com/images/og-cover.jpg'Open-Graph-Vorschautext-Optimierer
Prüfen Sie Länge, Abschneide-Risiko und Qualität von og:title und og:description - sofort in Ihrem Browser.
WhatsApp-spezifische Anforderungen an og:image
WhatsApp-Link-Vorschauen werden von einem eigenen Crawler erzeugt, der in mehreren Punkten strenger ist als Facebook oder LinkedIn. Wenn Ihre og:image auf Facebook funktioniert, auf WhatsApp aber nicht, ist meist eine dieser Einschränkungen die Ursache.
- Absolute HTTPS-URL - wie auf allen anderen Plattformen; WhatsApp folgt keinen Weiterleitungen von HTTP auf HTTPS.
- Bild muss öffentlich erreichbar sein - keine Authentifizierung, kein Bot-Schutz, der die IP-Bereiche des WhatsApp-Crawlers blockiert.
- Minimale Bildgröße: 300×200 px - kleinere Bilder werden vom WhatsApp-Vorschau-Renderer oft ignoriert.
- Maximale Dateigröße: ~300 KB - der WhatsApp-Crawler hat ein kurzes Timeout für Bildabrufe. Große Bilder laufen ab oder werden übersprungen.
- Format JPEG oder PNG - WebP-Unterstützung variiert je nach WhatsApp-Version und Plattform. Für maximale Kompatibilität JPEG verwenden.
- og:image:width und og:image:height dringend empfohlen - sie erlauben WhatsApp, den Vorschau-Container vor dem Abruf zu dimensionieren.
Warning
Empfohlene og:image-Einrichtung für WhatsApp
<!-- Kern-og:image - muss eine absolute HTTPS-URL sein -->
<meta property="og:image" content="https://example.com/og/article-cover.jpg" />
<!-- Dringend empfohlene Begleiter -->
<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="Artikeltitel oder Kurzbeschreibung" />
<!-- Erforderlich, damit WhatsApp eine vollständige Link-Karte zeigt (nicht nur eine URL) -->
<meta property="og:title" content="Ihr Seitentitel" />
<meta property="og:description" content="Kurze Beschreibung des Seiteninhalts." />
<meta property="og:url" content="https://example.com/ihre-seite" />Meta-Tag-Generator
Erzeugen Sie in Sekunden einen vollständigen Block aus Open Graph, Twitter Card und Standard-Meta-Tags - mit Live-Vorschau und SEO-Audit-Hinweisen.
Häufige Fehler und wie Sie sie beheben
Selbst erfahrene Entwickler machen dieselben og:image-Fehler immer wieder. Hier sind die häufigsten Probleme und ihre genauen Lösungen.
Fehler 1: einen relativen Pfad verwenden
<meta property="og:image" content="/images/og-cover.jpg" /><meta property="og:image" content="https://example.com/images/og-cover.jpg" />Fehler 2: localhost in Produktions-Builds
Das passiert meist, wenn eine Umgebungsvariable aus Staging oder lokaler Entwicklung eingecheckt wird, ohne für die Produktion überschrieben zu werden.
<meta property="og:image" content="http://localhost:3000/og.jpg" />Fehler 3: og:image fehlt vollständig
Fehlt og:image, versuchen Plattformen, ein Bild im Seiteninhalt zu finden - meist mit schlechtem Ergebnis. Geben Sie auf jeder Seite, die geteilt werden soll, immer ein explizites og:image an. Mit dem Meta-Tags-Analyzer von Aback können Sie jede Live-URL sofort prüfen und bestätigen, ob og:image vorhanden und korrekt formatiert ist.
Fehler 4: Das Bild liefert einen 4xx- oder 5xx-Status
Eine absolute URL, die formal korrekt, praktisch aber defekt ist (404, 403, 500), führt zum selben Ergebnis wie kein Bild: eine leere Vorschau. Prüfen Sie immer, dass die Bild-URL ein 200 OK mit korrektem `Content-Type`-Header liefert.
Fehler 5: Das Bild liegt hinter einer Authentifizierung
Social-Crawler senden keine Cookies und keine Auth-Header. Wenn Ihre og:image-URL eine Anmeldung erfordert oder auf einem per HTTP-Basic-Auth geschützten Staging-Server liegt, erhält der Crawler ein 401 oder das HTML der Login-Seite statt des Bildes. og:image-Dateien müssen immer öffentlich erreichbar sein, auch wenn die Seite selbst hinter einer Paywall liegt.
Fehler 6: Falsche Bildabmessungen
Zu kleine Bilder (unter 200×200 px) werden möglicherweise ignoriert. Bilder mit ungewöhnlichen Seitenverhältnissen werden eventuell zugeschnitten oder mit Rändern dargestellt. Die universell sicheren Maße sind 1200×630 px bei einem Verhältnis von 1,91:1. Mit dem OG-Bild-Generator erzeugen Sie in Sekunden ein og:image im richtigen Format.
| Problem | Symptom | Lösung |
|---|---|---|
| Relativer Pfad | Kein Bild beim Teilen | Mit https://ihredomain.com präfixieren |
| localhost-URL | Kein Bild beim Teilen | Produktionsdomain verwenden; Umgebungsvariablen prüfen |
| HTTP (statt HTTPS) | Kein Bild oder Mixed-Content-Fehler | Bild über HTTPS ausliefern |
| Bild 404/403 | Kein Bild beim Teilen | Bildpfad oder Zugriffsrechte korrigieren |
| Auth-geschütztes Bild | Kein Bild beim Teilen | Bild in einen öffentlichen CDN-Pfad verschieben |
| Falsche Abmessungen | Zugeschnittene oder fehlende Vorschau | 1200×630 px als JPEG oder PNG verwenden |
| Kein og:image:width/height | Langsame oder fehlende Vorschau auf WhatsApp | og:image:width und og:image:height ergänzen |
So prüfen Sie, ob Ihre og:image korrekt ist
Das Tag im Code korrekt zu setzen ist eine Sache - zu bestätigen, dass es tatsächlich funktioniert, eine andere. Hier sind die schnellsten Prüfwege.
Meta-Tags-Analyzer verwenden
Der Meta-Tags-Analyzer von Aback Tools lässt Sie jede Live-URL eingeben und zeigt jedes Meta-Tag, das die Seite ausgibt, inklusive og:image. Er prüft, ob der Wert vorhanden und die URL absolut ist, und markiert häufige Formatprobleme. Das ist die schnellste erste Prüfung.
Facebook Sharing Debugger verwenden
Der Sharing Debugger von Facebook (`developers.facebook.com/tools/debug`) ruft die Open-Graph-Daten jeder URL ab und rendert sie, zeigt genau, welches Bild erscheinen wird, und erlaubt ein erzwungenes Neuscrapen zum Leeren des Caches. Er ist die maßgebliche Quelle für Facebook- und Instagram-Vorschauen.
LinkedIn Post Inspector verwenden
Der Post Inspector von LinkedIn (`linkedin.com/post-inspector`) erfüllt dieselbe Funktion für LinkedIn-Vorschauen. Er ist besonders nützlich, weil sich das Verhalten des LinkedIn-Crawlers bei Cache und HTTPS-Weiterleitungen von Facebook unterscheidet.
HTML-Quelltext direkt prüfen
Rufen Sie den Seitenquelltext auf (`Strg+U` / `Cmd+U`) oder nutzen Sie die Browser-DevTools, um das rohe HTML zu lesen. Suchen Sie das `og:image`-Meta-Tag und kopieren Sie den Wert. Beginnt er nicht mit `https://`, scheitert er bei jedem Crawler.
Bild-URL unabhängig testen
Fügen Sie die og:image-URL direkt in einen Browser-Tab ein. Erhalten Sie ein 404, eine Login-Seite oder irgendetwas anderes als das Bild, bekommen Crawler dieselbe Antwort. Die URL muss das rohe Bild mit einem 200 OK zurückgeben.
Meta-Tags-Analyzer
Prüfen Sie jede Live-URL auf vorhandenes og:image, absolutes URL-Format, Twitter-Card-Tags und über 15 weitere SEO-Signale in einem Scan.
og:image auf verschiedenen Plattformen
Verschiedene Plattformen behandeln og:image etwas unterschiedlich. Wenn Sie diese Unterschiede kennen, können Sie ein einziges Meta-Tag schreiben, das überall funktioniert.
| Plattform | Min. Größe | Empfohlene Größe | Format | Caching |
|---|---|---|---|---|
| Facebook / Instagram | 200×200 px | 1200×630 px | JPG, PNG, GIF | Dauerhaft; Debugger zum Leeren nutzen |
| 200×200 px | 1200×627 px | JPG, PNG | Dauerhaft; Post Inspector nutzen | |
| 300×200 px | 1200×630 px | JPG, PNG | Pro Gerät; schwer zu leeren | |
| Telegram | 200×200 px | 1200×630 px | JPG, PNG, WebP | Langlebig; regeneriert beim erneuten Teilen |
| Discord | 256×256 px | 1200×630 px | JPG, PNG, GIF | Kurzlebig; aktualisiert automatisch |
| Slack | 500×500 px | 1200×630 px | JPG, PNG | Pro Workspace; leert nach ~30 Tagen |
| X (Twitter) | 144×144 px | 1200×600 px | JPG, PNG, WebP | ~7 Tage; Card Validator zum Leeren nutzen |
Note
Dynamische og:images
Ein wachsendes Muster ist, og:images dynamisch pro Seite zu erzeugen - zum Beispiel kann die og:image eines Blogposts den Artikeltitel und den Autorennamen enthalten, serverseitig als PNG generiert. Frameworks wie Next.js unterstützen dies mit der `ImageResponse`-API (`next/og`). Das Ergebnis ist weiterhin eine absolute URL: Die dynamische Erzeugung findet auf dem Server statt, Crawler sehen nur eine normale `https://`-Bild-URL.
Wenn Sie einen No-Code-Ansatz bevorzugen, können Sie mit dem OG-Bild-Generator eine eigene Social-Vorschau in 1200×630 px mit Ihrem Text, Ihren Farben und Ihrem Layout gestalten und als PNG herunterladen - bereit für den Upload auf Ihr CDN und die Referenzierung als absolute URL.
og:image zusammen mit dem vollständigen Open-Graph-Tag-Satz
og:image funktioniert selten isoliert. Plattformen nutzen den kompletten Satz an Open-Graph-Tags, um zu entscheiden, ob sie eine reichhaltige Link-Karte oder nur eine reine URL darstellen. Wenn Sie einer Seite og:image hinzufügen, sollten Sie diese Tags gleichzeitig mitgeben:
- og:title - die Überschrift der Link-Karte (entspricht meist `<title>`, kann aber kürzer sein)
- og:description - eine Zusammenfassung in 1-2 Sätzen unter dem Titel; prüfen Sie die Länge mit dem OG-Vorschautext-Optimierer
- og:url - die kanonische URL der Seite (verwenden Sie dieselbe wie in `<link rel="canonical">`)
- og:type - `website` für die meisten Seiten; `article` für Blogposts
- og:site_name - Ihr Website- oder Markenname
- og:image - die absolute URL Ihres Vorschaubilds (das Thema dieses Artikels)
- og:image:width und og:image:height - dringend empfohlen für schnelleres Rendering
- og:image:alt - beschreibender Alt-Text für Barrierefreiheit und KI-lesbaren Kontext
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:title" content="Your Article Title" />
<meta property="og:description" content="A brief, compelling description under 155 characters." />
<meta property="og:url" content="https://example.com/blog/your-article" />
<meta property="og:image" content="https://example.com/og/your-article.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="Visual description of the preview image" />
<!-- Fallback für Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og/your-article.jpg" />Diesen gesamten Block können Sie mit dem Meta-Tag-Generator erzeugen und validieren - inklusive og:image mit Prüfung auf absolute URL - oder eine bestehende Seite mit dem Meta-Tags-Analyzer validieren.
Key takeaways
- og:image muss eine absolute URL sein - relative Pfade, protokollrelative URLs und Data-URIs scheitern alle still.
- Verwenden Sie immer https:// - HTTP-Bilder werden durch Mixed-Content-Regeln blockiert und viele Crawler lehnen sie ab.
- Die empfohlene og:image-Größe ist 1200×630 px (Verhältnis 1,91:1) bei unter ~300 KB als JPEG.
- Geben Sie og:image:width und og:image:height an, um das Rendern der Vorschau auf WhatsApp und Telegram zu beschleunigen.
- Im Next.js App Router verhindert metadataBase relative Pfade; im Pages Router bauen Sie die vollständige URL mit einer Umgebungsvariable.
- Prüfen Sie vor der Veröffentlichung mit dem Meta-Tags-Analyzer, dem Facebook Sharing Debugger und dem LinkedIn Post Inspector.
- Crawler erreichen weder localhost noch per Auth geschützte Staging-Server noch Bilder mit 4xx/5xx - og:image-Dateien müssen öffentlich erreichbar sein.