Question

我正在尝试弄清楚如何在我的AngularJS App上找到 404文档状态错误以保持良好的搜索引擎优化。我想做一些类似 Red Bull Sound Select网站的做法，但我不确定他们是怎么做的？

示例404网址

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

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

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

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

我可以使用类似的东西：

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

这类似于redbull网站的内容，但它仍然没有给出404文档状态错误。（也将URL更改为404而不是维护原始URL，这对SEO来说也不是很好，但至少谷歌不会将错误的URL编入索引。）

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

我已经阅读了一些建议使用prerender.io的answers，但这是你需要付出的代价，这似乎只是为了让404页面正常工作。

也许，我们可以在.htaccess中做一些事情，以便不同地处理404页面？目前我们已经重写规则，以便任何不存在的请求资源都使用/index.html。也许我们可以对Apache中如何处理404页面做出例外。

更新

我在redbullsoundselect.com上发现他们在app.js

中使用了以下内容

ui.router

虽然，我仍然不明白这个逻辑是如何运作的。我看着他们的NotFoundController，但似乎没有发生在其中。

使用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]设置：

{{1}}

＃如果请求的资源不存在，请使用index.html RewriteRule ^ /index.html

Answer 1

RedBull Sound Select正在做什么

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

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

打开DevTools，在“网络”选项卡中选择“保留日志”，打开无效的URL。

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

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

抓取工具（GoogleBot）的行为方式

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

总的来说，在我看来这对SEO来说并不是一个好的设置（对于用户而言，这是好的）。我们正在将自托管的Prerender集成到我们的Angular部署中。

Prerender是麻省理工学院许可下的开源。

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

Answer 2

只要您获得404 xhr状态，就可以在AngularJS App上找到“找不到页面”的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);
        }
    };
};

AngularJS SEO for 404 Status for Document与本网站类似

更新

第二次更新

2 个答案:

RedBull Sound Select正在做什么

抓取工具（GoogleBot）的行为方式