AngularJS SEO for 404 Status for Document Similar to This Website

Question

I'm trying to figure out how to get 404 document status error for Page Not Found on my AngularJS App to maintain good SEO. I would like to do something similar to how the Red Bull Sound Select website does it, but I'm not sure how are they doing it?

example 404 URL

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

As you can see in the above example, the URL changes to /404 and you get a 404 document status error for the original path in the URL i.e no-page-here

---

---

On my AngularJS app I just have:

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

I could use something like:

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

This is similar to what the redbull site have but it still doesn't give the 404 document status error. ( also changing the URL to 404 rather than maintaining the original URL, which isn't great for SEO either but at least the bad URL would not be indexed by Google.)

I thought I could try making a non existing http request in Angular to get a 404 xhr status but I don't think this would be enough.

I've read some answers that suggested using prerender.io but this is something you have to pay for, which seems a bit much just to get a 404 page working correctly.

Perhaps, there is something we can do in our .htaccess to handle 404 pages diferently? At the moment we have rewrite rules so that any requested resource which does not exist will use /index.html. Perhaps we can make an exception for how 404 pages are handled in Apache.

UPDATE

I found on the redbullsoundselect.com that they are using the following in their app.js

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

Although, I still don't understand how this logic is working. I looked in their NotFoundController but not much seems to be happening in it.

Could it have something to do with them using ui.router instead of ngRoute as I am?

2nd Update

This is my .htaccess setup:

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]

# If the requested resource doesn't exist, use index.html RewriteRule ^ /index.html

Answer 1

What RedBull Sound Select is doing

Valid URL: https://www.redbullsoundselect.com/artists/gherbo

Invalid URL: https://www.redbullsoundselect.com/artists/gherbo2

Open DevTools, select "Preserve log" in Network tab, open invalid URL.

1. Angular app is loaded with 200 or 304 (if in cache)
2. API call is made to /api/v1/groups/gherbo2?type=artist
3. API responds with 404
4. Angular code executes window.location.assign("/404"); artists-profile.js:577

Their Express app which serves Angular files knows about valid URL patterns and send 404 if URL doesn't match defined patterns. However, if URL matches a pattern like above invalid URL then Angular uses window.location.assign to navigate to new page.

How will crawler (GoogleBot) behave

1. Let's say Google visits the invalid URL
2. First response code it gets is 200
3. Now Google may or may not execute JS. Source
4. If it executes JS, Angular tries to navigate it to new page. (Here not sure how crawler will react to it)

Overall, in my opinion this is not good setup for SEO (For users, it is good though). We are integrating self-hosted Prerender in our Angular deployment for SEO.

Prerender is open source under MIT license.

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!

Answer 2

You can achieve 404 document status error for Page Not Found on your AngularJS App whenever you will get 404 xhr status.

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);
        }
    };
};