implementing a static og image in Gatsby

Question

I'm new in Gatsby and can't find a solution for this: I deployed a website which is just a "coming soon" landing page for now. I took a screenshot which i want to use as og-image for everything... It's now sitting in src/images but:

• if i don't import it anywhere, it's not going to be available in the public folder after build

• if i import it, it's in the static folder but with a unique hash, so i'm not able to set the meta-tag correctly in the SEO file using Helmet.

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:image`,
          content: 'https://example.com/{how to get to the url of my image???}',
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata.author,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />
  )
  

  }

Answer 1

You hit the nail, the way to achieve what you want is to add it in your /static folder since you are not importing it as a component so the way to make the image available is this.

The URL of the image is the name of the image itself, with the same internal folder structure. As you can see in Gatsby documentation about static folder:

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

In the previous case, the sun.jpg must be just one level inside /static. If you add another level, like /images/sun.jpg, your public URL will be https://example.com/images/sun.jpg.

So, in your case:

  {
    property: `og:image`,
    content: 'https://example.com/path_to_your_static_image.extension',
  },

Note: keep in mind that being a public URL, it won't work until you deploy your app and the image remain public