Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I return a HTTP 404 status code from a SPA?

Tags:

I saw a few questions like this around (like this one), but none of them tackle the problem specifically.

So Google is now supporting SPAs and most web browsers do HTML5 pushState.

My AngularJS (but could be any JS thing) website is using the URL to determine an API route. It then performs the API call and then renders the content accordingly.

However, right now Google tagged this site as "being hacked" since EVERY URL returns an HTTP 200 status code (example.com/get-free-viagra included). Fair, but how do I return a 404? Or at least inform Google that this is a not-found page? They don't seem to be providing that information and I'm seriously worried about SEO.

A few ideas came to my mind:

  • Deprecate my current setup (I'm using AWS S3 to host the static website), and use an expressJS box instead, with a middleware that would perform the API call and return the 404 if needed. However, I don't like the approach since it will harm performance (two API calls per frontend request).
  • Use window.location to redirect to a proper 404 page. However, I'm not sure if Google will follow it and it's already discouraged to change the URL.
  • Use rel="nofollow" on not found pages, but I don't feel this is enough.

I'm now frustratingly leaning towards the first option right now.

like image 643
Mauro Avatar asked May 19 '16 21:05

Mauro


People also ask

How do you handle a 404 spa?

It sounds smart since if there's an error, the end-user will still be redirected to the SPA. But it's not, don't redirect to the main document. Redirect it to a 404 page with the correct 404 code. The 404 document can still be the SPA document but you pass it along with the correct error code.

When should HTTP 404 be returned?

When a user requests a nonexistent URL on your website, you should return an individual error page that lets them know that the requested URL does not exist. You should also make sure that the server returns the correct HTTP status code “404“.

What is the course of the return of 404 HTTP status error?

A 404 error page, also called an Error Document 404, is, first and foremost, a page that informs the user that the requested resource does not exist. For example, if a user follows a link and the target page does not exist anymore, the webserver should show a 404 error page.

How do I get a 404 status code?

404 error codes are generated when a user attempts to access a webpage that does not exist, has been moved, or has a dead or broken link. The 404 error code is one of the most frequent errors a web user encounters. Servers are required to respond to client requests, such as when a user attempts to visit a webpage.


1 Answers

Use window.location to redirect to a proper 404 page. However, I'm not sure if Google will follow it and it's already discouraged to change the URL.

Your assumption is not correct. Google will be very fine if you redirect to a proper 404 page (or a 410). Google will follow it and will be very happy with this information. It wants to know about bogus URLs to make sure these won't be included in their rankings. They will love it !!!

As a reminder, and although it is not the preferred way to perform a redirect, Google accepts and follows pages having a Refresh tag with its delay set to 0, because, in some tricky cases, there is simply no other way to perform a redirect. This is the recommended method for Blogger pages (owned by Google).

Google follows.

like image 96
Jérôme Verstrynge Avatar answered Sep 24 '22 13:09

Jérôme Verstrynge