Social Media Tags Guide Part 2 – Preparing a perfect image for the og:image tag

From a technical point of view, it is not necessary to have og:image tags on the page. On the other hand, from a practical point of view, the difference in the appearance and thus the impact of social media links with photos in comparison to those that do not have them is so great, that if we care about the perception of our portal, having an og:image becomes a necessity.

Does each page of a website has to have a separate image?

No. In an ideal situation, we should have one “og:image” image dedicated to the presentation of our portal on all the pages and subpages which relate to the site as a whole.

For example, page types like:
https://dsblog.com (main page)
https://dsblog.com/contact (contact page)
https://dsblog.com/rules (rules page)

Since they relate to parts of the whole website, should have one main image:
< meta property="og:image" content="https://dsblog.com/ds-social-media-image.jpg" / >

Meanwhile pages with content mostly unrelated to the website as a whole, such as:
https://dsblog.com/authors/dslopecki (profile of the author)
https://dsblog.com/articles/seo-foundations (SEO article)

should use “og:image” images related to the content of the page itself, so taking the above examples we should provide:

• For the author’s profile page, an image of the author
  <meta property="og:image" content="https://dsblog.com/authors/dominikslopecki.png" />
• For the SEO article, an image relating to SEO topic
  <meta property="og:image" content="https://dsblog.com/articles/seo-foundations.png" />

etc.

In cases we cannot provide a dedicated image, we should use the main site photo as a fallback:

<meta property="og:image" content="https://dsblog.com/ds-social-media-image.jpg" />

In this way, the pages of our portal will never be guilty of looking below par.

How do social media sites prepare images?

When the crawler visits a page, the following things happen:

1. The photo is taken from the content of the site (First, from the tag “og:image/ twitter:image” then if it’s not found it’s being looked up heuristically)
2. The photos quality and size is processed and compressed
3. The photo is prepared in versions of different sizes (for various places it may appear on)
   
   Interesting fact: as you can see in the image above, Messenger despite the fact that the picture that user is seeing is MUCH smaller, the photo used in the preview is of much larger dimensions. This seems to be a poor decision from FB, but there you have it.  ¯\_(ツ)_/¯)
4. The photo, along with its name, is “saved” by the social medium (cached) – from now, for a period of one week (or so), FB will not consider updating the photo to a new one if it were changed.

What kind of image should be used for social media?

First the cold hard facts: ideal image parameters (as per specifications)

Facebook

• Image size no greater than 8 MB
• Proportions should be 1.91:1 (1200×630)
• The same image in Messenger should have proportions of 1:1 (e.g. 1200×1200)
• Recommended resolution is at least 1200×630
• The optimal resolution that should be used is 600×315; below these values, the photo will be visible, but it will not be displayed properly in the business card generated
• The minimum resolution with which an image will actually appear is 200×200 (below that the image won’t be treated by crawler as an image to use for the card)
• The photo is centred (if the photo ratio is not 1.91:1, the photo will be cut from the centre)
• Supported file formats are JPG, PNG and GIF (in the case of GIF only the first frame of the animation will be visible as a photo)

An interesting fact is that the proportions differ for Messenger and FB itself, and so we are faced with the task of preparing an image that looks right in both of these.

Twitter

• Image size cannot exceed 5 MB
• Proportions should be 1:1 (e.g. 1200×1200)
• Maximum usable resolution is 4096×4096
• The minimum resolution with which an image will actually appear is 144×144
• The photo is centred (if the photo ratio is not 1:1, the photo will be cut from the centre)
• Supported file formats are JPG, PNG, WEBP and GIF (in the case of GIF only the first frame of the animation will be visible as a photo)

Image template

Other social media sites use mostly either facebook’s approach or twitter’s approach, so there’s no need to analyze anything else

Thanks to the information above, we can find a happy medium:

• The image size cannot exceed 5 MB
• Optimal resolution is 1200×630
• The main content of the image, which will be visible on all social media, should be in the centre
• The main content should take up 630×630 of the centre of the image
• On the left and right of the image (285px on each side) the image should use a kind of background/secondary content, to fill content on the FB wall
• When the picture has transparent elements, we should use .png format (very high quality and transparency)
• When the picture does not have transparent elements, we can use .jpg format (high quality and very good size compression)

And so, we can create a template which will tell us how to place the content of our image:

Download the template by clicking here

or here

And here’s what that template looks like on FB and Twitter:

Warning: Changing an image

Due to the fact that images are cached, two conditions must be met in order to change them:

1. The name of the image must be changed (there needs to be another URL path directing to the image on the page). Otherwise, the crawler will think that it is constantly downloading the same image and will not update it.
2. Debugging pages should be used for updating. Otherwise, the social media portal will wait a certain time before it updates the image itself (equal to one week from the last data update).

Summary

Thanks to such a template, we can focus on engaging social media users to become more interested in our brand, rather than wasting time calculating pixels or creating separate photos for individual social networks.

Good luck!

Read also: How many online users visit your stationary points of sale?