Open Graph

Kurzdefinition

Open Graph ist ein Protokoll aus Meta-Tags, die eine Webseite fürs Teilen beschreiben. Wenn jemand eine URL in Facebook, LinkedIn, Slack, WhatsApp oder viele andere Apps einfügt, ruft die Plattform die Seite ab, liest Tags wie og:title, og:description und og:image und baut daraus eine Vorschaukarte.

Facebook hat das Protokoll 2010 eingeführt, damit jede Webseite zu einem vollwertigen Objekt im eigenen Social Graph werden kann. Heute sind die Tags weit über Facebook hinaus ein De-facto-Standard. Mit Rankings in Googles Websuche haben sie nichts zu tun. Sie entscheiden, wie eine Seite dort aussieht, wo Menschen einander Links schicken.

Woraus eine Vorschaukarte besteht

Eine typische Linkvorschau hat vier sichtbare Teile: ein Bild, einen Titel, manchmal eine kurze Beschreibung und die Domain oder den Namen der Website. Ohne Open Graph Tags rät jede Plattform selbst. Sie nimmt vielleicht den <title>, den ersten Absatz oder das erste große Bild auf der Seite, und das ist manchmal ein Logo, eine Anzeige oder der Text eines Cookie-Banners.

Mit Open Graph Tags triffst du diese Wahl selbst. Layout, Zuschnitt und Auswahl der angezeigten Teile bleiben Sache der Plattform, aber sie arbeitet mit dem Material, das du vorgibst.

Die vier Grundangaben

Die Open-Graph-Spezifikation auf ogp.me nennt vier Eigenschaften, die jede Seite haben sollte:

• og:title: der Titel des Objekts, so wie er in der Vorschau erscheinen soll.
• og:type: die Art des Objekts, zum Beispiel website oder article. Seiten ohne Typ gelten als website.
• og:image: die URL des Bilds, das die Seite repräsentieren soll.
• og:url: die kanonische URL der Seite, die als dauerhafte ID im Graph dient.

Eine minimale Umsetzung sieht so aus:

html<head>
  <title>Trailrunning-Schuhe für Damen | Beispiel-Shop</title>
  <meta property="og:title" content="Trailrunning-Schuhe für Damen">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.example.com/damen/schuhe/trailrunning/">
  <meta property="og:image" content="https://www.example.com/og/trailrunning-damen.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Drei Trailrunning-Schuhe auf einem felsigen Pfad">
  <meta property="og:description" content="Grip, Dämpfung und Passform von 24 aktuellen Modellen im Vergleich.">
  <meta property="og:site_name" content="Beispiel-Shop">
  <meta property="og:locale" content="de_DE">
</head>

Achte auf das Attribut property. Open Graph basiert auf RDFa, deshalb verwenden die Tags property und nicht das Attribut name, das etwa die Meta-Description nutzt.

Sinnvolle optionale Angaben

Über die Grundangaben hinaus lohnen sich auf den meisten Websites ein paar optionale Eigenschaften:

• og:description: ein oder zwei Sätze zur Seite. Manche Plattformen zeigen sie, andere blenden sie in den meisten Layouts aus.
• og:site_name: der Name der Website, getrennt vom Seitentitel.
• og:locale: Sprache und Region im Format de_DE. og:locale:alternate nennt weitere verfügbare Sprachen.
• og:image:alt: eine Textbeschreibung des Bilds für Menschen, die es nicht sehen können.
• og:image:width und og:image:height: die Bildmaße in Pixeln.

Für og:type mit dem Wert article ergänzt die Spezifikation Eigenschaften wie article:published_time, article:modified_time, article:author, article:section und article:tag. Nicht jede Plattform nutzt sie, aber sie kosten wenig und beschreiben den Inhalt genau.

Kommt eine Eigenschaft mehrfach vor, etwa mehrere og:image-Tags, hat laut Spezifikation bei Konflikten der erste Vorrang. Setze das bevorzugte Bild also an den Anfang.

Das Bild entscheidet über den Klick

In den meisten Feeds ist das Bild der größte Teil der Vorschau. Es verdient deshalb die meiste Aufmerksamkeit.

Facebooks Dokumentation empfiehlt Bilder mit mindestens 1200 × 630 Pixeln für eine gute Darstellung auf hochauflösenden Bildschirmen, also ein Seitenverhältnis von etwa 1,91:1. Kleinere Bilder erscheinen womöglich nur als kleines Vorschaubild neben dem Text statt als große Karte. Andere Plattformen nutzen ähnliche Querformate, ihre genauen Grenzen unterscheiden sich aber und ändern sich mit der Zeit. Prüfe deshalb die aktuelle Dokumentation der Plattformen, die für dich zählen.

