OG Tags - OG:image, OG.title & OG:twitter

Mithilfe von OG Tags lassen sich herkömmliche Webseiten in ein Open Graph Objekt konvertieren.

Dadurch ist eine nahtlose Integration zu Facebook und Social Networks wie Twitter und LinkedIn möglich. Sobald ein User den Inhalt deiner Website teilt, übergibt die Website oder das Content-Management-System (CMS) die Daten an die sozialen Netzwerke.

Die Netzwerke bereiten die Inhalte leserlich auf und bieten dem Interessierten eine knappe Vorschau auf Deine Website und ihren Content. Übergeben werden Meta-Angaben wie title, description und image.

Die Übermittlung der Informationen erfolgt in englischer Sprache, wie dies bei HTML üblich ist. Eine unmittelbare Auswirkung auf das OnPage-SEO gibt es mit der Implementierung nicht. Ein an die Zielgruppe angepasster Open Graph Feed sorgt jedoch für eine steigende Klickrate (CTR), die auch für Suchmaschinen interessant ist. Die Klickattraktivität spielt bei Google und Co. eine wichtige Rolle.

Was sind Open Graph Meta-Tags (OG Tags)?

Bei OG Tags handelt es sich um spezifische Snippets, die den Inhalt deiner Website oder eines Artikels zusammenfassen. Das Open Grap Protocol nutzen Unternehmen wie Facebook, Twitter und LinkedIn. Teilt ein Besucher die Inhalte deiner Website, stellen die sozialen Netzwerke eine Zusammenfassung des Inhalts anderen zur Verfügung.

OG Tags: Welche Tags gibt es?

Um den sozialen Netzwerken die Inhalte deiner Website mitzuteilen, setzt sich der Open Graph Tag aus mehreren Bestandteilen zusammen. Unterschieden wird zwischen obligatorischen und fakultativen Tags. Bei Letzteren ist keine Implementierung nötig. Die obligatorischen Tags stellen og:title, og:type, og:image, og:url und og:description dar. Wahlweise lassen sich og:video, og:local, og:site_name und fb:app_id integrieren.

Übersicht obligatorische OG Tags:

• og:title - Maximale Zeichenkänge 95 Zeichen - Ohne Zeilenumbruch maximal 50 Zeichen
• og:type - Zu den meistverwendeten gehören "website", "blog" oder "article"
• og:image - Mind. 1200 x 630 Pixel mit einem 1,91:1 Format
• og:url - Verwendung des Canonical Tags
• og:description - Maximal 297 Zeichen

• Der Canonical Tag zeigt dem Crawler die eindeutige URL einer Webseite

Bei der URL solltest Du eine kanonische URL nutzen. Diese priorisiert den Originalinhalt und bündelt den Traffic auf eine bestimmte Page. Der OG Tag type sagt aus, um welches Medium es sich bei deinem Content handelt (wie zum Beispiel „Website“). Das Image-Tag lässt sich noch weiter unterteilen, falls dies erwünscht ist. Das könnte beispielsweise so aussehen:

<meta property="og:image" content="https://www.seo-doktor.de/upload/lexikon/canonical-tag.jpg" />

<meta property="og:image:type" content="image/jpeg" />

<meta property="og:image:width" content="1572" />

<meta property="og:image:height" content="1048" />

<meta property="og:image:alt" content="Canonical Tag" />

Zusammensetzung von OG Tags

Die Implementierung der OG Tags erfolgt im Quelltext beziehungsweise im Header deiner Page. Sobald eine Seite von einem Leser geteilt wird, generiert das Social Network eine Vorschau deines Inhalts. Bei der Implementierung der OG Tags musst Du Dich an eine bestimmte Formatierung halten. Die Formatierung sieht so aus:

<meta property="og:title" content="Canonical Tag" />

<meta property="og:description" content="Erfahre alles zum Canonical Tag!" />

<meta property="og:image" content="https://www.die-domain.de/upload/lexikon/canonical-tag.jpg" />

<meta property="og:url" content="https://www.die-domain.de/lexikon/canonical-tag.html" />

