Aktuell

Open Graph Image - ideale Abmessungen und Vorteile

Facebook-Nutzer kennen sie, die Vorschaubilder geteilter Inhalte im eigenen News Feed. Manchmal sind sie kleiner, manchmal größer. Warum eigentlich? Und wie steuert man als Website-Betreiber oder beim Newsletter-Versand, welches Bild angezeigt wird?

Open Graph Image - ideale Abmessungen und Vorteile

In der Regel bestehen Online-Inhalte heutzutage aus Texten, vielen Bildern und gegebenenfalls weiteren Multimedia-Inhalten. Das geht natürlich auch an Facebook nicht spurlos vorbei. Und so verwundert es nicht, wenn das soziale Netzwerk großformatige Bilder zu Webseiten präsentiert, die von Nutzern geteilt werden. Da hat man sich wohl auch ein Stück weit vom aufgekauften Instagram anregen lassen. Hinzu kommt die unaufhaltsame Entwicklung hochauflösender Displays, die etwas "zu fressen" haben möchten.

Bildinhalte werden von Nutzern viel schneller erfasst als Texte, sie transportieren mehr Emotionen und sie provozieren oftmals eine bessere Interaktion. Das sind Dinge, die sich Autoren und Herausgeber von Nachrichten-Websites, Blogs oder Newslettern wünschen. Will man jedenfalls meinen. Und man sollte auch glauben, dass diese sich darum bemühen, optimale Bilder zu wählen und auf ihren Seiten zu hinterlegen. Weit gefehlt! Selbst in Webagenturen herrscht manchmal Unkenntnis über die Bedeutung und den richtigen Umgang mit diesem mächtigen Werkzeug. Daher möchten wir kurz ein paar nützliche Handreichungen dazu geben.

Metadaten mit dem Open Graph

Die Relevanz von Metadaten kennen viele Suchmaschinenoptimierer. Über kurze, für den Durchschnittsbetrachter unsichtbare, Angaben im Quellcode einer Webseite werden Zusatzinformationen transportiert, die Roboter von Suchmaschinen wie Google oder Bing auslesen und verarbeiten. So wird beispielsweise die sogenannte Meta Description dazu verwendet, einen Vorschautext im Suchergebnis erscheinen zu lassen.

Etwas ähnliches gibt es für den Bereich Social Media. Facebook hat hierzu federführend den Open Graph konzipiert, der jüngst offenbar Custom Stories betitelt wird. Und das funktioniert folgendermaßen: Über bestimmte Befehle im HTML-Code kennzeichnet man Dokumente, so dass die Crawler sozialer Netzwerke ergänzende Daten abgreifen können. Die Kennzeichnung bezieht sich beispielsweise auf Personen, Orte, Musik, Bücher, Zeiten oder eben Bilder. Das Ganze ist ein ziemlich mächtiges und komplexes Instrument, das man wahrscheinlich nicht immer in allen Tonlagen spielen können wird. Wir interessieren uns für die Bilder.

Vorschaubilder festlegen

Aber mit dem Open Graph lässt sich etwas sehr entscheidendes auslösen: nämlich das Vorschaubild für einen Link im News Feed von Facebook-Nutzern. Mit der Angabe eines og:image teilt man dem Crawler mit, welches Foto oder welche Grafik man am liebsten angezeigt wissen möchte, falls jemand einen Post inklusive Verweis auf die eigene Website veröffentlicht. Das entsprechende Element platziert man dazu im Kopf einer HTML-Seite, dem head. Und zwar ziemlich genau so:

<meta property="og:image" content="http://domain.tld/image.jpg">

Das ist soweit nicht grundsätzlich neu. Es wird aber durchaus nicht immer praktiziert. Ganz schön doof. Vor allem, wenn der Blogartikel sowieso ein schönes Aufmacherfoto enthält. Facebook holt sich zwar auch automatisch geeignete Motive von der Seite, wenn die Angabe des og:image fehlt. Aber mit etwas Pech sind es eben die falschen. Deshalb sollte man das Open Graph Image lieber selbst kontrollieren.

Ideale Abmessungen für og:image

Damit aber nicht genug. Wenn man nämlich - wie oben gezeigt - ein Bild unter einer konkreten Adresse (URL) bereistellen möchte, fragt man sich unweigerlich, was es denn für eines sein soll. Also nicht nur, was es zeigen sollte, sondern schlicht und ergreifend, wie groß es denn sein muss. Hierauf gibt es eigentlich eine glasklare Antwort, die man offensichtlich gebetsmühlenartig wiederholen muss, weil es immer wieder nicht beherzigt wird. Und zwar: möglichst groß!

