Is Facebook choosing the wrong image for your Facebook shares? This can be a frustrating problem to track down, because there are many factors involved in choosing the shared image, and there are also multiple layers of caching involved.
Let’s start with a little background. Facebook will first look for an Open Graph meta tag explicitly declaring which image to share with your post. You can set these Open Graph images on a per post basis if you use a plugin such as Yoast SEO, Jetpack, or Social Warfare Pro. If you are using these plugins, and don’t specifically choose an image, the plugins will choose an image from your post. If there is no suitable image referenced in the post, these plugins will use the image you specified as the site default (in the plugin settings page). If you do not specify an image with Open Graph meta tags (or there is something wrong with the image you specified), Facebook will pick an image from the page.
Want to know exactly what your Open Graph image meta tags say? Look at your post’s HTML source code, and search for “og:image”. The Open Graph image meta declaration will look something like this:
If you edit a post after it’s already been shared on Facebook, and change the Open Graph image, that opens up a whole nother can of caching and scraping woes. More on fixing these later.
If you think you’ve done everything right, but the wrong image is still being chosen, here’s a checklist on how to debug the problem.Facebook choosing wrong image for shares? 7 steps to fix #WordPress #Facebook sharing problems.Click To Tweet
1) If you are using a caching plugin (I like WPRocket, but other popular ones include WP Super Cache and W3 Total Cache), be sure to clear your site’s cache after you’ve made any changes to your Open Graph data, and before the following debugging steps.
2) Use the Facebook Sharing Debugger at https://developers.facebook.com/tools/debug/sharing/.
Enter your URL, and you will learn the following: the last time your URL was scraped (read by Facebook), the Open Graph image, the Open Graph description. You will also see a preview of what your share will look like.
3) If the information the Facebook Debugger is displaying is out-of-date or incorrect click “Scrape Again” which tells Facebook to go to your site and fetch the latest version of your post. After a scraping, you should see updated information.
4) If “Scrape Again” doesn’t work … just click “Scrape Again” a few more times. As odd as this sounds, sometimes it just doesn’t work the first time. I have NO IDEA WHY!
5) When the Debugger shows the correct image the next step is to actually test a Facebook share from you site. Return to your website’s post, and click on the Facebook share button. In order not to annoy my Facebook friends while I am testing, I set the privacy for my test share to “Only Me.” Before actually posting to Facebook, you will see a popup preview, and have opportunity to write a personal note about the link you are sharing. Be sure to actually post this share to Facebook (with privacy set to “Only Me”).
6) Now, open Facebook in a browser, and look at your profile and the link you just shared. Do you see the correct (updated) image and description that you saw in the Debugger? Yes? Congratulations you’ve fixed your Open Graph problem!
7) Is Facebook still posting an old image even though the Debugger showed the updated correct one? Don’t panic yet. This happens sometimes when you are sharing a post that has already been shared with previous image or description. Facebook has powerful caching, and only gives us limited control to refresh its cache. But here’s my last tip. Mouse over the down arrow on the upper right-hand corner of your Facebook post. Scroll down and click on “Refresh share attachment.”
Next you’ll see a confirmation screen with a (hopefully) refreshed image. If you see the correct image click “Save.” If you do not, use “Cancel” and retry by clicking on “Refresh share attachment” again. Sometimes these multiple attempts are what it takes to get Facebook to clear their cache. When you do see the correct image and description, click “Save.”
Ta dah! You did it!
Was this tutorial helpful? Would you like to see this demonstrated in a video? Let me know in the comments below.
As a bonus for making it all the way to the end, here’s a link for debugging and validating your Twitter cards (which is what Twitter calls their Open Graph implementation): https://cards-dev.twitter.com/validator.