AngularJS SEO Page 404 Header Status Code

2019-04-12 21:20发布

问题:

We are working in a project which uses Symfony2 + AngularJS. Each one in a different domain (api.domain for Symfony2 and www.domain for the Angular project).

Now we are focusing on the SEO part. We use Prerender.io to create static snapshots to serve a good HTML Raw page to crawlers.

But the problem is when serving the "404 Page" on Angular:

$urlRouterProvider
                  .otherwise('/404');

The thing is, what we do is redirecting a nonexistent page to our "404 Page" with a 200 Header Status Code, which is very bad for SEO purposes...

Since AngularJS is not capable of generating, we have already tried 2 things:

1. Use a redirection with htaccess / Apache:

 RedirectMatch 404 "/404"

2. Call to a web service which return us a 404 error:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
  <head>
    <title>404 Not Found</title>
  </head>
  <body>
    <h1>Not Found</h1>
    <p>The requested URL /do-not-access was not found on this server.</p>
  </body>
</html>

And for the AngularJS side we tried to throw the header status code without success:

return $http.get(ENV.apiEndpoint + '/do-not-access');

None of this worked for us...

We also though about using a second "404 Page". The idea was redirecting our first 404 page to this second 404 page via htaccess with a 404 status code, but we think that will not work due to AngularJS internal redirection:

200 -> 301 -> 404

PS: I found: AngularJS html5mode and hard 404 which says "we have to configure our server to make a routing exception for your custom 404 page" but we really have no clue how to do it...

Are we focusing in a bad way?

There is other option?

How we can handle it?

Any ideas?

回答1:

It seems that prerender.io offers a way to handle http header status.

For example, for a 404 page we just need to add this meta tag into our head tag:

<meta name="prerender-status-code" content="404">

Docs: https://prerender.io/documentation/best-practices