我目前正在写使用angularjs一个Web应用程序,但我认为这个问题适用于它在客户端路由的任何客户端JavaScript框架( 如角做 )。
在一个单页的应用程序,什么是处理错误的网址,以正确的方式?
纵观几大网站,我看到Gmail会重定向到收件箱中,如果您键入下面的任何随机URL https://mail.google.com/mail/ 。 出现这种情况的服务器端(使用HTTP 300代码)或客户端,这取决于错误的路径是之前或#字符之后。 在另一方面,微博显示任何无效的URL真正的HTTP 404。 第三个选择是显示一个“软”的404,一个纯粹的客户端错误页面。
这些解决方案似乎适用于不同的场合。 Twitter的希望Twitter用户和微博是真正链接的链接,让人们可以分享,在新闻文章张贴等,所以重要的是,无效的链接,确认为这样的(如果我有一个破碎的链接鸣叫中我的网站,一个简单的抓取工具会告诉我)。 在Gmail中,在另一方面,你是不是有望分享链接到您的收件箱,我甚至不知道该链接是真正永久/持久:看来网址更新主要供应中的浏览器历史记录导航的目的单页的应用程序。 给软错误的第三方法可能适用于与Gmail类似的情况,但如果没有合理的“默认”页面。
这漫长的介绍后,这里有一些具体的问题:
- 是否曾经接受给予“软”错误页面,而不是一个404错误,还是应该单页应用始终重定向到一个真正的404 URL是无效的?
- Gmail的代码可能是完全bugfree,但如果它确实有通向该结束了重定向返回到收件箱无效链接错误,这可能是更加令人困惑的用户比一个错误页面。 对于大多数Web应用程序在那里,这是没有很好地测试包括Gmail,会是更好的显示错误页面?
- 为了实现对单页的应用程序真正的404,似乎有必要复制在服务器端的路由逻辑。 有没有办法解决?
- 当重定向到404,我觉得用户应该能够看到导致错误,可能在URL栏中的URL。 随着HTML5历史API,我认为这可以通过简单地触发当前页面的重载(有错误的URL),与上述服务器端的路由相结合来实现。 对于不支持此或使用hashbang符号时,这似乎并不可能的浏览器。 什么是支持所有浏览器的最佳方式?
TL;博士:删除hashbang支持和选择PJAX喜欢的行为,如果你关心搜索引擎优化。
你在做一个应用程序或网站? 如果网站需要返回404
,让你不要混淆谷歌。 它需要成为一个真正的404
不只是显示找不到网页的信息(即200
与消息“找不到网页”很糟糕)。 此外,你关心什么浏览器支持?
我的看法是,整个hashbang服务器端渲染应避免(即谷歌讨厌SEO #!
破解)。 无论是使用真实pushState的或重新渲染,如果URL改变整个页面不支持pushState的(不是哈希变化)的浏览器。
现在,这个重要的原因是, #!
永远不应该返回404
,因为它没有任何意义和它不可能模仿服务器端,因为什么后,服务器永远不会#!
用了运行的JavaScript。
因此,如果你真的关心SEO我会做类似PJAX只有使用真正的pushState的路由,然后只是不旧的Web 1.0。 因此,该链接我建议你分享,可以真正成为一个404
不应该有#!
(传统#
是罚款,只要页面的内容不会发生急剧变化)。
最后, 404
主要是没有问题的,而是30X
即重定向响应。 那是因为浏览器会自动处理重定向使你的Javascript AJAX调用将永远不会看到一个30X
(他们将得到重定向响应,而不是...即200)。 为了处理30X
回应你必须发送一个报头后面的每个请求指示重定向的URL是什么/是(即你重定向什么),这样就不会弄乱pushState的历史。
当然,如果你需要支持hashbang像Twitter使用过( 他们是甚至丧命hashbang的那些 ),您可以利用谷歌站点地图和rel=nofollow
尝试,以减轻不良SEO。
如果你关心SEO,那的途径之一angular.io能够解决这个问题 (反正与谷歌至少)是通过使用noindex元标记 “,以表明软404状态,这将防止爬虫抓取的内容页”。 显然,它可以被添加到通过JavaScript文件。
您的其他选项是SSR(Nuxt.js,Next.js,角通用等)或预渲染(prerender.io,木偶戏等),其谷歌称之为动态渲染 ,您应对搜索机器人请求了预渲染的版本而人类用户得到你的正常客户端渲染应用程序。
文章来源: In a single-page app, what is the right way to deal with wrong URLs (404 errors)?