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!
You got it right as there was no other way to fix this.. I just want to add a bit more about it.
Facebook always checks the links from its cache first. If not found then it goes to link to fetch new content. There unfortunately Facebook wants quick response from the link you provide and wants good http response codes. It’s not specified officially but as per my experience it’s the DNS routing and time delays in response where Facebook fails to fetch full content from the URL…
Once requested, the response is cached into Facebook db. The 2nd request is always goes to cache and serves the content what it has in cache.
The Facebook debug tool is best in this case to force Facebook fetch always new content from the link. You still may need to try again here (but make sure you do not hit the button more quickly and wait for a few seconds or otherwise you will be detected as robot and the domain of the URL you try to fetch will be blocked temporarily) . Here again, Facebook stores the response in it’s cache for each time you hit “fetch new scrape information”. Once you see it properly fetched , just leave it. As it’s now cached and will be used at Facebook.com for sharing purposes.
PS: the response code from your link is 206 which shows Facebook is still receiving partial content from your website. Make sure the first limited bytes contain the open graph tags og: correctly in your link source
Khurram, thank you for giving a technical explanation of what happens behind the scenes – that’s very helpful! And thank you for the additional tips. In regards to partial content, I did see the 206 code before, but it seems like the partial code does not present a problem with fetching metadata still, so I did not look into fixing it completely. Do you suggest that I try to fix it completely? Is it worth the effort?
Nasim, facebook does that with most urls as it only requires top few bytes from the host URL. As long as it’s happy with the URL and fetches the content correctly, you don’t need to do anything about that…
Well, after checking a few it seems most links on your website work without any trouble so just forget about the 206 response code.
Hello, Khurram,
I believe I am experiencing the ban for scraping too excessively, which you mentioned here:
“(…) make sure you do not hit the button more quickly and wait for a few seconds or otherwise you will be detected as robot and the domain of the URL you try to fetch will be blocked temporarily”.
Even while testing two different FB accounts, no sharing images display and I get this error message:
“Error parsing input URL, no data was cached, or no data was scraped.”
Do you know when the ban will be lifted, or if there is a specific span of time that it lasts? I really didn’t know a scraping limit even existed, and it worked for several months before yesterday.
Best regards,
Erlend
Very informative article… I will work on it today. I enjoyed the post regarding your breakaway decision. I did it in 1992 and never looked back. I wish you only the best.
Thanks Nasim
But the problem of the image is often present also when saving pages on Pocket: no images at all, at it’s a real pity. Any idea how to solve this?
Hi Nasim,
my own workaround is a little simpler.
When posting the link, wait a few seconds if the animation indicating FB pulling the image comes up.
If not, type an extra space behind the link and wait a few seconds again.
If nothing comes up, simply reload the page, confirming you want to “leave” (with losing your unfinished post), and when the page has been rebuilt, paste the link again.
In 90% of the cases it already works now – if not, clear the browser cache (I have an addon for this in Firefix so I only need to click a button), and do it again. This then works in 99% of the cases.
Just my 2 cents.
Meant to say when PASTING the link.
thanks Nasim, most helpful!
I recently set up a Facebook photography page that is an extension of my personal Facebook. I notice that you have Photographer in your heading. I could not find that choice in the pull downs, so I selected Personal Website. How did you get Photographer on yours? It would be nice to have a tutorial on how to properly set up a business Facebook page. See mine below:
https://www.facebook.com/jaygosdinphoto
It is new so not too many pictures yet.
Hi, Nasim,
I apologize for the off-topic. If I knew your email address, I would ask the question personally.
I’ve purchased my Oly OMD-EM1 in May, and I am a perfectly happy with it so far. The only thing that looks unusual to me is how the pictures come out with the flash (FL50R). It is especially true with the bounced flash indoors.
I am not sure if I am doing something wrong, or it just the way it is supposed to be.
If I could send you one or two RAW files to take a look, it would be great.
Thank you,
Val
it’s not working on my, i get small image of differnt picture not related to the blog i want to post but the pic of information
on my blog page
It didn’t work, because I can’t do this action every time post published
This is a bug. Images should show first time. Of course, Facebook may get around to fixing it – one day. Bah!
I tried the DeBug page and my og:image came up with the correct photo, but it still had an unrelated one at the bottom, where it says “When shared…”
Thoughts?
The same thing works for Vimeo when you want to post a video on Facebook, and it shows a random thumbnail, and not the one selected by you. Debug does the fix. But, when you debug a video from vimeo, and the video still doesn’t see your chosen thumbnail (it’s shows the random one by vimeo) all you have to do is to select your favorite thumbnail for the video in 1080p preview mode (not 720p or the standard one). Cheers!
Facebook parser is very buggy, and sometimes no matter what you do, your photo will not appear. So I’ve opted to adding photos by hand to each post. Annoying yes but effective.
NONE OF THIS DEBUGGING WORKED FOR ME
HERE’S WHAT DID WORK….
SOLVED. JUST DELETE HTTP// FROM THE START OF THE LINK SO YOU JUST HAVE WWW. THE THUMBNAILS APPEAR AGAIN
OR WEIRDLY DELETE THE LAST DIGIT OF THE LINK AND TRY AGAIN.
Thanks, really helpful.
Another solution to try.
Post link, highlight it and then choose cut.
Refresh the page and then post the link again.
The picture then appears
Hello can you please send me an active template to apply to my blog as i can’t use mobile view due to poor arrangement
http://www.naijabeainies.blogspot.com