/
Wie generiere ich Social Media Links mittels og-Tags?

Wie generiere ich Social Media Links mittels og-Tags?

Owned by Robert Buck
Last updated: März 15, 2025
2 min read

Um das beste Ergebnis beim Teilen einer Website auf einer Social Media Plattform zu erreichen, muss das Theme speziell dafür ausgelegt sein. Dazu kommt das Open Graph protocol zum Einsatz.

Meta-Informationen via og-Tags

Damit werden über sogenannte HTML-Meta-Tags, welche im Theme platziert werden, die Meta-Informationen eines Artikels (Titel, Beschreibung, URL, Bild, etc.) der jeweiligen Social Media Plattform übermittelt. Je nach Social Media Plattform erfolgt die Implementation leicht anders. Details werden am Besten direkt aus den jeweiligen Dokumentationen entnommen:

Cloudrexx bietet folgende Platzhalter an, um die Meta-Informationen eines Artikels im Theme ausgeben zu können:

Platzhalter

Beschreibung

Beispiel

Platzhalter

Beschreibung

Beispiel

[[METATITLE]]

Enthält den Titel der zu teilenden Artikels.
Bei einer normalen Inhaltsseite entspricht dies dem Wert Titel aus dem Tab SEO & Social Media der Bearbeitungsmaske des Content Managers. Bei einer Anwendungsseite entspricht dies dem Namen des jeweiligen Eintrages, wie z.B. einer Veranstaltung, eines News Artikels, eines Shop Produkts, usw.

<meta property="og:title" content="[[METATITLE]]" />

[[METADESC]]

Enthält die Beschreibung des zu teilenden Artikels.
Bei einer normalen Inhaltsseite entspricht dies dem Wert Beschreibung aus dem Tab SEO & Social Media der Bearbeitungsmaske des Content Managers. Bei einer Anwendungsseite entspricht dies dem Inhalt des jeweiligen Eintrages, wie z.B. einer Veranstaltung, eines News Artikels, eines Shop Produkts, usw.

<meta property="og:description" content="[[METADESC]]" />

[[METAIMAGE]]

Enthält die URL des Bildes des zu teilenden Artikels.
Bei einer normalen Inhaltsseite entspricht dies dem Wert Bild aus dem Tab SEO & Social Media der Bearbeitungsmaske des Content Managers. Bei einer Anwendungsseite entspricht dies dem Inhalt des jeweiligen Eintrages, wie z.B. einer Veranstaltung, eines News Artikels, eines Shop Produkts, usw.

<meta property="og:image" content="[[METAIMAGE]]" />

[[METAIMAGE_WIDTH]]

Enthält die Breitenangabe in Pixel des Bildes des zu teilenden Artikels.

<meta property="og:image:width" content="[[METAIMAGE_WIDTH]]" />

[[METAIMAGE_HEIGHT]]

Enthält die Höhenangabe in Pixel des Bildes des zu teilenden Artikels.

<meta property="og:image:height" content="[[METAIMAGE_HEIGHT]]" />

[[METAURL]]

URL des zu teilenden Artikels.

<meta property="og:url" content="[[METAURL]]" />

Generell stehen die aufgeführten Platzhalter nur auf Seiten zur Verfügung, bei welchen die Suchmaschinenindizierung die Option Suchmaschinenindizierung erlauben im Tab SEO & Social Media in der Bearbeitungsmaske im Content Manager aktiv ist.

Beispiel-Implementation von og-Tags

  1. Wechseln Sie nach Administration > Layout.

  2. Bearbeiten Sie das aktive Theme.

  3. Ergänzen Sie die Datei index.html mit den folgenden Tags:

<meta property="og:title" content="[[METATITLE]]"> <meta property="og:type" content="website"> <meta property="og:description" content="[[METADESC]]"> <meta property="og:image" content="[[METAIMAGE]]"> <meta property="og:url" content="[[METAURL]]">

Testing

Einige Plattformen bieten Werkzeuge an, um die Integration zu Testen. Diese können auch genutzt werden, um den Cache der zu teilenden Seite zu löschen:

Einige Plattformen speichern sich die ausgelesenen Meta-Informationen. Als Folge haben Anpassungen an den Inhalten oder an der Integration im Theme keine Auswirkung. In diesem Fall bieten die Plattformen die Möglichkeit an, über deren Werkzeuge, den Cache zu leeren. Bei Facebook kann dies beim https://developers.facebook.com/tools/debug/ z.B. über die Funktion Erneut scrapen gemacht werden.

Related content

Cloudrexx AG
Dein Partner für starke Websites
Datenschutzerklärung | Platzhalterverzeichnis | Development Documentation | Kundencenter |
Website | Support | Notfall | Systemstatus