Ein paar praktische Regeln gelten überall:

• Verwende eine absolute HTTPS-URL, die ohne Login, Cookies oder Hotlink-Schutz öffentlich erreichbar ist.
• Halte wichtige Inhalte, vor allem Text, vom Rand fern. Manche Oberflächen schneiden quadratisch zu.
• Gestalte das Bild fürs Teilen, statt ein beliebiges Inhaltsbild wiederzuverwenden. Ein Produktfoto auf Weiß funktioniert, ein hohes Porträtfoto meist nicht.
• Setze og:image:width und og:image:height. Laut Facebook erscheint das Bild ohne diese Angaben beim ersten Teilen einer URL womöglich nicht, weil es erst verarbeitet werden muss.
• Bevorzuge verbreitete Formate wie JPEG oder PNG. Die Unterstützung neuerer Formate unterscheidet sich zwischen Plattformen.

Die Kompression des Teilen-Bilds ist weniger kritisch als bei Bildern auf der Seite, weil es die Plattform abruft und nicht jeder Besucher. Für die Bilder auf der Seite selbst gilt die normale Bildoptimierung weiterhin.

og:url und kanonische URLs

og:url sollte dieselbe URL enthalten wie der Canonical-Tag der Seite. Facebook behandelt sie als Objekt-ID und bündelt Interaktionen wie geteilte Beiträge unter dieser URL. Landen Tracking-Parameter, Session-IDs oder eine nicht kanonische Variante in og:url, kann derselbe Artikel als mehrere getrennte Objekte auftauchen.

Verwende die absolute kanonische URL, halte Protokoll und abschließenden Schrägstrich identisch mit dem Canonical und passe beides an, wenn eine Seite umzieht.

Open Graph, Title-Tags und strukturierte Daten

Drei Arten von Metadaten werden oft verwechselt:

• Der Title-Tag und die Meta-Description richten sich an Suchmaschinen und den Browser. Google kann sie in den Ergebnissen umschreiben.
• Open Graph richtet sich an Linkvorschauen auf sozialen Plattformen und in Messengern.
• Schema-Markup nach schema.org beschreibt Entitäten und Seitentypen für Suchfunktionen, zum Beispiel eine BreadcrumbList für Breadcrumb-Spuren oder Product-Markup in einem Shop.

Sie dürfen und sollten oft unterschiedlich formuliert sein. Ein Title-Tag enthält für die Suche vielleicht Marke und Zusatz. Ein og:title kann kürzer und gesprächiger sein, weil die Plattform die Domain meist ohnehin anzeigt.

Google dokumentiert Open Graph nicht als Ranking-Signal. Zwei Tags nennt Google aber in seiner Dokumentation. og:site_name gehört zu den Quellen, die Googles System für Websitenamen berücksichtigen kann, neben strukturierten Daten vom Typ WebSite, dem Titel und Überschriften. Und og:image ist einer der Metadaten-Hinweise, die Google nutzen kann, wenn es ein bevorzugtes Bild für eine Seite auswählt. Beides sind Hinweise, keine Steuerung.

X, LinkedIn und andere Plattformen

X nutzt eigene Twitter-Card-Tags, etwa twitter:card mit Werten wie summary oder summary_large_image. Laut Dokumentation von X sucht der Card-Prozessor zuerst nach den twitter:-Tags und greift für Titel, Beschreibung und Bild auf die passenden Open Graph Tags zurück, wenn diese fehlen. In der Praxis ergänzen die meisten Websites twitter:card und lassen die Open Graph Tags den Rest liefern.

LinkedIn, Slack, Discord, WhatsApp, Microsoft Teams und viele andere Apps lesen Open Graph Tags direkt. Ihre Layouts und Zuschnitte unterscheiden sich, ein weiterer Grund, das Bild schlicht und zentriert zu halten.

Caches und Tests

Plattformen speichern, was sie abgerufen haben. Nachdem du einen Titel oder ein Bild geändert hast, kann sich die alte Vorschau tagelang oder wochenlang halten. Die meisten großen Plattformen bieten ein Werkzeug, um die Seite neu abzurufen:

• Der Sharing Debugger von Facebook zeigt die gefundenen Tags, Warnungen und einen Button zum erneuten Abruf.
• Der Post Inspector von LinkedIn zeigt, wie LinkedIn die URL liest, und erneuert den Cache.
• Bei X ist die Vorschau im Beitragseditor der praktische Test, da der Card Validator keine Vorschauen mehr anzeigt.

Diese Werkzeuge decken auch ein häufiges Serverproblem auf: Firewalls oder Bot-Schutz, die den Crawler der Plattform blockieren. Meldet der Debugger einen Fehler oder eine leere Antwort, prüfe die Serverlogs und die Schutzregeln für Crawler wie facebookexternalhit.

