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
How to Increase the Views of YouTube Videos in Organic Ways
Social Media 04-06-2017 Hits: 187
Facebook Ad Retargeting: How Does Facebook Get The Whereabouts of Our Visited Websites?
Social Media 21-05-2017 Hits: 299
Increase Twitter Engagement: 11 Easy How-Tos
Social Media 11-05-2017 Hits: 363
How to Use WordPress Custom Logo API: With Code Example
WordPress 07-05-2017 Hits: 588
10 Important WordPress Plugins and Tools for SEO to Rank Your WordPress Website Even Better
WordPress 20-04-2017 Hits: 780
Move WordPress Site from Localhost to Live Server: Step-by-step Tutorial with Screenshots
WordPress 17-04-2017 Hits: 682
What type of title would increase the number of visitors in your website?
SEO 11-04-2017 Hits: 554
Most Read Tutorials
How to combine all .vcf files to single .vcf file manually to merge into Gmail Contacts
Webmaster 23-05-2015 Hits: 56311
Get component, module and plugin parameters in Joomla 3
Joomla 3.0 24-07-2014 Hits: 30457
Troubleshooting Joomla 3.0 Database Connection Errors
Joomla 3.0 17-03-2013 Hits: 17808
How do you detect a website visitor's country?
Webmaster 30-05-2013 Hits: 17440
How to setup SMTP in Joomla 2.5 to send emails
Joomla 2.5 23-07-2012 Hits: 16033
Fixing JFolder::create: Path not in open_basedir paths
Joomla 3.0 22-02-2014 Hits: 15510
Open a Port in Firewall in Windows 7 OS
Windows 18-07-2012 Hits: 14424
How to fix 'Creating default object from empty value' PHP warning in Joomla
Joomla 3.0 23-10-2013 Hits: 14064
Using Popover on Hover with Twitter Bootstrap in Joomla 3
Joomla 3.0 06-07-2013 Hits: 13993
How to add Google Analytics code in Joomla! 2.5 template
Joomla 2.5 14-07-2012 Hits: 13832
Store user state variables in Joomla 2.5/3.0
Joomla 3.0 24-03-2013 Hits: 13496
NetBeans auto completion does not show class methods when using Singleton design pattern
Joomla 3.0 24-02-2014 Hits: 8782