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

Question

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

示例 404 URL

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

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

在我的 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 状态，但我认为这还不够。

我读过一些 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

只要您获得 404 xhr 状态，您就可以在 AngularJS 应用程序上实现找不到页面的 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);
        }
    };
};

Answer 2

RedBull Sound Select 在做什么

有效URL：https://www.redbullsoundselect.com/artists/gherbo

无效URL：https://www.redbullsoundselect.com/artists/gherbo2

打开DevTools，select "Preserve log" 在网络选项卡中，打开无效URL。

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

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

爬虫（GoogleBot）将如何表现

假设Google访问了无效的URL
它得到的第一个响应代码是 200
现在Google可能执行也可能不执行JS。 Source
如果它执行 JS，Angular 会尝试将其导航到新页面。（这里不知道爬虫会有什么反应）

总的来说，在我看来，这对于 SEO 来说不是很好的设置（虽然对于用户来说，这很好）。我们正在将 self-hosted Prerender 集成到我们的 Angular SEO 部署中。

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!

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

AngularJS SEO for 404 Status for Document Similar to This Website

seo

angularjs

更新

第二次更新

RedBull Sound Select 在做什么

爬虫（GoogleBot）将如何表现