I'm having the following problem while trying to share any post on a website. You can use this post as an example: https://maisalgarve.pt/2022/07/22/loule-1a-edicao-do-festival-de-jazz-bernardo-sassetti/
You can see that the og:image is correctly attributed to an image that is 1200x630 in .jpg format. We're using the WP Rocket CDN (not by my choice but let's see if we can keep it if it ain't the issue). This CDN is overwriting every image, CSS and Javascript file to their own domain https://h6s8w3t6.rocketcdn.me and if you try to serve an image through our domain we get a 404 probably because of the CDN that was setup.
The biggest issue here is the we simply can't share any post because no feature image is displayed, and if at the end of this I find that it's because of the CDN I'll have to have a talk with who thought if was a good idea to implement it.
Also we're using Imagify by WP Rocket, which is creating .webp versions of every image (again not my choice, I'm only called to fix the issues). I see some people complaining that they are being served that format and on my devices as you can see bellow it says it's being served .jpg. I know social networks don't read webp and as so the og:image and og:image:type could never be webp.
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image" content="https://h6s8w3t6.rocketcdn.me/wp-content/uploads/2022/07/Jazz-Bernardo-Sassetti-Loule-2.jpg">
<meta property="og:image:secure_url" content="https://h6s8w3t6.rocketcdn.me/wp-content/uploads/2022/07/Jazz-Bernardo-Sassetti-Loule-2.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Jazz-Bernardo-Sassetti-Loulé-2">
Now, despite all of this, you can see that even in the social media preview snippet editor that the feature image should display correctly: https://drive.google.com/file/d/1ugKogGc6YuzV9mo-W6Db0Pecte750CCA/view?usp=sharing
But whenever we try to share a post on any social media at all, the feature image never loads. It's just an empty blank space where the image should be displayed: https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fmaisalgarve.pt%2F2022%2F07%2F22%2Floule-1a-edicao-do-festival-de-jazz-bernardo-sassetti%2F
We've checked Facebook debugger and Twitter and on Facebook debbuger and we get the following message:
The URL of og:image provided, https://(...).jpg, could not be processed as an image because it has an invalid content type.
And if we look further in the Facebook debugger we see that it tries to replace the image with the logo header image:
og:url https://maisalgarve.pt/2022/07/22/loule-1a-edicao-do-festival-de-jazz-bernardo-sassetti/
og:type article
og:title Loulé | 1ª edição do Festival de Jazz 'Bernardo Sassetti' - Mais Algarve
og:locale
{
"locale": "pt_pt"
}
og:image https://maisalgarve.pt/wp-content/uploads/2022/02/Mais-Algarve-Logo-Header.png
What would be your suggestions of fixing this?
To solve this issue, check if either the Host or the CDN you're using has enabled the Hotlink Protection, and DISABLE it.