Open Graph ist ein Protokoll, das jede Webseite zu einem reichhaltigen Objekt im Social Graph macht. Wenn jemand deine URL teilt, lesen Plattformen Open-Graph-Meta-Tags aus deinem HTML und bauen daraus die Vorschaukarte.
Pflicht-Tags für jede Seite
<meta property="og:title" content="Dein Seitentitel"><meta property="og:description" content="Eine überzeugende 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">| Tag | Zweck |
|---|---|
og:title | Überschrift in der Vorschaukarte |
og:description | Begleittext unter dem Titel |
og:image | Großes Bild — wichtigster Tag für die Klickrate |
og:url | Kanonische URL der geteilten Seite |
og:type | Inhaltstyp (website, article, product usw.) |
Optional, aber sinnvoll
og:site_name— Markenname über dem Titel (sichtbar auf Discord, Facebook).og:locale— Sprachcode (de_DE,en_US).og:image:width/og:image:height— Hilft Plattformen beim Layout vor dem Bildladen.
Wo Tags hingehören
Open-Graph-Tags gehören in den <head> deines HTML. Tags, die nur per Client-Side-JavaScript gesetzt werden, sind für viele Crawler — darunter Facebook, LinkedIn und Slack — unsichtbar, weil kein JavaScript ausgeführt wird.
Server-Side Rendering oder statisches HTML ist entscheidend für zuverlässige Vorschauen.
Open Graph vs. Standard-Meta-Tags
<meta name="description"> ist für Suchmaschinen. Open-Graph-Tags sind speziell fürs Social Sharing. Viele Seiten duplizieren Inhalte — trotzdem beide setzen.
Tags prüfen
Jede URL in OpenGraph Check einfügen: So siehst du exakt, was Crawler empfangen, wie die Karte auf mehreren Plattformen wirkt und welche Werte fehlen oder ungültig sind.
