I have a blog post here. When I share this on Facebook the preview image doesn't show.
I've tried re-scraping with the facebook developer tool It gives no errors and shows the correct og:image tag but does not update the preview image.
<meta property="og:image" content="http://gingerslist.com/blog/wp-content/uploads/2015/11/blossom-233838_1920.jpg" />
The current image is 1920 x 1276, which is well above the 200x200 requirement. It's 304KB, nowhere near the 8MB size limit. I've tried shrinking it with no luck.
I've tried setting is as the featured image and as the first image in the post. Nothing helps.
Patience didn't help in my case.
Once the images were posted without an image preview, they never came back. This caused a huge problem with a viral post missing an image...you can imagine.
Re-scraping in the facebook debugger tool is actually what Facebook recommends doing for solving this problem. (look into best practices documentation of facebook for open graph) Although, this will not bring back the preview image of older posts (At least for me. I have re-scraped posts months old, that are still without preview image).
Facebook proposes two solutions:
- First is to add Image Height and Width
- Second is to scrape the image in the developer.facebook debugger tool
The first solution doesn't seem to work anymore. It didn't work for me, and I keep seeing more and more people here writing about it. It's not working anymore.
The second solution is the only one working. But there's a catch. Doing this manually once may be OK, but if you want things to run smooth and have lots of posts going on Facebook daily, this is not a solution. Automation is required.
So in order to use the only solution that Facebook suggests, you can add an iframe in the footer of your page, that will do the scrapping for you at the time of posting, and this way it will always be with a picture preview and it's all automatic.
Just add the following into the footer.php file of your website.
<iframe style="width:0; height:0; margin:0; padding:0; border:0; position:absolute;" src="https://developers.facebook.com/tools/debug/sharing/?q=<?php the_permalink(); ?>"></iframe>
You might want to keep checking regularly in the future in case facebook changes the link to its debugger. You'll need to change it as well.
Also, the "the_permalink()" part is where you place your url that leads to your website's page that you are using. The code I've inserted in this link is doing this automatically for you.
You may have marked your answer as a solution, but bear in mind that it isn't and it might bite you on the a*s at the worst moment possible (think viral post...)
Cheers
Credit to user Dan for giving a clue on how to solve this.
Patience fixed this. It was probably a caching issue with the browser.
Thanks @brasofile for letting me know it was working.
