React Router + AWS 后端，如何做 SEO
React Router + AWS Backend, how to SEO
我在单页 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 thread React Router 的主要贡献者 Michael Jackson 说 "Thankfully hashbang is no longer in widespread use." 你会如何更改我的设置以不使用 hashbang？
当你想做一个 SEO 友好的网站时，不推荐使用 Hash bang，即使它在 Google 中被索引，页面也只会显示很少的内容。
制作您的网站的最佳方式是使用最新的趋势和技术，即 "Progressive web enhancement" 在 Google 上搜索它，您会发现很多关于它的文章。
主要是你应该为每个页面做一个单独的link，当用户点击任何页面时，他将被重定向到使用你想要的任何效果的页面，即使它是单页网站。
在这种情况下，Google 将为每个页面提供唯一的 link，用户将获得精美的效果和出色的用户体验。
EX:
<a href="http://www.example.com/contact-us" onclick="fancyEffects();">Contact Us</a>
你也可以看看这个trick。您需要设置云端分发，然后在分发的 "Error Pages" 部分更改 404 行为。这样你就可以再次域。com/foo/bar链接:)
我知道这已经有几个月了，但是对于遇到同样问题的任何人，您只需将 "index.html" 指定为 S3 中的错误文档即可。错误文档 属性 可以在存储桶属性 => 静态网站托管 => 启用网站托管下找到。
请记住，采用这种方法意味着您将负责处理自己应用程序中的 404 等 Http 错误以及其他 http 错误。
我在单页 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 thread React Router 的主要贡献者 Michael Jackson 说 "Thankfully hashbang is no longer in widespread use." 你会如何更改我的设置以不使用 hashbang？
当你想做一个 SEO 友好的网站时，不推荐使用 Hash bang，即使它在 Google 中被索引，页面也只会显示很少的内容。
制作您的网站的最佳方式是使用最新的趋势和技术，即 "Progressive web enhancement" 在 Google 上搜索它，您会发现很多关于它的文章。
主要是你应该为每个页面做一个单独的link，当用户点击任何页面时，他将被重定向到使用你想要的任何效果的页面，即使它是单页网站。
在这种情况下，Google 将为每个页面提供唯一的 link，用户将获得精美的效果和出色的用户体验。
EX:
<a href="http://www.example.com/contact-us" onclick="fancyEffects();">Contact Us</a>
你也可以看看这个trick。您需要设置云端分发，然后在分发的 "Error Pages" 部分更改 404 行为。这样你就可以再次域。com/foo/bar链接:)
我知道这已经有几个月了，但是对于遇到同样问题的任何人，您只需将 "index.html" 指定为 S3 中的错误文档即可。错误文档 属性 可以在存储桶属性 => 静态网站托管 => 启用网站托管下找到。
请记住，采用这种方法意味着您将负责处理自己应用程序中的 404 等 Http 错误以及其他 http 错误。