在 React SPA 中打开图元标签和 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/etc 抓取页面以获取这些详细信息时，它实际上会起作用吗？

Answer 1

例如，Facebook 忽略 JavaScript - 因此您必须确保所有相关（开放图谱）标签在初始源中可用。

答案是“ SSR——服务器端渲染”。您可以使用用于 React 的 Node.js 服务器来做到这一点，Next.js或Gatsby等工具可以帮助您实现这一点。或者，您可以尝试prerender.io。