AngularJS SEO 用于类似于本网站的文档的 404 状态

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 也不是很好，但至少错误的 URL 不会被 Google 索引。）

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

我读过一些建议使用 prerender.io 的 answers，但这是您必须支付的费用，这似乎有点多只是为了让 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 访问了无效的网址
2. 它得到的第一个响应码是 200
3. 现在 Google 可能会也可能不会执行 JS。 Source
4. 如果它执行 JS，Angular 会尝试将其导航到新页面。 （这里不确定爬虫会如何反应）

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

Prerender 是在 MIT 许可下开源的。

我们将其作为服务托管在 prerender.io，但我们也将其开源，因为我们相信基本的 SEO 是一种权利，而不是特权！

Answer 2

每当您获得 404 xhr 状态时，您都可以在 AngularJS 应用程序上实现 Page Not Found 的 404 文档状态错误。

angular.module('app', ['ui.router'])
       .config(config)
       .run(run);

config.$inject = ['$httpProvider', '$stateProvider', '$urlRouterProvider'];

function config($httpProvider, $stateProvider, $urlRouterProvider) {

    $httpProvider.interceptors.push('404');

    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/login");

    // Now set up the states
    $stateProvider

    // This will be helpfull if in your application you want to redirect it to state '404' based on some false condition occured.
    .state('404', {
       url: '/404',
       templateUrl: '/views/site/404.html'
    })
}

//This peace of code will be called when you will get http response 404 OR 403 xhr status.
angular.module('app').factory('404', unautherizedService);

unautherizedService.$inject = ['$rootScope', '$q', '$state'];

function unautherizedService($rootScope, $q, $state) {
    return {
        responseError: function(response) {
            if (response.status === 404 || response.status === 403) {
                $state.go('404'); // OR you can fire a broadcast event to logout from app and redirect to 404 page.
                event.preventDefault();
                return $q.reject(response);
            }
            return $q.reject(response);
        }
    };
};