Design

og:image ordentlich groß für Facebook anlegen

vor 4 Jahren - 2 Minuten Lesezeit Hörzeit


Update am 09.06.2019 mit dem richtigen Format für 2019:
Bildseitenverhältnis: 1,91:1 oder 1:1
Wir empfehlen: 1800x1080px

Die kleinen Vorschaubilder die für Artikel, URLs und andere Sachen in Facebook angezeigt werden kennt man. Nun gibt es seit einiger Zeit ein größeres Format, was natürlich auch mehr Aufmerksamkeit beim Leser hervorruft:

og:image - Alt &Neu

Laut Facebook sollten die og:images (Open Graph Images) wie folgt angelegt werden:

Small og:image: All the images referenced by og:image should be at least 200px in both dimensions, with 1500×1500 preferred. (Maximum image size is 5MB.) Please check all the images with tag og:image in the given url and ensure that it meets the recommended specification.

og:image should be larger: Provided og:image is not big enough. Please use an image that’s at least 200×200 and preferably 1500×1500. (Maximum image size is 5MB.) Image … will be used instead.

Nun ist es aktuell aber so, dass selbst wenn man ein Bild in 1500×1500 Pixel anlegt, dieses als kleines Vorschaubild angezeigt wird. Wieso? Weil es quadratisch ist. So sieht man z.B. an dem og:image von The Verge, dass es a) viel zu klein und b) quadratisch ist. Bei The Next Web hingegen mit 2500×1505 ziemlich groß. Lösung? 4:3 oder 16:9.

Ein Beispiel

Für unser neues SEO-Tool, den Linkmotor, habe ich folgendes Bild erstellt:
Bild: https://linkmotor.de/images/linkmotor.jpg
Format: 1800×1200
Angezeigt wird es dann bei Facebook so:
ogimage in groß

og:image …bitte was?

Mithilfe des Open Graph Protocol kann man Inhalte bzw. Webseiten semantisch auszeichnen. Webseiten wie z.B. Facebook oder Google+ können diese dann (einfacher) auslesen und verwerten. Am Beispiel von Linkmotor und des og:image Meta-Elements sieht es z.B. so aus:

Facebook kann diese Infos dann auslesen und z.B. im Newsfeed anzeigen. Um Open Graph-Angaben zu testen, hat Facebook auch extra ein Tool zur Verfügung gestellt.

Viel Spaß beim Einbauen.

Alexander Kaiser Alexander Kaiser Alexander schreibt über Design, UX und UI, Conversion Optimierung und worauf er sonst noch Lust hat.
Auch spannend:

Die wichtigsten Web-, App- und Digital-Trends
für deine Kaffeepause.

Manuell zusammengefasst und kommentiert, jeden Morgen um 10 Uhr.

Mit der Anmeldung akzeptieren Sie die Datenschutzbestimmungen und abonnieren den Newsletter von Digital gefesselt. Die Abmeldung vom Newsletter ist jederzeit möglich.

Wie oft?