Du fügst einen Link in einen Facebook-Post ein und bekommst eine leere Box, ein Zufallsbild oder gar keine Vorschau. Facebook braucht gültige Open-Graph-Tags und ein erreichbares Bild für die Link-Karte. Fehlt eines davon, bricht die Vorschau ab.
Kurzantwort
Eine kaputte Facebook-Link-Vorschau hat meist eine von drei Ursachen: fehlende oder falsche og:title / og:description / og:image-Tags, ein Crawler, der die Seite nicht abrufen kann, oder eine Bild-URL mit Fehler. Seitenquelltext prüfen, absolute HTTPS-URLs sicherstellen, Bild direkt testen, dann URL im Facebook Sharing Debugger laufen lassen. Mit OpenGraph Check vor dem Teilen testen.
Wie Facebook eine Link-Vorschau baut
Beim Einfügen einer URL schickt Facebook facebookexternalhit zum HTML-Abruf. Gesucht werden Open-Graph-Meta-Tags im <head>:
<meta property="og:title" content="Dein Seitentitel"><meta property="og:description" content="Kurze Zusammenfassung."><meta property="og:image" content="https://beispiel.de/og.jpg"><meta property="og:url" content="https://beispiel.de/seite"><meta property="og:type" content="website">Fehlt og:image, greift Facebook auf das erste große Bild, das Favicon oder gar nichts zurück. Das Ergebnis ist unzuverlässig und oft unschön.
Twitter-Card-Tags (twitter:image) ersetzen Open Graph auf Facebook nicht. Du brauchst og:*-Properties. Mehr dazu: Open Graph vs. Twitter Card.
Diagnose in 5 Minuten
1. Raw-HTML prüfen, nicht das gerenderte DOM
SPAs setzen Meta-Tags oft per JavaScript nach. Facebooks Crawler liest nur die erste HTML-Antwort.
- Rechtsklick → Seitenquelltext anzeigen
- Nach
og:imagesuchen
Tags im Quelltext fehlen, in DevTools sichtbar? Dann SSR oder statische Meta-Tags im Framework-<head> nötig.
2. Bild-URL testen
Den og:image-Wert kopieren und im Browser öffnen. Es muss:
- HTTP 200 liefern
- Ohne Login laden
- HTTPS nutzen (HTTP kann scheitern)
- Nicht auf eine Login-HTML-Seite umleiten
3. Sharing Debugger nutzen
URL bei developers.facebook.com/tools/debug einfügen. Das Tool zeigt, was Facebook extrahiert hat, und listet Scrape-Fehler.
Typische Meldungen:
| Fehler | Bedeutung |
|---|---|
| "Could not resolve canonical URL" | Widersprüchliche og:url oder Redirect-Schleifen |
| "Image too small" | Unter Mindestmaßen |
| "Timeout" | Server zu langsam oder Firewall |
| "SSL error" | Ungültiges oder abgelaufenes Zertifikat |
4. Mit OpenGraph Check scannen
URL in OpenGraph Check einfügen. Du siehst Vorschau und fehlende Tags, ohne auf Facebooks Cache zu warten.
Pflicht-OG-Tags für Facebook
Mindestens diese Tags:
| Tag | Zweck |
|---|---|
og:title | Überschrift in der Vorschau-Karte |
og:description | Untertitel (unter ~200 Zeichen halten) |
og:image | Vorschaubild (absolute URL) |
og:url | Kanonische Seiten-URL |
og:type | Meist website oder article |
Für Artikel optional article:published_time und article:author. Vollständige Übersicht: Open-Graph-Tags erklärt.
Bildanforderungen, die Vorschauen killen
Facebook lehnt oder downgradet Bilder bei diesen Problemen:
- Mindestgröße: 200 × 200 px (1200 × 630 px für beste Ergebnisse)
- Max. Dateigröße: 8 MB (unter 1 MB für Geschwindigkeit)
- Format: JPG, PNG, GIF oder WebP
- URL: Öffentlich erreichbar, kein IP-Whitelist für Facebooks Crawler
Kaputte Bild-URLs sind die häufigste Ursache fehlender Vorschauen. Siehe Fehlendes OG-Bild beheben, wenn Text da ist, Bild fehlt.
Server- und Sicherheitsprobleme
robots.txt blockiert Facebook
robots.txt darf facebookexternalhit nicht blockieren. Sicheres Muster:
User-agent: facebookexternalhit
Allow: /
Firewall oder Bot-Schutz
Cloudflare „Under Attack“, aggressive WAF-Regeln oder Rate Limiting können Facebooks Crawler blockieren. facebookexternalhit whitelisten oder Bot-Challenges auf öffentlichen Marketing-Seiten reduzieren.
CDN cached leere Antworten
Hat das CDN eine 404 für das OG-Bild gecached, sieht Facebook weiterhin den Fehler. CDN-Cache nach dem Fix leeren.
Redirect-Ketten
Jeder Redirect kostet Zeit und erhöht Fehlerrisiko. og:url und geteilte Links direkt auf die finale HTTPS-URL zeigen, maximal ein Redirect.
Framework-Fallen
Next.js: metadata-API oder generateMetadata nutzen, damit Tags im Server-HTML landen. Client-only next/head im App Router erreicht Crawler oft nicht.
WordPress: SEO-Plugins (Yoast, Rank Math) erzeugen OG-Tags. Doppelte Ausgabe von Theme und Plugin vermeiden.
Shopify: Social-Sharing-Bild unter Online Store → Preferences oder pro Produkt in SEO-Feldern setzen.
Webflow: OG-Bild unter Page Settings → SEO. Nach Änderungen publishen.
Debugger OK, Share nicht
Zeigt der Sharing Debugger korrekte Daten, der Post aber nicht:
- Zweimal Erneut scrapen
- 5-10 Minuten warten
- URL mit Query teilen:
?fb=1
Bei veralteter Vorschau nach einem Update: Facebook-Vorschau aktualisiert sich nicht.
FAQ
Warum zeigt Facebook mein Logo statt des OG-Bildes?
og:image fehlt oder ist kaputt. Facebook nimmt das größte Bild auf der Seite, oft ein Header-Logo.
Brauche ich Facebook App ID Meta-Tags?
fb:app_id ist für Basis-Vorschauen optional. Für manche Insights-Features nötig, nicht fürs Bild.
Geht eine relative URL in og:image?
Nein. Immer absolute URL: https://beispiel.de/bild.jpg.
Warum sieht Instagram anders aus als Facebook?
Instagram und Facebook teilen Metas Crawler-Infrastruktur. OG-Tags einmal fixen, beide profitieren. Im Sharing Debugger neu scrapen.
Liest Facebook JSON-LD statt OG-Tags?
Facebook nutzt primär Open-Graph-Meta-Tags. JSON-LD hilft Google, nicht Facebook-Vorschauen.
Vorschau weg nach Hosting-Wechsel. Warum?
DNS- oder SSL-Fehler bei der Migration. HTTPS prüfen und neu scrapen.
Fazit
Facebook-Link-Vorschauen scheitern, wenn Crawler Tags nicht lesen oder das Bild nicht laden können. OG-Meta-Tags im serverseitigen HTML, 1200 × 630 Bild auf HTTPS, facebookexternalhit nicht blockieren, im Sharing Debugger prüfen. Diese vier Punkte lösen die meisten kaputten Vorschauen beim nächsten Scrape.
