Как сделать свою страницу 404 — и не получить «мягкую 404» от Google

Красивая страница «Ничего не нашлось» может навредить сайту. Звучит странно — смотри.

Когда адреса нет, сервер должен ответить кодом 404. Браузеру всё равно: он просто покажет страницу. А Google смотрит на код. Если на странице написано «не найдено», а сервер ответил 200 — «всё в порядке», Google называет это мягкой 404 (soft 404) и показывает её в Search Console как проблему.

В одностраничных приложениях на React так выходит по умолчанию. Поэтому сделаем свою страницу 404 по шагам — и сразу проверим, что код правильный. Что вообще значат эти числа, мы разбирали в статье что такое коды ответа HTTP.

Шаг 1. Реши, что будет на странице

Хорошая страница 404 отвечает на два вопроса: что случилось и куда теперь.

• Простыми словами и без упрёков. «Такой страницы нет. Возможно, её переместили или в адресе опечатка».
• Дорога дальше. Ссылка на главную, два-три главных раздела, поиск, если он есть.
• Дизайн сайта. Шапка и меню остаются на месте. Человек должен видеть, что он всё ещё у тебя.

Google в своих советах добавляет ещё один пункт: дай человеку способ сообщить о битой ссылке. Хватит строчки «Нашли битую ссылку? Напишите нам» со ссылкой на почту или форму. Так ты узнаешь о сломанных адресах раньше, чем они начнут терять посетителей.

Никаких автоматических перекидываний через пять секунд: человек не успеет понять, что произошло.

Шаг 2. Статический сайт: файл 404.html

Если сайт — это готовые HTML-файлы, всё решает один файл.

1. Создай 404.html в корне папки, которая уходит на хостинг.
2. Netlify подхватит его сам. В документации так и сказано: если на сайте есть 404.html, он покажется на любой адрес, для которого нет файла. Правила редиректов для этого не нужны.
3. GitHub Pages — то же самое: 404.html в корне. Если пишешь в Markdown, назови файл 404.md и добавь в начало permalink: /404.html.
4. Свой сервер на nginx — одна строка в конфиге сайта:

error_page 404 /404.html;

Код ответа при этом остаётся 404, а человек видит твою страницу. Если ты ещё выбираешь, где разместить сайт, есть сравнение Vercel или Netlify.

Шаг 3. Next.js: файл not-found

В Next.js с App Router страница 404 — это файл app/not-found.tsx:

import Link from 'next/link';

export default function NotFound() {
  return (
    <main>
      <h1>Такой страницы нет</h1>
      <p>Возможно, её переместили или в адресе опечатка.</p>
      <Link href="/">На главную</Link>
    </main>
  );
}

Неизвестные адреса попадут сюда сами. Но бывает второй случай: адрес выглядит правильным, а данных нет. Например, /blog/kak-nachat, хотя такой статьи в базе нет. Тогда вызови notFound():

import { notFound } from 'next/navigation';

export default async function Post({ params }) {
  const { slug } = await params;
  const post = await getPost(slug);
  if (!post) notFound();
  return <article>{post.title}</article>;
}

На такую страницу Next.js сам добавит noindex. И одна тонкость из документации: вызывай notFound() до первого <Suspense>. Если страница уже начала отдаваться по частям, код ответа останется 200 — сработает только noindex.

Шаг 4. SPA на React или Vite: маршрут «*»

В одностраничном приложении сервер на любой адрес отдаёт один и тот же index.html с кодом 200. Адрес разбирает уже роутер в браузере. Добавь в конец маршрутов «ловушку» для всего неизвестного:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="*" element={<NotFound />} />
</Routes>

Человек увидит твою страницу. Но сервер-то уже ответил 200 — это и есть мягкая 404. Google в своей документации предлагает два выхода:

1. Перенаправить скриптом на адрес, для которого сервер честно отвечает 404, например /not-found.
2. Добавить noindex из кода страницы, чтобы Google её не индексировал:

const meta = document.createElement('meta');
meta.name = 'robots';
meta.content = 'noindex';
document.head.appendChild(meta);

Второй способ проще: запусти этот код, когда компонент NotFound появляется на экране.

Шаг 5. Проверь код ответа

Открой терминал и запроси адрес, которого точно нет:

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

В первой строке ответа должно быть 404. Без терминала — DevTools, вкладка Network: обнови страницу и посмотри колонку Status у самого первого запроса.

Для SPA проверь ещё вкладку Elements: в <head> страницы 404 должен появиться <meta name="robots" content="noindex">.

Когда сайт уже в поиске, загляни в Search Console, в отчёт об индексировании страниц. Там есть отдельный статус для soft 404. Живут в нём твои адреса — вернись к шагам 3 и 4. А если сайт вообще не появляется в поиске, начни со статьи почему сайта нет в Google.

Что получится

Любой несуществующий адрес открывает твою страницу: в дизайне сайта, с понятным текстом и ссылками дальше. Человек не упирается в серую заглушку хостинга и не закрывает вкладку.

А сервер — или noindex в SPA — честно сообщает Google, что такой страницы нет. Мусорные адреса с опечатками не попадают в поиск.

Нужен ли noindex, если сервер уже отвечает 404?

Нет. Страницы с кодом 404 Google и так не добавляет в поиск. noindex нужен там, где честный код отдать нельзя, — в одностраничных приложениях.

Я положил 404.html на Netlify, но он не показывается. Почему?

Скорее всего, у тебя SPA с правилом /* /index.html 200. С ним для любого адреса находится файл — index.html, и до 404.html дело не доходит. Страницу «не найдено» тогда рисует роутер, как в шаге 4.

Страницу переименовали. Старый адрес тоже должен отдавать 404?

Нет. Если содержимое переехало на новый адрес, Google советует постоянный редирект — код 301. Человек и поиск попадут сразу на новую страницу. 404 оставь для того, чего больше нет совсем.