共享链接时未读取 React-Helmet 中的元标记答案

【问题标题】：Meta tags in React-Helmet are not being read while sharing links共享链接时未读取 React-Helmet 中的元标记
【发布时间】：2022-06-12 02:10:36
【问题描述】：

基本上我想要实现的是在链接缩略图上显示主要的博客文章图像，同时在 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 中静态声明的那些，并且图像会被读取到我网站上的每个链接。

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

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

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

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

【问题讨论】：

标签： reactjs meta-tags

【解决方案1】：

你解决过这个问题吗？我有类似的问题，试图切换到 react-helmet-async 因为 react-helmet 存在异步加载问题。还是一样——查看开发工具中的 og 标签更新，但社交媒体上的链接不显示预览。

【讨论】：