你如何使用React.js进行搜索引擎优化？

Question

关于React.js的文章喜欢指出，React.js非常适合搜索引擎优化目的。不幸的是，我从未读过，你是怎么做到的。 您是否只是像https://developers.google.com/webmasters/ajax-crawling/docs/getting-started中那样实施_escaped_fragment_并让React在服务器上呈现页面，当网址包含_escaped_fragment_时，还是有更多内容？

能够不依赖_escaped_fragment_会很棒，因为可能并非所有可能抓取的网站（例如共享功能）都会实施_escaped_fragment_。

Answer 1

我非常确定您所看到的任何促使React对SEO有利的事情都与能够在将其发送到客户端之前在服务器上呈现所请求的页面有关。因此，就搜索引擎而言，它将像任何其他静态页面一样被编入索引。

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

如果您有兴趣了解更多信息，我建议您搜索＆＃34; Universal JavaScript＆＃34;或者＆＃34; Universal React＆＃34; （以前称为＆＃34; isomorphic react＆＃34;），因为这成为使用单个代码库在服务器和客户端上呈现的JavaScript应用程序的术语。

Answer 2

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

https://thebhwgroup.com/blog/isomorphic-web-design-react-scala

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

Answer 3

两个很好的示例实现：

• https://github.com/erikras/react-redux-universal-hot-example：使用我最喜欢的应用状态管理框架Redux
• https://github.com/webpack/react-starter：使用Flux，并且有一个非常复杂的webpack设置。

尝试在打开和关闭javascript的情况下访问https://react-redux.herokuapp.com/，并在浏览器开发工具中观看网络以查看差异......

Answer 4

也可以通过ReactDOMServer.renderToStaticMarkup：

  

与renderToString类似，但这不会创建额外的DOM   React在内部使用的data-react-id等属性。这是   如果您想将React用作简单的静态页面生成器，则非常有用   剥离额外的属性可以节省大量的字节。

Answer 5

由于我设法让我的客户端React App与googlebot一起完全没有SSR，所以不得不在这里不同意这些答案。

查看SO answer here。我最近设法让它工作，但我可以确认到目前为止没有问题，googlebot可以实际执行API调用并索引返回的内容。

Answer 6

如果您关心自己网站在Google上的排名，则无需执行任何操作，因为Google的抓取工具可以很好地处理JavaScript！您可以通过搜索site:your-site-url检查您网站的搜索引擎优化结果。

如果您还关心自己的网站排名，例如百度，以及您的服务器端由 PHP 实施，那么您可能需要这样：{{3} }。