javascript-您如何将React.js用于SEO?

React.js上的文章喜欢指出,React.js非常适合SEO。 不幸的是,我从未读过您的实际操作方法。您是否仅在[https://developers.google.com/webmasters/ajax-crawling/docs/getting-started]中实现了_escaped_fragment_,并在URL包含_escaped_fragment_或其他内容时,让React在服务器上呈现页面? 要吗?

能够不依赖_escaped_fragment_会很棒,因为可能并非所有潜在的爬网站点(例如,在共享功能中)都实现了_escaped_fragment_

sk904861 asked 2020-02-12T02:21:28Z
6个解决方案
56 votes

我敢肯定,您看到的任何将React提升为SEO的东西都与在将请求的页面发送到客户端之前能够在服务器上呈现请求的页面有关。 因此,就搜索引擎而言,它将像其他任何静态页面一样被索引。

通过ReactDOMServer.renderToString可以进行服务器渲染。访问者将收到已经渲染的标记页面,React应用程序下载并运行后将检测到该页面。 不会在调用ReactDOM.render时替换内容,而只会添加事件绑定。 在其余的访问中,React应用程序将接管工作,其他页面将在客户端上呈现。

如果您有兴趣了解更多有关此方面的知识,建议您搜索“通用JavaScript”或“通用React”(以前称为“同构反应”),因为这已成为使用单个代码库进行呈现的JavaScript应用程序的术语 在服务器和客户端上。

Jack answered 2020-02-12T02:22:23Z
5 votes

正如其他响应者所说,您正在寻找的是同构方法。 这允许页面来自服务器,并带有将由搜索引擎解析的呈现内容。 正如另一位评论者提到的那样,这似乎使您似乎陷入了使用node.js作为服务器端语言的困境。 虽然确实需要在服务器上运行javascript才能完成此工作,但您不必在节点中做任何事情。 例如,本文讨论如何使用Scala实现同构页面并做出反应:

使用React和Scala的同构Web设计

该文章还概述了这种同构方法在UX和SEO方面的好处。

PFranchise answered 2020-02-12T02:22:53Z
4 votes

两个不错的示例实现:

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

尝试在打开和关闭javascript的情况下访问[https://react-redux.herokuapp.com/],然后在浏览器开发工具中观看网络,以了解两者之间的区别……

w00t answered 2020-02-12T02:23:27Z
1 votes

也可以通过ReactDOMServer.renderToStaticMarkup

类似于renderToString,不同之处在于这不会创建额外的DOM   属性在内部使用的属性,例如data-react-id。 这是   如果您想将React用作简单的静态页面生成器,则很有用,例如   去除多余的属性可以节省很多字节。

falsarella answered 2020-02-12T02:23:52Z
1 votes

由于我设法让我的客户端React App与googlebot一起使用而完全没有SSR,因此不得不不同意这里的许多答案。

在这里看看SO的答案。 我直到最近才设法使其工作,但我可以确认到目前为止没有问题,并且googlebot可以实际执行API调用并为返回的内容建立索引。

WillHua answered 2020-02-12T02:24:18Z
1 votes

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

如果您还关心百度等站点的排名,以及由PHP实现的服务器端,也许您需要这样做:react-php-v8js。

Alan answered 2020-02-12T02:24:43Z
translate from https://stackoverflow.com:/questions/28252768/how-do-you-use-react-js-for-seo