Soft 404 Errors in Search Console: How to Fix Them

Soft 404 vs 404 vs 410

Real 404 errors are normal and, according to Google, do not hurt a site's performance in search. What causes trouble is hiding them: fake content, blanket redirects to the home page, or blocking missing URLs in robots.txt.

How to check the real status code

Run this in a terminal with a URL that should not exist on your site:

curl -I https://example.com/this-page-does-not-exist

• Read the first line. It is the status the server sends before any JavaScript runs. A missing page should say 404 or 410, not 200.
• Compare with a real page. If a made-up URL and a real page both return 200, every mistyped link to your site creates a soft 404.
• Look at what Google rendered. In URL Inspection, View crawled page and Test live URL show the HTTP response and the rendered HTML.

Returning a real 404 in JavaScript frameworks

When the server renders the page, set the status there. In SvelteKit, calling error() in a load function sets the response status to 404 and renders the error page:

import { error } from '@sveltejs/kit';

export async function load({ params }) {
	const post = await getPost(params.slug);
	if (!post) error(404, 'Not found');
	return { post };
}

In the Next.js App Router, notFound() renders the not-found page. Called before the response starts streaming, it returns a 404. Once streaming has started, the status stays 200 and Next.js adds a noindex tag instead, so check missing records before any Suspense boundary streams.

import { notFound } from 'next/navigation';

export default async function Page({ params }) {
	const { slug } = await params;
	const post = await getPost(slug);
	if (!post) notFound();
	// ...
}

In Angular with server-side rendering, the not-found component sets the status through the RESPONSE_INIT token. The token is null in the browser and during prerendering, so this works only for routes rendered on the server at request time.

import { Component, inject, RESPONSE_INIT } from '@angular/core';

@Component({ selector: 'app-not-found', template: '<h1>Page not found</h1>' })
export class NotFound {
	constructor() {
		const response = inject(RESPONSE_INIT);
		if (response) response.status = 404;
	}
}

A single-page app with no server rendering cannot change the status code. Google's JavaScript SEO guide gives two alternatives: redirect with JavaScript to a URL that returns a real 404, such as /not-found, or add <meta name="robots" content="noindex"> to the error view.