Страница 404: как настроить и правильно реализовать

Когда пользователь переходит по несуществующему URL, сервер должен вернуть статус 404 Not Found. Но в реальных проектах это правило нарушается на удивление часто: CMS отдаёт 200 OK, редирект ведёт на главную, или страница «404» технически возвращает правильный код, но выглядит как пустой экран. Каждая из этих ситуаций — отдельная проблема для SEO и пользователя.

Правильно настроенная 404-страница решает сразу три задачи: сигнализирует Google о том, что URL не существует; удерживает пользователя на сайте и помогает найти нужный раздел; защищает краулинговый бюджет от впустую потраченных обходов. Разберём каждый аспект по порядку.

Что такое 404-страница

404 Not Found — это HTTP-код ответа, который сервер возвращает, когда запрошенный ресурс не существует. Код означает, что сервер работает нормально, маршрут нашёл, но запрошенный документ отсутствует. Это отличает 404 от 500 (ошибка сервера) и 503 (сервис недоступен).

Страница 404 существует на двух уровнях. HTTP-уровень — это код ответа в заголовке, который видит поисковый робот. Визуальный уровень — это HTML-контент, который видит пользователь. Оба уровня одинаково важны: неправильный HTTP-код — это проблема для SEO, плохой визуал — это проблема для UX.

Главное правило: всегда возвращать HTTP 404

Первое и самое важное правило: страница с сообщением об ошибке должна возвращать HTTP-статус 404 (или 410) — никогда не 200. Это называется «жёсткая 404» (hard 404) в противовес «мягкой 404» (soft 404).

Проверить HTTP-статус любой страницы можно прямо в браузере: F12 → Network → перезагрузить страницу → найти первый запрос → столбец Status. Или через curl в терминале:

# Проверить HTTP-статус страницы
curl -s -o /dev/null -w "%{http_code}" https://example.com/несуществующий-url
# Ожидаемый вывод: 404

# Проверить заголовки ответа целиком
curl -I https://example.com/несуществующий-url

Soft 404 и 410: чем отличаются

Помимо «жёсткой 404» существуют два смежных случая, которые часто путают на практике: soft 404 и статус 410. Понимание разницы между ними важно для грамотной работы с удалёнными страницами.

Google также классифицирует как soft 404 редиректы с 404-URL на главную страницу или на другую нерелевантную страницу. С точки зрения поисковика — пользователь искал A, попал на B, содержимое B не отвечает на запрос. Это снижает качество страницы-цели.

Что должна содержать хорошая 404-страница

Пользователь, попавший на 404, уже испытывает лёгкое разочарование. Задача страницы — смягчить это разочарование и дать человеку следующий шаг. У эффективной 404-страницы есть понятная структура.

zoom_in

Чего не нужно делать на 404-странице: автоматически перенаправлять пользователя на главную через JavaScript (window.location.href = '/'). Такой редирект Google может расценить как soft 404 — пользователь ожидал A, получил B, содержимое нерелевантно. Редиректы с 404-URL должны быть 301 на уровне сервера, если есть реальная замена.

Реализация: Next.js, Nginx, Apache

Способ настройки кастомной 404-страницы зависит от стека. Разберём три наиболее распространённых варианта: Next.js App Router, Nginx и Apache.

Next.js App Router

В Next.js 13+ с App Router кастомная 404-страница создаётся через файл not-found.tsx в папке app/. Для i18n (например, с next-intl) файл помещается в app/[locale]/.

// app/[locale]/not-found.tsx
import Link from 'next/link';

export default function NotFound() {
  return (
    <main style={{ textAlign: 'center', padding: '4rem 1rem' }}>
      <h1>404 — Страница не найдена</h1>
      <p>Возможно, ссылка устарела или адрес введён с ошибкой.</p>
      <Link href="/">Вернуться на главную</Link>
    </main>
  );
}

// Next.js автоматически возвращает HTTP 404 для этого файла.

Для программной генерации 404 (например, в динамическом роуте app/[locale]/blog/[slug]/page.tsx) используйте функцию notFound() из next/navigation. Вызов этой функции немедленно прерывает рендер и возвращает HTTP 404 + рендерит not-found.tsx.

// app/[locale]/blog/[slug]/page.tsx
import { notFound } from 'next/navigation';
import { getArticleDoc } from '@/messages/blog-articles/registry';

export default async function ArticlePage({ params }: { params: { slug: string } }) {
  const article = getArticleDoc(params.slug);

  // Если slug не существует — возвращаем HTTP 404 и рендерим not-found.tsx
  if (!article) {
    notFound();
  }

  return <ArticleRenderer article={article} />;
}

