如何使用 Gatsby 以编程方式在反应头盔中显示图像？

Question

我将 Gatbsy 用于我的首页，并尝试使用 react-helmet 以编程方式添加一些元数据。

我有一个 SEO 组件如下：

const SEO = ({title, description, location, image_url}) => {
    const capitalize = string => {
        if (string !== undefined){
            return string.charAt(0).toUpperCase() + string.slice(1);
        }

        return string

    };

    const MAIN_TITLE = settings.META_TITLE;
    return (
        <Helmet>
            <title>{`${MAIN_TITLE} | ${capitalize(title)}`}</title>
            <meta name="description" content={description}/>
            <meta property="og:title" content={`${MAIN_TITLE} | ${capitalize(title)}`}/>
            <meta property="og:description" content={description}/>
            <meta property="og:image" itemProp="image" content={image_url !== undefined ? image_url : `${settings.ROOT_URL}/static/image-cover-1e01617fb26211f1cd8e3dd24977070d.jpg`}/>
            <meta property="og:type" content="website"/>
            <meta property="og:url" content={location.href}/>
            <meta property="twitter:title" content={`${MAIN_TITLE} | ${capitalize(title)}`}/>
            <meta property="twitter:description" content={description}/>
            <meta property="twitter:image" itemProp="image"  content={image_url !== undefined ? image_url : `${settings.ROOT_URL}/static/image-cover-1e01617fb26211f1cd8e3dd24977070d.jpg`}/>
            <meta property="twitter:card" content="summary_large_image"/>
        </Helmet>
    )
};

export default SEO

我在盖茨比的一个页面中使用它如下：

<div className="flex flex-col overflow-x-hidden min-h-screen">
     {loading && !hasError && <LoadingIndicator/>}
     {!loading && hasError && <div className="container my-12"><ErrorIndicator/></div>}
     {!loading && !hasError && <React.Fragment>
             <SEO title={`${vehicle.make} ${vehicle.model} ${vehicle.type}`}
                  description={`${vehicle.make} ${vehicle.model} wacht op u.`}
                  location={location}
                  image_url={vehicle.images instanceof Array ? vehicle.images[0].uri : vehicle.images.uri}/>
              .... // Rest of the code
      <React.Fragment>}
</div>

当我在 localhost 或服务器上的标签中签入控制台时，我看到了我应该看到的内容：

但在 Facebook 上，我看到了别的东西。对于图像，例如我看到：

og:image    http://my-site/static/image-cover-1e01617fb26211f1cd8e3dd24977070d.jpg

Facebook 在<meta property="og:image" ..../> 标记中使用else 语句，但image_url 不是未定义的，并且在控制台中我看到了正确的网址。

有什么想法吗？

Answer 1

OG 文档没有将 item prop 显示为属性，但我认为不是这样。

https://ogp.me/

我认为是您的代码以编程方式添加了元数据，所以在第一次加载时它不存在并且 Facebook 的机器人没有捕捉到它？尝试将该元标记硬编码到 HTML 中，看看 Facebook 是否接受，这至少会让你知道这是否是问题所在。

编辑：抱歉，这并没有真正回答根本问题。如果上述结果是问题，我建议尽可能在服务器端以编程方式添加它。您可以尝试使用 EJS 之类的东西对其进行模板化。从本质上讲，我认为您只需要确保它在 DOM 中足够早以供 Facebook 的机器人使用。

编辑：Facebook 根本不支持（不再）自定义共享。要么是 OG，要么什么都没有，他们会在你的 JS 有机会改变它之前从你的原始 html 中获取 OG。它只是不适合SPA。您可以使用 Google OG 进行 SPA，有些人提出了 hacky 代理，但它们对您的 SEO 不利。

对不起：/