Страница 404: как сделать правильно — примеры и шаблон

Требования к странице 404

1. Настоящий статус 404. Сервер должен вернуть код 404, а не 200 и не редирект. Иначе возникает soft 404.
2. Тот же дизайн, что и у сайта: шапка, меню, подвал. Посетитель должен понимать, что остался на вашем сайте.
3. Понятное объяснение. Одна-две фразы: страницы нет, возможно, ссылка устарела или в адресе опечатка.
4. Поиск по сайту. Часто он быстрее всего возвращает человека к цели.
5. Ссылки на популярные разделы: главная, каталог, блог, контакты.
6. Никакого автоматического редиректа на главную. Посетитель должен увидеть, что произошла ошибка, а поисковик получить корректный статус.
7. Лёгкая страница. Без тяжёлых картинок и анимаций: она может открываться при сбоях.
8. Мета-тег `noindex` не обязателен при корректном статусе 404, но не помешает, если сервер настроен неидеально.

Примеры текстов для страницы 404

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

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

Минимальный HTML-шаблон страницы 404

Шаблон ниже можно взять за основу: подставьте свои ссылки, подключите стили сайта и сохраните как 404.html.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex">
  <title>404 — страница не найдена</title>
  <link rel="stylesheet" href="/css/site.css">
</head>
<body>
  <header><!-- шапка сайта --></header>

  <main>
    <h1>404 — страница не найдена</h1>
    <p>Возможно, страницу удалили или в адресе опечатка. Попробуйте поиск или откройте один из разделов.</p>

    <form action="/search" method="get" role="search">
      <input type="search" name="q" placeholder="Поиск по сайту" aria-label="Поиск">
      <button type="submit">Найти</button>
    </form>

    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/catalog/">Каталог</a></li>
      <li><a href="/blog/">Блог</a></li>
      <li><a href="/contacts/">Контакты</a></li>
    </ul>
  </main>

  <footer><!-- подвал сайта --></footer>
</body>
</html>

Как подключить страницу 404 на сервере

nginx

server {
    root /var/www/example.com;

    error_page 404 /404.html;

    location = /404.html {
        internal;
    }
}

Директива internal запрещает открывать /404.html напрямую (иначе файл отдавался бы со статусом 200). Подробнее в инструкции по nginx.

Apache

ErrorDocument 404 /404.html

CMS и фреймворки

В большинстве CMS страница 404 делается шаблоном темы: в WordPress это файл 404.php, в Битрикс — 404.php в корне сайта с подключением CHTTP::SetStatus("404 Not Found"), в Tilda — отдельная страница, назначаемая как 404 в настройках сайта. Пошаговые инструкции: WordPress, 1С-Битрикс, Tilda, Next.js.

Чего лучше избегать

• Автоматического перенаправления через несколько секунд (meta refresh или JavaScript на главную): посетитель не успевает прочитать сообщение, а поисковик видит редирект вместо ошибки.
• Технических подробностей вроде стека вызовов или путей на сервере: они бесполезны посетителю и раскрывают лишнее.
• Страницы без навигации. Одна большая картинка с надписью «404» и ничего больше оставляет посетителя в тупике.
• Разных страниц 404 для разных разделов без нужды. Одного хорошего шаблона достаточно, а для разделов можно добавить блок со ссылками на их популярные страницы.
• Ссылок на саму страницу 404 в меню и карте сайта: в sitemap.xml должны попадать только адреса с кодом 200.

Установка трекера Monitor404 на страницу 404

Страница 404 — лучшее место для счётчика ошибок. Добавьте скрипт Monitor404 перед закрывающим </body> в 404.html, и каждый переход на несуществующий адрес будет записан: с адресом, источником перехода и признаком «человек или бот».

<!-- Скрипт Monitor404: готовый код с вашим токеном — в разделе «Установка» личного кабинета -->
<script src="https://collect.monitor404.ru/collect/ВАШ_ТОКЕН/script.js" async></script>
</body>

Если у сайта нет единой страницы 404, например, на SPA, подключите трекер в режиме ?mode=auto на всех страницах: он сработает только когда страница окажется ошибкой, а soft 404 определит по коду ответа.

Проверка

1. Откройте несуществующий адрес, например /proverka-404-test.
2. Убедитесь, что показана ваша страница с оформлением.
3. Проверьте код ответа в проверке кода ответа сервера: должно быть 404.
4. Откройте файл /404.html напрямую (в nginx с internal он не должен отдаваться со статусом 200).