Open-Graph-Daten

Was ist Open Graph?

Open Graph ist ein Protokoll, das 2010 von Facebook (Meta) entwickelt wurde und Ihnen ermöglicht, zu bestimmen, wie Ihre Inhalte angezeigt werden, wenn sie in sozialen Medien geteilt werden. Ohne Open-Graph-Tags entscheiden die Plattformen selbst, welchen Titel, welche Beschreibung und welches Bild sie anzeigen, was oft zu ungenauen oder unattraktiven Ergebnissen führt.

Mit den richtigen OG-Tags bestimmst du den Titel, die Beschreibung und das Bild, die in der Vorschau angezeigt werden, wenn jemand einen Link zu deinem Webshop teilt.

Die wichtigsten OG-Tags

Hier sind die Tags, die für Ihren Webshop am wichtigsten sind:

• og:title, der Titel, der beim Teilen angezeigt wird. Sollte kurz, präzise und einprägsam sein (typischerweise 40–60 Zeichen).
• og:description, die Beschreibung unter dem Titel. Sollte den Inhalt überzeugend zusammenfassen (typischerweise 100–160 Zeichen).
• og:image, das Bild, das in der Vorschau angezeigt wird. Das wichtigste Tag, da Bilder das Erste sind, was ins Auge fällt.
• und:url, die kanonische URL der Seite. Stellt sicher, dass alle Beiträge auf die richtige Seite verweisen.
• und:type, die Art des Inhalts. Für Produktseiten wird „product“ verwendet, ansonsten „website“.
• og:site_name, der Name Ihres Webshops.
• og:locale, die Sprache (z. B. „da_DK“ für Dänisch).

Open Graph in Shoporama

Shoporama generiert automatisch die grundlegenden Open-Graph-Tags für alle Seiten:

• Produktseiten: og:title, og:description und og:image (hauptsächlich Produktbild). og:type wird in der Regel auf „product“ gesetzt.
• Kategorien und Landingpages: Titel, Beschreibung und ggf. Kategoriebild.
• Statische Seiten: Titel und Beschreibung aus den Metadaten der Seite.

Sie können die automatischen Werte überschreiben, indem Sie den Meta-Titel und die Meta-Beschreibung für Produkte, Kategorien und Seiten individuell festlegen.

Produktspezifische OG-Tags hängen vom Theme ab

Die erweiterten Produkt-Tags (product:price:amount, product:price:currency usw.) sind nicht Teil des Kerns der Shoporama-Plattform. Sie sind in einigen der mitgelieferten Themes (z. B. Delaware/DelawareDK) enthalten, wo sie über die Vorlagen des Themes hinzugefügt werden. Andere Themes senden sie nicht unbedingt automatisch aus.

Wenn Sie bestimmte Produkt-Tags benötigen, überprüfen Sie die Vorlage Ihres Themes (in der Regel in „partials/schema.product.html“ oder ähnlich) oder fügen Sie diese selbst hinzu. Für strukturierte Daten zu Produkten (Preis, Lagerbestand, Marke usw.) verwendet Shoporama außerdem automatisch JSON-LD, was Google gegenüber OG-Produkt-Tags bevorzugt.

Bilder für OG-Tags

Das Bild ist das wichtigste Element beim Teilen in sozialen Netzwerken. Hier sind die Richtlinien:

• Größe: Empfohlen werden 1200×630 Pixel (Seitenverhältnis 1,91:1). Bilder unter 600×315 werden als kleines Vorschaubild statt als großes Bild angezeigt.
• Format: JPG oder PNG. Halten Sie die Dateigröße unter 8 MB.
• Inhalt: Verwende Produktbilder in guter Qualität. Vermeide zu viel Text im Bild, da Facebook Beiträge mit zu viel Text möglicherweise ausblendet.

Testen Sie Ihre OG-Tags

Verwende diese Tools, um deine Open-Graph-Tags zu testen und zu debuggen:

• Facebook Sharing Debugger: Zeigt genau, wie dein Link auf Facebook aussieht, und hilft dabei, den Cache bei Aktualisierungen zu leeren.
• LinkedIn Post Inspector: Entspricht dem Facebook Sharing Debugger für LinkedIn-Beiträge.
• Twitter Card Validator: Für die Vorschau auf Twitter/X.

Es ist wichtig, nach Änderungen zu testen, da soziale Medien OG-Daten zwischenspeichern. Verwende die Debugger-Tools, um eine Aktualisierung zu erzwingen.