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

Question

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

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

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

两个很好的示例实现：

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

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

Answer 4

也可以通过ReactDOMServer.renderToStaticMarkup ：

与renderToString类似， renderToString不会创建额外的DOM属性，例如data-react-id内部使用的data-react-id 。 如果你想将React用作一个简单的静态页面生成器，这很有用，因为剥离额外的属性可以节省大量的字节。

Answer 5

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

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

Answer 6

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

如果你也关心你的网站的排名，如百度 ，你的服务器端由 PHP实现，也许你需要这个： react-php-v8js 。