JavaScript und Single-Page-Apps

Die meisten Scraper für Linkvorschauen lesen die HTML-Antwort, ohne JavaScript auszuführen. Setzt eine Single-Page-Application ihre Meta-Tags erst im Browser, sieht der Scraper die allgemeinen Tags aus der App-Hülle, oft denselben Titel und dasselbe Bild für jede URL.

Die Lösung: Open Graph Tags gehören in die Serverantwort, per Server-Side Rendering, statischer Generierung oder über die Metadaten-API eines Frameworks. Dasselbe gilt für Bilder. Ein Teilen-Bild, das erst echt wird, nachdem ein Lazy-Loading-Skript einen Platzhalter getauscht hat, bleibt für einen Scraper unsichtbar, der das Skript nie ausführt.

Ein durchgespieltes Beispiel

Die Analyse findet drei Ursachen. Die Website ist eine Single-Page-App, der Scraper sieht also nur die Standard-Tags aus der App-Hülle. Das Standard-og:image ist ein Logo mit 300 × 300 Pixeln. Und og:url zeigt auf jeder Route auf die Startseite.

Nach der Korrektur rendert jeder Ratgeber seine Tags auf dem Server: einen eigenen og:title, ein Bild mit 1200 × 630 Pixeln zum Thema des Ratgebers, ein og:url, das zum Canonical passt, und og:type mit dem Wert article. Ein erneuter Abruf im Post Inspector zeigt die große Karte, und neue geteilte Beiträge erscheinen mit der richtigen Vorschau.

Häufige Fehler

• og:image leer lassen, sodass Plattformen ein Logo, eine Anzeige oder ein Banner wählen
• relative Bild-URLs oder Bilder hinter Login oder Hotlink-Schutz verwenden
• auf jeder Seite dieselbe og:url setzen, oft die Startseite
• Tracking-Parameter an og:url hängen
• Open Graph Tags nur per Client-JavaScript setzen
• Hochformatbilder oder Text am Rand, der abgeschnitten wird
• nach geänderten Tags vergessen, den Cache zu erneuern
• Plattform-Crawler per Bot-Schutz aussperren
• erwarten, dass Open Graph Tags das Google-Ranking verbessern

So prüfst du deine Open Graph Tags

1. Öffne den Seitenquelltext, nicht den Inspektor, und prüfe, ob die og:-Tags im HTML des Servers stehen.
2. Kontrolliere, ob og:title, og:type, og:image und og:url in jedem Template vorhanden sind.
3. Vergleiche og:url mit der kanonischen URL.
4. Öffne die URL aus og:image in einem privaten Fenster und prüfe Größe, Format und Zuschnitt.
5. Füge die URL in den Sharing Debugger von Facebook und den Post Inspector von LinkedIn ein.
6. Achte auf Fehler, die auf blockierte Crawler oder Weiterleitungen hindeuten.
7. Ergänze twitter:card, wenn dir Vorschauen auf X wichtig sind.
8. Löse nach Änderungen einen neuen Abruf aus, damit die Plattformen ihren Cache aktualisieren.

Crawl-Foundry-Perspektive

Jede Plattform baut ihre Linkvorschau aus dem HTML, das sie abruft. Wie eine geteilte URL aussieht, entscheidet deshalb am Ende der Debugger der jeweiligen Plattform. Den Site Audit von Crawl Foundry stellen wir nicht als Open-Graph-Validator dar.

Was der Site Audit beiträgt, ist die technische Basis rund um diese Vorschauen. Sein Crawler prüft das gerenderte HTML deiner Seiten und führt einen Crawl-Verlauf, sodass sich Läufe nach einem Template-Release vergleichen lassen. Denk daran, dass die meisten Vorschau-Scraper das rohe HTML ohne JavaScript lesen. Steht ein Tag in der gerenderten Ansicht, aber nicht im Quelltext, kann ein Scraper ihn trotzdem verpassen. Wie ein Crawl eingerichtet wird, erklärt die Übersicht zum Site Audit. Der Site Audit ist eine kostenpflichtige Datenaktion, den Preis siehst du, bevor du startest.

Verwandte Begriffe

• Meta-Description
• Bildoptimierung
• JavaScript-Rendering für SEO
• Organische Klickrate
• robots.txt

Quellen für den Review

• The Open Graph protocol
• Meta for Developers: Sharing for webmasters
• Meta for Developers: Sharing Debugger
• X Developer Platform: Cards markup reference
• LinkedIn: Post Inspector
• Google Search Central: Websitenamen in der Google Suche
• Google Search Central: Best Practices für die Bilder-SEO