Служебные страницы обычно вспоминают в последнюю очередь.

Главная уже готова, статьи публикуются, формы работают — и только после случайного перехода по неправильной ссылке обнаруживается белый экран с сухой надписью Not Found.

На AllBlog я решил оформить страницы 403, 404, 500 и технических работ как полноценную часть сайта.

Чем отличаются эти состояния

С точки зрения пользователя все они означают: нужная страница сейчас недоступна.

Но причины разные.

403 — доступ запрещён

Сервер понял запрос, но не разрешает открывать ресурс.

Такое состояние может появиться при попытке перейти в закрытый раздел или открыть файл без необходимых прав.

404 — страница не найдена

Адрес неправильный, материал удалён или ссылка устарела.

Это самая частая служебная страница.

500 — внутренняя ошибка сервера

Запрос был корректным, но приложение не смогло его обработать.

Пользователь не должен видеть трассировку, путь к файлу или технические подробности ошибки.

Maintenance — технические работы

Сайт временно недоступен из-за обновления или обслуживания.

Для поисковых систем такое состояние желательно отдавать с кодом 503 Service Unavailable, а не маскировать под обычную страницу 200.

Что должно быть на любой странице ошибки

Пользователю нужны три вещи:

  1. Понятное объяснение. Не просто код, а короткая фраза человеческим языком.
  2. Следующее действие. Кнопка на главную, возврат назад, поиск или ссылка на каталог.
  3. Уверенность, что сайт всё ещё работает. Страница должна выглядеть как часть проекта, а не как сообщение от чужого сервера.

Почему нельзя показывать лишние детали

На странице 500 иногда случайно оказываются:

  • путь к PHP-файлу;
  • текст SQL-запроса;
  • имя таблицы;
  • версия библиотеки;
  • фрагмент конфигурации;
  • стек вызовов.

Это полезно разработчику, но не посетителю.

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

Дизайн без лишнего цирка

Страница ошибки может быть красивой, но она не должна превращаться в аттракцион.

Я придерживался простой структуры:

  • крупный код состояния;
  • короткий заголовок;
  • спокойное объяснение;
  • одна основная кнопка;
  • дополнительный путь назад или к поиску;
  • узнаваемый стиль AllBlog.

Так страница выглядит аккуратно и не перегружает человека, который уже столкнулся с проблемой.

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

На 404 особенно полезны:

  • кнопка «На главную»;
  • глобальный поиск;
  • ссылка на последние статьи;
  • каталог инструментов;
  • проверка адреса.

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

Что написать на странице 403

Здесь важно не обвинять посетителя.

Фраза «Вы не имеете права!» звучит агрессивно. Спокойнее:

Эта страница закрыта или требует другого уровня доступа.

Дальше можно предложить вернуться назад или перейти на главную.

Не нужно объяснять, существует ли конкретный закрытый ресурс и почему именно доступ ограничен.

Как вести себя при ошибке 500

На странице 500 полезно сообщить, что проблема находится на стороне сайта.

Пользователь не должен думать, что он что-то сломал.

Хороший вариант:

Что-то пошло не так при обработке запроса. Попробуйте обновить страницу немного позже.

При этом сама ошибка записывается в серверный журнал, где уже можно увидеть реальные детали.

Страница технических работ

Maintenance отличается тем, что проблема ожидаемая.

Здесь можно сообщить:

  • что выполняется обновление;
  • что данные пользователя в безопасности;
  • где следить за состоянием проекта;
  • какую альтернативную страницу можно открыть.

Не стоит обещать точное время завершения, если его невозможно гарантировать.

Важен не только внешний вид

После оформления страницы нужно проверить техническую часть:

403 → HTTP 403
404 → HTTP 404
500 → HTTP 500
Maintenance → HTTP 503

Если красивая страница 404 возвращает код 200, поисковая система может считать её обычным материалом.

Также нужно убедиться, что служебная страница не зависит от компонентов, которые могут сломаться вместе с основным приложением.

Итог

Страницы ошибок редко видят специально, но именно поэтому они хорошо показывают отношение разработчика к деталям.

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

Даже 404 может спокойно объяснить ситуацию, сохранить стиль проекта и за один клик вернуть человека к нормальной работе.