The well-known 404 page is used to inform the user that a given resource does not exist. In this short post I will look in detail at how it should be implemented correctly.

The 404 page should at the same time serve:

• for search engine robots and SEO – so that the wrong subpage is not indexed in search results,
• users – to give the user a clear message,
• to increase conversion – it is worth spending some time on the 404 page – despite the lack of content that the user expected, we should try to convince him to stay on our site.

Requirements that a 404 page should meet for search engine robots:

• return HTTP status code 404 (not found).

Requirements that a 404 page should meet for users:

• clear and precise information about the fact that the visited page does not exist,
• helping the user to find what he needs.

Requirements that a 404 page should meet to increase conversions:

• included analytics tool to be able to locate incorrect addresses and the source of their visits,
• keeping the user on the site:
  • enabling a search for an expected resource,
  • suggesting content taking into account previously visited subpages, or the suggestion being an attempt to guess the resource on the basis of an incorrect url,
  • showing links to the most popular, recent content.

Solutions possible for SPA type sites:

• redirect to previously prepared static 404 page served by server,
• dynamically attaching the noindex metatag using JS,
• serving a 404 page with noindex metatag to a search engine bot using SSR, and rendering a standard client application to a normal user.

An example of dynamically attaching and removing a noindex metatag in Angular using a Meta service:

this.metaService.addTag({ name: 'googlebot', content: 'noindex' });
this.metaService.addTag({ name: 'robots', content: 'noindex' });

this.metaService.removeTag('name="googlebot"');
this.metaService.removeTag('name="robots"');

Choosing the right implementation depends on the specific project.