反应路由器+ AWS后端,如何搜索引擎优化

Question

我在单页Web应用程序中使用React和React Router.由于我正在进行客户端渲染,因此我想用CDN提供所有静态文件(HTML,CSS,JS).我使用Amazon S3托管文件,使用Amazon CloudFront作为CDN.

当用户请求/css/styles.css时,该文件存在,因此S3为其提供服务.当用户请求/ foo/bar时,这是一个动态URL,因此S3添加了一个hashbang:/#!/ foo/bar.这将服务于index.html.在我的客户端,我删除了hashbang,所以我的网址很漂亮.

这一切都适用于100%的用户.

• 所有静态文件都通过CDN提供
• 动态URL将路由到/#!/ {...},它为index.html(我的单页应用程序)提供服务
• 我的客户端删除了hashbang,因此URL又很漂亮了

问题

问题是Google不会抓取我的网站.原因如下:

• 谷歌要求/
• 他们看到一堆链接,例如/ foo/bar
• Google请求/ foo/bar
• 他们被重定向到/#!/ foo/bar(找到302)
• 他们删除hashbang和请求/

为什么要删除hashbang？我的应用程序适用于100%的用户,所以为什么我需要以这种方式重新设计它才能让Google正确抓取它？这是2016年,只需遵循hashbang ......

</咆哮>

难道我做错了什么？当它无法识别路径时,是否有更好的方法让S3服务于index.html？

设置节点服务器来处理这些路径并不是正确的解决方案,因为这会破坏拥有CDN的整个目的.

在这篇帖子中,反应路由器的最大贡献者迈克尔·杰克逊说:"谢天谢地,hashbang不再广泛使用." 你怎么改变我的设置不使用hashbang？

Answer 1

你也可以查看这个技巧.您需要设置cloudfront分发,然后在分发的"错误页面"部分中更改404行为.这样你可以再次domain.com/foo/bar链接:)

Answer 2

我知道这已经有几个月了，但是对于遇到相同问题的任何人，您可以简单地将“index.html”指定为 S3 中的错误文档。错误文档属性可以在存储桶属性 => 静态网站托管 => 启用网站托管下找到。

请记住，采用这种方法意味着您将负责处理您自己的应用程序中的 404 等 Http 错误以及其他 http 错误。