在单页面应用中,处理错误网址的正确方法是什么(404错误)？

Question

我目前正在使用angularjs编写一个Web应用程序,但我认为这个问题适用于在客户端进行路由的任何客户端javascript框架(如角度所做).

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

查看几个主要网站,如果您在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服务器端渲染(即讨厌谷歌搜索引擎优化#!黑客).如果不支持pushstate(而不是哈希更改)的浏览器的URL发生更改,请使用真正的pushstate或重新呈现整个页面.

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

因此,如果你真的关心SEO,我会做像PJAX这样的东西,只使用真正的pushstate进行路由,然后只是失败了旧的web 1.0.因此,我建议你分享的链接真的404应该是不应该的#!(#只要页面内容不会发生剧烈变化,传统就很好).

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

当然,如果你需要支持类似Twitter使用的hashbang(他们甚至杀死了hashbang),你可以利用谷歌站点地图和rel=nofollow尝试减轻糟糕的搜索引擎优化.

Answer 2

如果您关心SEO，则angular.io能够解决此问题的方法之一（至少无论如何还是使用Google来说）是通过使用noindex元标记 “来指示404软状态，这将阻止抓取工具抓取内容的页”。显然，可以通过JavaScript将其添加到文档中。

您的其他选项是SSR（Nuxt.js，Next.js，Angular Universal等）或预渲染（prerender.io，puppeteer等），Google称其为动态渲染，您可以在其中使用预渲染的版本来响应搜索机器人的请求而人类用户则可以使用普通的客户端呈现的应用。