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

关于React.js的文章喜欢指出，React.js对于搜索引擎优化非常有用。不幸的是，我从来没有读过，你是怎么做到的。 当url包含

\u escape\u fragment\u

时，您是简单地实现中的

\u escape\u fragment\u

并让React在服务器上呈现页面，还是有更多内容

---

能够不依赖于

\u expired\u fragment\u

将是非常好的，因为可能不是所有潜在的爬行站点（例如，在共享功能中）实现

\u转义\u片段

我很确定，您认为对SEO有好处的任何东西都与能够在服务器上呈现请求的页面有关，然后再将其发送到客户端。因此，就搜索引擎而言，它将像任何其他静态页面一样被索引

可以通过

ReactDOMServer.renderToString

进行服务器渲染。访问者将收到已呈现的标记页面，React应用程序在下载并运行后将检测到该页面。调用

ReactDOM.render

时，它将只添加事件绑定，而不是替换内容。对于访问的其余部分，React应用程序将接管并在客户端上呈现更多页面

---

如果您有兴趣了解更多信息，我建议您搜索“Universal JavaScript”或“Universal React”（以前称为“同构React”），因为这正成为JavaScript应用程序的术语，这些应用程序使用单一代码库在服务器和客户机上呈现。

正如另一个响应者所说，你所寻找的是一种同构的方法。这允许页面来自服务器，其呈现的内容将由搜索引擎解析。正如另一位评论员所提到的，这可能会让您觉得无法使用node.js作为服务器端语言。虽然确实需要在服务器上运行javascript才能实现这一点，但您不必在节点中完成所有工作。例如，本文讨论了如何使用Scala和react实现同构页面：

---

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

两个很好的示例实现：

• ：Uses，我最喜欢的应用程序状态管理框架
• ：使用Flux，并具有非常复杂的网页设置

在打开和关闭javascript的情况下尝试访问，并在浏览器开发工具中查看网络以查看差异…

也可以通过以下方式访问：

类似于

renderToString

，只是这不会创建额外的DOM react在内部使用的属性，如

数据react id

。这是 如果您想将React用作简单的静态页面生成器，则非常有用，如 剥离额外的属性可以节省大量字节

---

我不得不对这里的很多答案表示异议，因为我成功地让我的客户端React应用程序在完全没有SSR的情况下与Google机器人一起工作

---

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

如果你关心你的网站在Google上的排名，你无需做什么，因为Google的爬虫程序可以很好地处理JavaScript！您可以通过搜索

站点：您的站点url

来检查站点的SEO结果

---

如果你也关心你的站点排名，比如百度，以及你的服务器端是由PHP实现的，也许你需要这样：。

这不意味着我会被困在node.js上吗？这只意味着你需要推迟到node才能呈现标记。你可以使用任何你想要的语言来处理请求和提供呈现的标记。我不认为你会被限制为依赖NodeJs，如果你设计了合适的脚本，你可以遵从其他Javascript引擎。例如，在Java世界中，可以使用Nashorn。我正在尝试使用Nashorn调用我的Web包捆绑脚本，这似乎是可能的。阅读相关主题后，我得到的印象是，服务器端呈现主要是一种加快初始页面加载速度的方法，而不是SEO要求。谷歌和其他许多搜索引擎如果只在前端呈现，就可以为单页应用程序编制索引。@Micros谷歌在为React应用程序的页面编制索引方面做得很好，但Bing几乎无法为SPA中的任何内容编制索引。是一个很好的链接。详细的介绍对所有人都是相关的（不仅仅是scala）。给即将到来的访问者一个提示：问题中的链接是。这个用法的一个例子是（见第43行）。另一个例子可以在上找到。查看这个锅炉板，其中我们包括了SSR、PWA、代码拆分等功能，并考虑到SEO。请给出你对这个bolier plate@AjayPatel的想法，它看起来不错，如果示例站点没有加载google分析和广告，它会得到更好的分数。这只是一个如何管理GTM的示例。我们还没有给它添加广告意义。