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?