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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Instagram