title: Why can't Gatsby / Facebook find my og:image
body: <p>I have a Gatsby app setup.</p>
  <p>src/</p>
  <p>---images/foo.jpg // &lt;--- the img i want on my facebook shareable URL (og:image).</p>
  <p>---images/ // &lt;-- note, there are loads of PNG files i'm using that seem to trip/default onto the FB image/share.</p>
  <p>---assets/  // &lt;--- loads of SVGs i'm using that</p>
  <p>---components/seo.js // component embedded at top of each page</p>
  <p>---pages/index.js // page that uses <code>&lt;SEO /&gt;</code></p>
  <p>Inside <code>index.js</code>:</p>
  <pre><code>
  function Home() {
  
      return (
          &lt;React.Fragment&gt;
  
              &lt;SEO /&gt;
  
  </code></pre>
  <p>Inside SEO:</p>
  <pre><code>
  const SEO = ({ title, description, image, article }) =&gt; {
  
    const { pathname } = useLocation()
    const { site } = useStaticQuery(query)
  
    const {
      defaultTitle,
      titleTemplate,
      defaultDescription,
      siteUrl,
      defaultImage, // &lt;-- defaultImage is destructured from GQL result
      twitterUsername,
    } = site.siteMetadata
  
   const seo = {
      title: title || defaultTitle,
      description: description || defaultDescription,
      image: `${siteUrl}${image || defaultImage}`, // &lt;--placed into object with path to it
      url: `${siteUrl}${pathname}`,
    }
  
    return (
      &lt;Helmet title={seo.title} titleTemplate={titleTemplate}&gt;
       
        ...
        ...
        ...
  
        {seo.image &amp;&amp; &lt;meta property=&quot;og:image&quot; content={seo.image} /&gt;}
  
        {seo.image &amp;&amp; &lt;meta property=&quot;og:image:type&quot; content=&quot;image/jpeg&quot; /&gt;}
        {seo.image &amp;&amp; &lt;meta property=&quot;og:image:alt&quot; content=&quot;amazing cat&quot; /&gt;}
         ...
  
      &lt;/Helmet&gt;
     )
  
  }
  
  const query = graphql`
    query SEO {
      site {
        siteMetadata {
          defaultTitle: title
          titleTemplate
          defaultDescription: description
          siteUrl: url
          defaultImage: image // &lt;-- default image 
          twitterUsername
        }
      }
    }
  `
  </code></pre>
  <p>in my config:</p>
  <pre><code>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`
    },
  </code></pre>
  <p>Facebook debugger just keeps saying <code>&quot;https://my-url.com/images/foo.jpeg&quot; could not be processed as an image because it has an invalid content type</code>. But it is a JPEG. I'm citing it as a JPEG in my meta tags.</p>
  <p>I've added in</p>
  <pre><code>{
        resolve: `gatsby-source-filesystem`,
        options: {
          name: `images`,
          path: `${__dirname}/src/images/`,
        },
      },
  </code></pre>
  <p>thinking maybe it just couldn't find the file, but nothing's changed.</p>
  <p>If i do hit <a href="https://my-url.com/images/foo.jpeg" rel="noreferrer">https://my-url.com/images/foo.jpeg</a> - it doesnt load anything in the browser.</p>
  <p>If i look in Dev Tools &quot;sources&quot; tab, i see /static/ folder and it's not in there. But the other files from /images/ are.</p>
  <p>I'm puzzled!</p>
  <p>Does anyone know what i'm doing wrong? Or is there a tutorial / blog for Gatsby setup, that makes it clear how to get <code>og:image</code> and twitter cards working nicely?</p>