Google Search Console markeert vaak soft 404-fouten in Next.js-sites, wat het crawlbudget kan verspillen.

Wat een soft 404 eigenlijk is

Een echte 404-respons stuurt een HTTP 404-statuscode, waarmee browsers en bots worden geïnformeerd dat de gevraagde bron niet bestaat. Een soft 404 geeft daarentegen een 200 OK-status terug terwijl er weinig tot geen inhoud wordt geleverd. Zoekmachines lezen de 200 als een gezonde pagina, terwijl de pagina geen waarde biedt. Het resultaat is verspilde crawl-cycli en een signaal aan Google dat de kwaliteit van de inhoud van de site laag is.

Waarom Next.js in de val loopt

De dynamische routing van Next.js stelt je in staat om pagina's zoals /products/[slug] te serveren zonder elke URL hard te coderen. Wanneer een product uit de database verdwijnt, wordt de component nog steeds gerenderd, en als de code niet controleert op ontbrekende gegevens, antwoordt Next.js standaard met 200 OK. Hetzelfde gebeurt wanneer een gebruiker een URL verkeerd typt of wanneer oude routes blijven bestaan na een redesign. De pagina wordt geladen, maar biedt geen betekenisvolle inhoud, wat de soft-404-vlag in Search Console activeert.

De risico's voor site-eigenaren

  • Verspilling van crawlbudget – Bots wijzen een beperkt aantal verzoeken per site toe. Soft 404's verbruiken dit quotum, waardoor er minder kansen zijn voor echte pagina's om te worden geïndexeerd.
  • SEO-straf – Herhaalde soft 404's geven zoekmachines het signaal dat de site van lage kwaliteit is.
  • Schade aan de gebruikerservaring – Bezoekers die op een lege pagina terechtkomen, verlaten de site onmiddellijk, wat het bouncepercentage verhoogt en de conversies schaadt.

Hoe je een soft 404 omzet in een echte 404

1. Gebruik de ingebouwde notFound helper

  • App Router – Importeer notFound uit next/navigation. Roep notFound() aan nadat de gegevens zijn opgehaald als het resultaat ontbreekt. Next.js stuurt dan een echte 404-status.
  • Pages Router – Retourneer { notFound: true } vanuit getStaticProps of getServerSideProps wanneer het ophalen van gegevens mislukt. Dat doet hetzelfde voor de oudere routing-API.

2. Implementeer een aangepaste 404-pagina

De standaard foutpagina laat gebruikers in de steek. Maak app/not-found.js (App Router) of pages/404.js (Pages Router) met navigatielinks, een zoekveld of suggesties voor gerelateerde inhoud. Een goed ontworpen 404 houdt bezoekers op de site in plaats van ze direct naar de uitgang te sturen.

3. Ruim verlaten routes op

Verwijder statische pagina's die geen doel meer dienen. Als een bestand blijft bestaan maar de inhoud leeg is, voeg dan een notFound-respons toe of verwijder het bestand volledig. Regelmatige controles van de pages- of app-directories voorkomen dat dode URL's blijven bestaan.

4. Stel permanente (301) redirects in voor verplaatste inhoud

Wanneer de URL van een pagina verandert, vertelt een 301-redirect browsers en bots dat de bron permanent is verplaatst. Voeg redirects toe in next.config.js onder de redirects-key. Dit voorkomt dat de oude URL een 200-status teruggeeft zonder inhoud.

5. Monitor en reageer op Search Console-meldingen

Controleer Google Search Console regelmatig om soft 404's op te sporen. Gebruik een geautomatiseerde crawler om nieuwe fouten te vinden voordat ze zich opstapelen. Beschouw elke melding als een aanwijzing om de onderliggende data-fetch-logica te controleren.

Conclusie

Een pagina die 200 OK teruggeeft terwijl er geen inhoud wordt geleverd, put stilletjes de SEO-waarde uit. In Next.js maken dynamische routes en ongecontroleerde data-fetches soft 404's gebruikelijk, maar je kunt ze elimineren. Gebruik notFound, bouw een nuttige aangepaste 404, ruim verlaten routes op, configureer 301-redirects en blijf alert in Search Console om het crawlbudget te beschermen, rankings te behouden en bezoekers op de site te houden.