Deine Open-Graph-Tags sehen im Browser korrekt aus, aber der geteilte Link zeigt das falsche Bild, einen alten Titel oder gar keine Vorschau. Die meisten kaputten Link-Vorschauen kommen von wenigen wiederkehrenden Fehlern, nicht von mysteriösen Plattform-Bugs. Hier die häufigsten und wie du sie behebst.
Kurzantwort
Die Top Open-Graph-Fehler: Tags nur per JavaScript, relative Bild-URLs, doppelte widersprüchliche Meta-Tags, falsche og:url, zu große oder unerreichbare Bilder und veralteter Plattform-Cache. Fix: Tags im Seitenquelltext prüfen (nicht DevTools), absolute HTTPS-URLs nutzen, einen autoritativen Tag-Satz behalten, vor dem Teilen mit OpenGraph Check scannen.
Warum Fehler mehr wiegen als gedacht
Eine kaputte Vorschau wirkt nicht nur unprofessionell. Sie senkt Klickrate, verbrennt Ad-Budget und lässt geteilte Inhalte wie Spam aussehen. Frustrierend: Die Seite rendert perfekt in Chrome, während Crawler völlig anderes HTML bekommen.
Social Crawler laden deine URL einmal, parsen <head>, holen og:image und cachen das Ergebnis. Kein Scrollen, kein Klicken, kein React-Bundle. Ein Fehler in dieser ersten Antwort bleibt, bis du ihn fixst und den Cache leerst.
Fehler 1: Tags existieren erst nach JavaScript
Die häufigste Ursache fehlender Vorschauen auf modernen Sites.
Du öffnest DevTools, siehst alle og:*-Tags und denkst, alles passt. Im Seitenquelltext ist <head> leer oder zeigt nur CMS-Fallback.
Betroffene Setups:
- Client-gerenderte React- und Vue-SPAs
- Next.js-Seiten, die Metadata nur in Client Components setzen
- WordPress-Themes, die Tags per spät ladenden Scripts injizieren
Fix: Open-Graph-Tags in der Server-HTML-Antwort ausgeben. SSR, Static Generation oder Metadata-API des Frameworks. Immer mit Seitenquelltext prüfen.
Mehr: Open-Graph-Tags erklärt, Open-Graph-Tags testen.
Fehler 2: Relative URLs in og:image oder og:url
<!-- Falsch --><meta property="og:image" content="/images/share.jpg"><meta property="og:url" content="/blog/mein-post"><!-- Richtig --><meta property="og:image" content="https://beispiel.de/images/share.jpg"><meta property="og:url" content="https://beispiel.de/blog/mein-post">Crawler lösen relative Pfade gegen unvorhersehbare Basis-URLs auf. Manche Plattformen droppen das Bild still. Andere laden von der falschen Domain.
Jede Open-Graph-URL muss absolut und HTTPS sein.
Fehler 3: Doppelte oder widersprüchliche Tags
SEO-Plugins, Themes und Custom Code liefern Open Graph oft doppelt. Beispiel: Yoast setzt og:title, das Theme überschreibt mit dem rohen Post-Slug.
Crawler nehmen je nach Plattform den ersten oder letzten Tag. Inkonsistente Vorschauen auf Facebook, LinkedIn und Slack - ohne erkennbaren Grund.
Fix: Seitenquelltext, nach og:title suchen, Vorkommen zählen. Eine Quelle der Wahrheit. Doppelte Ausgabe im Plugin deaktivieren.
Fehler 4: Falsche og:url (www, Slash, Parameter)
Du teilst https://beispiel.de/blog/post, aber og:url zeigt auf https://www.beispiel.de/blog/post/ mit Slash. Facebook behandelt das als separate Cache-Keys. Du aktualisierst Tags auf einer URL, der geteilte Link liefert gecachte Daten von der anderen.
Typische Varianten:
wwwvs ohnewww- Trailing Slash vs ohne
httpvshttps- UTM-Parameter in
og:url
Fix: og:url = exakt die kanonische Share-URL. Gleich wie <link rel="canonical">. Siehe Link-Vorschau-Cache erklärt.
Fehler 5: Bild existiert, Crawler kommen nicht ran
Das Bild lädt im Browser, scheitert für Bots. Ursachen:
- Login oder Paywall auf dem Bildpfad
- Cloudflare Bot Challenge blockiert Facebook-Crawler
- Hotlink-Schutz auf dem CDN
robots.txtblockiert/images/- Abgelaufene signierte S3- oder CloudFront-URLs
- Redirect-Kette endet in 403
Fix: og:image im Inkognito-Fenster öffnen. Facebook Sharing Debugger Scrape-Log prüfen. Siehe Fehlendes OG-Bild beheben.
Fehler 6: Bild zu klein, falsches Format oder Seitenverhältnis
Empfehlung: 1200 × 630 px bei etwa 1,91:1. Typische Failures:
- 200 × 200 px Favicon als
og:image - Quadratische Instagram-Bilder awkward gecroppt
- Animiertes GIF von manchen Crawlern ignoriert
- SVG auf den meisten Plattformen unsupported
- Dateien über 5 MB timeout auf langsamen Verbindungen
Fix: Dediziertes OG-Bild bei 1200 × 630 px, JPG oder PNG, unter 1 MB. Details: Open-Graph-Bildgröße.
Fehler 7: name statt property
Open Graph nutzt das Attribut property, nicht name:
<!-- Falsch - von den meisten Crawlern ignoriert --><meta name="og:title" content="Mein Titel"><!-- Richtig --><meta property="og:title" content="Mein Titel">Twitter-Card-Tags nutzen korrekt name. Die Attribute verwechseln = stiller Fehler.
Fehler 8: Leere oder auto-generierte og:description
Fehlt og:description, scrapen Plattformen beliebigen Body-Text. Navigation, Cookie-Banner oder Impressum-Snippets landen in der Vorschau.
Fix: Pro teilbarer Seite eine Social-Beschreibung schreiben. Siehe Fehlende Open-Graph-Tags beheben.
Fehler 9: Twitter-Card-Tags vergessen
X liest Open Graph als Fallback, aber ohne twitter:card auf summary_large_image gibt es oft nur eine kleine Text-Karte - obwohl og:image perfekt ist.
Minimum Twitter-Block:
<meta name="twitter:card" content="summary_large_image"><meta name="twitter:image" content="https://beispiel.de/images/og.jpg">Vergleich: Open Graph vs. Twitter Card.
Fehler 10: Auf localhost oder geschütztem Staging testen
Tags auf localhost:3000 oder passwortgeschütztem Staging validieren. Crawler erreichen beides nicht. Live geht es mit dem Gefühl, alles sei geprüft.
Fix: Auf der öffentlichen Produktions-URL mit HTTPS testen. Nach jedem Deploy OpenGraph Check.
Fehler 11: Plattform-Cache nach dem Fix ignorieren
Tags gefixt, erneut geteilt, alte Vorschau. HTML stimmt, Plattform liefert Cache vom vorherigen Scrape.
Besonders tückisch bei Launch-Kampagnen: Das Team fixt Tags am Freitagabend, der Monday-Post auf LinkedIn zeigt noch das Staging-Bild. Der Post Inspector bestätigt den neuen Scrape, die Mobile App cached lokal noch die alte Karte. Kurz warten oder in einem frischen Chat-Thread testen.
Fix:
- Facebook / WhatsApp / Instagram: Facebook Sharing Debugger
- LinkedIn: LinkedIn Post Inspector
- Cache-Busting per Query-String wenn sinnvoll: Open-Graph-Cache-Busting
Fix ist erst live, wenn der Debugger einen frischen Scrape bestätigt.
Fehler 12: Ein og:image für die ganze Site
Globales Fallback-Bild für Utility-Seiten ist OK. Aber jeder Blogpost und jedes Produkt mit demselben Logo killt Klickrate.
Fix: og:image pro Seite mit relevantem Visual überschreiben. Vorlagen: Open-Graph-Meta-Tags Beispiel.
Fehler 13: Social Crawler in robots.txt blockieren
Manche Teams blockieren in der Entwicklung alle Bots und vergessen die Regel:
User-agent: *
Disallow: /
Oder /api/-Pfade blockieren, die versehentlich OG-Bild-Routen treffen.
Fix: robots.txt erlaubt Facebook (facebookexternalhit), LinkedIn (LinkedInBot), Twitter (Twitterbot) und Slack (Slackbot).
Fehler 14: Nur og:tags ohne Standard-Meta-Description
SEO-Meta-Description und og:description bedienen unterschiedliche Systeme, aber manche Plattformen fallen auf <meta name="description"> zurück, wenn Open-Graph-Text fehlt.
Fix: Beides explizit auf wichtigen Seiten setzen.
Site auf diese Fehler prüfen
Fünf-Minuten-Audit pro URL:
- Seitenquelltext - Tags im rohen HTML?
- Nach doppeltem
og:titlesuchen - Alle URLs absolut HTTPS?
og:imageim Inkognito - 200 OK?- OpenGraph Check - Vorschauen auf Zielplattformen OK?
Voller Workflow: Open-Graph-Tags testen.
Priorität beim Beheben
Wenn mehrere Fehler gleichzeitig auftreten, in dieser Reihenfolge vorgehen:
- Tags im Seitenquelltext vorhanden? Wenn nein, zuerst Server-Rendering fixen.
- Absolute HTTPS-URLs für Bild und
og:url? - Doppelte Tags bereinigen?
- Bild erreichbar und groß genug?
- Plattform-Cache leeren?
Punkt 1 blockiert alles andere. Ohne serverseitige Tags helfen Debugger und Cache-Löschen nicht.
Kurzreferenz: Fehler und Fix
| Fehler | Symptom | Erster Fix |
|---|---|---|
| Nur Client-Side-Tags | Keine Vorschau | Tags serverseitig |
| Relative og:image | Bild fehlt | Absolute HTTPS-URL |
| Doppelte Tags | Inkonsistent | Duplikate entfernen |
| Falsche og:url | Cache aktualisiert nicht | Kanonische URL |
| Bild blockiert | Debugger-Scrape scheitert | Auth / CDN / robots |
| Kleines Bild | Unscharf oder ignoriert | 1200 × 630 px |
| Alter Cache | Alte Vorschau nach Fix | Debugger Re-Scrape |
FAQ
Warum funktioniert die Vorschau auf Facebook, aber nicht LinkedIn?
Unterschiedliche Crawler, unterschiedliche Caches. Beide separat testen. LinkedIn hat eigenen Cache via Post Inspector.
Kann ein Open-Graph-Fehler alle Tags zerstören?
Meist nicht. Plattformen nehmen, was sie finden. Fehlendes Bild entfernt nicht den Titel. Mehrere Fehler zusammen ergeben trotzdem eine nutzlose Karte.
Bricht HTTPS-Redirect og:image?
Redirect von HTTP auf HTTPS folgen die meisten Crawler. Lange Ketten oder nur-HTTP-URLs scheitern.
Schaden Open-Graph-Fehler dem SEO?
Nicht direkt für Google-Rankings. Sie schaden Social-Klickrate, Markenwahrnehmung und Referral-Traffic.
Wie oft Open-Graph-Tags auditieren?
Nach Template-Wechsel, CMS-Migration oder Domain-Umzug. Bei High-Traffic-Sites monatlich Key-Landingpages spot-checken.
Schnellster Weg, alle Fehler auf einer URL zu finden?
URL in OpenGraph Check. Ein Scan zeigt fehlende Tags, kaputte Bilder und plattformspezifische Probleme.
Zuerst Open Graph oder Twitter Tags fixen?
Zuerst Open Graph. Twitter Tags danach. Open Graph deckt mehr Plattformen ab.
Hilft ein Redirect von http auf https bei og:url?
Ja, wenn die geteilte URL HTTPS ist und og:url dasselbe Schema nutzt. Gemischte Schemas und Redirect-Ketten erzeugen trotzdem Cache-Probleme. Direkt HTTPS in allen Tags setzen.
Warum zeigt WhatsApp ein anderes Bild als die Website?
WhatsApp nutzt Metas Infrastruktur und teilt oft den Facebook-Cache. Nach HTML-Fixes im Facebook Sharing Debugger neu scrapen. Details: WhatsApp falsche Link-Vorschau.
Fazit
Kaputte Link-Vorschauen lassen sich fast immer auf behebbare Open-Graph-Fehler zurückführen: Client-Side-Tags, relative URLs, Duplikate, falsche kanonische URLs, unerreichbare Bilder oder veralteter Cache. Seitenquelltext prüfen, Muster fixen, mit OpenGraph Check scannen, Plattform-Cache leeren - dann erneut teilen.
