Dobrze wszystkim znane strony 404 wykorzystywane są do poinformowania użytkownika, że dany zasób nie istnieje. W tym krótkim poście przyglądnę się szczegółowo, jak powinna wyglądać jej poprawna implementacja.

Strona 404 powinna jednocześnie służyć:

• robotom wyszukiwarek i SEO – aby błędna podstrona nie została zaindeksowana w wynikach wyszukiwania,
• użytkownikom – aby dać użytkownikowi jasny komunikat,
• zwiększeniem konwersji – na stronę 404 warto poświęcić nieco czasu – mimo braku treści której użytkownik się spodziewał powinniśmy postarać się przekonać go do pozostania na naszej stronie.

Wymagania które powinna spełniać strona 404 dla robotów wyszukiwarek:

• zwracać HTTP status code 404 (not found).

Wymagania które powinna spełniać strona 404 dla użytkowników:

• jasna i precyzyjna informacja o tym, że odwiedzona strona nie istnieje,
• pomoc użytkownikowi w odnalezieniu tego, czego potrzebuje.

Wymagania które powinna spełniać strona 404 dla zwiększenia konwersji:

• podpięte narzędzie analityczne, aby móc zlokalizować błędne adresy i źródła ich odwiedzin,
• zatrzymanie użytkownika na stronie:
  • umożliwiając wyszukanie oczekiwanego zasobu,
  • zasugerowanie treści biorąc pod uwagę wcześniej odwiedzone podstrony lub sugestia będąca próbą zgadnięcia zasobu na podstawie błędnego adresu url,
  • pokazanie odnośników do najpopularniejszych, najnowszych treści.

Rozwiązania możliwe do zastosowania w przypadku stron typu SPA:

• przekierowanie na poprzednio przygotowaną statyczną stronę 404 serwowaną przez serwer,
• dynamiczne dołączanie noindex metatag za pomocą JS,
• zaserwowanie botowi wyszukiwarki strony 404 z noindex metatag za pomocą SSR, natomiast zwykłemu użytkownikowi wyrenderowanie standardowej aplikacji klienckiej.

Przykład dynamicznego dołączenia i usunięcia metatagu noindex w Angularze za pomocą serwisu Meta:

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

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

Wybór właściwej implementacji zależy od konkretnego projektu.