Wie jetzt, fragen sich da wahrscheinlich viele. So einfach ist das? Und darauf muss man leider mit "fast" antworten. Denn natürlich gibt es noch einige weitere Rahmenbedingungen, die zu Idealmaßen verhelfen. Facebook hat nämlich das Ansinnen gehabt, ein Seitenverhältnis von 1,91 zu 1 als optimal festzulegen. Und darüber hinaus maßt man sich in Menlo Park an, eine Mindestanforderung von 600 x 315 Pixel zu verlangen. Andernfalls wird das Bild im News Feed nicht dargestellt.

Facebook-Beitrag mit kleinem Vorschaubild

Es geht aber noch weiter. Denn hält man sich an diese Werte, erscheinen die Motive am Ende doch oft klein und quadratisch zugeschnitten links neben Seitentitel und Kurzbeschreibung. Das geht auch besser. Facebook gibt nämlich zusätzlich die Empfehlung, das Open Graph Image mit 1200 x 630 Pixeln anzulegen oder sogar noch darüber hinaus zu gehen. Wundert einen auch nicht, wenn man liest, über welche monströsen Bildschirmauflösungen mobile Endgeräte einiger bekannter Markenhersteller inzwischen verfügen. Insofern empfiehlt es sich als Best Practice, das dann auch wirklich zu tun, und eher 2400 x 1260 Pixel anzupeilen. Man darf dabei nur nicht übers Ziel hinausschießen und eine Datei produzieren, die mehr als 5 Megabyte schwer ist.

Das war's. Fertig. Einfach mal so machen.

Facebook-Beitrag mit großem Vorschaubild

Ist da noch mehr?

Ach so, allen, die jetzt ihre sicherlich berechtigte und fundierte Skepsis gegenüber Facebook zum Ausdruck bringen wollen, oder die sich gerade ultimative Argumente für die Nutzung anderer Netzwerke zurechtlegen, sei gesagt: Der Open Graph ist zwar vorrangig für Facebook-Aktivitäten gemacht worden, beschränkt sich aber nicht darauf. So setzen unter anderem Twitter Cards oder Pinterest Rich Pins auf diesem Quasi-Standard auf.

Und auch das hierzulande wahrscheinlich eher unbekannte reddit verwendet Angaben zum og:image, um Vorschaubilder für News-Meldungen zu präsentieren. Allerdings gibt es dabei eine abweichende Besonderheit, die dazu führt, dass englischsprachige Artikel zu diesem Thema, das Anlegen quadratischer Bilder für den Open Graph propagieren. Denn reddit skaliert die Motive derzeit auf 70 x 70 Pixel herunter. Wenn man dort also eine große Meute gieriger Leserscharen für die eigene Website vermutet, dann kann man vom Seitenverhältnis 1,91:1 Abstand nehmen. Facebook schneidet nämlich bei quadratischen Bildern kurzerhand oben und unten etwas weg, und dann passt alles wieder.

Und noch ein letzter Tipp für alle, die ihre eigenen Seiten bei Facebook posten und bewerben möchten. Bei der Auswahl und Bearbeitung von Bildinhalten für den Open Graph macht es oft Sinn, auf Texte zu verzichten, die das eigentliche Motiv überlagern oder ergänzen sollen. Warum? Bei der Schaltung von Werbeanzeigen (Facebook Ads) gibt es eine 20 % Regel. Mehr Textanteil darf ein Anzeigenbild nicht enthalten, andernfalls wird es abgelehnt. Testen kann man das übrigens mit dieser praktischen Rasterfunktion.

Kommentieren

Die E-Mail-Adresse wird nicht angezeigt, Angabe der Website ist optional.






zurück zur Übersicht

Newsletter Freeware

Jetzt ins E-Mail-Marketing starten und Software für bis zu 200 Abonnenten nutzen. Einfach und kostenlos mit der sitepackage:// Newsletter Freeware.

Jetzt starten
Newsletter

E-Mail Marketing Know-how kostenlos und frei Haus.



Hotline

Sie haben Fragen zum sitepackage:// Newsletter System? Rufen Sie uns an!

Wir beraten Sie gern unter
+49 (0)431 97997220

Feature Sheet

Erhalten Sie einen vollständigen Überblick über alle Funktionen des sitepackage:// Newsletter-Systems. Holen Sie sich einfach das Feature Sheet als PDF-Download!

Herunterladen
Über den Autor

Lars Müller

Lars Müller

Geschäftsführer
wigital GmbH