你如何使用 React.js 进行 SEO？

Question

React.js 上的文章喜欢指出，React.js 非常适合 SEO 目的。不幸的是，我从来没有读过，你是怎么做到的。您是否只是像 https://developers.google.com/webmasters/ajax-crawling/docs/getting-started 中那样实现 _escaped_fragment_ 并让 React 在 url 包含时在服务器上呈现页面 _escaped_fragment_ ，还是还有更多？

能够不依赖 _escaped_fragment_ 会很棒，因为可能并非所有潜在的爬行站点（例如在共享功能中）都实现 _escaped_fragment_ 。

原文由 sk904861 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我很确定你看到的任何将 React 推广为对 SEO 有益的东西都与能够在将请求的页面发送到客户端之前在服务器上呈现有关。因此，就搜索引擎而言，它将像任何其他静态页面一样被编入索引。

通过 ReactDOMServer.renderToString 实现服务器渲染。访问者将收到已呈现的标记页面，React 应用程序将在下载并运行后检测到该页面。调用 ReactDOM.render 时不会替换内容，它只会添加事件绑定。对于访问的其余部分，React 应用程序将接管并在客户端上呈现更多页面。

如果您有兴趣了解更多相关信息，我建议搜索“Universal JavaScript”或“Universal React”（以前称为“同构反应”），因为这正在成为使用单一代码库进行渲染的 JavaScript 应用程序的术语在服务器和客户端上。

原文由 Jack 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

正如其他响应者所说，您正在寻找的是同构方法。这允许页面来自服务器，其中包含将由搜索引擎解析的呈现内容。正如另一位评论者所提到的，这可能会让您看起来像是在使用 node.js 作为服务器端语言。虽然确实需要在服务器上运行 javascript 才能使这项工作正常进行，但您不必在节点中完成所有操作。比如本文讨论如何使用Scala和react实现同构页面：

使用 React 和 Scala 进行同构 Web 设计

该文章还概述了这种同构方法的用户体验和搜索引擎优化优势。

原文由 PFranchise 发布，翻译遵循 CC BY-SA 4.0 许可协议