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.

Leave a Reply

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Instagram