Importance, advantages and optimization

OG Image

Contact us!

Although Facebook introduced the Open Graph Protocol back in 2010, it is still a closed book for many website operators. OG tags are either not used at all, incorrectly or inefficiently. As a result, the opportunity to optimally present the content of one's own page on Facebook is lost.

What is an Open Graph Image?

The Open Graph protocol defines how shared content is displayed in social media. It includes metadata for crawlers, which can thus specifically find the relevant information on a web page and display it as a preview. If no OG tags are present, the respective crawlers from Facebook, Twitter, Pinterest & Co. select texts and images more or less at random. You can prevent this by setting Open Graph meta tags in the source code of your website. You select the image that matches the URL with the tag og:image: 

<meta property="og:image" content="" /> 

In CMS like WordPress, the og:image can be inserted even without HTML knowledge, for example via a user-friendly SEO plug-in.

If the og:image tag is missing, in the worst case not the article image but an advertising banner will appear on the social media platform. You should avoid this at all costs.

What are the advantages of an OG image?

A carefully chosen, meaningful and appealing Open Graph image has many advantages: 

  • It literally acts as an eye-catcher and draws users' attention to the content. 

  • As part of the "word and image" unit, it is the perfect complement to the "og:title" and "og:description" tags, which include headline and content description. 

  • The algorithms are more likely to play out the content to the relevant target audience. 

  • In addition to the actual content, other messages can be conveyed along the way, for example the brand via a discreet logo. 

  • An attractive image presentation improves the click rate.  

  • Users prefer to share the content - this can have a positive effect on off-page optimization.

OG Image size and format: what to consider?

In addition to the og:title and the og:description tag, the OG image in particular is important for the design of a perfect Facebook snippet. Here, there is often a lack of clarity regarding the correct formats and sizes. Images that are too small or even cut off lose their effect on Facebook or counteract it.  

To ensure that an image is shown to its best advantage in the Facebook preview, even on high-resolution devices, it should be at least 1,200 x 630 pixels in size and have a format of 1.91:1. The image size is limited to 8 MB. On other devices, 600 x 315 pixels is also sufficient: This image size can be used if no better resolution is available. Smaller images, for example in the size 200 x 200 pixels, are displayed almost unrecognizable in the link page article, so that they do not make sense.  

A minimal deviation from the 1.91:1 format is possible, but then parts of the image are cut off. To ensure that an OG image is visible when it is first shared or liked, the crawler should be told the exact dimensions via og:image:height and og:image:width.

The current Open Graph image sizes at a glance:  

  • For Facebook posts and timeline images: 1200 x 630 pixels, 600 x 315 pixels (minimum). 

  • For Twitter in-stream images: 1600 x 900 pixels (recommended), 600 x 335 pixels (minimum) 

  • For Instagram posts: 1080 x 566, 1080 x 1080, or 1080 x 1350 pixels  

  • For Pinterest story pins and fleets: 1080 x 1920 

  • For LinkedIn blog posts: 1200 x 627 pixels 

  • For YouTube banners: 2048 x 1152 pixels, for preview photos 1280 x 720 pixels 

  • For TikTok profile photos: 20 x 20 pixels (minimum), for videos 1080 x 1080 pixels

diva-e took care of the integration of a commerce system into the SAP landscape and developed a self-service portal for customers.
diva-e begleitet Weleda seit mehreren Jahren auf dem Weg der digitalen Transformation. Als großer Meilenstein der Digitaloffensive ging im Februar 2024 der Online-Shop in Deutschland live.
diva-e and dmTECH set new standards in software development and digital consulting.
Boards & More Group
mit Composable Commerce auf die Erfolgswelle
diva-e creates a unique B2B ordering experience through the online platform of the global glass market leader.
diva-e gets Vergölst's customer approach rolling by optimizing existing customer contact with Adobe Campaign.
diva-e mapped the entire digital value chain in the project with the Talanx Group for the relaunch of the corporate website and the new career portal.
diva-e develops a scalable and future-proof architecture and integrates it into the already existing backend systems.
Hertha BSC
diva-e developed a new state-of-the-art website with emotional design for Hertha BSC.
Klöckner & co
diva-e guides steel giant Klöckner through digitalisation and realises online shops with marketplace function.
FC Bayern Munich
Digital Champions League: The German championship record holder wows fans worldwide with tailor-made digital experiences.
Online marketplace for groceries: We are creating an adaptable platform for the retail giant EDEKA Nord
weleda logo
Gemüseabteilung in einem Supermarkt
Logo ALDI Süd
Kitesurfer auf dem Meer
Boards & More Group Logo
Logo von Talanx