Why can't Gatsby / Facebook find my og:image

Question

I have a Gatsby app setup.

src/

---images/foo.jpg // <--- the img i want on my facebook shareable URL (og:image).

---images/ // <-- note, there are loads of PNG files i'm using that seem to trip/default onto the FB image/share.

---assets/ // <--- loads of SVGs i'm using that

---components/seo.js // component embedded at top of each page

---pages/index.js // page that uses <SEO />

Inside index.js:

function Home() {

    return (
        <React.Fragment>

            <SEO />

Inside SEO:

const SEO = ({ title, description, image, article }) => {

  const { pathname } = useLocation()
  const { site } = useStaticQuery(query)

  const {
    defaultTitle,
    titleTemplate,
    defaultDescription,
    siteUrl,
    defaultImage, // <-- defaultImage is destructured from GQL result
    twitterUsername,
  } = site.siteMetadata

 const seo = {
    title: title || defaultTitle,
    description: description || defaultDescription,
    image: `${siteUrl}${image || defaultImage}`, // <--placed into object with path to it
    url: `${siteUrl}${pathname}`,
  }

  return (
    <Helmet title={seo.title} titleTemplate={titleTemplate}>
     
      ...
      ...
      ...

      {seo.image && <meta property="og:image" content={seo.image} />}

      {seo.image && <meta property="og:image:type" content="image/jpeg" />}
      {seo.image && <meta property="og:image:alt" content="amazing cat" />}
       ...

    </Helmet>
   )

}

const query = graphql`
  query SEO {
    site {
      siteMetadata {
        defaultTitle: title
        titleTemplate
        defaultDescription: description
        siteUrl: url
        defaultImage: image // <-- default image 
        twitterUsername
      }
    }
  }
`

in my config:

module.exports = {
  siteMetadata: {
    title: `Title Fine`,
    description: `This is fine and coming through okay`,
    url: `https://my-url.com`,
    image: `/images/foo.jpeg`,
    titleTemplate: `This is also fine`
  },

Facebook debugger just keeps saying "https://my-url.com/images/foo.jpeg" could not be processed as an image because it has an invalid content type. But it is a JPEG. I'm citing it as a JPEG in my meta tags.

I've added in

{
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/`,
      },
    },

thinking maybe it just couldn't find the file, but nothing's changed.

If i do hit https://my-url.com/images/foo.jpeg - it doesnt load anything in the browser.

If i look in Dev Tools "sources" tab, i see /static/ folder and it's not in there. But the other files from /images/ are.

I'm puzzled!

Does anyone know what i'm doing wrong? Or is there a tutorial / blog for Gatsby setup, that makes it clear how to get og:image and twitter cards working nicely?

Answer 1

The way I solved this was by adding the default image via import to the SEO component. This way the source plugin forced it to be found via the static folder after build. And after scraping again for the meta-image via the facebook developer page https://developers.facebook.com/tools/debug/ it was found right away.

Seo component:

import metaImage from '../images/headzup-meta-image-2.jpg';
const siteImage = image || metaImage;

Otuput:

<meta data-react-helmet="true" property="og:image" content="/static/headzup-meta-image.jpg>