Du hast die Meta-Tags angepasst und veröffentlicht. Auf LinkedIn erscheint trotzdem das alte Bild. Open-Graph-Tags vor dem Teilen zu testen findet solche Fehler in Minuten - nicht erst nach dem Live-Post.
Kurzantwort
Teste Open-Graph-Tags in drei Schritten: Quelltext (Seitenquelltext anzeigen), ein Multi-Plattform-Tool wie OpenGraph Check, und die offiziellen Debugger der Netzwerke, auf denen du postest (Facebook Sharing Debugger, LinkedIn Post Inspector). Prüfe, ob og:title, og:description, og:image und og:url im Server-HTML mit absoluten HTTPS-URLs stehen. Öffne die Bild-URL direkt im Browser. Erst teilen, wenn die Vorschau auf allen Zielplattformen stimmt.
Warum Testen wichtig ist
Social Crawler sehen deine Seite nicht wie dein Browser. Sie laden HTML einmal, lesen <head>-Meta-Tags, holen og:image und cachen das Ergebnis. Auf den meisten Plattformen kein JavaScript. Kein zweiter Versuch, wenn der erste Abruf scheitert.
Eine Seite kann in Chrome perfekt aussehen und trotzdem kaputte Tags liefern, weil:
- Meta-Tags erst nach Client-Side-Hydration gesetzt werden
- Staging relative Bildpfade nutzte, die live brechen
- Das CDN altes HTML ausliefert
og:imageauf einen Redirect oder Login zeigt
Testen vor dem Post ist günstiger als eine laufende Kampagne nachträglich zu korrigieren.
Der 10-Minuten-Workflow vor dem Teilen
1. Tags im Seitenquelltext prüfen
Rechtsklick auf die Live-URL → Seitenquelltext anzeigen (nicht Element untersuchen).
Suche nach og:title. Du solltest etwa Folgendes sehen:
<meta property="og:title" content="Deine Überschrift"><meta property="og:description" content="Deine Zusammenfassung."><meta property="og:image" content="https://example.com/og.jpg"><meta property="og:url" content="https://example.com/seite"><meta property="og:type" content="website">Stehen Tags in DevTools, aber nicht im Quelltext, übersehen Crawler sie. Zuerst Server-Side Rendering fixen. Alle Tags: Open-Graph-Tags erklärt.
2. Bild-URL validieren
Kopiere og:image und öffne die URL in einem neuen Tab.
| Prüfung | OK wenn |
|---|---|
| HTTP-Status | 200 OK |
| Protokoll | HTTPS |
| Auth | Lädt ohne Login |
| Content-Type | image/jpeg, image/png oder image/webp |
| Größe | Mindestens 1200 × 630 px empfohlen |
Bild kaputt? Fehlendes OG-Bild beheben.
3. OpenGraph Check nutzen
URL in OpenGraph Check einfügen. Der Scan zeigt:
- Live-Meta-Werte, die Crawler empfangen
- Vorschauen für Facebook, X, LinkedIn, WhatsApp und Discord
- Code-Tab mit den erkannten Tags
- Fehlende oder ungültige Felder
Das ist dein Standard-Test: eine URL, alle wichtigen Plattformen, unter 30 Sekunden.
4. Plattform-Debugger für deine Zielnetzwerke
Offizielle Tools zeigen, was jeder Crawler gecacht hat, und erlauben einen erneuten Abruf.
| Plattform | Tool |
|---|---|
| Facebook, Instagram, WhatsApp | Facebook Sharing Debugger |
| LinkedIn Post Inspector | |
| X (Twitter) | Card Validator (eingeschränkt verfügbar) |
Anleitungen: Facebook Sharing Debugger, LinkedIn Post Inspector.
5. Test-Link privat teilen
Schick die URL dir selbst per WhatsApp oder Slack, bevor du öffentlich postest. Echte Apps verhalten sich manchmal anders als Debugger bei warmem Cache.
Was du bei jedem Scan prüfen solltest
Pflicht-Tags
| Tag | Prüfen |
|---|---|
og:title | Stimmt die Überschrift, max. ~60 Zeichen |
og:description | Klare Zusammenfassung, ideal 80-125 Zeichen |
og:image | Absolute HTTPS-URL, richtiges Seitenverhältnis |
og:url | Entspricht der kanonischen Share-URL |
og:type | website, article oder product passend |
Twitter-Card-Tags (für X)
X fällt auf Open Graph zurück, explizite Tags geben mehr Kontrolle. Open Graph vs. Twitter Card.
<meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Deine Überschrift"><meta name="twitter:description" content="Deine Zusammenfassung."><meta name="twitter:image" content="https://example.com/og.jpg">Bildmaße nach Plattform
Sicherer Allgemeinwert: 1200 × 630 px (1.91:1). Details: Open-Graph-Bildgröße.
Checkliste vor dem Teilen
- Seitenquelltext zeigt alle
og:*-Tags -
og:imageöffnet direkt im Browser (200, HTTPS) - Titel und Beschreibung lesen sich gut auf Mobile
- OpenGraph Check: Vorschauen auf Zielplattformen OK
- Facebook Sharing Debugger: Scrape erfolgreich (bei Meta-Apps)
- LinkedIn Post Inspector: Bild korrekt (bei LinkedIn)
-
robots.txtblockiert Social Crawler nicht - Seite liefert 200 für die exakte Share-URL (kein Redirect-Loop)
Typische Testfehler
Nur im Browser-DOM testen
React, Vue und Next.js setzen Tags oft erst nach dem Laden. Crawler sehen das nicht. Immer den Quelltext prüfen.
Auf localhost testen
Social Crawler erreichen localhost und privates Staging nicht ohne Tunnel. Erst auf öffentlicher HTTPS-URL deployen oder Staging-Subdomain ohne Auth für den Testpfad.
Falsche URL testen
www vs. ohne www, trailing slashes und Query-Strings zählen. Teste die exakte URL, die du postest. og:url muss übereinstimmen.
Cache ignorieren
Plattformen cachen aggressiv. Tags geändert auf einer früher geteilten URL? Debugger erneut scrapen. Link-Vorschau-Cache erklärt, Open-Graph Cache Busting.
Eine Vorschau für alle Plattformen
Discord liest Open Graph. iMessage hat eigenen Parser. WhatsApp teilt Metas Cache mit Facebook. Jede Zielplattform einzeln prüfen.
Wann erneut testen
Voller Workflow nochmal, wenn du:
og:image, Titel oder Beschreibung änderst- Domain oder CMS wechselst
- Redesign oder neues Framework ausrollst
- Falsche Vorschau von Kollegen gemeldet bekommst
- Paid Social startest (kaputte Vorschauen verbrennen Budget)
Nach dem Fix: Debugger bestätigen lassen, dann öffentlich posten.
Automatisiert vs. manuell
Manuell (empfohlen für Launches): Quelltext + OpenGraph Check + Plattform-Debugger. Findet visuelle und Crawler-Probleme, die Automation übersieht.
CI-Checks (optional): Produktions-HTML im Deploy-Pipeline abrufen und og:title / og:image asserten. Ersetzt keine visuelle Vorschau.
Browser-Extensions: Praktisch für Schnellchecks, vor wichtigen Posts aber gegen Quelltext verifizieren.
FAQ
Kann ich OG-Tags testen, ohne die Seite zu veröffentlichen?
Die URL muss öffentlich per HTTPS erreichbar sein. Staging-Subdomain, Preview ohne Crawler-Blockade oder versteckter Pfad (/preview/launch) ohne Nav-Link.
Wie lange dauert ein Test?
Basis-Scan: 2-3 Minuten. Voller Workflow mit zwei Debuggern: unter 10 Minuten.
Ersetzt OpenGraph Check den Facebook Sharing Debugger?
Nein. OpenGraph Check zeigt Live-Tags und Multi-Plattform-Vorschauen schnell. Metas Debugger brauchst du zum Cache leeren und für offizielle Scrape-Fehler.
Warum weicht die Test-Vorschau vom Live-Post ab?
Veralteter Plattform-Cache. Im Debugger neu scrapen oder mit Cache-Busting-Query teilen. Facebook-Vorschau aktualisiert sich nicht.
Vor oder nach DNS-Live testen?
Nach aktivem DNS und SSL auf der Produktionsdomain. Falscher Hostname liefert irreführende Ergebnisse.
Twitter-Card-Tags separat testen?
Wenn du twitter:* setzt, prüfen. Sonst Open-Graph-Vorschau auf X via OpenGraph Check.
og:image im Debugger OK, WhatsApp nicht?
WhatsApp nutzt Metas Infrastruktur. Im Facebook Sharing Debugger neu scrapen, dann in neuem Chat testen.
Fazit
Open-Graph-Tags zu testen dauert zehn Minuten und verhindert kaputte Link-Karten bei wichtigen Posts. Quelltext lesen, Bild-URL prüfen, mit OpenGraph Check scannen, Debugger bestätigen lassen - dann teilen. Bei jedem Launch, und die Vorschau passt zu dem, was du geplant hast.
