时间戳

首页 > 解决方案 > Facebook 的 OG 抓取工具使用的图片与我的 OG 标签中的图片不同

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

问题描述

解决！详情在最后。

我正在使用 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文件夹并从那里链接它们解决了这个问题，因为这个文件夹基本上绕过了构建过程。

标签： reactjsgatsbyfacebook-opengraphmetareact-helmet

解决方案

你试过使用gatsby-plugin-react-helmet吗？

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

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

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

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

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

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

推荐阅读