Die Kennzeichnung spielt sich über die Meta-Angaben innerhalb der meta property und content="" ab. Dadurch wissen die Social Networks, welcher Content von der Website zu holen ist. Die Verlinkung findet auf die bei og:url hinterlegte URL statt.

SEO Maßnahmen: Bedeutung von OG Tags verstehen

Das Versehen von Seiten mit OG Tags stellt eine SEO-Maßnahme dar. Dieses OnPage-SEO sorgt dafür, dass deine Website mehr Traffic generiert. Je attraktiver eine Website für Besucher, desto interessanter ist diese für Google und andere Suchmaschinen. Letzten Endes ist auch Facebook eine große Suchmaschine, über die potentielle Leser zu deiner Website gelangen. Open Graph Meta-Tags helfen dir dabei, ein bestimmtes Zielpublikum auf deine Seite zu locken und für eine erhöhte Verweildauer zu sorgen.

OG Tags bei Wordpress

Die einfachste Variante, um OG Tags zu setzen, stellt Wordpress in Verbindung mit dem Yoast SEO Plug-in dar. Gehe hier auf die Rubrik „Social“. Unter dem ersten Tab gibst Du die Benutzernamen und URLs deiner Netzwerke ein. Die Verknüpfung mit Facebook nimmst Du über den zweiten Tab vor. Hier kannst über einen Schalter Open Graph Meta Data und die Facebook-ID hinzufügen, um dich als Besitzer der Page zu verifizieren. Yoast erstellt daraufhin alle nötigen OG Tags automatisch und fügt diese dem Quelltext hinzu. Als Fallback-Bild kannst Du das Logo deiner Website hinzufügen. Befindet sich in einem deiner Beiträge kein Featured Image, so greift Yoast auf das von dir gespeicherte Fallback-Bild zurück.

Facebook: Open Graph Tags

In seiner offiziellen Dokumentation zeigt Facebook etwa zwei Dutzend OG Tags auf. Facebook unterteilt den Meta-Tag für das Bild (og:image) in weitere Tags. Um obligatorische Tags handelt es sich dabei allerdings nicht. Lediglich og:image ist entscheidend. Ein spezifischer Facebook-Tag stellt fb:app_id dar. Dieser ist obligatorisch, solltest Du Facebook Insights nutzen wollen. Dann ist dort die App ID deiner Facebook-Seite einzutragen. Facebook nutzt das Open Graph Protocol für weitere Dienstleistungen und nutzt es beispielsweise bei WhatsApp. Der Messenger generiert ein Vorschaubild, das den Blick des Empfängers auf das Bild lenkt.

Größe und Format vom OG Image

Für eine optimale Darstellung des Bildes auf Facebook, Twitter und anderen sozialen Netzwerken, sollte das Open Graph Bild mindestens eine Größe von 1.200 x 630 Pixel aufweisen. Die Bilder liegen in einem Seitenverhältnis von 1.91:1 vor. Eine Größe von 8 MB darf nicht überschritten werden. Wenn nicht anders möglich, dann ist eine Größe von 600 x 316 Pixel akzeptabel. Ein kleineres Bild ist ohnehin nicht zu empfehlen, da die Darstellung im Seitenbeitrag zu gering ausfiele. Facebook schneidet Bilder automatisch ab, sollten diese nicht im Format 1.91:1 vorliegen. Über die Angaben og:image:height und og:image:width lassen sich genaue Angaben des Bildes übermitteln. Der Sharing Debugger von Facebook zeigt dir Informationen deiner Website auf und offenbart mögliche Fehler auf deiner Page.

OG Tags für Twitter & LinkedIn

Auch Twitter und LinkedIn bedienen sich des Open Graph Protocols. Bei Twitter lassen sich die OG Tags mit den eigenen Twitter-Tags kombinieren. Der Aufbau der Tags unterscheidet sich nur geringfügig. Anstatt meta property nutzt Twitter lediglich meta name, gefolgt von twitter:card und twitter:creator beziehungsweise twitter:site.