OGP- & Meta-Tag-Validator
Fügen Sie Ihr HTML ein, um Open-Graph- (OGP-) und Twitter-Card-Meta-Tags zu prüfen. Erkennt fehlende Tags und ungültige og:image-URLs, mit Vorschau der Share-Karte.
Tipps
- Die empfohlene Größe für og:image beträgt 1200×630px (Seitenverhältnis 1,91:1). Zu kleine Bilder oder ein falsches Seitenverhältnis können von sozialen Plattformen unerwartet zugeschnitten werden.
- Crawler von Facebook, LINE und Slack lesen og:title/og:description, während X (Twitter) eigene twitter:title/twitter:description verwendet. Wenn Sie beide setzen, wird die Vorschau auf allen Plattformen korrekt angezeigt.
- Fehlt twitter:card, versucht X, auf og:title/og:description zurückzufallen, aber das Bild wird dann möglicherweise nicht korrekt angezeigt. Es ist daher besser, es explizit zu setzen.
- Setzen Sie og:url auf die kanonische, absolute (https://) URL der Seite. Das hilft auch, Verwechslungen mit doppeltem Inhalt durch URLs mit Tracking-Parametern zu vermeiden.
- Direkt nach dem Ändern Ihrer Meta-Tags zeigen soziale Plattformen möglicherweise noch eine veraltete, zwischengespeicherte Vorschau. Nutzen Sie das Re-Crawl-Tool der jeweiligen Plattform (z. B. den Facebook Sharing-Debugger), um den Cache zu aktualisieren.
Häufig gestellte Fragen
/img/a.png). Die meisten Crawler können relative URLs nicht auflösen – verwenden Sie daher immer eine absolute URL, die mit https:// beginnt. Es kann auch fehlschlagen, wenn Ihr Server den User-Agent des Crawlers blockiert oder das Bild zu klein ist.<title> wird für den Titel in den Suchergebnissen und im Browser-Tab verwendet, während og:title für den Kartentitel beim Teilen in sozialen Medien verwendet wird. Viele Crawler greifen auf <title> zurück, wenn og:title fehlt, aber das Ergebnis entspricht dann möglicherweise nicht dem Gewünschten.summary_large_image empfohlen, da es ein großes Bild anzeigt. Wenn ein kleines Vorschaubild ausreicht, verwenden Sie stattdessen summary. app und player sind für App-Installationshinweise bzw. eingebettete Video-/Audioinhalte gedacht und für eine normale Webseite unüblich.<title> und meta description zurück, um eine Vorschau zu erstellen, aber es wird kein Bild angezeigt – das Ergebnis ist eine schlichte Vorschau aus Link und Text. Da dies die Klickrate beeinflusst, sollten Sie mindestens og:title, og:description und og:image setzen.
Übrigens – Warum es OGP gibt – Facebook hat es geschaffen, damit der „Gefällt mir"-Button funktioniert
Das Open Graph Protocol (OGP) wurde 2010 von Facebook entwickelt, um seinen „Gefällt mir"-Button zu popularisieren. Damals zeigte das Teilen einer Webseite auf Facebook kaum mehr als einen nackten Link und einen Titel, und die Klickraten litten darunter. Facebooks Lösung bestand darin, dass eine Seite selbst deklarieren kann, wie sie beim Teilen aussehen soll – durch einen neuen <meta property="og:xxx">-Namensraum im gewöhnlichen HTML.
Interessanterweise baut OGP auf RDFa auf, einer W3C-Spezifikation zum Einbetten strukturierter Daten in HTML. Durch die Wiederverwendung eines bestehenden Standards konnte Facebook die neue Funktion einführen, ohne auf die Mitarbeit von Browser-Herstellern oder anderen Unternehmen angewiesen zu sein – nur ein paar zusätzliche Meta-Tags auf bestehenden Seiten waren nötig. Dieser Ansatz „erweitern, ohne die Abwärtskompatibilität zu brechen" ging auf, und OGP wurde zu einem De-facto-Standard, der weit über Facebook hinaus übernommen wurde, etwa von Slack, LINE und Discord.
Twitter übernahm OGP nie direkt, sondern schuf einen eigenen, separaten Namensraum: Twitter Cards (twitter:xxx). Das war wohl ebenso eine Wettbewerbs- wie eine technische Entscheidung – man wollte keine Spezifikation übernehmen, die vom Konkurrenten Facebook stammt. Das Ergebnis: Die meisten Websites müssen bis heute sowohl og:- als auch twitter:-Tags doppelt pflegen, weshalb Tools wie dieser Validator weiterhin nützlich sind.