In der Link-Vorschau steht ein zufälliger Seitentitel, keine Beschreibung oder die falsche URL. Das Bild kann trotzdem laden. Fehlende Open-Graph-Tags abseits von og:image verursachen genau solche kaputten Karten. So findest und behebst du jeden einzelnen.
Kurzantwort
Öffne den Seitenquelltext und suche nach og:title, og:description, og:url und og:type. Fehlende Tags gehören ins serverseitig gerenderte <head> mit absoluten HTTPS-Werten. og:title = gewünschte Überschrift, og:description = klare Zusammenfassung, og:url = kanonische Share-URL, og:type = passender Inhaltstyp. Scan mit OpenGraph Check. Nur das Bild kaputt? Dann Fehlendes OG-Bild beheben.
Fehlende Tags vs. fehlendes Bild
Die Symptome ähneln sich, die Lösung nicht.
| Symptom | Wahrscheinliche Ursache | Fix-Guide |
|---|---|---|
| Kein Bild in der Vorschau | Fehlendes oder kaputtes og:image | Fehlendes OG-Bild |
| Falscher oder leerer Titel | Fehlendes og:title | Dieser Artikel |
| Generischer Snippet-Text | Fehlende og:description | Dieser Artikel |
| Vorschau verlinkt falsche URL | Fehlende oder falsche og:url | Dieser Artikel |
| Falscher Inhaltstyp in der Karte | Fehlendes og:type | Dieser Artikel |
Eine Seite kann ein perfektes Bild haben und trotzdem eine nutzlose Vorschau liefern, weil die Text-Tags leer sind. Repariere alle Kern-Tags gemeinsam.
Schritt 1: Prüfen, was Crawler wirklich bekommen
Rechtsklick auf die Live-URL → Seitenquelltext anzeigen. Nicht DevTools-Elemente nach JavaScript.
Suche nach:
og:title
og:description
og:url
og:type
og:site_name
Fehlen Tags, greifen Plattformen auf <title>, <meta name="description"> oder den ersten Seitentext zurück. Das passt selten zur Social-Vorschau.
Dieselbe URL in OpenGraph Check einfügen. Der Scan listet alle erkannten Tags und markiert Lücken auf einen Blick.
Schritt 2: Fehlendes og:title beheben
og:title ist die Überschrift in der Vorschau-Karte. Ohne Tag scrapen Plattformen den HTML-<title> oder eine Überschrift - oft mit Markennamen, Kategorien oder SEO-Keywords, die du im Social Post nicht willst.
<meta property="og:title" content="Deine Social-Überschrift">Richtlinien:
- Wenn möglich unter 60 Zeichen
- Für Menschen schreiben, die den Link teilen
- Soll auf Facebook, LinkedIn und Slack so erscheinen, wie du es planst
- Kein Boilerplate wie
| Firmenname, wenn du es nicht sichtbar willst
Im CMS oder Framework das Open-Graph-Titel-Feld getrennt vom SEO-Titel pflegen. Unterschiedliche Zielgruppen.
Schritt 3: Fehlende og:description beheben
og:description ist der Text unter der Überschrift. Fehlt er, bleiben Karten leer oder Plattformen ziehen beliebigen Fließtext.
<meta property="og:description" content="Ein klarer Satz, der zum Klicken einlädt.">Richtlinien:
- 80 bis 125 Zeichen anpeilen
- Eine Idee pro Beschreibung
- Kein Keyword-Stuffing
- Kann vom SEO-Meta-Description abweichen, sollte aber konsistent sein
Lange Texte kürzen manche Netzwerke. Wichtige Wörter nach vorne.
Schritt 4: Fehlende oder falsche og:url beheben
og:url sagt Plattformen, welche URL das geteilte Objekt repräsentiert. Ohne Tag können Query-Strings, Tracking-Parameter oder alternative Pfade doppelte Cache-Einträge bei Facebook erzeugen.
<meta property="og:url" content="https://beispiel.de/deine-seite">Checkliste:
- Kanonische URL, die du in Posts einfügst
- Immer HTTPS
- Kein Slash-Mismatch zwischen
og:urlund dem geteilten Link - Entweder
wwwoder ohne - durchgängig
Falsche og:url-Werte brechen die Vorschau nicht immer sichtbar, verwirren aber den Cache bei späteren Updates. Siehe Link-Vorschau-Cache erklärt, wenn alte Daten hängen bleiben.
Schritt 5: Richtiges og:type setzen
og:type klassifiziert den Inhalt. Beeinflusst, welche optionalen Tags erwartet werden und wie Karten gerendert werden.
Typische Werte:
| Typ | Einsatz |
|---|---|
website | Startseiten, Landing Pages, allgemeine Seiten |
article | Blogposts, News, redaktionelle Inhalte |
product | Produktdetailseiten im Shop |
<meta property="og:type" content="article">Bei Artikeln optional article:published_time und article:author ergänzen. Bei Produkten helfen product:price:amount und product:availability auf manchen Plattformen.
Fehlt og:type, defaulten die meisten Crawler auf website. OK für die Startseite, falsch für Blogposts mit Artikel-Feldern.
Schritt 6: og:site_name sinnvoll ergänzen
og:site_name ist optional, verbessert aber Branding auf Facebook und Discord:
<meta property="og:site_name" content="Deine Marke">Ohne Tag erscheint oft der Domainname. Kein kritischer Fehler, leicht nachzurüsten.
Schritt 7: Tags in serverseitigem HTML platzieren
Häufigste Ursache fehlender Tags: Sie existieren erst nach Client-Side-JavaScript.
React, Vue, Angular und rein clientseitige Next.js-Komponenten setzen Meta-Tags oft erst nach Hydration. Facebook-, LinkedIn-, Slack- und WhatsApp-Crawler lesen die erste HTML-Antwort. Kein App-Bundle, kein JavaScript.
Typisches Szenario: Du nutzt react-helmet oder @vueuse/head und siehst Tags im DOM. Der Seitenquelltext bleibt leer. Marketing postet den Link, die Vorschau zeigt den CMS-Standardtitel statt deiner Kampagne.
Lösungen:
- Server-Side Rendering (SSR) oder Static Generation beim Build
- Framework-Metadata-APIs, die Tags im initialen HTML ausgeben (Next.js
generateMetadata, NuxtuseSeoMetausw.) - CMS-Plugins, die Tags ins Template schreiben, bevor die Seite ausgeliefert wird
Mit Seitenquelltext prüfen, nicht mit dem live DOM. Alle Tags: Open-Graph-Tags erklärt.
Schritt 8: Doppelte oder widersprüchliche Tags bereinigen
Manche Templates liefern Open-Graph-Tags doppelt: einmal vom SEO-Plugin, einmal vom Theme. Crawler nehmen je nach Plattform den ersten oder letzten Wert. Unvorhersehbar.
Im Quelltext nach doppeltem property="og:title" suchen. Einen autoritativen Satz behalten. Rest entfernen.
Auch prüfen, ob og:title und <title> sich widersprechen. Sie dürfen differieren, sollten aber jeweils Sinn ergeben.
Schritt 9: Nach dem Deploy verifizieren
Checkliste vor dem Teilen:
- Seitenquelltext zeigt
og:title,og:description,og:url,og:type - Alle Werte entsprechen der geplanten Vorschau
- OpenGraph Check-Scan ohne fehlende Pflichtfelder
- Plattform-Debugger-Re-Scrape OK, wenn die URL schon geteilt wurde
Voller Workflow: Open-Graph-Tags testen.
Framework-Schnellfixes
WordPress
Open Graph in Yoast, Rank Math oder SEOPress aktivieren. Social-Titel und -Beschreibung pro Seite ausfüllen. Quelltext prüfen, manche Themes duplizieren Tags.
In Yoast findest du die Felder unter „Social" pro Beitrag. Der SEO-Titel und der Facebook-Titel dürfen unterschiedlich sein. Nutze das aktiv für Kampagnen-Landingpages.
Next.js App Router
Metadata API in layout.tsx oder page.tsx:
export const metadata = { openGraph: { title: "Deine Überschrift", description: "Deine Zusammenfassung.", url: "https://beispiel.de/seite", type: "website", },};Das erzeugt serverseitige Tags. Client Components ersetzen das nicht zuverlässig.
Bei dynamischen Routen generateMetadata mit params nutzen, damit jeder Blogpost eigene Werte bekommt. Ein statisches metadata-Objekt im Root-Layout reicht nur für die Startseite.
Statisches HTML
Vollständigen Tag-Block manuell in <head>. Vorlagen: Open-Graph-Meta-Tags Beispiel.
Häufige Fehler beim Reparieren
Nur SEO-Meta-Description kopieren
<meta name="description"> und og:description können gleich lauten, aber nur der Open-Graph-Tag steuert Social-Vorschauen. Beide explizit setzen.
Relative URLs in og:url
Immer absolute HTTPS-URLs. Relative Pfade brechen auf manchen Crawlern die kanonische Auflösung.
og:url auf paginierten Seiten vergessen
Jede teilbare URL braucht eigene og:url. /blog?page=2 ist ein anderes Objekt als /blog.
Tags gefixt, Cache nicht geleert
Plattformen cachen Vorschauen. Nach dem Nachrüsten fehlender Tags im Facebook Sharing Debugger oder LinkedIn Post Inspector neu scrapen. Siehe Open-Graph-Cache-Busting.
FAQ
Was ist das Minimum an Open-Graph-Tags?
og:title, og:description, og:image, og:url und og:type. og:site_name und Twitter-Card-Tags für beste Ergebnisse.
Kann ich den Seitentitel automatisch als og:title nutzen?
Geht, aber Social-Überschriften sind oft kürzer als SEO-Titel. Auf wichtigen Seiten og:title explizit setzen.
Warum zeigt die Vorschau Text, aber kein Bild?
Das ist ein Bild-Problem, kein fehlender Text-Tag. Siehe Fehlendes OG-Bild beheben.
Beeinflusst og:description Google-Rankings?
Nein. Nur Social-Vorschau-Text. Meta Description bleibt für die Suche.
Welches og:type für Blogposts?
article. Für Startseiten und Landing Pages website.
Fehlen Tags oder ist es nur Cache?
Seitenquelltext (live HTML) mit Debugger-Output vergleichen. HTML korrekt, Debugger alt = Cache. HTML ohne Tags = Template fixen.
Soll og:url UTM-Parameter enthalten?
Nein. Saubere kanonische URL ohne Tracking. UTMs in den Link im Post, nicht in og:url.
Was tun, wenn nur eine Plattform die Vorschau falsch zeigt?
Plattform-spezifischen Debugger nutzen. LinkedIn Post Inspector für LinkedIn, Facebook Sharing Debugger für Meta-Apps. Ein Fix in HTML hilft erst, wenn der jeweilige Cache geleert ist.
Kann ein CMS-Plugin alle Tags korrekt setzen und trotzdem scheitern?
Ja. Wenn Theme und Plugin beide Tags ausgeben oder das Theme den <head> per JavaScript nachlädt. Immer Seitenquelltext der Live-URL prüfen, nicht die Plugin-Vorschau im Admin.
Fazit
Fehlende Open-Graph-Tags jenseits des Bildes brechen Vorschauen leise. Seitenquelltext prüfen auf og:title, og:description, og:url und og:type, serverseitig ergänzen, mit OpenGraph Check bestätigen. Text-Tags und Bild-Tags gehören zusammen. Beides fixen, bevor du das nächste Mal teilst.
