How do I force Facebook to use a thumbnail from my website?

A guide to getting Facebook to show the correct image when sharing your website – Part 2

This is Part II of our mini-series on getting Facebook to show the correct image preview when you post a link to your website in Facebook.

If you haven’t already read Part I of How to Force Facebook To Use A Thumbnail From My Website head there first.

If you are looking for our post on what size and dimensions of images to use in your Facebook preview read our Facebook Link Thumbnail Image Dimensions blog post

Facebook Open Graph

In April of 2010, Facebook launched it’s “Open Graph” API. What this does is let you connect your site to Facebook. It’s a new set of programming tools that let’s you get information in and out of facebook.

And one of the Open Graph tools we are interested in is.


So what is og:image?

Simply put, it’s part of a meta tag which goes in the head section of your website between the and tags and it tells Facebook that you are specifying the image for it to use when posting a link to your website.

Here is an example from our website:

<meta property=”og:image” content=”” />

Ogimage example from web design in Scottish Borders

As long as you place the new og:image tag anywhere between the opening and closing tags you will be ok. Then just save your file and upload it to your server and test with the Facebook Debugger tool.

If the og:image tag isn’t present, Facebook will fall back to using the old method of image_src but be warned this is depreciated and support for it could be removed so it’s best to use the Open Graph og: tag.

If neither are present, Facebook will look at the content of your page and choose images from your page that meet its share image criteria: Image must be at least 50px by 50px, have a maximum aspect ratio of 3:1, and in PNG, JPEG or GIF format.

I specified the appropriate image meta tags. Why isn’t Facebook seeing my new thumbnail?

Once the og:image tag has been added, Facebook’s crawler will access your page and cache the meta information. You will need to force Facebook to clear their cache by using the Facebook Url Debugger / Linter Tool we linked to earlier in the article.

Don’t forget that the images must be publicly visible on your server so don’t link to images hidden outside of your root directory or password protected.

Click here to add your own text

Adding the og:image tag using the Yoast SEO plugin

If you are using WordPress and the Yoast SEO plugin then adding the og:image is very easy as Yoast has the feature built in. Scroll down to the Yoast settings section and click on the sharing icon and then just upload the image to your media library and Yoast will do the rest.

Sharing your wesbite to Facebook - preview image

Adding the og:image tag in the Genesis Framework

If you use the Genesis Framework for WordPress, adding this meta tag isn’t quite as simple as opening up a txt file and adding the required line.

What you need to do is open up your child themes functions.php file and add the following lines of code:

/** Add og:image meta tag so Facebook displays the thumbnail we want in Facebook posts */
add_action( 'genesis_meta', 'add_og_meta_tag' );
function add_og_meta_tag() {
echo "\n";

So, after all that hard work. What does our new thumbnail look like in Facebook?

Guide to the best image dimensions for sharing a website to Facebook

What image size should I use as my preview image?

To get the most out of your Facebook preview image you need to ensure it is the right size. We’ve written a guide titled Facebook Link Thumbnail Image Dimensions on what image resolution to use and it’s well worth a read as it’s not always as obvious as it should be, but then Facebook never is.

Going beyond og:image and the Facebook Open Graph Protocol

Have we wet your appetite? Are you now wondering what other open Graph tags you could add to your site? Well you are in luck! There are a whole stack of useful tags but this article is long enough so we are just going to link to an excellent post titled Optimising the Facebook Open Graph Protocol on the Yoast SEO blog.

Please leave a comment…


Did you find this post useful? Did it help resolve your issue or maybe it didn’t. Do you have any questions about it? Could we add more information to the post or is there a website you think we should link to?

Please consider leaving a comment so we can improve our post. We do read every comment and it not only helps us but other visitors as well, it’s also great to know that people are reading our content. If you did find the post useful, please also consider sharing it as it really helps us.

Many thanks.

5 replies
  1. Bill
    Bill says:

    “As long as you place the new og:image tag anywhere between the opening and closing tags you will be ok.”

    This is incorrect. If the image in your og:image tag is not suitable due to image size or image filesize, Facebook will again fall back to grabbing the first image it finds on the page. What I need is a way to specify a fallback image if the og:image one fails, or at least mark an image somehow so that it’s NOT used. Right now it’s grabbing my white site logo, which FB puts over a white background, and thus just looks like a big empty white square.

  2. una neary
    una neary says:

    Cant find it. Only offers to upload a Twitter image. SEO Yoast dont have Facebook option, it seems, anymore.
    Can anyone explain how to do it manually (ie where to find the php files).
    Fed up of plugins that change all the time.

  3. Oliver Gehrmann
    Oliver Gehrmann says:

    Thank you guys, this was really helpful. I just ended up with a page that looked kinda bad when shared on facebook and after following your little guide, it’s now showing up correctly. 🙂


Leave a Reply to Oliver Gehrmann Cancel reply

Your email address will not be published. Required fields are marked *