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.
og:image
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:
https://digitalessence.net/wp-content/uploads/2013/09/facebook_thumbnail_final.png” />
As long as you place the new og:image tag anywhere between the opening and closing tags you will be ok and your image is a suitable file type and image size (Facebook recommends 1200 x 630 pixels). 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.
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:
[php]
/** 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";
}
[/php]
So, after all that hard work. What does our new thumbnail look like in 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…
Hi,
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.
I am not at all clear about 1. How to replace the og:image, and 2. Where to find the og:image of the thumbnail I would like to use. I am not a web designer at all, just a DYI music guy.
I am using leadpages. I see something about wordpress within leadpages under the “publishing options” tab, but don’t even know what WP is. When I go there I find nothing about og:image.
Hi there – I have a major issue! My thumbnail works perfectly on desktop but on mobile, it is pulling up the wrong website. I receive the error: “Circular Redirect – We could not resolve the canonical URL because the redirect path contained a cycle.”
However, I checked with the hosting website, and there is no redirect at all. I’m not sure why this is happening. I followed all of these steps. Can you please advise?
“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.
Thanks Bill, we’ve edited the post to reflect this information.
Is it possible to provide another website as the og image tag?
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.
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. :)
Glad we could help. Facebook don’t make it easy eh.