As many publishers, we engage users to share the content of our web platforms with their friends and colleagues on Facebook. We not only rely on manual action but also decided to automatically publish the most recent posts on our Facebook fan page. In both cases we noticed, that often the wrong image is being used as a thumbnail in Facebook and so the result is visually less appealing. In this post I am going to share some insights on how we deal with this problem.
The issue: random images
Having a look at the timeline of our fan page for word-grabber.com we noticed that especially for the automatic posts the image being used was sometimes matching the posts featured image and was sometimes another, at first glance random, image from the post content. An example is the article image from above, where we planned on using a game icon, but Facebook choose a not so beautiful screenshot from the content.
How Facebook chooses images
The reason for Facebook’s behaviour is everything else than random. Understanding it gives you plenty of choices to deal with the problem.
When you publish a link on Facebook, it is scanning the sites header for an Open Graph tags with information for the posts image. The Open Graph for this posts image looks almost like this:
<meta property="og:image" content="https://webgilde.com/en/wp-content/uploads/2013/10/wrong-facebook-image.png"/>
Facebook itself states the following about the images you should link in your Open Graph data:
The URL of an image which is used in stories published about this object. We suggest that you give us an image of at least 600×315 pixels. However, bigger is better, so if you have a 1200×630 or larger image that you can use, please give it to us. Also, we recommend that you keep images as close to a 1.91:1 aspect ratio as possible to avoid cropping.
Reading this made it clear to me, that the choice of the posts image on Facebook wasn’t random. Facebook simply took the first image from the Open Graph data that was at least 600 pixel wide. If it didn’t find a big enough image, it went back to the first Open Graph image tag, what was the featured image we specified for the WordPress post.
Our featured images where always smaller than 600 pixels. Just recently we switched the layout to enable featured images in the ratio that Facebook likes. This didn’t perfectly fit into our layout, but we didn’t want to create multiple image sizes and cuts when publishing. We also thought about one of the following strategies.
Your first step to increase your ad revenue
Subscribe to my monthly newsletter and get additional ad optimization tips to boost your ad revenue. It is free and you can opt out at any time.
Use different image for Facebook
If you are free on the method how to implement the open graph information on the posts image, you can simply choose another image or size of the current posts image. That is one of the strategies you should use, if your current featured image size or your layout in general can’t be changed.
Facebook image when using WordPress SEO by Yoast
We use the plugin WordPress SEO by Yoast on our clients and our own platforms. The plugin automatically includes all needed Open Graph tags. Unfortunately, there are no options to customize the output through the backend. Anyway, there are a lot of ways to manipulate the creation of the Open Graph image tags using few lines of code.
In a recent post I showed some examples and code snippets on how to manipulate the choice of the images and sizes for Open Graph data using WordPress SEO.
Displaying bigger images without breaking old layouts
As I mentioned, we finally decided to use an image size that fits Facebook image ratio of 1.91:1. But there are still older images either not big enough or not fitting this ratio that we didn’t want to renew manually. Since the new and the old sizes both needed some additional code, I had to build a switch to load the according layout. WordPress does offer the function wp_get_attachment_image_src() to load thumbnail image information. You can than just check the size and ratio and decide on how you want to display the image. If you are interested in the code I used, just leave me a comment below.