在 React SPA 中打开图形元标记和 SEO答案

【问题标题】：Open graph meta tags and SEO in a React SPA在 React SPA 中打开图形元标记和 SEO
【发布时间】：2019-09-16 22:44:59
【问题描述】：

我正在尝试使用 React 作为 SPA 重写“静态”网络应用程序（仅限服务器端 PHP）。东西工作正常，但想知道如何处理开放图元标记等，特别是与搜索引擎和共享相关的（例如通过 facebook 或 twitter）。

official documentation 和我发现试图搜索此问题的“解决方案”只是说提供“动态”替换服务器端的元标记，但这在客户端 SPA 中有何意义?

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

【问题讨论】：

【解决方案1】：

答案是“SSR - Server Side Rendering”。您可以使用 Node.js 服务器进行反应，Next.js 或 Gatsby 等工具可以帮助您。或者，您可以尝试prerender.io。

【讨论】：

啊哈，所以实际上没有针对此问题的任何仅客户端解决方案。 ?你有什么建议吗？自己成功地使用了任何东西？我为 SSR 部分测试了react-snap，它似乎开箱即用（至少对于我目前的简单案例），但你会用什么来处理元标记？
我将 next.js 与 node.js 服务器一起用于 SSR，设置起来非常容易。当然，您可以为每页设置元标记。
@Svish 没有 SSR 是可能的，你必须静态生成每个页面，所以每个路由都有一个唯一的 html 页面，你在其中设置了每个页面的元标记。我们为此使用 react-static。
@George 这和SSR基本一样，只是“更加静态”
SSR 会在客户端请求一个 html 文件时生成一个 html 文件，而静态生成将在构建时甚至在部署之前执行此操作，然后静态服务。在这种情况下，SSR 的好处是您可以生成具有任何微小变化的 html，包括时变数据，这在静态生成中既不可行也不可能。