共享链接时不会读取 React-Helmet 中的元标记

Question

基本上我想要实现的是在链接缩略图上显示主要博客文章图像，同时在 Twitter、Facebook 等社交媒体上分享它。

我所拥有的元标记<Helmet>已添加到网站中，但它们不正确，或者不符合我在共享链接时所期望的读取方式。我认为这是因为此时尚未填充这些值。但如何解决呢？或者说实现这一目标的正确方法是什么？

以下是我尝试在组件中注入元标记的方法：

<Helmet>
  <meta property="og:type" content="website"/>
  <meta property="og:url" content={`https://blackh3art.dev/blog/${slug}`}/>
  <meta property="og:title" content={title}/>
  <meta property="og:description" content={short} />
  <meta property="og:image" content={formatedimage}/>

  <meta property="twitter:card" content="summary_large_image"/>
  <meta property="twitter:url" content={`https://blackh3art.dev/blog/${slug}`}/>
  <meta property="twitter:title" content={title}/>
  <meta property="twitter:description" content={short} />
  <meta property="twitter:image" content={formatedimage}/>
</Helmet>

但在任何地方我会尝试在我的组件中注入元标记，但它不起作用。唯一有效的元标记是我在我的 中静态声明的元标记index.html，并且图像从我的网站读取到每个链接。

现在应用程序正在以这种方式工作：

1. 应用程序上下文正在从我的与 Sanity 连接的 API 中获取所有博客文章
2. 每个组件都可以访问上下文
3. 我的<BlogPostPage/>组件正在从上下文中获取所有数据

网站已经部署，因此您可以查看是否需要：

• 主页： https: //blackh3art.dev/
• 博客文章：https://blackh3art.dev/blog/25-most-common-questions-asked-on-web3-interview-by-vikram