LissabonWir sind beim Web Summit, Stand A1-33.Details ansehen
Feedance
Glossar · O

Open-Graph-Tags

Definition

Open-Graph-Tags sind HTML-Meta-Tags, die sozialen Plattformen und Messaging-Apps mitteilen, wie eine Vorschau dargestellt werden soll, wenn die URL einer Seite geteilt wird – sie legen Titel, Beschreibung, Bild und Typ fest, die angezeigt werden sollen, statt die Plattform raten zu lassen. Das ursprünglich von Facebook entwickelte Open-Graph-Protokoll wird heute von nahezu jeder großen Social-Media- und Messaging-Plattform gelesen und ist damit der Standardweg, mit dem ein Händler steuert, wie seine Produktseiten aussehen, wenn sie außerhalb der eigenen Website geteilt, gepinnt oder verlinkt werden. Im E-Commerce entscheiden gut gesetzte Open-Graph-Tags darüber, ob ein geteilter Produktlink ein überzeugendes Bild samt Preis zeigt oder ein fehlerhaftes, generisches Vorschaubild.

Warum Open-Graph-Tags für feedbasierte Seiten wichtig sind

Produktseiten werden ständig geteilt, sei es durch Mundpropaganda von Kunden, Affiliate-Links, Influencer-Posts oder bezahlte Social-Media-Platzierungen, und jede dieser Freigaben wird auf Basis der Open-Graph-Tags dargestellt, nicht anhand des tatsächlichen Seiteninhalts, den ein Besucher nach dem Klick sehen würde. Eine Produktseite ohne korrekt konfigurierte Tags zeigt womöglich ein verzerrtes Logo, eine abgeschnittene oder irrelevante Beschreibung oder gar kein Bild – und schwächt damit die Klickrate einer Freigabe, die ansonsten kostenlose Reichweite mit hoher Kaufabsicht bedeutet. Da Produktseiten meist in großer Zahl aus demselben Katalog generiert werden, der auch den Shopping-Feed befüllt, lassen sich Open-Graph-Werte direkt aus vorhandenen Produkt-Metadaten per Vorlage erzeugen, statt sie für jede SKU von Hand zu schreiben. Das macht sie zu einem der besser skalierbaren Hebel für große Kataloge.

So funktionieren Open-Graph-Tags

Open-Graph-Tags stehen im <head> einer Webseite als <meta property="og:...">-Elemente, wobei og:title, og:description, og:image und og:url die zentralen Vorschaufelder abdecken, die die meisten Plattformen auslesen. Bei einem Produktkatalog entsprechen diese Werte in der Regel direkt den Feed-Attributen, die ohnehin für Shopping und den Meta-Katalog gepflegt werden – derselbe Titel, dieselbe Beschreibung und dasselbe Hauptbild aus dem Feed können die entsprechenden Open-Graph-Tags befüllen. So bleiben beide Oberflächen konsistent, ohne separate Texte schreiben zu müssen. Plattformen und Suchmaschinen gleichen dieses strukturierte Markup zunehmend mit einem umfassenderen Knowledge Graph von Entitäten ab, um zu verstehen, was eine Seite darstellt. Konsistente Open-Graph-Daten stärken also das maschinelle Verständnis eines Produkts über die unmittelbare Social-Media-Vorschau hinaus. Da diese Tags bestimmen, wie sich ein Link überall dort verhält, wo er geteilt wird, sind sie auch ein unauffälliger, aber wichtiger Bestandteil wirksamer Content Syndication, bei der dasselbe Produkt auf mehreren Partnerseiten oder Aggregatoren erscheinen kann.

Beispiel

<item>
  <g:id>SKU-10234</g:id>
  <g:title>Organic Cotton Crewneck Sweater - Charcoal, M</g:title>
  <g:description>Soft, breathable organic cotton crewneck in charcoal.</g:description>
  <g:image_link>https://example-shop.com/img/org-sweater-charcoal.jpg</g:image_link>
</item>
<!-- Open Graph tags on the corresponding product page, templated from the feed -->
<meta property="og:title" content="Organic Cotton Crewneck Sweater - Charcoal, M">
<meta property="og:description" content="Soft, breathable organic cotton crewneck in charcoal.">
<meta property="og:image" content="https://example-shop.com/img/org-sweater-charcoal.jpg">
<meta property="og:type" content="product">

Verwandte Begriffe

Da Open-Graph-Werte vorhandene Produkt-Metadaten so genau widerspiegeln, pflegt man sie am besten als Vorlage statt als manuelle Aufgabe. Sie tragen dazu bei, wie konsistent die Identität eines Produkts in einem umfassenderen Knowledge Graph von Entitäten verstanden wird, und ermöglichen unauffällig Content Syndication, indem sie sicherstellen, dass ein Produkt überall gleich aussieht und gleich beschrieben wird, wo auch immer ein Link darauf geteilt wird.

Sehen Sie, welche
Produkte Umsatz bringen.

Verbinden Sie Ihren Feed und GA4. Wir zeigen Product Score, 4T, Price War und Broken Size für Ihren eigenen Katalog.