AngularJS SEO for 404 Status for Document Similar to This Website

Question

我正在尝试弄清楚如何为我的 AngularJS 应用程序上未找到的页面获取 404 文档状态错误 以保持良好的 SEO。我想做一些类似于 Red Bull Sound Select 网站 做的事情，但我不确定他们是怎么做的？

示例 404 网址

https://www.redbullsoundselect.com/no-page-here

如您在上面的示例中所见，URL 更改为/404，您会收到 URL 中原始路径的 404 文档状态错误，即 no-page-here

---

---

在我的 AngularJS 应用程序上，我只有:

.otherwise({
    class: 'page-not-found',
    title: '404 Page Not Found',
    description: '404 Page Not Found',
    templateUrl: '/app/static/404.html',
    controller: 'mainController as mainCtrl'
});

我可以使用类似的东西:

otherwise({
    redirectTo: '/404'
});

这与 redbull 站点的类似，但它仍然没有给出 404 文档状态错误。 (也将 URL 更改为 404 而不是保留原始 URL，这对 SEO 也不是很好，但至少 Google 不会将错误的 URL 编入索引。)

我想我可以尝试在 Angular 中发出一个不存在的 http 请求来获得 404 xhr 状态，但我认为这还不够。

我读过一些 answers建议使用 prerender.io，但这是您必须支付的费用，这似乎只是为了让 404 页面正常工作。

或许，我们可以在 .htaccess 中做一些事情来以不同的方式处理 404 页面？目前我们重写了规则，以便任何不存在的请求资源都将使用/index.html。或许我们可以为 Apache 处理 404 页面的方式破例。

更新

我在 redbullsoundselect.com 上发现他们在 app.js 中使用了以下内容

$stateProvider.state("404", {
  url: "/404",
  templateUrl: "/views/site/404.html",
  controller: "NotFoundController"
});

尽管如此，我还是不明白这个逻辑是如何运作的。我查看了他们的 NotFoundController但似乎并没有发生太多事情。

这与他们使用 ui.router 而不是像我一样使用 ngRoute 有什么关系吗？

第二次更新

这是我的 .htaccess 设置:

RewriteEngine On
  # If an existing asset or directory is requested go to it as it is
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]

#如果请求的资源不存在，使用index.html 重写规则 ^/index.html

Answer 1

RedBull Sound Select 在做什么

有效网址:https://www.redbullsoundselect.com/artists/gherbo

无效网址:https://www.redbullsoundselect.com/artists/gherbo2

打开 DevTools，在 Network 选项卡中选择“Preserve log”，打开无效的 URL。

1. Angular 应用加载了 200 或 304(如果在缓存中)
2. 对 /api/v1/groups/gherbo2?type=artist 进行 API 调用
3. API 以 404 响应
4. Angular 代码执行window.location.assign("/404"); artists-profile.js:577

他们提供 Angular 文件的 Express 应用知道有效的 URL 模式，如果 URL 与定义的模式不匹配则发送 404。但是，如果 URL 匹配上述无效 URL 的模式，则 Angular 会使用 window.location.assign 导航到新页面。

抓取工具 (GoogleBot) 的行为如何

1. 假设 Google 访问了无效的 URL
2. 它得到的第一个响应代码是 200
3. 现在 Google 可能执行也可能不执行 JS。 Source
4. 如果它执行 JS，Angular 会尝试将其导航到新页面。 (这里不确定爬虫会如何 react )

总的来说，在我看来，这对于 SEO 来说不是很好的设置(但对于用户来说，这很好)。我们正在将自托管 Prerender 集成到我们用于 SEO 的 Angular 部署中。

Prerender在 MIT 许可下是开源的。

We host this as a service at prerender.io but we also open sourced it because we believe basic SEO is a right, not a privilege!