使用 prerender.io 和 ReactJS 进行 SEO答案

【问题标题】：Using prerender.io with ReactJS for SEO使用 prerender.io 和 ReactJS 进行 SEO
【发布时间】：2015-03-26 20:04:28
【问题描述】：

我意识到我使用 react-router 的 ReactJS 应用程序没有任何外部链接。搜索引擎无法识别该站点有很多链接内容。 Prerender.io 似乎是一个很好的解决方案，但我无法让它为我的 ReactJS 应用程序工作。

prerender.io 可以与 ReactJS 一起使用吗？如果没有，是否有另一种好方法可以在不进行所有渲染服务器端的情况下改善我的网站的 SEO？

编辑：经过进一步挖掘，我意识到这里的问题是 react-router 默认使用“#”，而不是“#！”。是否可以使用“#！”使 react-router 工作？

【问题讨论】：

很好奇，我不是 react 开发人员，但我可以看到 react-spa.herokuapp.com 使用 html5mode react-routing
@ritmatter 好吧，我们在开发同样需要 SEO 优化的 ReactJs 应用程序时也遇到了这个问题。请查看我们的 reactjs 样板，使用它我们可以创建 SEO 友好的网络应用程序。 github.com/Atyantik/react-pwa.

【解决方案1】：

Prerender 似乎需要真实的 url，否则您无法将缓存的 html 提供给普通人（哈希不会发送到服务器）。

在设置 react-router 时确保它使用的是历史模式：

Router.run(routes, Router.HistoryLocation, function (Handler) {

在您的服务器中，您需要确保所有与静态文件不匹配的路由都通过发送 index.html 或使用 prerender 提供服务。

您可以搜索“将所有请求发送到 index.html {在此处插入服务器名称}”以查找有关此内容的详细信息。

似乎默认情况下预渲染仅适用于某些情况。如果您在 node.js 中使用 express.js 中间件，这是一个示例：

require('prerender-node').shouldShowPrerenderedPage = function(){ return true }

您应该能够为其他中间件找出类似的修改（它需要使用不太灵活的语言进行分叉）。

【讨论】：

我试过了，但还是不行。 Prerender 显然必须使用 hashbang，而不是 hash，但我也无法让它以这种方式工作。
@ritmatter，我更新了我的答案。另外，请阅读他们的文档......他们明确建议不要使用#! urls。
感谢您的更新，我会调查的。建议使用“#!”在 url 中来自 support@prerender.io 的回复。有可能有两种不同的策略吗？
我不知道，但是服务器端不可能呈现带有#! 的网址，除了机器人子集。 # 之后的任何内容都不会发送到服务器。
对不起，我错过了。建议在#! 上使用html5 推送状态。在 html5 推送状态下，您在中使用标记，爬虫将在 URL 末尾使用 ?_escaped_fragment_= 请求 URL。如果您使用#!，则爬虫会将#! 替换为?_escaped_fragment_=。这就是我们检测爬虫的方式。有关更多文档，请参见此处：prerender.io/documentation/test-it