OgImage Issue on Gatsby Starter blog: Invalid Image Content Type

I’ve set up ogimages in my gatsby starter blog using this tutorial, but it seems that I’m getting an “Invalid Image Content Type” error when running it through the Facebook debugger. Ogimages also don’t work for when I test it on the facebook debugger or the twitter card validator.

The error from the Facebook Debugger: “Provided og:image URL, https://gatsby-starter-blog-demo.netlify.app/static/default_image-a17dc085323d5dad33b525a9c2872d24.png could not be processed as an image because it has an invalid content type.”

I checked this with multiple ogimages and they all have the same error, which leads me to assume it might have something to do with how netlify is showing the images.

netlify site name: hassansblog
github repo: https://github.com/Nutlope/my-blog

I would really appreciate any help, I’ve spent several hours over a couple days on this with no results.

It’s not a Netlify issue. If you try to visit the link, you can see that the page returns a 404. The image simply does not exist. There must be something wrong in the way the OG tag URL is getting generated.

However, if you’re going to have a same OG image throughout the entire website, it would be easier to just add the image to your static folder and add it manually to your <head>.

1 Like

Thank you for the response. I want to try having a different OGimage for each page, then if no OG image is specified it should use a generic one.

I will look more into the tag URL then, appreciate the help.

There’s a plugin that seems to make it easier: gatsby-plugin-og-images | Gatsby

1 Like

I looked into it but couldn’t figure out how to use it. It’s a community plugin and not very popular, so I couldn’t find any examples either (Gatsby beginner here). Thanks though.

This is kind of frustrating, I might just add it manually to head like you said and use the same ogimage for all pages.

You could also try asking in the Gatsby community - there is probably someone there who knows since there are many experts and authors of such plugins there.

https://spectrum.chat/gatsby-js?tab=posts

Not trying to brush you off but since the expertise isn’t here (our staff doesn’t have any specific knowledge about or ability to fix that plugin), just trying to help you find some authoritative solution.

I completely understand, it doesn’t appear to be a netlify issue like you said. I’m going to mark hrishikesh’s answer as the solution and go off to gatsby to figure the issue out. Thanks.