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="https://examplepage.com/assets/examplepicture.jpg" />
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
