Страница 404 на сайте: как сделать на HTML + примеры дизайна

Любой пользователь рано или поздно попадёт на несуществующую страницу вашего сайта — опечатался в URL, кликнул по битой ссылке из поисковика, перешёл по старой закладке. Что он увидит — стандартную страшную страницу сервера или вашу собственную с удержанием? Кастомная страница 404 — небольшая, но важная деталь, которая возвращает пользователя на сайт вместо потери. В этой статье — как сделать и подключить страницу 404 для HTML-сайта, какой дизайн работает, какой нет, и как настроить её на разных хостингах.

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

404 (Not Found) — HTTP-код ошибки, который сервер возвращает, когда запрошенный URL не найден. Браузер показывает страницу-ответ от сервера.

По умолчанию веб-сервер показывает стандартную системную страницу:

На Apache — белый фон, чёрный текст «Not Found. The requested URL was not found on this server.»
На Nginx — «404 Not Found. nginx/1.x.x»
На многих хостингах — заглушка хостинг-провайдера с его рекламой.

Все эти варианты ужасны — пользователь видит непонятный технический текст, не понимает, куда идти, закрывает вкладку.

Кастомная страница 404 заменяет эти системные сообщения вашей собственной страницей в фирменном стиле.

Зачем кастомная страница 404

Удержание посетителя. Вместо ухода — возврат на главную или поиск по сайту.
Брендинг. Страница в стиле сайта — пользователь не теряется.
Юмор/эмоция. Хорошо сделанная 404 запоминается и обсуждается в соцсетях.
SEO. Поисковики ценят корректные кастомные 404, без них могут считать страницы «soft 404» — это плохо для ранжирования.
Аналитика. Видите, на какие битые ссылки попадают люди — можно починить.

Что должно быть на странице 404

Чёткое сообщение об ошибке. «Страница не найдена» крупно. Без технического жаргона.
Логотип / шапка сайта. Пользователь должен понять, что он не покинул сайт.
Объяснение. «Возможно, страница удалена или вы перешли по неправильной ссылке».
Кнопка возврата на главную. Главное действие.
Дополнительные ссылки. На популярные разделы: услуги, контакты, блог.
Поле поиска (если есть поиск по сайту).
Контакты для связи. Если ничего не нашёл — телефон, email, Telegram.
Иллюстрация. Картинка, GIF, мини-игра — что-то отвлекающее.

Готовый код страницы 404

Минимальный, но полностью рабочий вариант:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>404 — Страница не найдена | Ваш сайт</title>
  <meta name="robots" content="noindex">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f7f7fa;
      color: #333;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      text-align: center;
    }
    .error-code {
      font-size: 8rem;
      font-weight: 800;
      color: #4a5cf5;
      line-height: 1;
      margin-bottom: 1rem;
    }
    h1 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    p {
      font-size: 1.1rem;
      color: #666;
      margin-bottom: 2rem;
      max-width: 500px;
    }
    .btn {
      display: inline-block;
      padding: 1rem 2rem;
      background: #4a5cf5;
      color: white;
      text-decoration: none;
      border-radius: 8px;
      font-weight: 600;
      transition: background 0.2s;
    }
    .btn:hover { background: #3a4cd5; }
    .links {
      margin-top: 2rem;
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      justify-content: center;
    }
    .links a {
      color: #4a5cf5;
      text-decoration: none;
      font-size: 0.95rem;
    }
    .links a:hover { text-decoration: underline; }
  </style>
</head>
<body>
  <div class="error-code">404</div>
  <h1>Страница не найдена</h1>
  <p>Возможно, страница была удалена или вы перешли по неправильной ссылке. Попробуйте начать с главной.</p>
  <a href="/" class="btn">На главную</a>
  <div class="links">
    <a href="/services.html">Услуги</a>
    <a href="/prices.html">Цены</a>
    <a href="/contacts.html">Контакты</a>
  </div>
</body>
</html>

Сохраняете как 404.html и загружаете в корень сайта.

Настройка на Apache (.htaccess)

Большинство виртуальных хостингов в РФ работают на Apache. В корне сайта рядом с index.html создаёте или редактируете файл .htaccess и добавляете строку:

ErrorDocument 404 /404.html

После загрузки файла на сервер при попытке открыть несуществующую страницу автоматически покажется ваш 404.html.

Дополнительно можно настроить и другие ошибки:

ErrorDocument 400 /error.html
ErrorDocument 401 /error.html
ErrorDocument 403 /error.html
ErrorDocument 404 /404.html
ErrorDocument 500 /error.html
ErrorDocument 502 /error.html
ErrorDocument 503 /error.html

Настройка на Nginx

Если хостинг на Nginx и есть доступ к конфигурации (обычно у VPS, а не у виртуального хостинга):

server {
    error_page 404 /404.html;

    location = /404.html {
        internal;
    }
}

На обычном виртуальном хостинге к Nginx-конфигу у вас доступа нет — настраивайте через панель управления хостинга.

Настройка через панель хостинга

cPanel

Личный кабинет → Расширенные настройки → Страницы ошибок.
Выберите код ошибки 404.
Вставьте HTML вашей страницы.
Сохраните.

ISPmanager

Сайты → нужный сайт → Перенаправления.
Добавить страницу ошибки 404.
Указать путь к файлу: /404.html.

Плеск (Plesk)

Сайты и домены → нужный сайт → Apache & nginx Settings.
Custom error documents → включить.
Указать /404.html для кода 404.

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

В Beget, Timeweb, Reg.ru и аналогах настройка обычно делается через файловый менеджер: создаётся .htaccess и редактируется через встроенный редактор. Раздел «Страницы ошибок» бывает не везде — проще через .htaccess.

Для SPA-приложений

Если у вас одностраничное приложение (React, Vue, Angular) с маршрутизацией на клиенте, любые URL должны вести на index.html, чтобы React Router обработал маршрут:

# .htaccess для SPA
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

А страницу 404 показываете внутри приложения на JavaScript-уровне (компонент NotFound).

Примеры хорошего дизайна

Минимализм

Большая цифра 404, короткий текст, одна кнопка возврата. Работает почти всегда.

Страница 404 - минимализм

Юмор

«Эта страница ушла в самоволку», «Здесь живут динозавры», иллюстрации с потерянным котиком. Привлекает внимание, запоминается. Подходит для творческих ниш.

Страница 404 - юмор

Интерактив

Мини-игра прямо на странице (типа google-овского динозавра в Chrome при отсутствии интернета). Удерживает на сайте, превращает раздражение в удовольствие.

Страница 404 - игра

Поиск

Большое поле «Найти что вы искали» — пользователь сразу пробует найти нужную страницу. Подходит для крупных сайтов с поиском.

Страница 404 - поиск

Карта сайта

Список основных разделов прямо на странице 404. Полезно для маленьких сайтов из 5–10 страниц.

Страница 404 - карта сайта

Чего избегать

Технического жаргона. «Error 404: The requested URL was not found on this server» — мусор. Пишите по-человечески.
Автопереадресации на главную. Пользователь не успевает понять, что произошло, теряется в навигации.
Слишком много ссылок. 30 кнопок в подвале — паралич выбора.
Тяжёлых картинок и анимаций. 404-страница должна грузиться мгновенно.
Кода 200 вместо 404. Иногда страница «не найдена» возвращает код 200 — для поисковиков это «soft 404», плохо для SEO. Проверьте в DevTools → Network → код ответа.
Закрытия от индексации только частично. Добавьте <meta name="robots" content="noindex"> на страницу 404 — она не должна быть в индексе.
Отсутствия мобильной адаптации. 60–80% трафика мобильный — страница должна нормально открываться на телефоне.

Отслеживание 404-ошибок

Знать, какие URL ведут на 404 — полезно: можно починить битые ссылки, настроить редиректы, понять, что ищут пользователи.

Через Яндекс.Метрику

На странице 404 в JS добавьте отправку события:

ym(СЧЁТЧИК, 'reachGoal', 'page_404', {url: document.location.href});

Создайте цель «404 ошибка» в Метрике и смотрите, какие URL вызывают её.

Через логи сервера

В лог-файле error.log или access.log ищутся записи с кодом 404. Доступны через панель хостинга или SSH.

Через Google Search Console

Если сайт зарегистрирован в Search Console, раздел «Покрытие» показывает, на какие 404-страницы заходил бот Google.

FAQ

Можно ли просто перенаправлять с 404 на главную?

Технически можно (301 редирект из .htaccess), но это плохая практика. Пользователь не понимает, почему оказался на главной. SEO тоже не любит — лучше явная 404 с предложением альтернатив.

Должна ли страница 404 возвращать код 404?

Обязательно. Если возвращается 200 — это «soft 404», поисковики продолжают индексировать пустые URL. Через .htaccess с ErrorDocument код 404 возвращается автоматически. Проверьте в DevTools.

Как сделать страницу 404 для каждого языка сайта?

Создаёте несколько файлов: 404-ru.html, 404-en.html. В .htaccess настраиваете условия выбора по языку браузера или поддомену. Или одну страницу с переключателем языков на ней.

Что лучше: своя 404 или от хостинга?

Однозначно своя. Заглушки хостингов обычно с их рекламой и не в стиле вашего сайта — пользователю кажется, что он ушёл с сайта.

Как проверить, что 404 работает?

Откройте в браузере несуществующий URL: yourdomain.ru/asdfasdf-test-404. Должна показаться ваша страница. В DevTools → Network → должна быть запись с кодом 404.

Можно ли добавить форму обратной связи на страницу 404?

Можно: «Не нашли что искали? Напишите нам, поможем». Хорошо работает для нишевых сайтов услуг — превращает потерянного посетителя в заявку.

Влияет ли страница 404 на SEO?

Сама по себе — нет, если корректно возвращает код 404. Если ошибочно возвращает 200 — да, поисковики индексируют дубли. Закройте страницу 404 от индексации мета-тегом noindex.

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

☐ Создан файл 404.html в корне сайта
☐ В .htaccess добавлено правило ErrorDocument 404 /404.html
☐ На странице есть логотип/шапка сайта
☐ Чёткое сообщение «Страница не найдена» крупно
☐ Объяснение причины простым языком
☐ Кнопка «На главную» как основное действие
☐ Ссылки на основные разделы
☐ Контакты или форма (опционально)
☐ Добавлен <meta name="robots" content="noindex">
☐ Проверено: страница возвращает код 404 (DevTools)
☐ Адаптирована под мобильные
☐ Загружается быстро (под 100 КБ)
☐ Настроена цель в Метрике на отслеживание 404
☐ Проверена в разных браузерах

Заключение

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

Если ищете готовый HTML-шаблон с уже встроенной страницей 404 — посмотрите подборку на Zettabyte: многие шаблоны идут с готовым дизайном страницы ошибки. А под размещение подойдёт любой тариф из каталога хостингов.