My Blog Guest

HOW TO: Force Facebook to Grab the Best Image from Your Page (WordPress)

thumbnail facebook HOW TO: Force Facebook to Grab the Best Image from Your Page (Wordpress)When you “share” a page on Facebook, you will – in most cases – have the range of various image thumbnails to choose from. More often than not, these thumbnails will be random, to say at least: banners from the sidebar, commenter’s Gravatar photos, etc. Obviously, you can always choose the best image, but will your readers do the same?

What is more, when a reader “likes” your article (which most users are more likely to do as that’s just so much easier), there will be no option to choose the thumbnail and your post will be placed on that user’s Facebook stream with an absolutely random and (in most cases) irrelevant image.

How much more interest could you great article result in if it *always* had a great and relevant thumbnail to go with the update?

Unlike Google Plus (which is much smarter at marking up the page and grabbing the most relevant information from the page), Facebook should be clearly “pointed” to what should make it to the update. Like it or not, it benefits you (in the first place) if you spend an effort to explain your page in a language Facebook understands.

For the lucky WordPress bloggers, there are a few plugins that will help you point Facebook to the best image to go in your Facebook “likers'” updates:

First Things First: Clear Facebook Cache!

If you try experimenting with different images as a thumbnail, you will instantly face a problem: Facebook page caching. Facebook would cache your page as soon as you (or anyone else) like it and will show you the same thumbnail each time (no matter which image you have in the meta tag).

Use this tool that clears Facebook cache of the page and creates a new one.

You can also use that tool to preview how Facebook “sees” your page before you even try to “like” it:

thumbnail facebook 04 HOW TO: Force Facebook to Grab the Best Image from Your Page (Wordpress)

1. Custom Image SRC: the Simplest Option

Custom Image SRC is a handy plugin that lets you specify the image you want to be in the page preview on Facebook when anyone “likes” your post. The plugin works on the “Edit post” level:

thumbnail facebook 03 HOW TO: Force Facebook to Grab the Best Image from Your Page (Wordpress)

Basically, the plugin adds the following code in the individual page <head> section:

<link rel=”image_src” href=”preview-image-here.jpg” />

With this code in the header, the random preview image is overridden by the image that you specify.

Let’s see if it works!

Here’s what the page we are “liking” on Facebook looks like:

thumbnail facebook 05 HOW TO: Force Facebook to Grab the Best Image from Your Page (Wordpress)

Before activating the plugin:

(Absolutely random image from the sidebar is grabbed as the page thumbnail after someone likes your page)

thumbnail facebook 01 HOW TO: Force Facebook to Grab the Best Image from Your Page (Wordpress)

After:

(The image *you* want is grabbed as the page preview):

thumbnail facebook 02 HOW TO: Force Facebook to Grab the Best Image from Your Page (Wordpress)

2. Facebook: Open Graph Plugin

There’s another way to control your page Facebook “snippets”: WP Facebook Open Graph protocol which adds Facebook Meta information to your blog pages (the plugin requires your a Facebook User ID or App ID for it to work).

When it comes to generating the image preview, the plugin will:

  • Try to use the page “featured” image;
  • If you don’t have a “featured” image, it will pull the first image in the post/page content;
  • If there are no images in the post, it will default to using the image you put into the plugin settings in the admin panel.

Besides, controlling the post thumbnails on Facebook, the plugin will also handle the proper title / description within the snippet on Facebook user’s wall:

Here’s the info the plugin has added to my post:

thumbnail facebook 06 HOW TO: Force Facebook to Grab the Best Image from Your Page (Wordpress)

3. Also:

  • It’s rather a speculation (but one I myself have seen evidence of), but Facebook seems to prefer .JPG images
  • In order for the plugins above to work properly, make sure your image is self-hosted
  • The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. Facebook will make it square if you don’t.

cc licensed ( BY SD ) flickr photo shared by joannapoe

The following two tabs change content below.
 HOW TO: Force Facebook to Grab the Best Image from Your Page (Wordpress)
