reactjs - 如何使用 Gatsby 以编程方式在 React Helm 中显示图像？

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

我在 Gatsby 的一个页面中使用它如下:

<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>

当我在本地主机或服务器上的标签中 checkin 控制台时，我看到了我应该看到的:

但在 Facebook 上，我看到了其他东西。对于图像，例如我看到:

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

Facebook 使用 else <meta property="og:image" ..../> 中的声明标签，但是 image_url不是未定义的，在控制台中我看到了正确的 url。

有什么想法吗？

Answer 1

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

https://ogp.me/

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

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

编辑:Facebook 根本不支持(不再)自定义共享。无论是 OG 还是什么都不是，他们会在您的 JS 有机会更改它之前从您的原始 html 中获取 OG。它只是不适合 SPA。您可以针对 SPA 使用 Google OG，有些人提出了一些骇人听闻的代理，但它们对您的 SEO 不利。

对不起:/