AngularJS SEO for 404 Status for a document like this site

Question

I am trying to figure out how to get a 404 document status error for a page not found in my AngularJS application in order 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 they do 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 404 document status status for the source path in the URL ie no-page-here

---

---

In my AngularJS application, I only 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 has, but it still does not give 404 document status errors. (also changing the URL to 404 rather than saving the original URL, which is not very convenient for SEO, but at least the bad URL will not be indexed by Google.)

I thought I could try to make an existing http request in Angular to get 404 xhr status, but I don't think that would be enough.

I read a few answers that suggested using prerender.io, but this is what you have to pay for, which seems a bit simple to get the 404 pages the right job.

Perhaps there is something we can do in our .htaccess to handle 404 pages in different ways? We are currently rewriting the rules so that any requested resource that does not exist will use /index.html. Perhaps we can make an exception because of how 404 pages are processed in Apache.

UPDATE

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

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

Although, I still do not understand how this logic works. I looked in the NotFoundController , but little is going on in it.

Could this be with them using ui.router instead of ngRoute like me?

Second update

This is my .htaccess setting:

 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 does not exist, use index.html RewriteRule ^ / index.html

Answer 1

What makes RedBull Sound Select

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

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

Open DevTools, select "Save Log" on the "Network" tab, open an invalid URL.

• Angular application boots from 200 or 304 (if in cache)
• API call for /api/v1/groups/gherbo2?type=artist
• API responds to 404
• Angular code does window.location.assign("/404"); artist-profile.js: 577

Their Express application, which serves Angular files, knows about valid URL patterns and sends 404 if the URL does not match specific patterns. However, if the URL matches the pattern similar to the above invalid URL, then Angular uses window.location.assign to go to a new page.

What the crawler will look like (GoogleBot)

• Say Google visited the wrong URL
• The first response code it receives is 200
• Now Google may or may not perform JS. A source
• If it runs JS, Angular tries to jump to a new page. (Here I’m not sure how the scanner will react to it)

In general, in my opinion, this is not a good setting for SEO (for users it is good, though). We integrate Self-Host Prerender into our Angular SEO deployment.

Prerender is open source under the MIT license.

We accept this as a service at prerender.io, but we also open it because we believe that basic SEO is a right, not a privilege!

Answer 2

You can achieve 404 document status errors for a page not found in your AngularJS application when you 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); } }; };