React Router + AWS 后端，如何进行 SEO答案

【问题标题】：React Router + AWS Backend, how to SEOReact Router + AWS 后端，如何进行 SEO
【发布时间】：2016-06-10 10:40:45
【问题描述】：

我在我的单页 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，所以我的 URL 很漂亮。

这对我 100% 的用户都非常有效。

所有静态文件都通过 CDN 提供
动态 URL 将被路由到为 index.html（我的单页应用程序）提供服务的 /#!/{...}
我的客户端删除了 hashbang，所以 URL 又漂亮了

问题

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

Google 请求/
他们看到一堆链接，例如到 /foo/bar
Google 请求 /foo/bar
它们被重定向到 /#!/foo/bar（找到 302）
他们删除 hashbang 并请求 /

为什么要删除 hashbang？我的应用程序适用于 100% 的用户，那么为什么我需要重新设计它以让 Google 正确抓取它？ 2016年了，跟着hashbang就行了……

我做错了吗？当 S3 无法识别路径时，是否有更好的方法让 S3 为 index.html 提供服务？

设置节点服务器来处理这些路径并不是正确的解决方案，因为这违背了拥有 CDN 的全部目的。

In this threadMichael Jackson，React Router 的主要贡献者，他说：“谢天谢地，hashbang 不再广泛使用。”您将如何更改我的设置以不使用 hashbang？

【问题讨论】：

标签： amazon-s3 seo amazon-cloudfront react-router

【解决方案1】：

您也可以查看此trick。您需要设置云端分发，然后在分发的“错误页面”部分更改 404 行为。这样你就可以再次 domain.com/foo/bar 链接:)

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

当你想要做SEO友好的网站时，不建议使用Hash bang，即使它在Google中被索引，页面也只会显示很少的内容。

制作您的网站的最佳方式是使用最新的趋势和技术，即“渐进式网络增强”在 Google 上搜索它，您会发现很多关于它的文章。

主要是你应该为每个页面做一个单独的链接，当用户点击任何页面时，他将使用你想要的任何效果重定向到这个页面，甚至是单页网站。

在这种情况下，Google 将为每个页面提供一个唯一的链接，用户将获得精美的效果和出色的用户体验。

前：

<a href="http://www.example.com/contact-us" onclick="fancyEffects();">Contact Us</a>

【讨论】：