在单页面应用中，处理错误网址的正确方法是什么（404错误）？

Question

我目前正在使用angularjs编写一个Web应用程序，但我认为这个问题适用于在客户端进行路由的任何客户端javascript框架（as angular does）。

在单页应用中，处理错误网址的正确方法是什么？

查看几个主要网站，如果您在https://mail.google.com/mail/下方输入任意随机网址，我会看到gmail会重定向到收件箱。这发生在服务器端（使用http 300代码）或客户端，具体取决于错误路径是在＃字符之前还是之后。另一方面，twitter显示任何无效URL的真实HTTP 404。第三种选择是显示“软”404，纯粹的客户端错误页面。

这些解决方案似乎适合不同的情况。 Twitter希望Twitter用户和推文的链接是真正的链接，因此人们可以分享它们，在新闻文章中发布它们等，因此无效链接被识别是非常重要的（如果我的推文链接断开了）我的网站，一个简单的爬行会告诉我）。另一方面，在gmail中，您不应该将链接分享到您的收件箱中，我甚至不确定链接是否真的是永久性/持久性的：似乎网址更新主要用于浏览器历史记录导航的目的。单页应用。给出软错误的第三种方法可能适用于类似于gmail的情况，但是没有合理的“默认”页面。

经过这么长时间的介绍，以下是一些具体问题：

• 提供“软”错误页面而不是404错误是否可以接受，或者如果网址无效，单页应用是否应始终重定向到真实404？
• Gmail的代码可能完全没有错误，但如果确实有错误导致无效的链接最终重定向回收件箱，那么对于用户而言可能比错误页面更加混乱。对于大多数网络应用程序而言，它们没有像gmail那样经过良好测试，是否最好显示错误页面？
• 要为单页应用程序实现真正的404，似乎有必要在服务器端复制路由逻辑。有没有办法解决这个问题？
• 当重定向到404时，我认为用户应该能够在URL栏中看到导致错误的URL。使用html5历史API，我认为这可以通过简单地触发当前页面的重新加载（使用错误的URL），结合上面提到的服务器端路由来实现。对于不支持此功能或使用hashbang表示法的浏览器，这似乎不可行。什么是支持所有浏览器的最佳方式？

Answer 1

tl; dr：如果您关心SEO，请删除hashbang支持并选择PJAX之类的行为。

您正在制作应用程序或网站吗？如果网站需要返回404，以免您混淆谷歌。它需要是真实的404，而不仅仅是显示未找到页面的消息（即200消息“找不到页面”非常糟糕）。您还关心哪些浏览器支持？

我的观点是应该避免整个hashbang服务器端渲染（即讨厌的Google SEO #! hack）。如果不支持pushstate的浏览器（而不是哈希更改）的URL发生更改，请使用真正的pushstate或重新呈现整个页面。

现在重要的原因是#!永远不应该返回404因为它没有意义并且模仿服务器端是不可能的，因为服务器永远不会在{{1}之后得到什么没有运行Javascript。

因此，如果你真的关心SEO，我会做像PJAX这样的事情，只使用真正的pushstate进行路由，然后就不能使用旧的web 1.0。因此，我建议您分享的链接可以真正是#!，404不应该{传统#!，只要页面内容不会发生剧烈变化）。

最后，#主要不是问题，而是404即重定向响应。多数民众赞成因为浏览器会自动处理重定向，所以你的Javascript AJAX调用永远不会看到30X（他们将获得重定向响应......即200）。要处理30X响应，您必须为每个请求发回一个标头，以指示重定向的URL是什么（即您重定向到的内容），这样您就不会搞砸Pushstate历史记录。

当然，如果您需要支持像Twitter一样使用的hashbang（and they are the ones that even killed hashbang），您可以利用Google Sitemaps和rel=nofollow来尝试减少糟糕的搜索引擎优化。

Answer 2

如果您关心SEO，则angular.io was able to solve this problem（至少还是与Google无关）的一种方式是使用noindex meta tag“指示soft-404状态，这将阻止爬虫对内容进行爬网。这页纸”。显然，可以通过JavaScript将其添加到文档中。

您的其他选项是SSR（Nuxt.js，Next.js，Angular Universal等）或Google调用dynamic rendering的预渲染（prerender.io，puppeteer等），您可以在其中响应搜索机器人的请求带有预渲染版本，而人类用户则可以使用您的常规客户端渲染应用。