Search code examples
facebookfacebook-opengraphshare-open-graph

Facebook's debugger shows a preview image, yet on Facebook it doesn't pull in that same preview image?


Facebook will randomly take posts I have shared on a company page and make the preview image blank/white. It is maddening.

Here's what I do to replicate:

  • Copy URL that I want to share
  • Go to Facebook's debug and check URL to confirm a preview image shows
  • Go to Facebook and share the URL in a post
  • Preview image is blank/white

Example URL: https://hoist.digital/content/blog/know-the-value-of-phone-calls-and-grow-your-business-with-call-tracking

Open graph code in on that URL

    <meta property="og:image" content="https://hoist.digital/images/3/1/d/5/1/31d518d87ae71ad5bb2acc907b3ad304b99971e1-graphicstock-beautiful-young-mother-with-her-newbornsoeul9rzz.jpg" />
    <meta property="og:image:secure" content="https://hoist.digital/images/3/1/d/5/1/31d518d87ae71ad5bb2acc907b3ad304b99971e1-graphicstock-beautiful-young-mother-with-her-newbornsoeul9rzz.jpg" />

Video of me replicating this: https://hoist.digital/facebookattempt.webm

If the open graph code is there, it's secure, what else could be causing Facebook to occasionally flake out and make some of the preview images white/blank? Here's a strange kicker too... sometimes I can edit/refresh the preview image within Facebook, and the preview image will show again... but in a few days it goes back to white/blank.


Solution

  • Unfortunately, it is well-known problem on Facebook that has not been fixed for years and there is no canonical answer to your question.

    The main problem is URIs using HTTP works just fine and URIs using HTTPS do not. So first of all, you should try to change your og:image:secure property to og:image:secure_url, because due to documentation there is no og:image:secure property.

    If it does not help, you can explore this thread and you gonna try different options unless, of course, you have tried it yet.

    Please pay attention to such methods:

    • Try to add og:image:url (yes, it is similar to og:image but sometimes it can help).
    • Try to remove og:image:secure_url property (yes, it is looking strange, but it is Facebook, and it also might work).
    • Try to add other og properties such as og:image:type, og:image:width, og:image:height