Fix to no image problem when sharing URL first time using Facebook Open Graph programmatically
Many of us may have faced this problem when sharing a news or article in Facebook. First time, when I share a news or an article on Facebook on my Facebook wall, only title and intro text appear for it, but, the image associate with news or article does not show up even the news or article has one or more images in it. On the second attempt of sharing it, the image appears and I share it on my wall. Why does the image does not show up?
As per guideline provided by Facebook on its article, Sharing Best Practices for Websites & Mobile Apps gives us some insight on the proper way to optimize your images you put in your news, articles, etc. for greater image previews.
Big Size Image
For high resolution devices, image should be at least 1200 x 630 pixels in dimension for the best display. Images should not be lesser than 600 x 315 pixels in size to display link pages posts with larger images. The size of the images can be up to 8MB.
Small Size Image
Images will look small if your use them sized at 600 x 315 pixels when you share those news on Facebook.
Facebook sharing mechanism resizes images keeping aspect ratio to keep images to appear the same across desktop and mobile News Feed. Try to keep your images as close to 1.91:1 aspect ratio as possible to display the full image in News Feed without any cropping.
Minimum Image Size
The minimum image size is 200 x 200 pixels. If you try to use an image smaller than this you will see an error in the Sharing Debugger https://developers.facebook.com/tools/debug.
As per "Best Practices - Sharing Best Practices for Websites & Mobile Apps" documentation of Facebook, it has prescribed two ways to cope with image pre-caching. I have quoted the whole section from that documentation below.
When content is shared for the first time, the Facebook crawler will scrape and cache the metadata from the URL shared. The crawler has to see an image at least once before it can be rendered. This means that the first person who shares a piece of content won't see a rendered image:
There are two ways to avoid this and have images render on the first Like or Share action:
1. Pre-cache the image with the Sharing Debugger
Run the URL through the URL debugger to pre-fetch metadata for the page. You should also do this if you update the image for a piece of content.
2. Use og:image:width and og:image:height Open Graph tags
Using these tags will specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.
Developers who want to follow the recommended guidelines of Facebook for sharing images with their news or articles, can find the following lines of code useful. First line specifies the location of the image, while second and third lines specify the width and height of the image respectively.
<meta property="og:image" content="http://example.com/image/apple.jpg" />
<meta property="og:image:width" content="640" />
<meta property="og:image:height" content="442" />
I hope that this article will help you resolve Facebook's glitch or whatever you may call it of not showing image/image thumbnail while someone tries to share any URL for his/her wall.
If you liked this article, then Like my Facebook page for more tutorials.
- Category: Social Media