SPA React 应用程序的动态 OpenGraph 标记答案

【问题标题】：dynamic OpenGraph tags for SPA React applicationSPA React 应用程序的动态 OpenGraph 标记
【发布时间】：2020-10-16 05:58:31
【问题描述】：

我想为我的create-react-app 支持的网站添加一些opengraph 标签。问题是当我使用Helmet 之类的东西动态添加它们时，它们没有被正确解析。有什么好的解决方法吗？

【问题讨论】：

【解决方案1】：

您正在管理一个使用React 构建的网络应用程序，并且您的应用程序上可能有许多路由，例如/about 页面或/post/:id 页面，其中每个帖子都有一个不同的内容。

对于每条路线，您要设置不同的元标签，如标题、description、OG image 等。

您可能使用过 React Helmet 之类的东西来管理您的 React 代码中的元标记。但问题是当页面或帖子与Facebook 或Twitter 共享时，爬虫不会在您的网站上运行JavaScript。 他们只是从初始包中获取元标记。

这不行，因为您显然不希望整个应用程序的每个页面都有相同的元标记。因此，您需要动态设置元标记server-side，以便显示正确的预览。

这是一篇文章，它为您提供了实现相同目标的逐步过程： Link

这里有一个演示代码库： Repo Link

希望对您有所帮助！

【讨论】：