React Open Graph 预览在 Facebook 调试器中不起作用

Question

我正在使用react，并使用react-helmet来生成动态元标记，其元标记显示在开发人员元素部分中，而不显示在页面源中

当我将应用程序部署到服务器并尝试共享我的图像时，未显示打开的图形预览。

在 Facebook 调试器中测试时，它显示警告：

警告：即使可以从其他标签推断出值，也应显式提供“og:image”属性。

当我收到 api 的响应时，我正在尝试更新元标记。我想要

代码：

import { Helmet } from 'react-helmet';

<Helmet>
                <meta name="title" content={title}/>
                <meta name="description" content={description}/>

                {/*  Non-Essential, But Recommended */}
                <meta property="og:site_name" content="Temp Title!"/>

                {/*  Non-Essential, But Required for Analytics */}
                <meta property="fb:app_id" content="4537338XXXXX" />

                {/* Open Graph / Facebook */}
                <meta property="og:type" content="website" />
                <meta property="og:url" content={window.location.href} />
                <meta property="og:title" content={title}/>
                <meta property="og:description" content={description} />
                <meta property="og:image:type" content="image/jpeg" />
                <meta property="og:image:secure_url" content={'https://images.unsplash.com/photo-1613415959194-0cb09aa135f1?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'} />
                <meta property="og:image" content={'https://images.unsplash.com/photo-1613415959194-0cb09aa135f1?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'} />

</Helmet>

Answer 1

*请注意，Facebook 忽略 JavaScript，因此 og:image 标签必须位于原始源中，而不是通过 JavaScript 动态添加。

这是因为您的应用程序是在客户端呈现的，因此当 Facebook 爬虫访问您的网站时，它会在您的 javascript 有机会将新元标记放入标头之前获取所有原始元标记。解决方案是手动将元标记放入 index.html 文件中，或者您可以创建一个 React Static App 或将 React-Helmet 与 Prerender.io 一起使用。

*另请注意，您可以将静态 html 文件放在 React 网站的“public”文件夹中，这些文件可以包含 og:image 等标签并重定向到动态页面，例如 /shopping/coffee/morroco 重定向到 /shopping/咖啡/#morroco。不幸的是，每次您发布到 FB 的链接时，爬虫都会检查/更新其缓存，因此您确实需要在端点处静态一些（您无法上传 html 文件，强制批量 FB 链接/缓存更新，然后删除 html文件）。

*编辑。