Facebook Sharing - Featured Image not Showing

Hello everyone, I tried to find an answer for my issue, but have been unsuccessful.

Whenever I try to share my articles on Facebook, the featured image doesn’t show up, and I can’t figure out how to fix this.

Thank you in advance!
Regards,
Nick

Are you sure you have image as OpenGraph meta tag?
Is it loading over HTTPS or HTTP?
Is your domain added to Cloudflare?

Kindly, could you please re-check and make sure you have the following meta tags at your webpage:

    <html dir="ltr" lang="en" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
    <head>
         ...
    <meta charset="utf-8">
    <title>Your Webpage title here</title>
    ...
    <meta property="og:title" content='YOUR_WEBPAGE_TITLE'>
    <meta property="og:site_name" content='WEBSITE_NAME'>
    <meta property="og:url" content="YOUR_WEBPAGE_URL">
    <meta property="og:description" content='YOUR_WEBPAGE_DESCRIPTION'>
    <meta property="og:image" content="YOUR_WEBPAGE_IMAGE_URL">
    <meta property="og:image:secure_url" content="YOUR_WEBPAGE_IMAGE_URL">
    <meta property="og:image:type" content="image/jpeg"> <!-- recommend type -->
    <meta property="og:image:alt" content='YOUR_WEBPAGE_DESC_OR_ALT_OF_IMAGE'>
    <meta property="og:image:width" content="1200"> <!-- recommend size -->
    <meta property="og:image:height" content="675"> <!-- recommend size -->
    <meta property="og:type" content="website">
    <meta property="og:locale" content="en_US">
    </head>
         ...

Due to the fact if some of already shared links (being cached or an older version of your website or link to a webpage), re-check and add the upper OpenGraph tags.

Upon changes, try to run “Debug” and then “Fetch new” at the Facebook Debug Tool here (you need to be logged-in):

Thanks for your help! When I use the debugger, I get this message:

Image Unavailable

Provided og:image, https://yourcoffeeandtea.com/wp-content/uploads/2021/02/Coffee-Cherry-Plant.jpg could not be downloaded. This can happen due to several different reasons such as your server using unsupported content-encoding. The crawler accepts deflate and gzip content encodings.

Ye, I got it too - but it is just a warning, not an error. Facebook downloads the image and when sharing a link, it shows up:

Maybe you are using some security rules which are blocking the Facebook bot/Scraper accessing your image to show up and load?

Maybe Hotlink Protection is enabled for your domain at Cloudflare?
Or you are blocking it unintentionally via Firewall Rules?

Or it needs or takes some time to process it completly.

Or some cache?

Or maybe the server is not responding quickly enough?

I’m not sure about the other reasons, but I have hotlink protection disabled.

I believe I can offer you a solution.

The URL to the image:
https://yourcoffeeandtea.com/wp-content/uploads/2021/02/Coffee-Cherry-Plant.jpg

Checked three times and saw this:

It has to be related due to the size of the image (data) - which is approx. 9.5MB!
That one is really a lot, and takes time to either download to a normal user :slight_smile:

Kindly, can you optimize it?

There is an Cloudflare Polish and Cloudflare Mirage option which I recommend (to have no more worries about your images, users and even loading speed), which can help you a lot regarding the image optimization and image delivery to the end user (visitor), like your jpg image compression/convert to webp format which is either better for mobile visitors to your Website :slight_smile:

If interested, check here (requires paid plan - at least Cloudflare Pro Plan):

WordPress also has some plugins for image optimization and compression (if needed), or use some online tools like TinyPNG or use PC tool like IrfanView.

When I downloaded your original image (9.5MB), I saved it as “progressive JPG” with 80% quality and got a new one which weights 75KB.

That could be a reason why Facebook throws that warning issue due to “grab and download it” first.

And, I believe this issue itself is not as much related to neither Cloudflare nor Facebook :wink:

1 Like

Thank you so much for your recommendations! I will try these solutions out :slight_smile:

1 Like

Reducing the image size worked. Thank you so much :slight_smile:

1 Like

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.