Question 22405 in SEO Question posted in
Some basic information to get you started with this can be found here.

VueJS real SEO friendly 404 page for search engines like Google / MSN

I am not VueJS programmer, but I work with in a company where we developing a VueJS website.

The website have articles. The URL is something like this:

http://example.com/here_is_news_from_sofia.htm

However if you type:

http://example.com/here_is_news_from_blabla.htm

You should go to 404 page.

I inspected several websites and stackoverflow questions, they explain how you should do catch-all router etc, so finally you get a page with "404 Not Found" text on it.

However, in ALL cases, the HTTP code send to the client is not 404, but 200.

With my team, I elaborated this:

When you go to any article, you get something like this:

<html>
    <body>
        <div id="app">
            <app />
        </div>
        <script src="/js/client.js"></script>
    </body>
</html>

Of course, if you click on a link, this page remains and everything is loaded via JS dynamically.

Then lets suppose article is not found.

VueJS will be able to show "404 Not Found" as text, but because HTTP headers are already send (HTML page is already loaded), it will not be able to send 404 code to the client.

For the same reason, VueJS can not send 301 code redirect to the client.

VueJS can incorrectly change the URL in the browser to "http://example.com/404.htm" – this is NOT a correct solution for search engines, since this is purely client-side (in-browser) "trick".

The other think it can do is to execute fancy redirect, as shown here Vue-router redirect on page not found (404) :

Vue.component("page-not-found", {
    template: "",
    created: function() {
        // Redirect outside the app using plain old javascript
        window.location.href = "/404.htm";
    }
}

This will make the browser to reload the /404.htm page from the server and if the server (Apache / Nginx) is configured correctly, it will send "correct" 404 code to the client.

However I don’t think Google and MSN will recognize that http://example.com/here_is_news_from_blabla.htm is a 404 page.

Am I missing anything?

  • Is there another way VueJS might handle this situation?
  • How VueJS websites gets indexed from search engines like Google and MSN?
  • Off topic bonus question – can VueJS generate visible HTML code that contains the article?
Tags:

2

Answers


  1. 0

    If that’s a single page application, you can set up dynamic route matching with parameters with vue-router. And dynamically update your meta tags with javascript. I am using quasar vue framework, which handles all of this SEO feature.

    I added slug data to the article saved in the database and use it as a route parameter.

    https://quasar.dev/vue-composables/use-meta

    https://router.vuejs.org/guide/essentials/dynamic-matching.html

    You can use quasar vue framework, develop vue app in SSR mode and deploy it to the server.

    https://quasar.dev/quasar-cli-vite/developing-ssr/handling-404-and-500-errors

    Login or Signup to reply.
  2. 0

    With client side routing, real 404 errors are hard to create. Luckily, Google is very good at detecting soft 404 errors (when your application shows "not found" text with a 200 status.) Google treats soft 404 errors just like real 404 errors. The only additional thing that would help there is adding <meta name="robots" content="noindex"> to error pages using JavaScript.

    A slightly better workaround is to configure your web server to serve one page with a real 404 status. Then you can have your client side routing change the URL to that any time it detects missing content. When used in conjunction with server side rendering (SSR), even crawlers that can’t process JavaScript will usually end up getting redirects to a 404 page. Server side rendering is the process of running JavaScript on the server to show rendered HTML to non-JavaScript-capable clients and all first page views. See SSR in Vue Vue’s documentation on how to set that up.

    Reference: Google’s recommendation for 404 errors in their crawling and indexing SEO basics guide

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search