Open Graph
Open Graph bezeichnet Meta-Tags im Head einer Seite, die Titel, Beschreibung und Bild steuern, wenn ein Link auf Social-Media-Kanälen geteilt wird.
Was ist Open Graph?
Open Graph ist ein 2010 von Facebook eingeführtes Protokoll, das Meta-Tags im <head>-Bereich einer Seite nutzt, um das Aussehen eines Links beim Teilen zu steuern. Tags wie og:title, og:description, og:image, og:url und og:type teilen Plattformen wie Facebook, LinkedIn, Messenger, WhatsApp und Slack mit, welcher Titel, Text und welches Bild in der Vorschau angezeigt werden sollen. Ohne diese Tags rät die Plattform selbst – oft mit einem zufälligen Bild oder dem falschen Text.
Warum ist Open Graph wichtig?
Für einen Onlineshop sind geteilte Links kostenlose Werbung, und die Vorschau entscheidet darüber, ob Nutzer klicken. Ein gestochen scharfes og:image und ein klarer og:title auf Produkt- und Kategorieseiten erzeugen eine professionelle, anklickbare Vorschaukarte in Feeds und Chats. Open Graph ist kein direktes Google-ranking-Signal, beeinflusst aber die Klickrate (CTR) über soziale Kanäle massiv. Beachten Sie, dass X (Twitter) eigene Twitter Card-Tags nutzt, bei deren Fehlen jedoch auf Open Graph zurückgreift.
Typische Anwendungsfälle
- Produktseiten, auf denen das
og:imagedas Produktfoto und nicht das Shop-Logo zeigen sollte. - Kampagnen- und Landingpages, die in Newslettern, Anzeigen und Beiträgen geteilt werden.
- Blogbeiträge und Ratgeber, bei denen ein redaktionelles Vorschaubild die CTR steigert.
- Fehlerbehebung bei einer falschen Vorschau mit dem Facebook Sharing Debugger oder LinkedIn Post Inspector.
- Die richtige Größe treffen: Ein
og:imagevon 1200×630 px verhindert unerwünschten Zuschnitt.
Shopify-Perspektive
Die meisten Shopify-Themes binden Open Graph-Tags automatisch in der theme.liquid ein und ziehen das og:image aus dem hervorgehobenen Bild des Produkts. Probleme entstehen, wenn Apps doppelte Tags einschleusen oder Seiten kein dediziertes Vorschaubild haben. Prüfen Sie den gerenderten Quellcode auf echten URLs und validieren Sie diesen mit einem Vorschau-Debugger, anstatt sich darauf zu verlassen, dass das Theme alles richtig macht. Open Graph ergänzt Ihre Metabeschreibung und Ihre strukturierten Daten, ersetzt diese jedoch nicht.