// Pages Router: pages/blog/[slug].tsx (старый подход)
export async function getServerSideProps({ params }) {
  const article = getArticleDoc(params.slug);

  if (!article) {
    // Next.js вернёт HTTP 404 и покажет pages/404.tsx
    return { notFound: true };
  }

  return { props: { article } };
}

Nginx

В Nginx кастомная страница 404 настраивается через директиву error_page внутри блока server. Убедитесь, что файл 404.html существует по указанному пути и что его рендер не выполняет внутреннего редиректа на 200.

server {
    listen 80;
    server_name example.com;
    root /var/www/html;

    # Кастомная страница для 404 ошибки
    error_page 404 /404.html;

    # Локация для самого файла — возвращаем 404, не 200
    location = /404.html {
        internal;
    }

    # Кастомные страницы для других ошибок
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        internal;
    }
}

Apache / .htaccess

Для Apache кастомная 404 настраивается через ErrorDocument — либо в основном конфиге, либо в .htaccess.

# .htaccess в корне сайта

# Кастомная страница 404
ErrorDocument 404 /404.html

# Если используете PHP — можно указать PHP-файл
# ErrorDocument 404 /404.php

# Кастомные страницы для других ошибок
ErrorDocument 403 /403.html
ErrorDocument 500 /500.html

# Включить mod_rewrite для SPA-роутинга
<IfModule mod_rewrite.c>
    RewriteEngine On
    # Для React/Vue SPA: все несуществующие маршруты → index.html
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^ /index.html [L]
</IfModule>

PHP (WordPress и другие CMS)

В WordPress кастомная 404-страница — это файл 404.php в теме. WordPress автоматически возвращает HTTP 404 для несуществующих URL при правильно настроенных permalink. Если CMS отдаёт 200 вместо 404, проблема чаще всего в конфигурации .htaccess или сервера.

<?php
// themes/your-theme/404.php
// WordPress автоматически возвращает HTTP 404
get_header();
?>
<main class="error-404">
    <h1>Страница не найдена</h1>
    <p>Попробуйте воспользоваться поиском:</p>
    <?php get_search_form(); ?>
    <p>Или вернитесь на <a href="<?php echo home_url(); ?>">главную страницу</a>.</p>
</main>
<?php
get_footer();

Поиск и устранение битых ссылок

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

# Поиск топ-20 битых URL в логах Nginx/Apache
grep ' 404 ' /var/log/nginx/access.log \
  | awk '{print $7}' \
  | sort \
  | uniq -c \
  | sort -rn \
  | head -20

# Пример вывода:
# 143 /old-product-page
#  87 /blog/removed-article
#  34 /wp-login.php  (попытки взлома — не критично)

Мониторинг 404-ошибок

Разовый аудит — это хорошо. Но новые 404 появляются постоянно: переименовываются страницы, удаляются товары, внешние сайты ссылаются на несуществующие URL. Важно наладить регулярный мониторинг.

Для больших сайтов (10 000+ страниц) особенно ценны серверные логи: они охватывают 100% запросов, включая ботов, пользователей и скрипты. Search Console показывает только то, что Googlebot нашёл при обходе — а это подмножество реальной картины.

Чеклист правильной 404-страницы

HTTP-статус

• Страница 404 возвращает HTTP-статус 404 (проверено через curl или DevTools)
• Нет soft 404: страница с сообщением об ошибке не возвращает 200 OK
• Нет редиректа с несуществующих URL на главную через JavaScript
• Для массово удалённых страниц без замены используется 410 Gone
• Редиректы 301 настроены только для URL с релевантной страницей-заменой

Контент страницы

• Чёткое, понятное сообщение об ошибке без технического жаргона
• Есть строка поиска или ссылка на поиск по сайту
• Есть ссылка на главную страницу
• Есть ссылки на 2–4 популярных раздела или категории
• Страница оформлена в фирменном стиле сайта (header, footer, шрифты)

Реализация

• Next.js: файл not-found.tsx создан; notFound() вызывается для несуществующих slug
• Nginx: директива error_page 404 настроена; файл 404.html помечен как internal
• Apache: ErrorDocument 404 прописан в .htaccess или основном конфиге
• WordPress: файл 404.php существует в активной теме
• SPA (React/Vue без SSR): метатег noindex добавляется на страницы 404

Мониторинг

• Google Search Console подключён и настроены email-алерты
• Регулярный краулинг через Screaming Frog или аналог (раз в месяц минимум)
• Серверные логи доступны и анализируются для сайтов с высоким трафиком
• Все внутренние ссылки, ведущие на 404, найдены и исправлены

FAQ

Ответы на частые вопросы о настройке 404-страниц, которые возникают при аудитах и разработке.