Das Open Graph Protocol (OGP) ist dazu da, deine URLs auf Social Media nutzerfreundlich darzustellen. Mit der richtigen Nutzung kannst du deinen Social Media Auftritt verbessern, da relevante Informationen anschaulich auf Plattformen wie Facebook, Instagram, LinkedIn, Twitter und Pinterest angezeigt werden.
In diesem Beitrag erfährst du alles, was du zum Open Graph Protocol wissen musst. Außerdem gebe ich dir Wissen zur Verwendung von grundlegenden Open Graph Tags mit, dir dir helfen, deine Website zu verbessern.
Was ist Open Graph?
Open Graph Metatags auf deiner Website helfen Crawlern dabei, wichtige Inhalte für Social Media zu erfassen. Open Graph wurde ursprünglich von Facebook entwickelt und hilft dabei, deine Inhalte auf Social Media ansprechend darzustellen: Mit passendem Bild, einer aussagekräftigen Überschrift und einer starken Beschreibung.
Mit Open Graph genau kontrollieren, wie Inhalte auf Social Media wirken
Auf Social Media hat man viel Kontrolle: Du kannst Bilder posten, die genau so aussehen, wie du möchtest. Diesen Bildern kannst du dann eine saftige Beschreibung geben, die deinen Followern noch mehr Informationen gibt. Das geht so lang gut, bis du einen Link zu deiner Website teilst, beispielsweise zu deinem neusten Blog-Artikel: Ohje - was ist das denn? Das sieht ja gar nicht gut aus! Da wird kein Bild angezeigt, der Titel passt gar nicht zu deiner Zielgruppe und die Beschreibung macht wenig Lust, auf den Link zu klicken. Dabei willst du doch eigentlich, dass dein Link so aussieht:
Mit Bild, Titel und Beschreibung, die genau zu deiner Zielgruppe und Plattform passen. Ohne diese ansprechenden Inhalte scrollen potentielle Interessenten direkt weiter und klicken auf die Inhalte deiner Konkurrenz.
Open Graph Tags, oder “OG Tags”, kommen zur Rettung! Sie machen aus deiner Website ein Element des Social Graphs, also ein Objekt, das von den Social Media Netzwerken gelesen werden können. Links zu deiner Website können dann anschaulich dargestellt werden: Die Leute, die deinen Post sehen, werden so direkt neugierig und haben mehr Lust, den Beitrag zu Teilen, zu Liken, zu kommentieren oder auf den Link zu klicken.
Außerdem führt diese anschauliche Darstellung zu mehr Transparenz. Die Nutzer wissen direkt, was sie hinter dem Link erwartet - das schafft Vertrauen und beruhigt.
Wichtig: Ohne OG Tags versuchen manche Social Media Plattformen dann, deine Website zu lesen und sich passende Darstellungen zusammenzureimen. Letztendlich wird deine URL dann meistens exakt nicht so dargestellt, wie du das gern möchtest.
Die Open Graph Tags lassen sich ganz einfach im Head-Element deiner Website einbauen. Für normale Besucher deiner Website ändert das gar nichts! Nur die Darstellung auf Social Media ändert sich.
Wie baut man Open Graph Tags auf seiner Website ein?
Die Metadaten, wozu auch die Open Graph Informationen gehören, werden im Head-Element deiner Website gespeichert. Wenn du WordPress verwendest, kannst du diese Informationen ganz einfach mit einem Plugin wie RankMath oder Yoast SEO anpassen. Sonst kannst du auch direkt das HTML-Head-Element deiner Website anpassen. Wenn du Hilfe brauchst, wende dich am besten an einen Entwickler.
Die Meta-Tags im Head-Element könnten beispielsweise so aussehen:
<head>
<meta
property="og:image"
content="https://www.silaswolf.com/blog/headless-wordpress.jpeg"
/>
<meta
property="og:title"
content="Headless WordPress - Was ist das und wie starte ich damit?"
/>
<meta
property="og:description"
content="Headless WordPress ist eine vergleichweise neue Art und Weise, WordPress als CMS (Content Management System) zu benutzen. In diesem Artikel erfährst du alle Vor- und Nachteile sowie hilfreiche Tipps."
/>
<meta
property="og:url"
content="https://www.silaswolf.com/de/blog/headless-wordpress/"
/>
<meta property="og:type" content="article" />
</head>In diesem Beispiel werden Titel, Bild, Beschreibung, Typ und URL hinterlegt.
Du brauchst Hilfe bei der Einrichtung deiner Open Graph Inhalte?
Dann melde dich bei mir! Ich helfe gern.
Jetzt kontaktierenÜber die OG Tags legst du die Art des Inhalts fest (beispielsweise “Blog-Artikel”), definierst einen Titel, schreibst eine kurze Beschreibung und hinterlegst ein passendes Bild. Weitere Informationen kannst du ganz einfach auf der offiziellen Website des Open Graph Protocols finden.
Die wichtigsten Open Graph Tags
Du weißt jetzt genau, das Open Graph Tags eine gute Idee sind, um die “Conversion Rate” auf Social Media zu erhöhen. Ein schöne Darstellung deiner Inhalte führt zu einer besseren Nutzererfahrung und allgemein zu einem seriösen Gesamtbild. Es gibt viele Open Graph Meta Tags, aber für eine gute Darstellungen auf den gängigen Social Media Plattformen wie Facebook, LinkedIn oder Twitter reichen die 4 Standard-Tags:
- og:title - Der Titel des Inhalts. Wähle ihn so, dass Nutzer besonders stark dazu bewegt werden, auf die URL zu klicken
- og:image - Eine URL zu einem Bild, der gut zu deinem Beitrag passt.
- og:type - Der Typ des Inhaltes: Ein Blog-Artikel, eine Website, ein Video- oder Audio-Inhalt
- og:url - Gib die passende URL zu dem Inhalt an.
Es gibt noch viele andere Tags, die du der offiziellen Open Graph Protocol Website entnehmen kannst.
Open Graph bei den verschiedenen Plattformen
Je nach Plattform musst du einige Dinge bei der Hinterlegung deiner Open-Graph-Tags beachten. Hier eine kurze Übersicht.
OG-Image Abmessungen
Die gewünschten Abmessungen der Open Graph Bilder sind je nach Plattform unterschiedlich. Der unterstehenden Tabelle sind die wichtigsten Informationen zu entnehmen:
| Plattform | Abmessungen |
|---|---|
| 1200 x 630 px | |
| 1200 x 675 px (minimum), 4096 x 4096 px (maximum) | |
| 1200 x 627 px | |
| 1000 x 1500 px (2:3 Seitenverhältnis) |
Auch interessant:
- Versuche keinen bis wenig Text auf deinen Bilder zu verwenden
- Mit 1200 x 630 px fährst du meistens am besten
- Versuche, deine Bilder unter 8 MB zu halten
Open Graph Titel und Beschreibung
Dein Titel sollte ca. 60 Zeichen lang sein. Die Open Graph Beschreibung funktioniert mit 150-160 Zeichen meistens am besten.
Open Graph bei X (ehemals Twitter)
X (ehemalsTwitter) nutzt “Twitter-Cards” für die Darstellung von geteilten URLs. Das sieht dann so aus:
<head>
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="silaswolf.com" />
<meta
property="twitter:url"
content="https://www.silaswolf.com/de/blog/headless-wordpress/"
/>
<meta
name="twitter:title"
content="Headless WordPress - Was ist das und wie starte ich damit?"
/>
<meta
name="twitter:description"
content="Headless WordPress ist eine vergleichweise neue Art und Weise, WordPress als CMS (Content Management System) zu benutzen. In diesem Artikel erfährst du alle Vor- und Nachteile sowie hilfreiche Tipps."
/>
<meta
name="twitter:image"
content="https://www.silaswolf.com/blog/headless-wordpress.jpeg"
/>
</head>Baue am besten sowohl Twitter-Card-Tags als auch die normalen OG-Meta-Tags ein. So kannst du garantieren, dass deine geteilten URLs überall gut aussehen.
Tipps und Tools für Open Graph
Es gibt viele Tools, die dir helfen können, mit Open Graph zu arbeiten. Zu diesen Tools gehören primär Checker bzw. Tester und Generatoren. Hier eine Übersicht:
- Mein eigenes Tool - ganz einfach und 100% kostenlos deine Website checken
- LinkedIn Post Inspector - der LinkedIn Post Inspector
- Facebook Sharing Debugger - man muss sich leider mit einem Facebook Account anmelden
- Twitter Card Validator - Karten-Validierung bei Twitter
Fazit
In diesem Artikel hast du gelernt, wie man das Open Graph Protocol verwendet, um seinen Social Media Auftritt zu verbessern. Vielen Dank, dass du bis zum Ende gelesen hast! Lass mich gern wissen, wie dir der Artikel gefallen hat und welche Fragen du noch hast.