SPA React 应用程序的动态 OpenGraph 标签
dynamic OpenGraph tags for SPA React application
我想为我的 create-react-app 支持的网站添加一些 opengraph 标签。问题是当我用 Helmet 之类的东西动态添加它们时，它们没有被正确解析。对此有什么好的解决方法吗？
您正在管理一个使用 React 构建的 Web 应用程序，并且您的应用程序上可能有许多 路由 ，例如 /about 页面，或者/post/:id 个页面，每个 post 个页面都有不同的内容。
对于每条路线，您要设置不同的 meta 标签，例如标题、description、OG image 等。
您可能使用过 React Helmet 之类的东西来管理 React 代码中的元标记。但问题是，当页面或 post 与 Facebook 或 Twitter 共享时，抓取工具不会 运行 您网站上的 JavaScript。 他们只是从初始包中获取元标签。
这不行，因为您显然不希望整个应用程序的每个页面都具有相同的 元标记。因此，您需要动态设置元标记 server-side，以便显示正确的预览。
Here is an article which gives you step by step process of achieving same:
Link
And a demo repo here: Repo Link
希望对您有所帮助！
我想为我的 create-react-app 支持的网站添加一些 opengraph 标签。问题是当我用 Helmet 之类的东西动态添加它们时，它们没有被正确解析。对此有什么好的解决方法吗？
您正在管理一个使用 React 构建的 Web 应用程序，并且您的应用程序上可能有许多 路由 ，例如 /about 页面，或者/post/:id 个页面，每个 post 个页面都有不同的内容。
对于每条路线，您要设置不同的 meta 标签，例如标题、description、OG image 等。
您可能使用过 React Helmet 之类的东西来管理 React 代码中的元标记。但问题是，当页面或 post 与 Facebook 或 Twitter 共享时，抓取工具不会 运行 您网站上的 JavaScript。 他们只是从初始包中获取元标签。
这不行，因为您显然不希望整个应用程序的每个页面都具有相同的 元标记。因此，您需要动态设置元标记 server-side，以便显示正确的预览。
Here is an article which gives you step by step process of achieving same: Link
And a demo repo here: Repo Link
希望对您有所帮助！