33

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"/>
CBroe
  • 91,630
  • 14
  • 92
  • 150
user3044609
  • 331
  • 1
  • 3
  • 3
  • since my answer seems to help a lot of people, I would be glad if you could accept my answer which will also mark this question as resolved, thanks! :) – Kleskowy Mar 05 '20 at 10:02

9 Answers9

73

When pulling a webpage from an URL, Facebook caches its 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 its side.

Try visiting Facebook Debugger page and reviewing 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.

General Grievance
  • 4,555
  • 31
  • 31
  • 45
Kleskowy
  • 2,648
  • 1
  • 16
  • 19
3

I have read that secure URL's need to have additional code in the call.

og:image:secure_url - An alternate url to use if the webpage requires HTTPS.

Derek Mkc
  • 41
  • 1
  • 3
3

For what its worth, my problem was that I had "hotlink protection" on my cpanel, which was preventing FB to fetch the image and share it elsewhere. I unchecked it, and now it's showing the image.

Jose Montoro
  • 31
  • 1
2

I noticed your image is a secure link. I had the same issue, but I changed it to http (insecure) and did 1 or 2 refreshes in the Facebook Debugger tool and it worked!

Bunch of og:image https stuff in this Q/A: FB OpenGraph og:image not pulling images (possibly https?)

Community
  • 1
  • 1
Mike T
  • 1,286
  • 11
  • 13
2

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

goodfellamilos
  • 31
  • 2
2

You should use the link debug of facebook for detect issues
https://developers.facebook.com/tools/debug/sharing/
You only need input your link that you want to check issues.
If your link that facebook has cached it then you press on button [Scape again] to reload your link.
If have any issues with your link then facebook will warning for you.

Quy Le
  • 2,354
  • 25
  • 18
1

I just wanted to come out here and chime in on every Facebook OG:Image not displaying topic I can find. Agh!!! I can't believe how much time I wasted last night and today on this. It was maddening! I followed every rabbit trail, and Facebook continued to ignore my og:image property (I even removed the url redirect for ssl in my web.config and re-coded the site so that I could have an unsecure and a secure version of the image). Everything looked right to me, but it kept ignoring the property.

Then...

I went here:

https://developers.facebook.com/tools/explorer/?method=POST&path=%3Fscrape%3Dtrue%26id%3Dhttps%3A%2F%2Fwww.google.com&version=v5.0

This is the tool you want to use, not this one:

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwww.google.com

The explorer gives you detailed error messages that the sharing debug tool does not, in my case specifically:

I had spaces in my image filename that weren't url encoded. Have a space in your filename and it will browse, but it will be rejected by Facebook for the property on the sharing debugger page (not sure why they call it a debugger, the explorer is the real debugger). (If I can save even just one person from this, then my misery was worth it).

Oh ya... the link for the explorer is at the very bottom of the "debugger" page (titled Scrape Via API).

Frog Pr1nce
  • 730
  • 9
  • 8
0

I just had to wait about 5 minutes for refresh.

wieczorek1990
  • 7,403
  • 1
  • 25
  • 19
0

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">
Alex Levine
  • 1,489
  • 15
  • 16