Open-Graph-Checker: OG-Tags und Link-Vorschau testen
Gib eine URL ein und sieh, wie sie beim Teilen auf Facebook, X, LinkedIn und in Chat-Apps aussieht. Der Checker liest jedes og:*- und twitter:*-Tag, vermisst das Vorschaubild und sagt dir genau, was zu beheben ist.
Link-Vorschauen (ungefähr: Jede Plattform wendet ihr eigenes Layout, ihren eigenen Zuschnitt und Cache an)
Prüfungen
Vorschaubild
Gefundene Tags
| Feld | Wert |
|---|
Vorgeschlagene Tags
Deine aktuellen Werte, mit Platzhaltern dort, wo etwas fehlt. Füge sie in den <head> der Seite ein und bearbeite die TODO-Zeilen.
Ein Open-Graph-Checker zeigt, was ein Crawler sieht, wenn jemand deinen Link in einen Beitrag oder Chat einfügt: den Titel, die Beschreibung und das Bild, die in den Meta-Tags og:* undtwitter:* deiner Seite angegeben sind. Zeigt eine Vorschau das falsche Bild, gar keins oder den Namen deiner Website statt des Artikeltitels, liegt die Ursache fast immer in diesen wenigen HTML-Zeilen, und diese Seite sagt dir, in welcher.
So prüfst du deine Open-Graph-Tags
- Gib die URL der Seite ein, die du teilen willst, und klick auf Tags prüfen. Weiterleitungen werden verfolgt, analysiert wird die endgültige URL.
- Sieh dir die Vorschauen an. Sie sind Annäherungen daran, wie Facebook, X, LinkedIn und Chat-Apps eine Link-Karte darstellen, gebaut aus den Tags, die jede liest.
- Geh die Prüfungen durch. Fehler zerstören Vorschauen, Warnungen machen sie auf manchen Plattformen schlechter, Hinweise sind gute Praxis. Jede sagt, was zu ändern ist.
- Beheben und erneut prüfen. Das Feld Vorgeschlagene Tags gibt dir einen fertigen, bearbeitbaren Tag-Block mit deinen aktuellen Werten.
- Aktualisiere die Caches der Plattformen, nachdem du die Korrektur veröffentlicht hast (siehe unten), sonst behalten alte Shares die alte Vorschau.
Für eine Staging-Seite, eine Seite hinter einem Login oder alles auf localhost wechselst du zuHTML einfügen: Füge den Seitenquelltext ein, und dieselben Prüfungen laufen in deinem Browser.
Die Open-Graph-Tags, die jede Seite braucht
Open Graph ist das Protokoll hinter den meisten Link-Vorschauen. Es erklärt vier Angaben für jede Seite zur Pflicht (ogp.me), und LinkedIn nennt Titel, Bild, Beschreibung und URL als die Tags, die für seine Share-Vorschauen vorhanden sein müssen (LinkedIn-Hilfe, englisch).
| Tag | Was es tut | Tipp |
|---|---|---|
og:title | Die Überschrift der Karte. Pflicht. | Schreib sie für einen Feed, nicht für die Suche. Sie braucht deinen Markennamen nicht. |
og:type | Die Art des Objekts, z. B. website oder article. Pflicht. | Nimm article für Beiträge, das schaltet die article:*-Tags frei. |
og:image | Das Vorschaubild. Pflicht. | Nimm eine vollständige https://-URL und setz auch Breite, Höhe und Alt-Text. |
og:url | Die kanonische URL des Objekts, als dauerhafte ID genutzt. Pflicht. | Sie sollte zu deinem <link rel="canonical"> passen. |
og:description | Ein bis zwei Sätze unter dem Titel. Im Protokoll optional, bei LinkedIn Pflicht. | Sag, was die Lesenden bekommen, nicht, was die Seite ist. |
og:site_name | Der Name der gesamten Website. | Wird in vielen Chat-Apps über dem Titel angezeigt. |
og:image:alt | Eine Beschreibung des Bildes. Laut Protokoll sollte eine Seite, die og:image angibt, auch dieses angeben. | Beschreibe das Bild, nicht die Seite. |
og:image:width / og:image:height | Bildgröße in Pixeln. | Facebook sagt, man solle sie angeben, damit das Bild beim ersten Teilen des Links korrekt lädt. |
og:locale | Sprache und Region des Inhalts, z. B. de_DE. | Facebook empfiehlt es zusammen mit og:type. |
Kommt ein Tag doppelt vor, gewinnt das erste: Bei widersprüchlichen Werten bevorzugt das Protokoll das erste Tag von oben nach unten. Dubletten entstehen meist, wenn ein Theme und ein SEO-Plugin beide Tags schreiben. Der Checker markiert sie.
Twitter-(X-)Card-Tags
X liest seine eigenen twitter:*-Tags und greift bei den meisten auf Open Graph zurück, laut der Referenz zu Karten-Markup von X (X-Entwicklerdokumentation, archiviert, englisch):
twitter:card: der Kartentyp,summary(kleines quadratisches Bild) odersummary_large_image(breites Bild). Fehlt es, aberog:type,og:titleundog:descriptionsind vorhanden, wird womöglich eine Summary-Karte gerendert.twitter:title: höchstens 70 Zeichen; greift aufog:titlezurück.twitter:description: höchstens 200 Zeichen; greift aufog:descriptionzurück.twitter:image: unter 5 MB; JPG, PNG, WEBP und GIF (nur das erste Bild); SVG wird nicht unterstützt. Greift aufog:imagezurück.twitter:image:alt: bis zu 420 Zeichen; greift aufog:image:altzurück.
In der Praxis deckt Open Graph plus eine Zeile, <meta name="twitter:card" content="summary_large_image">, X ab.
og:image-Größe: Was jede Plattform verlangt
| Plattform | Dokumentierte Anforderung |
|---|---|
| Mindestens 1200 × 627 px, empfohlenes Verhältnis 1,91:1, maximal 5 MB Dateigröße (LinkedIn-Hilfe) | |
Mindestens 1080 px breit für die beste Darstellung auf hochauflösenden Geräten; og:image:width und og:image:height angeben (Best Practices von Meta zum Teilen) | |
| X, Karte mit großem Bild | Verhältnis 2:1, mindestens 300 × 157, höchstens 4096 × 4096 px, unter 5 MB (X-Doku, archiviert) |
| X, Summary-Karte | Verhältnis 1:1, mindestens 144 × 144, höchstens 4096 × 4096 px, unter 5 MB, auf ein Quadrat zugeschnitten (X-Doku, archiviert) |
Ein Bild kann alle erfüllen: 1200 × 630 Pixel, PNG oder JPEG, unter 5 MB. Es liegt über dem Minimum von LinkedIn und der Breitenempfehlung von Facebook, hat grob 1,91:1, und X schneidet es für seine große 2:1-Karte leicht zu. Halte Text und Logos vom Rand fern, damit der Zuschnitt sie nicht abschneidet. X verlangt außerdem ein eigenes Bild pro Seite statt eines allgemeinen Website-Logos, eine sinnvolle Regel überall.
Warum deine Link-Vorschau falsch ist und wie du sie behebst
Das alte Bild oder der alte Titel erscheint weiter
Plattformen speichern Vorschauen zwischen. Facebook cacht Bilder nach URL und aktualisiert sie nur, wenn sich die URL ändert (Meta for Developers), lade also ein geändertes Bild unter einem neuen Dateinamen hoch und schick die Seite dann durch denSharing Debugger, der einen frischen Abruf auslöst. Bei LinkedIn aktualisierst du die URL mit demPost Inspector.
Gar kein Bild
Sieh dir oben die Tabelle Vorschaubild an. Häufige Ursachen: og:image ist ein relativer Pfad, das Bild liefert für Crawler 403 oder 404 (Hotlink-Schutz, ein geschütztes Verzeichnis, eine CDN-Regel), es ist eine SVG-Datei oder größer als 5 MB. LinkedIn weist darauf hin, dass ein Bild, das die Anforderungen erfüllt, trotzdem scheitern kann, wenn die Website LinkedIn am Abruf hindert.
Die Tags gibt es im Browser, aber nicht hier
Die Tags werden vermutlich nach dem Laden der Seite per JavaScript hinzugefügt. Crawler lesen das HTML, das der Server schickt, also verlege die Tags in serverseitig gerendertes oder vorab gebautes HTML. Single-Page-Apps brauchen für Share-Vorschauen meist Server-Side-Rendering oder Prerendering.
Es wird die falsche Seite angezeigt
Leitet die URL weiter, zeigen Crawler die Zielseite. Der Checker zeigt die Zahl der Weiterleitungen, derWeiterleitungs-Checker listet jede Station auf. Achte außerdem darauf, dass og:url auf die Seite selbst zeigt und nicht auf deine Startseite, ein häufiger Template-Fehler.
Open-Graph-Tags und SEO-Meta-Tags
<title>, Meta-Beschreibung und Canonical-Link sind für Suchmaschinen, Open-Graph- und Twitter-Tags für Shares. Sie dürfen sich unterscheiden (eine Share-Überschrift darf knackiger sein als ein Suchtitel), aber kanonische URL und og:url sollten übereinstimmen, und einenoindex-Robots-Anweisung solltest du kennen, bevor du eine Seite bewirbst. Der Checker meldet alle, auch einen HTTP-Header X-Robots-Tag.
Was der Checker mit deiner URL macht
Unser Server ruft die Seite einmal ab, folgt bis zu acht Weiterleitungen, liest höchstens die ersten 600 KB (am Ende des <head> hört er auf) und lädt den ersten Teil von bis zu zwei Vorschaubildern, um Größe und Format zu lesen. Er ruft nur öffentliche http(s)-Adressen an Standardports ab und verweigert private, lokale und Cloud-Metadaten-IPs, auch wenn eine Weiterleitung dorthin zeigt. Nichts wird gespeichert. Die Vorschaukarten laden das Bild danach direkt in deinem Browser. Teilst du einen Kampagnenlink, bau ihn mit demUTM-Generator; teilst du den von jemand anderem, entferne zuerst das Tracking mit dem URL-Bereiniger.
Häufige Fragen
Was macht ein Open-Graph-Checker?
Er ruft eine Seite so ab, wie es ein Crawler für Link-Vorschauen tut, liest die Open-Graph-Tags (og:*) und Twitter-Card-Tags (twitter:*) im HTML-Kopf und zeigt, wie ein geteilter Link aussehen wird. Dieser hier lädt außerdem das Vorschaubild herunter, um Format, Pixelgröße und Dateigröße zu prüfen, und listet jedes fehlende oder ungültige Tag mit einer Lösung auf.
Welche Open-Graph-Tags sind Pflicht?
Das Open-Graph-Protokoll nennt vier Pflichtangaben: og:title, og:type, og:image und og:url. LinkedIn sagt, dass og:title, og:image, og:description und og:url für seine Vorschauen vorhanden sein müssen. In der Praxis setzt du also alle fünf, dazu og:image:alt für das Bild.
Wie groß sollte mein og:image sein?
Es gibt keine einzige offizielle Größe. LinkedIn verlangt mindestens 1200 × 627 Pixel bei einem Seitenverhältnis von 1,91:1 und unter 5 MB. Facebook empfiehlt Bilder von mindestens 1080 Pixeln Breite. Die große Bildkarte von X nutzt ein Verhältnis von 2:1 mit einem Minimum von 300 × 157 und einem Limit von 5 MB. Ein PNG oder JPEG mit 1200 × 630 unter 5 MB erfüllt alles davon.
Warum zeigen Facebook oder LinkedIn weiter meine alte Vorschau?
Plattformen speichern Link-Vorschauen zwischen. Facebook cacht Bilder nach URL und aktualisiert sie erst, wenn sich die URL ändert. Veröffentliche das neue Bild also unter einem neuen Dateinamen und schick die Seite dann durch den Sharing Debugger von Facebook, um einen frischen Abruf auszulösen. Der Post Inspector von LinkedIn macht dasselbe für LinkedIn.
Brauche ich Twitter-Card-Tags, wenn ich schon Open-Graph-Tags habe?
X greift bei den meisten Feldern auf Open Graph zurück: twitter:title auf og:title, twitter:description auf og:description und twitter:image auf og:image. Ohne twitter:card zeigt X womöglich trotzdem eine kleine Summary-Karte aus og:type, og:title und og:description. Ergänze twitter:card mit dem Wert summary_large_image, wenn du das Layout mit großem Bild willst.
Führt der Checker JavaScript aus?
Nein. Er liest das HTML, das der Server liefert, so wie es auch die meisten Crawler für Link-Vorschauen tun. Erscheinen deine Tags erst, nachdem clientseitiges JavaScript lief, fehlen sie hier und vermutlich auch bei echten Shares. Erzeuge sie auf dem Server oder beim Build.
Kann ich eine Staging- oder localhost-Seite prüfen?
Nicht per URL: Aus Sicherheitsgründen ruft der Checker nur öffentliche Adressen ab und blockiert private, lokale und Cloud-Metadaten-IPs. Nutze stattdessen den Tab „HTML einfügen“. Füge den Seitenquelltext ein, er wird komplett in deinem Browser analysiert, die Bildgrößen werden lokal gemessen.
Entsprechen die Vorschauen genau dem, was jede Plattform zeigt?
Nein, sie sind Annäherungen, gebaut aus den Tags, die jede Plattform dokumentiert. Jedes Netzwerk wendet eigenes Layout, eigenen Zuschnitt, eigene Kürzung und eigenen Cache an und ändert sie mit der Zeit. Nutze die Vorschauen, um fehlende Bilder und schlechte Titel zu finden, und bestätige vor einem großen Launch mit dem Debugger der Plattform.
