Facebook 的 OG 抓取工具使用的图片与我的 OG 标签中的图片不同答案

【问题标题】：Facebook's OG scraper is using a different image than in my OG tagFacebook 的 OG 抓取工具使用的图片与我的 OG 标签中的图片不同
【发布时间】：2021-11-25 23:29:20
【问题描述】：

已解决！详情见文末。

我正在使用 Gatsby 构建一个 React 应用程序，并使用 React Helmet 插件插入元数据。我刚刚配置了我所有的 Open Graph 和 Twitter 标签，但它们没有使用我指定的图像。

对于 Open Graph 我有这个，省略了不必要的代码：

import React from 'react';
import {Helmet} from 'react-helmet';
import desired_picture from '../../images/pictures/other/desired-picture.png';
export default function HeadGlobal() {
    return (
        <Helmet>
            <meta property="og:image" content={desired_picture} />
            <meta property="og:image:alt" content='alt text hardcoded' />
            <meta property="twitter:image" content={desired_picture} />
            <meta property="twitter:image:alt" content='alt text hardcoded' />
        </Helmet>
    );
}

这个组件然后被导出并作为我页面布局生成器的一部分呈现。我知道它的构造是正确的，因为我可以使用开发工具在头部找到元标记，并且该站点只有一个 URL 路径上的一个页面（加上一个 404）。

问题是，当我将部署的页面放入 Facebook 的共享调试器时，它会得到一个完全不同的图像。它说它基于 Open Graph 标签构建了以下属性，它选择了具有完全不同文件路径的图像。我 100% 确定我输入了正确的文件路径。有任何想法吗？我错过了什么吗？

更新经过更多研究后，发现元标记在构建过程中比我指定它们的方式更早地获取图像。将图像移动到 /static 文件夹并从那里链接它们可以解决问题，因为该文件夹基本上绕过了构建过程。

【问题讨论】：

标签： reactjs gatsby facebook-opengraph meta react-helmet

【解决方案1】：

您是否尝试过使用gatsby-plugin-react-helmet？

尽管打开了开发者工具并看到了标签和其他信息，但这并不意味着它们是静态生成的，并且在 Facebook 的抓取工具尝试抓取它们时可用。如果数据是通过 JavaScript 异步添加的（不完全是在您请求页面时，而是稍后），Facebook 将看不到数据，因此无法抓取它。

确保数据是静态生成的测试是访问页面的源代码（右键“查看页面源”），看看数据是否存在。如果是，则问题可能出在图像中或设置元标记的方式。如果不是，则爬虫无法获取数据。

使用此插件，您可以添加对静态元数据的直接支持：

使用此插件，您可以在其组件中添加属性，例如标题，元属性等将被添加到静态 HTML 页面 Gatsby 构建。

这不仅对网站浏览者很重要，对 SEO 也很重要——标题并且存储在文档头部的描述元数据是关键 Google 在确定搜索结果中的位置时使用的组件。

您无需更改任何内容（Helmet 导入），只需安装插件并将其添加到 gatsby-config.js。

【讨论】：