When publishing articles on our site, our team always cross-posts links to the same content on our Facebook fan page, where we have close to 250 thousand fans. One of the biggest frustrations we came across with Facebook, is when we post a link to an article that contains images, and Facebook refuses to show the image on top of the link. The strange thing is, sometimes deleting the URL and pasting it again will show images and other times, Facebook completely refuses to do it. And when the image does not show, no matter how many times you refresh the page or paste the link, it will never appear. Since a number of our readers have Facebook fan pages or personal pages where they paste links to their sites or portfolios, I thought it would be a good idea to share the way to force Facebook to show images in links.
Facebook Image Preview Problem
I don’t know the exact cause of this particular issue, but it seems like when one provides a link on a new message / post that contains images, Facebook’s back-end sometimes simply fails to grab images. Sometimes Facebook will grab completely irrelevant images like the small banner ones on the sidebar of the website. Take a look at the screenshot below that illustrates this issue:
For this particular example, I grabbed a random post from a while ago. As you can see, I provided the link in the post, but Facebook failed to grab the image that is associated with that particular post (see the area in red). If you come across such a problem, the very first thing you should try to do is refresh the page in your browser, then paste the link again. Sometimes it takes a second for Facebook to grab the image and when you try the second time, it might work. The problem is, sometimes Facebook will not fetch images no matter how many times you try to refresh the browser and paste the link. If this happens to you, try the solution below.
The Solution – Facebook Debugger
The good news is, Facebook engineers provided a great tool that can easily fix the thumbnail/image fetching problem – the Facebook Debugger. Simply go to https://developers.facebook.com/tools/debug and once the page opens up, paste the link that is not working into the input area, then click “Debug”, as shown below:
The next page will appear, showing the metadata information for the page, along with other relevant information that Facebook reads:
Scroll down until you get to the bottom of the page, where it shows what the link will look like when pasted:
As you can see, there are two areas that show the image attached to that particular post – og:image and “When shared, this is what will be included”. Although Facebook does a pretty decent job at fetching images from links, it will always try to locate a Facebook-specific tag called “og:image” first. If you do not know what this tag is and you run a WordPress blog, I would recommend to find a Facebook Open Graph plugin that automatically inserts Facebook metadata for you. Try a plugin like this one or look into some SEO plugins like WordPress SEO that come with the capability to add Open Graph metadata.
Facebook Image Preview Fixed!
Once you go through the above steps, you now should have a working link that will automatically display the image preview. Here is the same link that I pasted into the new post, which shows the image that was not there the first time:
My recommendation would be to put Facebook Debugger in your browser favorites / toolbar. If things don’t work every once in a while, fire up the debugger, copy-paste the link and do it again!
Hope this helps!