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 1
This is part 1 of our mini-series on how to get Facebook to display the correct preview image when you share your website on Facebook.
If you want to skip through the explanation and get straight to the details on how to force Facebook to show the correct preview image then head over to How Do I Force Facebook To Use A Thumbnail From My Website? – Part II.
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.
When you share a page on Facebook you usually have the option to choose from a list of thumbnails to display in the post. Sometimes one or more of these thumbnails are perfect for your post, other times they can be completely random.
Often they can be banners from the sidebar, user gravatars, background images or just generally make no sense to your post.
Here is an example from when we were developing our website. As you can see Facebook has used the wrong thumbnail and it makes no sense to our users on Facebook.
While you can choose which thumbnail you want Facebook to display by clicking the “Choose a thumbnail” option, you have absolutely no control over other users when they share you page. And to make matters even worse, when a reader likes your article, which is what we want people to do, engagement and all that. There will be no option to choose the thumbnail and your post will be placed on that user’s Facebook profile with a random and quite possibly irrelevant image.
Wouldn’t it be nice if you could specify which image you wanted Facebook to use?
How do I force Facebook to show the thumbnail I want?
If you’ve pasted your website URL into a Facebook page and the wrong thumbnail or worse, no thumbnail appears…
Don’t panic.
For new sites that are yet to be scraped or cached by Facebook and for testing, there is a handy tool you can use to force Facebook to update its cache with your website thumbnail. Called the Facebook Linter or more properly the Debugger tool.
Entering your website URL into the tool and pressing Debug will not only force Facebook to re-cache your site but also display what meta information, including thumbnails it has detected.
Here is a screenshot of our site.
These aren’t the thumbnails you’re looking for
As you can see, those are not the thumbnails we want displayed in our Facebook posts. They are just images Facebook has picked from our front page.
Ok I can hear you ask. So far so good but all you’ve told us is how to show the thumbnails that we don’t want Facebook to display.
Well don’t worry, we are just getting to the fun part. Read on to see how you can force Facebook to display the correct URL when you share your web site in part 2 of our guide
I finally figured out how to do it in-line. Just make your thumbnail the first frame of your video and that’s what shows up when you upload to FB. Just make sure that it’s only one frame if you don’t want it to stick out when it’s played.
Hello, still having a problem when sharing a post from my website with the facebook mobile application. It works correctly when sharing using the mobile chrome but not with the installed facebook app. Any help please or did someone go through the same problem?
Still having problems with this :(
Hey, can you send us a link to your site via the contact form so we can look at your code?
Anytime I try to share to Facebook it is giving me a blank thumbnail with 970*400 in it.
Hi jessica, can you send me the url you are trying to share to the chat request box int he bottom right hand corner and I will take a look for you.
Thank you for this!
Still having problems with this personally… I have specified the og:image in my page header, and when using the Facebook debugger, it shows the CORRECT image. But when you preview it in the share dialog it’s completely different, then if you post that and check it on your facebook timeline, its yet ANOTHER completely different image.
Facebook debugger lies.
I found this link useful if you want to display specific image when sharing on facebook:
http://benchmarkjunkie.blogspot.com/2015/04/how-to-display-specific-image-on.html
I also use the Genesis framework. As you know, Genesis uses a template file named front-page.php. So you don’t have to go into the WP admin area and choose a static page for your homepage. So what I’d like is to be able to do is choose an og:image for the HOME PAGE ONLY. I don’t want to designate a specific image for the entire site because if someone is sharing a blog post, I’d like the featured image of the post be shared. Not the the og:image.
I have searched and searched, and have found nothing yet to help. Someone suggested adding something to functions file that uses an “if statement” if ( is_front_page() ) but it doesn’t work. i think because that statement is only for a static front page chosen in the WP Admin area. Any ideas?? Thanks.
It’s so awesome when you find a blog post that answers your specific challenge in such a clear way! Thanks so much for this!
Any idea if this has changed? I’ve implemented it on a shopify site and while it finds a nice image for the homepage (not the one i’ve set in the code), on any other site page it pulls in the first image it can see in the code which happens to be a US flag icon to switch to our US website on mobiles and tables. Any help gratefully received!
Hi Laura,
Thanks for getting in touch.
I’ve just tested your site with the page: “Freediver Long Sleeve Hooded Shirt” and it displayed your Social-profile-Prawno.jpg as the thumbnail in Facebook. See this screenshot: http://screencast.com/t/FrefauaDTa
So for me it’s picking up the correct og:image. Strange how it’s not working at your end…
Genius Thank you!, Greetings from argentina.
So Helpful! Thank you! You save me a lot time.
Glad we could help.