Login/Register
Facebook says an open graph image has an invalid content type and ignores it
Asked Answered
imagehttp-headersfacebook-opengraphmime-types
G

4

6

I’m trying to figure out why Facebook is ignoring an opengraph image. Their Sharing Debugger says it ignores the image because it has an invalid content type .

This happens for all images served for a blog (uploaded images) but not for static images, here are one exemple of each:

Initially the image was a png image, I tried encoding it in jpeg but it changes nothing

I’ve also tried the same link on different open graph tools and most of them are working as I hoped:

only LinkedIn give me the same result:

https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fwww.coworkees.com%2Fblog%2F14867

It says it considered other values but does not explain why it ignored the og:image one

any idea what could cause this or how could I debug that ?

Galaxy answered 10/8, 2020 at 16:10 Comment(9)
Check out the URL for your OG image on the page as your URL isn't valid. The URL includes the html entity for the ampersands while the URL on your page for the same image in the page body has the same URL without the ampersand entities (just a plan ampersand) and that URL works. – Stewardson
I tried without encoding the url and it gives me the same results. FB even added back the ampersands in the echo tool – Galaxy
One other thought is while the image URL says the image is a PNG, Firefox's Page Info thinks the image is a JPEG. Your server is also saying it’s a JPEG image as the content type in the response header is image/jpeg. You could try opening the image in Photoshop (or whatever you're using) and resaving it as a PNG and upload it again to your server. – Stewardson
it’s definitly a jpeg at the moment (the ?fm=jpg parameter transforms it), I actually added this to try something. it was a png at the beginning (and with the correct header). I don’t think the extension in the url should have anything to do with it but I'll try to switch back to a png – Galaxy
As an FYI – I uploaded a copy of your page to my website as a test, and while Facebook was happy with the OG image coming from my site, I got the same error when I tried to pull the OG image from your site. I ran some other block posts from your site through Facebook and got the same error – invalid content type, although the older posts did show a valid Facebook scan before I did the rescan. – Stewardson
thx for taking the time to do that @RichDeBourke, if this is not too much to ask, do you mind sharing what the headers look like for the image when served from your site ? – Galaxy
– it’s not a problem to share the headers. I pasted the information into a Google Doc at docs.google.com/document/d/…. It seems like your page is now working with the Sharing Debugger. Even the other blog posts that weren’t working yesterday are now working. Do you know what changed? I’m curious. – Stewardson
a coworker hardcoded a link that served directly by nginx and does not goes through the image processing controller. my current guess is that the cache-control headers are spooking facebook. I’ll experiment more next week as I can’t today and I’ll keep you posted. huge thx for the research you’ve done ! @RichDeBourke – Galaxy
I know it's an old question, but I had the problem on 2 new websites this week. I finally figured it out. It was the robots.txt file that was preventing it. Then problem, if you change it, you won't see a difference because Facebook will take 48h before rechecking the robots.txt. No less. This is why when we change it, we dismiss that it's the probem. I don't know how to specifically tell robots.ttx how to let Facebook go through, but for my current test, I used User-agent: * Allow: / and after 48 hours, it's now working. – Ewaewald
T
3

Add og:image:type meta tag.

<meta data-n-head="ssr" data-hid="og:image:type" property="og:image:type" content="image/png">

My images were returning the correct image-type header, but facebook only accepted the image after adding this meta tag. I found no reference within facebook (or anywhere else) that stated this is what's needed.

There answered 20/10, 2022 at 23:36 Comment(1)
It seems the facebook is requiring 'png' instead of 'image/png'. The OG spec and facebook – There
P
1

In my case, the problem laid in image name - it contained polish characters.

This one didn't work: s3-url/tytu%C5%82owe.png (original name was 'tytułowe.png').
And this one, did: s3-url/tytulowe.png

Even though both of them were displayed without any problems on my website and both were accessible via URL.

Peplum answered 26/3 at 5:36 Comment(1)
I have the same issue, my image name was In Hebrew , changing image name to English resolved the issue with of:image not detected – Scherzo
R
0

Add the missing meta for images like so:

<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

Learn more from the official documentation: https://ogp.me/#structured.

Radial answered 27/8, 2023 at 15:18 Comment(0)
B
0

To solve this issue, check if either the Host or the CDN you're using has enabled the Hotlink Protection, and DISABLE it.

Borborygmus answered 4/9 at 10:46 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.