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

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

Gatsby doesn’t know about this file, so it hasn’t been included in your build. If you want to include a file in your build that you haven’t explicitly imported or queried, you should add it to the ./static folder.

Adding assets outside of the module system

You can create a folder named static at the root of your project. Every file you put into that folder will be copied into the public folder. E.g. if you add a file named sun.jpg to the static folder, it’ll be copied to public/sun.jpg

Advertisement

Answer