React单页面应用中的Open Graph Meta标签和SEO

Question

我正在尝试使用React作为SPA重写“静态”Web应用程序（仅服务器端PHP）。一切正常，但想知道如何处理开放图元标签等内容，特别是与搜索引擎和共享有关的内容（例如通过Facebook或Twitter）。 官方文档和我在搜索此问题时找到的“解决方案”只是建议提供“动态”替换服务器端的元标签，但在客户端SPA中这有什么意义呢？

例如，当某人分享https://example.com/page/1时，我希望将<meta name="og:title">设置为页面1的标题，而不是整个站点的静态标题。

1. 是否有一种方法可以从React应用程序内部动态管理这些元标签？ 2. 当Google / Facebook / Twitter等爬取页面以获取这些详细信息时，它是否实际起作用？

- Svish

---

这个回答解决了你的问题吗？在社交媒体上分享，URL没有呈现任何元数据 - str

@str 如果你指的是那些说“你需要SSR”的问题，那么是的。除非你已经找到了我不知道的新的客户端解决方案。我接受了当前的答案，它也是这样说的。感谢你的提醒。 - Svish

Answer 1

答案是“ SSR - 服务器端渲染”。您可以使用 Node.js 服务器进行 React 渲染，像 Next.js 或 Gatsby 这样的工具可以帮助您完成。或者，您可以尝试使用 prerender.io。

- andyrandy

---

啊哈，所以实际上没有客户端唯一的解决方案来解决这个问题。你有什么建议吗？你自己成功地使用过什么东西吗？我测试了 react-snap 用于 SSR 部分，它似乎可以直接使用（至少对于我目前简单的情况），但是你会用什么来处理元标记呢？ - Svish

我正在使用Next.js和Node.js服务器进行SSR，它非常容易设置。当然，您可以为每个页面设置元标记。 - andyrandy

@Svish，不需要SSR也是可以实现的，你需要静态生成每个页面，这样每个路由都有一个唯一的HTML页面，在其中为每个页面设置元标签。我们使用react-static来实现这一点。 - George

@George 这基本上与 SSR 相同，只是“更加静态”。 - Svish

SSR 在客户端请求时生成 HTML 文件，而静态生成则是在构建时甚至在部署之前完成，然后以静态方式提供服务。在这种情况下，SSR 的好处是可以生成包括时间变量数据在内的任何微小差异的 HTML，而这在静态生成中是不可行也不可能的。 - George