1

I am currently using Vue.js on a website project of mine.

The server that returns this Vue.js SPA will not be capable of computation or checks, and will only serve the static resources required to run the SPA in the browser, where all computation will then take place.

For SEO purposes, I want to ensure error pages are handled correctly. Currently, every URL returns a 200 OK and serves the SPA which can confuse search engines for pages that are actually supposed to be invalid. What would be the correct way of telling both users and search engines that the page is invalid if I cannot change the response the server provides?

For context, the SPA will get data from an API on another domain.

I have looked at other questions that are similar, but they normally recommend server-side checks, a dedicated 404-page redirect or a soft-404 page. Server-side checks and a dedicated 404 page will not be possible, and I have read that soft-404 pages are disliked by search engines.

Is there any proper way to go about this?

I have seen this post, but it is quite old and only suggests a no-index tag, which still makes the page valid in the eyes of search engines, just not indexable.

Jaffa Cakes
  • 61
  • 5
  • `Server-side checks and a dedicated 404 page will not be possible` - why not? that's where you'll need to decide if a URL is valid or not – Bravo Jul 23 '21 at 07:20
  • 1
    What kind of server is this? Why is it set up like that in the first place? I'd rather fix the root, not the symptoms. –  Jul 23 '21 at 07:21
  • @Bravo yesh, yesh I have, mooltiple ones in faact –  Jul 23 '21 at 07:30
  • @jabaa I would like to host this website via AWS not run any form of server for these static resources. Using services such as S3 buckets and their CDN service. – Jaffa Cakes Jul 23 '21 at 07:30
  • When a search engine requests a URL, it doesn't run any JS code. All SEO-related stuff has to happen on a server level. So the only way I see is to configure AWS. –  Jul 23 '21 at 07:34
  • @ChrisG ^ - I'd like to set it up this way so I don't need to worry about a server for my static resources, for cost savings, for speed and general simplicity on the development side. – Jaffa Cakes Jul 23 '21 at 07:35
  • @ChrisG I will check if this is possible. But any other solutions in the meantime would be appreciated. – Jaffa Cakes Jul 23 '21 at 07:36
  • I've mostly used apache so far, and what you do is use URL rewriting in .htaccess. Something similar must exist for AWS. –  Jul 23 '21 at 07:36
  • This looks promising: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html –  Jul 23 '21 at 07:39
  • @Bravo What is your point exactly? I can't tell what you're asking me. –  Jul 23 '21 at 07:39
  • @ChrisG - sorry, my bad, you made it sound simple "fix the root" - with no further info - I'm keen on knowing how to do the same in a *simple* way - but I've tried Apache, Nginx and even CaddyServer - and there's no simple way to do so - by simple I mean without whitelisting paths etc - sorry if I've confused you – Bravo Jul 23 '21 at 07:57
  • @Bravo Right; I basically meant it's better to focus on the server configuration, as opposed to what sounded like a client-side workaround at best. I never said it's going to be simple ;) –  Jul 23 '21 at 08:04
  • That's good @ChrisG - I thought I was stupid :p – Bravo Jul 23 '21 at 08:27
  • You can have a [server-side middleware that checks the URL](https://github.com/MintPlayer/MintPlayer/blob/master/MP.Web/Startup.cs#L461) ([or also](https://github.com/MintPlayer/MintPlayer/blob/master/MP.Web/Startup.cs#L671))and verify using a regex if the URL exists. Off course this will require you to duplicate your angular routes to the backend. That's something I haven't found a workaround for. – Pieterjan Jul 27 '21 at 11:33

1 Answers1

1

You can't return a 404 error without any server-side computation/rendering, because the fact that the resource/page wasn't found relies on some logic that only gets executed on the client-side in your case. Hence, your only options are the following:

  • If the resource wasn't found, redirect the user to a pre-defined 404 page (that returns the correct HTTP status)

  • Blacklist paths that are invalid inside your proxy, or whitelist those that are valid, and proxy to a 404 page on all other paths

  • Manually create a sitemap with your valid pages/routes

None of these options are optimal if your project grows or you have dynamic routes, but those are the limitations of client-side rendering. Hence I don't think there's a good answer to your question, since this is a well-known limitation of client-side rendering, and one of the main reasons why projects that care about SEO prefer server-side rendering.

From an SEO perspective: As long as you add all your valid pages to a sitemap, and don't link (anchor tag) to the invalid ones on any of your other pages, no search engine crawler will ever crawl or index these pages.

But if you really care about SEO and have a dynamic app with hundreds/thousands of dynamic links that cannot be added to a sitemap manually, I'd advise you to switch to a production framework like Nuxt.js or Next.js because they offer what you're looking for and much other SEO features out of the box.

maxeth
  • 1,315
  • 1
  • 8
  • 17