Facebook open graph image not displaying

Question

I have run my site through the debugger and the correct og:image pulls up, but when I click the share button on my site I get a different image. If I click the share button on my ipad I get the wrong image plus a second image which is the correct image. Tested in chrome and IE9 and neither give me the correct image. This was working up until a few days ago.

website is www.bodhitee.com

Here are my OG tags

<meta property="og:title" content="20% of each sale helps fight reckless fracking and mining."/>
<meta property="og:description" content="www.bodhitee.com: Cool Baby and Kids Clothes for a Cause"/>
<meta property="og:image" content="https://www.bodhitee.com/product_images/uploaded_images/bodhitee-fb-earthworks-nofrack.jpg"/>

Answer 1

I believe I fixed this by using the following line. It doesn't make logical sense to me as my og:image tag was perfect and facebook saw it.

<meta itemprop="image" content="https://blahblahurl.png">

Answer 2

When pulling a webpage from an URL, Facebook caches it's content for later. It means, that if Facebook once pulls data from your site, and than your site changes (for example your og:image tags change), Facebook will not change the image, because it already has everything cached on it's side.

Try visiting Facebook Debugger page and review what Facebook "sees". Using this tool forces Facebook to refresh data from the given URL. This is the best way to debug it.

When you make sure Facebook "sees" proper og:image tags, then make sure the images in the og:image are of proper minimum width/height (it's all explained in the fb debugger). Facebook will not use an image from og:image if it does not meet FB's criteria.

I strongly recommend this tool whenever there are any issues with content from your site on FB.

Answer 3

You need to use og:image:width and og:image:height Open Graph tags in order to render image immediately, as described here: Facebook Content Sharing Best Practices