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

Question

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

能够不依赖_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实现同构页面并做出反应:

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

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