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

Question

我有一个 Gatsby 应用设置。

src/

---images/foo.jpg //

---images/ //

---assets/ //

---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 - 它不会在浏览器中加载任何内容。

如果我查看开发工具“源”选项卡，我会看到 /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 Plugin: Open Graph Images

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

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

最终域应以siteUrl 为前缀，以http:// 或https:// 开头。

Answer 3

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

Adding assets outside of the module system

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