AngularJS html5mode and hard 404

Question

I have a AngularJS app working with html5mode set to true.

Currently, the app shows a soft 404 page, with the .otherwise setting in the router.

Is there a way I could serve actual 404 HTTP response, for the sake of SEO while using html5mode?

Rollandrollaway

you want to redirect to that page for every 404 response? – Piccadilly

I'd like to get the actual 404 HTTP request when a catch-all is used, for better SEO. I know that html5mode uses History API from the browser and that, by using it, I don't actually make a request to the server. That's where the issue is. – Rollandrollaway

I don't really understand in what cases you want additional handling – Piccadilly

When user is redirected to the 404 page, I want the HTTP request to be 404, instead of the 200 I get now. – Rollandrollaway

Answer 1

If I understand correctly what you want, you have to do the following:

1. hard redirect the browser (bypassing the angular routing) on the otherwise path, with something like this:

   $routeProvider
       .otherwise({
           controller: function () {
               window.location.replace('/404'); // your custom 404 page
                                                // or a non existing page
           }
       });
   

2. if you have a regular single-page-application where all the server request are redirected to the same SPA entry point, you have to configure on your server to make a routing exception for your custom 404 page, which will should also be served with a 404 status.

Otherwise, I can't see how you would do that with just History API, without an external request, because it's whole point in angular routing is to bypass external requests.

If you just want non-existing routes to return 404, then you must configure your server to match all your angular routes, and return 404 otherwise.

Hackle

Answer 2

Seach engines works with SPA applications through prerendered pages, using _escaped_fragment_ . And you can use Prerender.io (or simply PhantomJS) to generate any status codes for search engines, like this https://prerender.io/documentation/best-practices

But this schema is deprecated by Google: http://googlewebmastercentral.blogspot.ru/2015/10/deprecating-our-ajax-crawling-scheme.html At this moment Google tries to understand your JS with usual crawling schema.

Hard redirection to 404.html page is not a good practice: url must stay the same, like https://stackoverflow.com/somepage

You can try Angular2 with server rendering feature: https://docs.google.com/document/d/1q6g9UlmEZDXgrkY88AJZ6MUrUxcnwhBGS0EXbVlYicY/edit

Scrutiny

Answer 3

You have to make your server issue 404s. Angular cannot help in anyway here.

Fritts