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

Question

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

对于开放图我有这个，省略了不必要的代码：

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 的共享调试器时，它得到了完全不同的图像。它说，基于开放图标签，它构建了以下属性，它选择了具有完全不同文件路径的图像。我 100% 确定我正确输入了文件路径。有任何想法吗？我错过了什么吗？

Answer 1

您尝试过使用

gatsby-plugin-react-helmet

吗？

尽管打开开发人员工具并看到标签和其余信息并不意味着它们是静态生成的并且在 Facebook 的抓取工具试图“抓取”它们时可用。如果通过 JavaScript 异步添加数据（不完全是在您请求页面时，而是稍后），Facebook 将看不到该数据，因此无法抓取它。 确保数据是静态生成的测试是访问页面的源代码（右键单击“查看页面源代码”），看看数据是否存在。如果是，问题可能出在图像或设置元标记的方式上。如果没有，则爬虫无法获得数据。

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

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

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

您不需要更改任何内容（也不需要

Helmet

导入），只需安装插件并将其添加到

gatsby-config.js

中即可。