I am the owner of this blog and founder of MyBlogGuest.com
  1. 22 Responses to “HOW TO: Force Facebook to Grab the Best Image from Your Page (WordPress)”

  2. I sure wish I had found this last year Ann. I had a heck of a time with the images not pulling them from my blog.

    I have a paid plug-in installed that is telling Facebook which image I want pulled and for some reason, today it’s not working at all. It won’t pull the image for nothing. So frustrating too because when people share my post I want the image to appear.

    I’m going to share this post because I know other people who are having this same issue.

    Thank you for sharing this, great post and I’m bookmarking this one because I KNOW I’ll run into this issue again in the future.

    ~Adrienne

    By Adrienne on Jan 12, 2012

  3. This is great. I have never taken the time to look for this solution. Thanks so much for writing this Ann and thanks to Adrienne Smith for sharing it on Facebook.

    By Sherryl Perry on Jan 12, 2012

  4. I don’t believe i didn’t had search for this query. Never thought off! You did a fantastic job, seriously!

    By Irfan on Jan 12, 2012

  5. Great piece of information (as usual) Ann.

    When one posts a link via their Facebook wall you do get to choose which image to display with the link. This would make it way easier!

    By S Emerson on Jan 12, 2012

  6. Brilliant. This issue has been haunting me for a while. Every so often Facebook refuses to grab any image, but I read a hint that seems to work well: add the short code as your link when you post to Facebook. But that doesn’t solve the issue of random images appearing when you Like a page.

    I’m off to try out these plugins. Thanks so much!

    By Carolyn on Jan 13, 2012

  7. @Adrienne, thanks for the comment! Sometimes Facebook is really weird no matter what we do. I noticed it getting stubborn and refusing to use any images for some of my shares. No idea why!

    @Sherryl, I am happy it could turn useful!

    @S Emerson, yes, but how many readers would care to do that! Most of them are likelier to click “LIKE”

    @Carolyn, gotta try your tip as well. THANKS!

    By Ann Smarty on Jan 13, 2012

  8. This is good information to have. I can’t tell you how many times I’ve liked an article or link, just to have it show up next to an image of a random ad.

    By Matt Brennan on Jan 16, 2012

  9. Every so often Facebook refuses to grab any image, but I read a hint that seems to work well.

    By KEY on Jan 17, 2012

  10. The best plugin I’ve found for this is get_the_image(), combined with hard-coding the opengraph meta. The only issue is that this limits you to the first image in the post, but I think the lack of cognitive dissonance is key when clicking from one site to another. This also lets you use any location for your image and doesn’t require the image to be “Attached” to the post.

    What’s great too is that G+ respects opengraph meta, so no need to mark up your code multiple times.

    I worry about using so many plugins though for speed issues… why bleed speed when you can hardcode into the theme?

    By Douglas Thomas on Jan 19, 2012

  11. Great post …thank you for sharing. I agree with Sherryl that most probably have not taken the time to pursue such a thorough solution. Thank you for compiling and posting the info!

    By Maryland Wes on Jan 19, 2012

  12. @Douglas, thanks for sharing the plugin!

    Yes, Google Plus is much more flexible and smarter than Facebook. They would identify the best image without any markup.

    And yes, good point on installing multiple plugins as well as overloading your pages with markup code!

    By Ann Smarty on Jan 20, 2012

  13. Thanks for the Custom Image_Src plugin suggestion, Ann. That’s exactly what I was looking for :)

    By Mike Davis on Jan 22, 2012

  14. Good Share.I hope more people discover your blog because you really know what you’re talking about. Can’t wait to read more from you!

    By Daniel Milstein on Jan 23, 2012

  15. Thank you, thank you! The first one wasn’t useful for me because it only seems to work for Likes, but the second one, Open Graph Plugin, worked like a charm and forced the featured thumbnail on the user. Hurray.

    And clearing Facebook cache… gosh I wish I had known about that one a year ago.

    By Leora Wenger on Feb 1, 2012

  16. Great post and thanks for sharing about this excellent WP plugin.

    By Kruno on Mar 3, 2012

  17. Thanks Ann for the post. Facebook can be very stubborn when it comes to pulling the right images. This sorted it out for me.
    Thanks again

    By Steve Egan on Oct 13, 2013

  18. THANK YOU!!!!! This had me going crazy. I used the Custom Image SRC plugin and it works like a charm!

    By Susan Davis on Jan 8, 2014

  19. Very nicely explained about Facebook post share with image selection option and wordpress plugins for it. Very helpful post and Thank you for sharing.

    By Zahid Bin Abdur Rouf on Apr 10, 2014

  20. Thanks! I’ve been searching for this information for weeks! Now my website thumbnail looks great!

    By SB on Aug 5, 2014

  21. Sadly…. this didn’t work me. :( FB is still grabbing the wrong images. Blah!!

    By Bill on Oct 23, 2014

  22. It it happening for the old articles or new ones? Maybe try to debug?

    By Ann Smarty on Oct 24, 2014

  1. 1 Trackback(s)

  2. Jan 27, 2014: This Website is Under Construction… | Cristina Moldovan

Post a Comment