为什么 Gatsby / Facebook 找不到我的 og:image

Question

我有一个 Gatsby 应用设置。

源/

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

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

---资产/ // <--- loads of SVGs i'm using that

---components/seo.js // 嵌入在每个页面顶部的组件

---pages/index.js // 使用

<SEO />

的页面

里面

index.js

：

function Home() {

    return (
        <React.Fragment>

            <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
      }
    }
  }
`

在我的配置中：

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 调试器一直在说

"https://my-url.com/images/foo.jpeg" could not be processed as an image because it has an invalid content type

。但它是一个 JPEG。我在我的元标签中引用它作为 JPEG。

我已经加入了

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

以为可能只是找不到文件，但什么都没有改变。

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

如果我查看 Dev Tools 的“sources”选项卡，我会看到 /static/ 文件夹，但它不在其中。但是 /images/ 中的其他文件是。

我很困惑！

有人知道我做错了什么吗？或者是否有 Gatsby 设置的教程/博客，它清楚地说明了如何让

og:image

和 Twitter 卡片正常工作？

Answer 1

我解决这个问题的方法是通过导入将默认图像添加到 SEO 组件。这样，源插件强制在构建后通过静态文件夹找到它。在通过 facebook 开发者页面 https://developers.facebook.com/tools/debug/ 再次抓取元图像后，它马上就被发现了。

Seo组件：

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

输出：

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

Answer 2

这是另一个解决方法Gatsby 插件：Open Graph Images

在此解决方案中，“域”添加在开放图形图像路径之前，如下所示：

  <meta property="og:image" content={domain + "/og-image/index.png"} />

最终域名应以

siteUrl

为前缀，以 http:// 或 https:// 开头。

Answer 3

Gatsby 不知道这个文件，所以它没有包含在你的构建中。如果你想在你的构建中包含一个你没有明确导入或查询的文件，你应该将它添加到

./static

文件夹中。

在模块系统之外添加资产

您可以在项目的根目录下创建一个名为 static 的文件夹。您放入该文件夹中的每个文件都将被复制到公用文件夹中。例如。如果您将名为

sun.jpg

的文件添加到静态文件夹，它将被复制到

public/sun.jpg