Many sites such as Facebook, Reddit, and others look for the og:image meta tag when deciding what image to share instead of a random image form the site. Here's how you can implement the OG meta tag and use an image of your choice.
First of all let's look at the technical aspects of the image:
Recommended Pixel Size
The best size to make your image is 1200 x 1200 or larger with a square aspect ratio. This is due to the different aspect ratios Facebook, Reddit, and other sharing sites use. View the infographic for a visual guide.
The OG Meta Tag
First, make sure you have the og:image meta tag on your site. This is what it should look like in the HTML source:
<meta property="og:image" content="http://www.mydomain.com/image.jpg">
The URL needs to be a complete URL, including the "http" part. You can use any standard image format, such as jpg or png.
Other specifictions:
Here is more information on why you should use a 1200 x 1200 (or larger) square image.
Facebook recommends 1200 x 630 pixels for the og:image dimension, which is an approximate aspect ratio of 1.91:1. This gives your shared post a full-size image above the post text. According to Facebook, you can go as low as 600 x 315 and still receive a full-size image. If you go too small (about 400 in width or less), your post will only receive a small square thumbnail on the left side. Also, if your image has a tall aspect ratio, Facebook may display a tall aspect ratio thumbnail on the left side (not square).
A note on cropping: If you have a large image that is not in the 1.91:1 aspect ratio, Facebook may center and crop it to fit. If you have a small image that is not square, Facebook may crop it or shrink it to fit the small thumbnail size.
Reddit uses a 70 x 70 square image for its thumbnail. Images of all sizes are resized down to this. Images that are wider than square will be shrunk down further to fit the width, while images that are taller will be cropped. Having a wide image is not good as it reduces the overall size of the thumbnail space that your image utilizes. Due to this, going with the Facebook recommendation of 1200 x 630 is bad for Reddit sharing.
To work well on both Facebook and Reddit, be sure to make your og:image 1200 x 1200 (or larger) that looks good both square and cropped. Facebook will crop the top and bottom, while Reddit will keep it square. This gives you the largest thumbnail image on both sharing platforms.
If you do want to have the smaller square image thumbnail on Facebook, just make sure your og:image is smaller than 400x400 and square in aspect ratio.
Comments