Bilder ziehen in sozialen Medien in der Regel mehr Aufmerksamkeit auf sich als reiner Text. Um das zu unterstützen wird üblicherweise auf Facebook, Twitter und Co. zu jedem geteilten Link eine passende Vorschau generiert. Auf einer verlinkten Seite befinden sich in aller Regel aber mehr als ein Bild. Woher wissen die Betreiber von Facebook und Twitter jetzt also welches für die Vorschau verwendet werden soll? Und welche Größe müsste das Bild haben damit die Vorschau auch gut aussieht?

Meta Tags

Über so genannte HTML <meta> Tags kann ziemlich genau definiert werden was in der Vorschau genau angezeigt werden soll. Bei Twitter zum Beispiel könnten diese so aussehen:

<meta name="twitter:title" content="IcingaConf 2020">
<meta name="twitter:description" content="International Icinga Conference in Amsterdam">
<meta name="twitter:image" content="https://icingaconf.com/wp-content/uploads/2020/02/icingaconf-featured.png>
<meta name="twitter:card" content="summary_large_image">

Facebook geht einen anderen Weg und unterstütz den Open Graph Standard. In diesem ist genau definiert wie derartige Tags verwendet werden, so dass nicht jede Platform ihre eigenen erfinden muss.

<meta property="og:title" content="IcingaConf 2020">
<meta property="og:description" content="International Icinga Conference in Amsterdam">
<meta property="og:image" content="https://icingaconf.com/wp-content/uploads/2020/02/icingaconf-featured.png">
<meta property="og:url" content="https://icingaconf.com/">

Bildgröße

Wenigstens aber bei der Bildgröße sind sich Facebook und Twitter einig, beide können mit der gleichen Bildgröße gut umgehen.

Dabei gilt: Die korrekte Proportion ist 1.92:1. Das ist sehr nahe an 2:1, was einfacher wäre.

Zur Bildgröße sagt Facebook folgendes:

Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images. If your image is smaller than 600 x 315 px, it will still display in the link page post, but the size will be much smaller.

Für Twitter kann man sich diese Vorschau auch ansehen ohne etwas zu posten (nur eingeloggt möglich): Twitter Card validator

Facebook geht noch einen Schritt weiter und bietet ein ganzes Debugging Tool an: Facebook Sharing Debugger

Zusammengefasst

Natürlich kann man sich hier auch stark verausgaben. Es gibt unzählige Regeln wie groß und in welcher Proportion Bilder sein sollten um auf bestimmten Geräten bestmöglich dargestellt zu werden. Beachtet man aber die genannten Punkte, wird es zu einem grundsätzlich guten Ergebnis führen. Systeme wie WordPress unterstützen das auch über diverse Plugins.

Zum nachlesen weiterer Details empfehle ich folgende zwei Blogposts von Louise Myers:

Blerim Sheqa
Blerim Sheqa
Product Manager

Blerim ist seit 2013 bei NETWAYS und seitdem schon viel in der Firma rum gekommen. Neben dem Support und diversen internen Projekten hat er auch im Team Infrastruktur tatkräftig mitgewirkt. Hin und wieder lässt er sich auch den ein oder anderen Consulting Termin nicht entgehen. Inzwischen ist Blerim als Product Manager für Icinga tätig und kümmert sich dort auch um die Partner.