Social Media

Was man über die Link-Vorschau von Linkedin, Facebook, Twitter und Co. wissen sollte

Beim Einfügen von Links ziehen sich die diversen Social-Media-Plattformen Informationen scheinbar automatisch von der jeweils verlinkten Website.

Auch für die eigenen Internetseiten hätte man gerne, dass das mit geringem Aufwand, möglichst immer funktioniert. Hat man Social-Media-Redakteure, die auf die eigene Website verlinken wollen, sind diese nicht begeistert, wenn das nicht so klappt, wie man es von anderen Seiten kennt.

Es ist also quasi ein Muss, auf der eigenen Website, die entsprechenden Meta Tags zu pflegen – und zwar so, dass eine manuelle Eingabe von Meta Tag Informationen nicht mehr notwendig ist.


Meta Tags und Formate

Will man die Meta Tags vollständig automatisieren, sind ein paar Schritte notwendig.

Was man braucht, sind einerseits die richtigen Meta-Tags, passend für das jeweilige Soziale Medium. Andererseits müssen Bilder und andere Medien in den richtigen Formaten bereitgestellt werden.

Das gängige Meta Tag Format ist Open Graph. Es wurde 2010 von Facebook eingeführt. Die Idee dahinter ist, dass Entwickler Inhalte ohne großen Aufwand in Facebook (und anderen Plattformen) anzeigen können. Die meisten Social Media Plattfomen nutzen ebenfalls Open Graph. Twitter Cards, die Twitter Link-Vorschau,  nutzen eigene twitter:card Meta Tags. Als Fallback, falls keine twitter:card Informationen bereitgestellt werden, wird auch Open Graph akzeptiert.

Meta Tags stehen im <head> Bereich von HTML-Seiten und sehen so aus:


<meta name="twitter:card" content="photo" />

<meta name="twitter:description" content="Hier dreht sich alles um das Thema Marketing" />

<meta property="og:title" content="Marketing Vibes" />

<meta name="twitter:image" content="https://...." />

CMS-Erweiterungen und Tokens


Glücklicherweise gibt es für alle gängigen CMS Erweiterungen, die das Einfügen von Meta Tags erheblich erleichtern. Anstatt für jede Seite der Website manuell die HTML-Tags einzufügen, kann man das direkt im CMS machen. Wichtiger noch, gibt es die Möglichkeit, sogenannte Tokens zu verwenden. Dabei schreibt man z. B. beim CMS Drupal das Token [node:title] in das Feld für das Open Graph Meta Tag og:title. Macht man das für einen bestimmten Inhaltstypen, z. B. Blog-Artikel, dann wird automatisch für jeden Artikel der im CMS hinterlegte Titel auch in das entsprechende Open Graph Feld geschrieben. Somit kann man sehr schnell seine Meta Tags automatisieren. Ein manuelles Einfügen ist dann nicht mehr notwendig.

Etwas kniffliger ist das bei Bildern. Da muss man aufpassen, dass die im CMS hinterlegten Bilder auch im passenden Format für die jeweiligen Social Media Plattformen vorliegen. Ist das nicht der Fall, enthält die Link-Vorschau kein Bild. Unter Umständen passt auch das Bild-Format, das man auf der Website verwendet, nicht mit jenem der Social Media Plattfom zusammen. Dann muss die Website das Bild in zwei Formaten bereitstellen.

Die benötigten Spezifikationen für die Bilder holt man sich am besten direkt von den Dev-/Info-Seiten der jeweiligen Social Media Plattform.

Tools zum Testen der Vorschau


Speziell beim Aufbau der Meta Tags mit Tokens, kann es nützlich sein, die Ergebnisse zu testen:

Möglicherweise gibt es noch weitere Tools für andere Plattformen. Falls jemand etwas weiß, bin ich für jeden Hinweis (Kommentar) dankbar!

Fazit


Will man, dass geteilte Inhalte von der eigenen Website auf Social Media Plattformen mit ansprechenden Link-Vorschauen dargstellt werden, muss man also nur die entsprechenden Meta Tags einpflegen. Mit den meisten CMS ist das ein Einmal-Aufwand, der sich absolut lohnt. Link-Vorschauen mit Bildern oder Videos sehen einfach professioneller aus. Bei Twitter sind die Meta Tags sogar Pflicht, da ohne diese keine bebilderte Link-Vorschau möglich ist.



Links: