Кастомная 404-страница: как настроить и реализовать правильно

Когда пользователь переходит по битой ссылке, сервер должен вернуть статус 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 в терминале:

# Check HTTP status of a page
curl -s -o /dev/null -w "%{http_code}" https://example.com/non-existent-url
# Expected output: 404

# Check full response headers
curl -I https://example.com/non-existent-url

Soft 404 и 410: в чём разница

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

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

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

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

zoom_in

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

Реализация: 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 — Page Not Found</h1>
      <p>The link may be outdated or the address was mistyped.</p>
      <Link href="/">Back to homepage</Link>
    </main>
  );
}

// Next.js automatically returns HTTP 404 for this file.

Для программной генерации 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);

  // If slug does not exist — return HTTP 404 and render not-found.tsx
  if (!article) {
    notFound();
  }

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

// Pages Router: pages/blog/[slug].tsx (legacy approach)
export async function getServerSideProps({ params }) {
  const article = getArticleDoc(params.slug);

  if (!article) {
    // Next.js will return HTTP 404 and show 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;

    # Custom page for 404 errors
    error_page 404 /404.html;

    # The location for the file itself — returns 404, not 200
    location = /404.html {
        internal;
    }

    # Custom pages for other errors
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        internal;
    }
}

Apache / .htaccess

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

# .htaccess in the site root

# Custom 404 page
ErrorDocument 404 /404.html

# You can also point to a PHP file
# ErrorDocument 404 /404.php

# Custom pages for other errors
ErrorDocument 403 /403.html
ErrorDocument 500 /500.html

# Enable mod_rewrite for SPA routing
<IfModule mod_rewrite.c>
    RewriteEngine On
    # For React/Vue SPA: all non-existent routes → 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 automatically returns HTTP 404
get_header();
?>
<main class="error-404">
    <h1>Page Not Found</h1>
    <p>Try using search:</p>
    <?php get_search_form(); ?>
    <p>Or return to the <a href="<?php echo home_url(); ?>">homepage</a>.</p>
</main>
<?php
get_footer();

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

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

# Find top-20 broken URLs in Nginx/Apache logs
grep ' 404 ' /var/log/nginx/access.log \
  | awk '{print $7}' \
  | sort \
  | uniq -c \
  | sort -rn \
  | head -20

# Example output:
# 143 /old-product-page
#  87 /blog/removed-article
#  34 /wp-login.php  (attack attempts — not critical)

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

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

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

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

HTTP-статус

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

Содержимое страницы

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

Реализация

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

Мониторинг

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

FAQ

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