Javascript 你如何使用 React.js 进行 SEO？

How do you use React.js for SEO?

提问by sk904861

Articles on React.js like to point out, that React.js is great for SEO purposes. Unfortunately, I've never read, how you actually do it. Do you simply implement _escaped_fragment_as in https://developers.google.com/webmasters/ajax-crawling/docs/getting-startedand let React render the page on the server, when the url contains _escaped_fragment_, or is there more to it?

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

Being able not to rely on _escaped_fragment_would be great, as probably not all potentially crawling sites (e.g. in sharing functionalities) implement _escaped_fragment_.

能够不依赖_escaped_fragment_会很棒，因为可能并非所有潜在的爬行站点（例如在共享功能中）都实现_escaped_fragment_.

回答by Hyman

I'm pretty sure anything you've seen promoting React as being good for SEO has to do with being able to render the requested page on the server, before sending it to the client. So it will be indexed just like any other static page, as far as search engines are concerned.

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

Server rendering made possible via ReactDOMServer.renderToString. The visitor will receive the already rendered page of markup, which the React application will detect once it has downloaded and run. Instead of replacing the content when ReactDOM.renderis called, it will just add the event bindings. For the rest of the visit, the React application will take over and further pages will be rendered on the client.

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

If you are interested in learning more about this, I suggest searching for "Universal JavaScript" or "Universal React" (formerly known as "isomorphic react"), as this is becoming the term for JavaScript applications that use a single code base to render on both the server and client.

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

回答by PFranchise

As the other responder said, what you are looking for is an Isomorphic approach. This allows the page to come from the server with the rendered content that will be parsed by search engines. As another commenter mentioned, this might make it seem like you are stuck using node.js as your server-side language. While it is true that have javascript run on the server is needed to make this work, you do not have to do everything in node. For example, this article discusses how to achieve an isomorphic page using Scala and react:

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

Isomorphic Web Design with React and Scala

使用 React 和 Scala 进行同构网页设计

That article also outlines the UX and SEO benefits of this sort of isomorphic approach.

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

回答by w00t

Two nice example implementations:

两个不错的示例实现：

• https://github.com/erikras/react-redux-universal-hot-example: Uses Redux, my favorite app state management framework
• https://github.com/webpack/react-starter: Uses Flux, and has a very elaborate webpack setup.

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

Try visiting https://react-redux.herokuapp.com/with javascript turned on and off, and watch the network in the browser dev tools to see the difference…

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

回答by falsarella

It is also possible via ReactDOMServer.renderToStaticMarkup:

也可以通过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.

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

回答by WillHua

Going to have to disagree with a lot of the answers here since I managed to get my client-side React App working with googlebot with absolutely no SSR.

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

Have a look at the SO answer here. I only managed to get it working recently but I can confirm that there are no problems so far and googlebot can actually perform the API calls and index the returned content.

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

回答by Alan

There is nothing you need to do if you care about your site's rank on Google, because Google's crawler could handle JavaScript very well! You can check your site's SEO result by search site:your-site-url.

如果您关心您的网站在 Google 上的排名，您无需做任何事情，因为 Google 的爬虫可以很好地处理 JavaScript！您可以通过搜索查看您网站的 SEO 结果site:your-site-url。

If you also care about your site's rank such as Baidu, and your sever side implemented by PHP, maybe you need this: react-php-v8js.

如果您还关心您网站的排名，例如百度，以及您的服务器端由PHP实现，那么您可能需要这个：react-php-v8js。