您如何使用 React.js 进行 SEO?

How do you use React.js for SEO?

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

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

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

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

如果您有兴趣了解更多相关信息,我建议您搜索 "Universal JavaScript" 或 "Universal React"(以前称为 "isomorphic react"),因为这已成为 JavaScript 使用单一代码库在服务器和客户端上呈现的应用程序。

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

Isomorphic Web Design with React and Scala

该文章还概述了这种同构方法的 UX 和 SEO 优势。

两个很好的示例实现:

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

也可以通过ReactDOMServer.renderToStaticMarkup:

Similar to renderToString, except this doesn't create extra DOM attributes such as data-react-id, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.

我不得不不同意这里的很多答案,因为我设法让我的客户端 React 应用程序与 googlebot 一起工作,完全没有 SSR。

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

如果您关心您的站点在 Google 上的排名,则无需执行任何操作,因为 Google 的抓取工具可以很好地处理 JavaScript!您可以通过搜索 site:your-site-url.

查看您网站的 SEO 结果

如果你也很在意自己网站的排名,比如百度,而你的服务器端是由PHP实现的,也许你需要这个:react-php-v8js.