Open Graph Checker

Weiter

Fügen Sie das HTML Ihrer Seite ein (der <head> allein genügt) und dieser Checker analysiert jeden og:- und twitter:-Meta-Tag, den er findet, und meldet anschließend, welche der sechs wesentlichen Tags vorhanden sind, welche fehlen und den genauen Wert jedes einzelnen. Da er den eingefügten Quelltext liest, statt eine Live-URL abzurufen, funktioniert er auch auf Staging-Servern, localhost und Seiten hinter einem Login, die kein Online-Scraper erreichen kann.

Wie der Checker Ihre Tags liest

  1. 1

    Den Seitenquelltext öffnen

    Drücken Sie Ctrl+U (Cmd+Option+U unter macOS), um das rohe HTML zu sehen, das Social-Crawler tatsächlich erhalten.

  2. 2

    Den head-Bereich kopieren

    Markieren Sie von `<head>` bis `</head>`. Der body wird nicht benötigt, das Einfügen der ganzen Seite schadet aber nicht.

  3. 3

    In den Checker einfügen

    Jeder `<meta>`-Tag wird während der Eingabe analysiert. Es wird keine URL abgerufen: Nur der eingefügte Quelltext wird untersucht.

  4. 4

    Die Checkliste lesen

    Sechs Prüfungen werden grün oder rot: og:title, og:description, og:type, og:url, og:image und twitter:card.

  5. 5

    Die gefundenen Werte prüfen

    Jeder og:- und twitter:-Tag wird mit seinem Inhalt aufgelistet, sodass Tippfehler, leere Werte und relative Bildpfade auffallen.

Die Open-Graph-Tags, nach denen der Checker sucht

Tag Zweck Auf der Checkliste?
og:title Überschrift der Karte Ja, erforderlich
og:description Untertitel der Karte Ja, erforderlich
og:type website, article, video usw. Ja, erforderlich
og:url Kanonische URL Ja, erforderlich
og:image URL des Vorschaubilds Ja, erforderlich
og:site_name Markenzeile über der Überschrift Wird aufgeführt, wenn vorhanden
og:locale de_DE, en_US usw. Wird aufgeführt, wenn vorhanden

Jeder weitere og:-Tag in Ihrem Quelltext wird ebenfalls aufgeführt, auch wenn er nicht Teil der Checkliste ist.

Twitter-Card-Tags

X (Twitter) greift auf Open Graph zurück, wenn seine eigenen Tags fehlen, deshalb steht nur twitter:card auf der Checkliste. Der Rest wird aufgeführt, sobald der Checker ihn findet.

Tag Zweck
twitter:card summary, summary_large_image usw.
twitter:site @Handle des veröffentlichenden Kontos
twitter:creator @Handle des Autors
twitter:title Überschreibt og:title
twitter:description Überschreibt og:description
twitter:image Überschreibt og:image

Bildspezifikation, die überall funktioniert

Der Checker bestätigt, dass og:image deklariert ist, lädt die Datei aber nie herunter, prüfen Sie diese Punkte daher von Hand:

  • Abmessungen: 1200 x 630 px (Facebook, LinkedIn, große Twitter-Karten).
  • Seitenverhältnis: 1.91:1 für summary_large_image.
  • Dateigröße: unter 5 MB, idealerweise unter 1 MB, damit beim Crawler keine Zeitüberschreitung auftritt.
  • Format: JPG oder PNG. WebP und AVIF werden nach wie vor uneinheitlich unterstützt.
  • Absolute URL: immer die vollständige Adresse https://..., niemals ein protokollrelativer oder wurzelrelativer Pfad.

Häufige Probleme, die der Bericht aufdeckt

  • Kein og:image. Der mit Abstand häufigste Fehler. Ohne Bild verkommt die Karte zu einem ungestylten blauen Link.
  • Ein vorhandener, aber leerer Tag. Der Checker gibt jeden Wert aus, sodass ein og:title ohne Inhalt leicht auffällt.
  • Relativer Bildpfad. og:image muss eine absolute URL sein; ein Pfad wie /img/card.jpg bricht das Scraping.
  • Abweichung bei og:url. Weicht og:url von der tatsächlichen kanonischen URL ab, verweigern Plattformen mitunter das Scraping der Seite.
  • Per JavaScript eingefügte Tags. Sie erscheinen nie im view-source, also auch hier nicht, und die meisten Crawler sehen sie ebenfalls nicht.
  • Eine veraltete Karte auf Facebook. Kein Markup-Problem: Facebook speichert seine Scrapes im Cache. Erzwingen Sie eine Aktualisierung über den Sharing Debugger.

Häufig gestellte Fragen

Weil das Einfügen des Quelltextes genau zeigt, was ein Social-Crawler in der rohen Antwort sieht, und es funktioniert bei Seiten, die kein Crawler erreicht: Staging-Server, localhost, Intranets und alles hinter einem Login. Öffnen Sie Ihre Seite, drücken Sie Ctrl+U, kopieren Sie den Quelltext und fügen Sie ihn hier ein.

Nicht zwingend. X greift auf die Open-Graph-Tags zurück, wenn die twitter:-Tags fehlen, deshalb steht nur twitter:card auf der Checkliste. Fügen Sie den Rest nur hinzu, wenn Sie auf X einen anderen Titel, eine andere Beschreibung oder ein anderes Bild wünschen als auf allen übrigen Plattformen.

Der Inspektor zeigt das DOM, nachdem JavaScript ausgeführt wurde, während Social-Crawler die rohe HTML-Antwort lesen. Verwenden Sie view-source (Ctrl+U), nicht den Inspektor, und fügen Sie das ein. Existiert der Tag nur im DOM, ergänzen Sie serverseitiges Rendering oder einen Prerender-Dienst, damit Crawler ihn sehen können.

1200 x 630 px, JPG oder PNG. Es ist die empfohlene Größe für die großen Karten von Facebook und LinkedIn, wird von X akzeptiert und skaliert sauber in Slack, Discord und anderen Apps, die Links entfalten. Der Checker bestätigt, dass og:image deklariert ist, öffnet die Datei aber nicht, prüfen Sie die Abmessungen daher selbst.

Facebook speichert Scrape-Ergebnisse bis zu 30 Tage im Cache. Fügen Sie die URL in den Sharing Debugger unter developers.facebook.com/tools/debug ein und scrapen Sie sie erneut, um den Cache zu invalidieren.

Verwandte Tools

Tool in anderen Sprachen verfügbar