链接预览未显示 React 站点（CSR）上更新的元信息

Question

我有一个使用

React-v18

和

node-js

创建的博客网站。我在

index.html

中添加了默认元标记，它在社交媒体网站上共享时显示链接预览。

对于博客上的每篇文章，我都会使用 API 获取文章信息，并使用

react-helmet-async

动态更新标题和元标记。

我可以看到标题和元标签在

elements

下的

chrome devtools

中更新，但是当我在社交媒体上分享文章链接时，它仍然显示添加到

index.html

中的默认元标签。

---

我尝试使用两种不同的方法来更新标签

• react-helmet-async

  正在更新标签，但将更新的标签添加到头部的底部。这些标签也从头部被切断。 这里提到了这个问题。
• 为了解决上述问题，我添加了一个脚本来替换标签的内容，而不是删除并在底部放置新标签。这确保了标签不会被切断。

---

在浏览了网上的大量帖子后，我得出以下结论。

这可能不起作用，因为我的网站有

Client Side Rendering

。

React Helmet 执行的标头管理是由客户端上的 javascript 执行的。换句话说，我们可以假设当爬虫抓取信息时，它要么不允许 javascript 进行更改，要么只是解释原始 html。

现在的问题是，将我的网站转换为具有 SSR 的下一个 JS 为时已晚。

我想知道对此的建议。

Answer 1

我也遇到了同样的问题，目前还没有发现任何问题。我知道可以选择构建预渲染页面，但对于每个博客页面都这样做，我不购买这种替代方案。