Facebook Post Screenshot

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"/>Code language: HTML, XML (xml)

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.

Source: http://developers.facebook.com/docs/opengraph/creating-object-types/#properties

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.

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.

The Author

Comments

  1. Alex Maureira

    Thomas thank you for the article , I have a question thou , Is there any way that Facebook take the “featured” Image of a post instead of the post Image. I explain myself : my theme create automatically the thumbnails based on featured image . So every time that I publish something , I don´t need to do “insert into post” movement , I just upload an image in the “featured image ” section. Problem with this , every time facebook publish my article choose any other image but not the one related with the post !_ Is there anyway to fix it? _ Thank you again!

    1. Thomas Maier Article Author

      Hi Alex, what you are describing as “featured image” should be the standard way of WordPress dealing with the main post images. Have a look at my other article and the comments to find an idea on how to fix it. It might be outdated, but if you need a coder, I am here for you 🙂

  2. Madison

    My website isn’t made on wordpress platform, but i have the same problem… When i share an article on facebook page, it shares the article with no image, or the image is selected wrong. I tried to add “meta property og:image” in my page header, but it didn’t work. Maybe i am doing it wrong.

    1. James Borillo

      Same here. I have a non-WordPress site and unfortunately, adding the meta tag doesn’t help. It still picking random images.

      1. Thomas Maier Article Author

        Hi Teddy, sorry, but I don’t know the insights of Weebly. It seems to be a hosted website solution and these normally have many limitations regarding your own code. They should have a support though.
        Thomas

  3. Teddy Love

    Hello.

    I read your article and it is very informative but I’m still having a bit of trouble. My business partner and I have absolutely no experience with programming, so we are trying to trek through this foreign information lol. We are using Weebly. Ideally, we would like to set our logo as the image facebook pulls when someone shares the website and when a blog post is shared, we would like the image inside the post to be the thumbnail Facebook uses. Do you have any suggestions? Thanks a bunch!

  4. Mehran Gull

    Nice post to set feature image properly. When sometimes we share post to facebook we face problem that feature image not show or the feature we select for that post is not showing although another image is showing instead of that image or sometimes the feature image not show properly. I was facing these issues from previous several days and was worried about this at last i found a solution on this page http://pktrend.com/facebook-fix-missing-wrong-thumbnail-resolved/

    1. Thomas Maier Article Author

      Thank you for the link. Unfortunately, this is not the solution, but the start of the problem.

    1. Arve Omic

      I have the same problem. Facebook keeps showing the first image that once was related to the page. You can change the settings as much as you like, but Facebook sticks with the first image. I guess it is true what they say about making a first impression. 🙁

  5. Arve Omic

    I encountered the following problem several times. Once Facebook has shared the wrong image you can change the settings as much as you like; Facebook will stick to the first image that was assigned to the sharing. Changing links does not effect this. Does this sound familiar? Is there any way to fix this?

  6. torneiras

    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.

  7. Adriana Refaeli

    Used FB Debugger. FB absolutely refuses to recognize the og:image from the meta information. I’ve been troubleshooting this for about 6 hours. I’ve tried editing code in the function.php and header.php with no luck, I’ve tried various plugins as well. Nothing works. When I use the FB Debugger, I get no errors, it sees all of the meta properties correctly, and builds the post with all of the parts EXCEPT the thumbnail image. Don’t know what else to do.