Open Graph 2026: Warum geteilte Links oft wie ein Fehler aussehen
Simon Heistermann
Inhaber
Dieser Beitrag wurde mit KI-Unterstützung erstellt und redaktionell geprüft.
Ein Link ohne og:image landet in WhatsApp, LinkedIn oder Slack als graue Box ohne Bild, manchmal mit einem zufälligen Ausschnitt der Seite als Vorschau. Für den Empfänger sieht das nicht nach einem fehlenden Meta-Tag aus, sondern nach einer kaputten Website. Genau diesen Eindruck hinterlassen erstaunlich viele Unternehmensseiten, obwohl der Fix eine einzige Zeile Code ist.
Kurz gesagt
Open Graph und Twitter Cards bestimmen, wie ein geteilter Link auf WhatsApp, LinkedIn, X und Slack aussieht. Fehlt og:image, wirkt jeder geteilte Link unprofessionell - unabhängig davon, wie gut die Seite dahinter tatsächlich ist.
Warum geteilte Links oft wie ein Fehler aussehen
Die Vorschau, die beim Teilen eines Links entsteht, wird nicht von der teilenden Person gestaltet, sondern von den Meta-Tags im <head> der Zielseite. Fehlen sie, entscheidet die jeweilige Plattform selbst, was sie anzeigt - oft ein wahllos gewähltes Bild von der Seite, manchmal gar keins. Der Effekt ist derselbe wie bei einer defekten Visitenkarte: Der Inhalt dahinter mag stimmen, aber der erste Eindruck sagt „hier hat niemand aufgeräumt“. Bei einem Link, der in einem Angebot per WhatsApp oder in einer LinkedIn-Nachricht landet, ist dieser erste Eindruck oft der einzige, den ein Interessent bekommt, bevor er entscheidet, ob er überhaupt klickt.
Die Pflicht-Tags im Überblick
Sechs Tags im <head> jeder Seite reichen für eine saubere Vorschau auf praktisch jeder Plattform:
| Tag | Zweck | Hinweis |
|---|---|---|
| og:title | Titel in der Vorschau | Kurz und eigenständig, nicht identisch mit dem SEO-Title zwingend nötig |
| og:description | Kurzbeschreibung unter dem Titel | Wird von manchen Plattformen abgeschnitten, wichtigste Aussage zuerst |
| og:image | Vorschaubild | Absolute URL, kein relativer Pfad |
| og:url | Kanonische URL der Seite | Verhindert doppelte Previews bei URL-Parametern |
| og:type | Inhaltstyp | Meist website oder article |
| twitter:card | Darstellung auf X | Meist summary_large_image für ein großes Bild |
Der häufigste Fehler ist eine relative statt einer absoluten URL bei og:image - ein Pfad wie /bilder/vorschau.jpg funktioniert im Browser, aber nicht als Wert dieses Tags, weil die abrufende Plattform keinen Basis-Kontext hat, von dem aus sie den Pfad auflösen könnte.
Das Bildformat, das überall funktioniert
1200 mal 630 Pixel hat sich als praktikabler Standard etabliert, der auf den meisten großen Plattformen ohne störenden Beschnitt dargestellt wird. Wichtiger als die exakte Pixelzahl ist die Lesbarkeit im Kleinformat: Viele Feeds zeigen das Bild nur als Thumbnail, und ein Titel, der in dieser Größe nicht mehr lesbar ist, verfehlt seinen Zweck. Eine generische Stock-Illustration ohne erkennbaren Bezug zum Inhalt bringt wenig - ein Bild mit klar lesbarem Seitentitel und kleiner, unaufdringlicher Markenkennung schlägt in der Praxis fast immer die austauschbare Alternative.
Warum Caches hartnäckiger sind als der Code
Ein korrigiertes og:image zeigt sich nicht automatisch beim nächsten Teilen. Die meisten Plattformen rufen eine URL nur beim ersten Teilen ab und speichern das Ergebnis danach als Cache, unabhängig davon, was sich auf der Seite seither geändert hat. Wer eine neue Vorschau sehen will, muss über das jeweilige Debug-Werkzeug der Plattform einen erneuten Abruf erzwingen:
- Facebook Sharing Debugger für Facebook, Instagram und teilweise WhatsApp - Funktion Erneut abrufen nutzen
- LinkedIn Post Inspector vor jeder wichtigen Kampagne einmal durchlaufen lassen
- X Card Validator für die Darstellung auf X prüfen
Wer eine Vorschau ändert und nur die eigene Website neu lädt, sieht dort die Änderung sofort - auf der Plattform selbst bleibt sie unsichtbar, bis der Cache aktiv aufgefrischt wurde. Dieser Unterschied ist der Grund, warum vermeintlich behobene Fehler in Tests noch tagelang als ungelöst erscheinen.
Dynamische Bilder statt manueller Pflege pro Artikel
Für eine Website mit vielen einzelnen Seiten - etwa einem Blog - lohnt sich selten ein manuell gestaltetes Bild pro Artikel. Next.js bietet mit der ImageResponse-Funktion aus next/og eine Möglichkeit, das og:image pro Seite automatisch aus React-Komponenten zu generieren: Titel und Branding werden bei jedem Build oder Request aus denselben Daten erzeugt, die auch der Rest der Seite nutzt. Das verhindert, dass die Vorschau bei neuen Inhalten vergessen wird, weil sie kein manueller Zusatzschritt mehr ist, sondern automatisch mitentsteht.
Konkrete Maßnahmen für die nächsten 90 Tage
- Tag 1-30: og:title, og:description, og:image, og:url, og:type und twitter:card auf den wichtigsten Seiten prüfen und ergänzen
- Tag 31-60: og:image-Strategie festlegen, bei vielen Seiten eine dynamische Generierung statt manueller Bilder einführen
- Tag 61-90: Previews mit den Debug-Tools der wichtigsten Plattformen testen und Caches der bereits geteilten URLs aktualisieren
Fazit
Schicken Sie sich selbst einen Link Ihrer wichtigsten Seite per WhatsApp und einen per LinkedIn. Was Sie dort sehen, sehen alle anderen auch, die Ihre Seite weiterempfehlen - jeden Tag, ohne dass Sie je davon erfahren. Über den Fix wird meist länger diskutiert, als seine Umsetzung dauert. Wie sich diese Sichtbarkeit mit sauberem Schema-Markup ergänzt, zeigen wir im Artikel Schema.org für lokale Anbieter. Welche Rolle Ladegeschwindigkeit für den Eindruck spielt, sobald jemand tatsächlich klickt, beschreiben wir im Artikel Core Web Vitals 2026. Was ein technisches SEO-Audit inklusive Meta-Tag-Prüfung kostet, sehen Sie im Artikel zu SEO-Kosten. Für eine unverbindliche Prüfung Ihrer aktuellen Vorschauen nehmen Sie gerne Kontakt mit uns auf.
Wollen Sie wissen, wie Ihre Links auf WhatsApp und LinkedIn aussehen?
Unverbindlich anfragenDas könnte Sie auch interessieren
WordPress oder individuell? Die Rechnung über fünf Jahre
WordPress betreibt einen großen Teil des Webs, und das aus guten Gründen. Was es wirklich kostet, wo es überlegen ist und wann eine eigene Lösung trägt.
Website-Wartung 2026: Was sie kostet und was drinstehen muss
Was Website-Wartung wirklich umfasst, was sie am Markt kostet und woran Sie einen leeren Wartungsvertrag erkennen, bevor Sie ihn unterschreiben.
Website-Hosting für Unternehmen: Worauf es 2026 wirklich ankommt
Shared Hosting, Managed Hosting oder Plattform: was der Unterschied für Ladezeit und Ausfallsicherheit bedeutet - und wem am Ende die Domain gehört.
Webseite für IT-Systemhäuser: Ihre eigene Seite ist die Arbeitsprobe
Ein IT-Dienstleister mit langsamer, unsicherer Website widerlegt sich selbst. Was die IT-Leitung in dreißig Sekunden prüft und was daraus folgt.
SEO-Kosten 2026: Was Sichtbarkeit wirklich kostet
Was SEO für kleine und mittlere Unternehmen realistisch kostet: einmalige Optimierung gegen laufende Betreuung, und was im Preis enthalten sein sollte.
DSGVO-Check für die Website: Die Punkte, die fast immer fehlen
Schriften vom fremden Server, Karten ohne Einwilligung, Analyse vor der Zustimmung: die typischen Lücken auf Mittelstandsseiten als prüfbare Liste.
Häufige Fragen
Simon Heistermann
Inhaber
Heistermann Solutions ist das Webstudio von Simon Heistermann. Wir entwickeln individuelle Websites für kleine und mittlere Unternehmen, die online mehr erreichen wollen.
Jeder Artikel entsteht aus der täglichen Projektarbeit und wird vor der Veröffentlichung redaktionell geprüft.
- Borken, Münsterland
- simon@heistermann-solutions.de
Jetzt kostenlos sichern
Tragen Sie Ihre E-Mail-Adresse ein. Sie erhalten direkt einen Bestätigungslink - nach Klick darauf ist die Checkliste sofort verfügbar.
Lassen Sie uns über Ihr Projekt sprechen
Kostenloses Erstgespräch