Is it bad for SEO to serve 404 errors for every route in you SPA? Is it okay to serve 200s instead of 404s every time?

Question

I have a Vue SPA that is served from an S3. After deployment, the app is up and running correctly.

Let's say, for instance, that the SPA serves the home page in www.foo.com and another page in www.foo.com/bar. Navigating from the home page to the bar page runs correctly as expected, but if you try to access www.foo.com/bar just copy-pasting its URL to the browser's address bar or even refreshing the page when the browser is serving it, you get an ugly 404 page (with ugly I mean it's not even styled 😮‍💨).

So yes, I have done my research and read the docs, which add the solution to this problem:

Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly. Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

(you see, the Vue Router guys agree with me about the uglyness of the 404 page 🥲)

Great! I just have to answer to all my 404 errors with the index.html file! So that's what I did!

Now, every time I access any page in my app that is not the home page, I get the right page rendered in the browser (yay!), but if I open the network tab in devtools, I get a 404 error before every other request from the page (nay ☹️).

Then, after some more research, I found this tiny little quote about it in this article:

However, it will serve it with a 404 error code, which can confuse browsers and scrapers. We will be setting up a rule that tells CloudFront to always serve 404s with a 200 error code, because we know that all files will either be present, or be served the index.html file (which is a success).

So yeah, I have worked on returning a 200 code for every 404 error with a Cloudflare worker.

"Ma'am, you seem to have the answers for all of your questions then, but you were supposed to ask a question here"

Sorry, I had to make sure you got the context...

But the questions are:

1. is it not safe for SEO to have a 404 error for every page? I wanted a more complete answer than only this quote.
2. And, if so, is it really okay to return a 200 instead of a 404 every time?

Answer 1

If you return a 404 error to search engines they will not index that page even if your custom 404 page has your full application.

Search engines expect to see a mix of 404 and 200 statuses on various URLs on your site. If you return a 200 OK for every URL on your site, search engines won't know which URLs are actual pages and may choose not to index any of it.

The correct solution is to configure your server to serve 200 OK status with your application for all valid URLs and a 404 page with an error message for all other URLs.

I'd recommend hosting your site with something more advanced that S3. If you use a normal web host that uses Apache, Nginx, or IIS, you can implement rewrite rules to return your web app with 200 OK status for all valid URLs.