Nic*_*ick 4 seo http-status-code-404 vue.js
我不是 VueJS 程序员，但我在一家开发 VueJS 网站的公司工作。
网站有文章。网址是这样的：
http://example.com/here_is_news_from_sofia.htm
但是，如果您输入：
http://example.com/here_is_news_from_blabla.htm
你应该去404页面。
我检查了几个网站和 stackoverflow 问题，它们解释了你应该如何做包罗万象的路由器等，所以最后你得到一个带有“404 Not Found”文本的页面。
但是，在所有情况下，发送到客户端的 HTTP 代码都不是 404，而是 200。
我和我的团队详细阐述了这一点：
当你阅读任何一篇文章时，你会得到这样的信息：
<html>
<body>
<div id="app">
<app />
</div>
<script src="/js/client.js"></script>
</body>
</html>
当然，如果你点击一个链接，这个页面仍然存在，所有内容都是通过 JS 动态加载的。
然后假设没有找到文章。
VueJS 将能够将“404 Not Found”显示为文本，但由于 HTTP 标头已发送（HTML 页面已加载），因此它无法将 404 代码发送到客户端。
出于同样的原因，VueJS 无法向客户端发送 301 代码重定向。
VueJS 可能会错误地将浏览器中的 URL 更改为“http://example.com/404.htm” - 这对于搜索引擎来说不是正确的解决方案，因为这纯粹是客户端（浏览器内）“技巧”。
另一个认为它可以做的是执行奇特的重定向，如下所示Vue-router redirect on page not find (404)：
Vue.component("page-not-found", {
template: "",
created: function() {
// Redirect outside the app using plain old javascript
window.location.href = "/404.htm";
}
}
这将使浏览器从服务器重新加载 /404.htm 页面，如果服务器（Apache / Nginx）配置正确，它将向客户端发送“正确”的 404 代码。
不过，我认为 Google 和 MSN 不会识别http://example.com/here_is_news_from_blabla.htm是 404 页面。
使用客户端路由，很难创建真正的 404 错误。幸运的是，Google 非常擅长检测软 404 错误（当您的应用程序显示状态为 200 的“未找到”文本时）。Google 将软 404 错误视为真正的 404 错误。唯一有帮助的额外事情是<meta name="robots" content="noindex">使用 JavaScript 添加到错误页面。
稍微好一点的解决方法是将您的 Web 服务器配置为提供具有真实 404 状态的页面。然后，您可以让客户端路由在检测到丢失内容时将 URL 更改为该 URL。当与服务器端渲染 (SSR) 结合使用时，即使是无法处理 JavaScript 的爬虫通常也会重定向到 404 页面。服务器端渲染是在服务器上运行 JavaScript 以向不支持 JavaScript 的客户端和所有首页视图显示渲染的 HTML 的过程。请参阅Vue Vue 文档中的 SSR了解如何设置。
参考：Google 在其抓取和索引 SEO 基础知识指南中针对 404 错误的建议
| 归档时间： |
|
| 查看次数： |
998 次 |
| 最近记录： |