使用 SPA 且没有服务器端计算时,如何正确处理 404 HTTP 错误?

How do I correctly deal with 404 HTTP errors when using an SPA and no server-side computation?

我目前正在我的网站项目中使用 Vue.js

returns此Vue.js SPA 的服务器将无法计算或检查,并且只会在浏览器中提供 运行 SPA 所需的静态资源,其中然后将进行所有计算。

出于 SEO 目的,我想确保正确处理错误页面。目前,每个 URL returns 一个 200 OK 并为 SPA 提供服务,这可能会使搜索引擎混淆实际上应该无效的页面。如果我无法更改服务器提供的响应,那么告诉用户和搜索引擎该页面无效的正确方法是什么?

对于上下文,SPA 将从另一个域上的 API 获取数据。

我看过其他类似的问题,但他们通常建议服务器端检查、专用 404 页面重定向或软 404 页面。服务器端检查和专用 404 页面将无法实现,我已通过搜索引擎阅读 soft-404 pages are disliked

有什么好的方法可以解决这个问题吗?

我看过this post,但它很旧,只建议一个无索引标签,这仍然使该页面在搜索引擎眼中有效,只是不可索引。

如果没有任何服务器端 computation/rendering,您不能 return 404 错误,因为 resource/page 未找到这一事实依赖于某些仅被执行的逻辑在您的情况下在客户端。因此,您唯一的选择如下:

  • 如果找不到资源,将用户重定向到预定义的 404 页面(return 是正确的 HTTP 状态)

  • 将您的代理中无效的路径列入黑名单,或将有效的路径列入白名单,并代理到所有其他路径上的 404 页面

  • 使用您的有效 pages/routes

    手动创建站点地图

None 如果您的项目增长或您有动态路由,这些选项中的一个是最佳的,但这些是客户端渲染的限制。因此,我认为您的问题没有很好的答案,因为这是客户端渲染的一个众所周知的限制,也是关心 SEO 的项目更喜欢服务器端渲染的主要原因之一。

从 SEO 的角度来看:只要您将所有有效页面添加到站点地图,并且不要 link(锚标记)到任何其他页面上的无效页面,就没有搜索引擎抓取工具将永远抓取或索引这些页面。

但是如果您真的关心 SEO 并且有一个动态应用程序 hundreds/thousands 的动态 link 无法手动添加到站点地图,我建议您切换到生产Nuxt.js 或 Next.js 之类的框架,因为它们提供了您正在寻找的内容以及开箱即用的许多其他 SEO 功能。