hashHistory、_escaped_fragment_ 和 Google答案

【问题标题】：hashHistory, _escaped_fragment_, and GooglehashHistory、_escaped_fragment_ 和 Google
【发布时间】：2016-09-13 02:22:09
【问题描述】：

我使用 React Router 已经有一段时间了，我一直在使用 hashHistory 来处理路由。在某些时候，我会将应用程序转换为browserHistory，但我很好奇为什么 Google 的“Fetch as Google”功能似乎不适用于根路由 (/) 以外的任何东西。很明显，它正在渲染一些东西，而不是服务器未处理的路由。（下图）

我看到谷歌有deprecated their AJAX crawling scheme，这让我相信我不再需要处理?_escaped_fragment_=，但即便如此，我也无法让谷歌渲染任何其他路线。

例如，网站是www.learnphoenix.io，课程在www.learnphoenix.io/#/phoenix-chat/lessons 下列出。然而，谷歌在网站管理员中的Fetch as Google 功能重定向到主页并且只呈现主页。使用_escaped_fragment_ 会导致相同的结果。

有没有办法让 Google 使用 hashHistory 为我的网站编制索引，还是我必须接受只有我的主页才会被编制索引，直到我切换到 browserHistory？

【问题讨论】：

标签： seo react-router google-search

【解决方案1】：

默认情况下，google 似乎会忽略 url 片段 (#)。根据这篇可能已过时的文章，使用 #!会告诉谷歌这些片段可以用来定义不同的规范页面。

https://www.oho.com/blog/explained-60-seconds-hash-symbols-urls-and-seo

值得一试，尽管 ReactRouter 不支持 Hashbang，因为它应该被弃用。

更好的选择可能是硬着头皮在你的 react-router 中使用 browserHistory (pushState)。问题在于，如果您运行的是静态无服务器应用程序，/phoenix-chat/lessons 之类的路径将返回 404。在 AWS 中，也有一个 hack。将您的 404 页面设置为您的应用索引页面。

http://blog.boushley.net/2015/10/29/html5-deep-link-on-amazon-s3/

感觉很脏，但同样值得一试。希望这个答案对您有价值！

【讨论】：

是的，这可能和我们将要得到的一样好。我想对于单页应用程序，您确实需要确保它实际上是单页，就 Google 而言。