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.

我已经添加了

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

想也许它只是找不到文件，但没有任何改变。

如果我确实点击了https://my-url.com/images/foo.jpeg - 它不会在浏览器中加载任何内容。

如果我查看开发工具的“源”选项卡，我会看到 /static/ 文件夹，但它不在那里。但是 /images/ 中的其他文件是。

我很困惑！

有谁知道我做错了什么？或者是否有关于 Gatsby 设置的教程/博客，它清楚地说明了如何获得og:image和 twitter 卡的良好工作？

Answer 1

Gatsby 不知道这个文件，因此它没有包含在您的构建中。如果您想在构建中包含尚未显式导入或查询的文件，则应将其添加到该./static文件夹​​中。

\n

在模块系统之外添加资产

\n

\n

您可以在项目的根目录下创建一个名为 static 的文件夹。您放入该文件夹中的每个文件都将被复制到公用文件夹中。例如，如果您将名为静态文件夹的文件添加sun.jpg到\xe2\x80\x99，它将被复制到public/sun.jpg

\n

\n