Ничего не найдено! Как грамотно оформить страницу 404 на сайте

27.10.2021
Знаменитая ошибка 404 («Не найдено») способна украсть у вас часть клиентов.

В Яндексе выпала ссылка на удаленную страницу, забыли настроить переадресацию, пользователь опечатался в URL – и на экране появляется:
404
Многие сразу закроют сайт, кто-то подумает, что он сломался, и почти все подсознательно потеряют уверенность в надежности ресурса.

Решение проблемы – настроить страницу 404 так, чтобы ее не хотелось тут же покинуть. Давайте выясним как.

Что сейчас

Не беспокойтесь: скорее всего, ваша 404-я выглядит не так удручающе, как на картинке выше.

Если сайт сделан на «движке» (CMS) или по какому-либо шаблону, в нем обычно есть готовая страница с ошибкой. Как правило, она выполнена в том же дизайне, содержит базовую навигацию и строку поиска:
404_1
Лучше, чем пустой белый экран, но ряд минусов сохраняется. Например:
Попробуем справиться с ними при помощи самостоятельно настроенной страницы 404.

Как лучше

Чтобы понять, какой должна быть страница 404, представьте, что это лендинг. Лендинг, на который никто не планировал попадать, но это не имеет значения.

Следовательно, на ней должны быть:

Сообщение об ошибке. Увы, избежать его не удастся: пользователь должен знать, где и почему оказался. Но это не значит, что оно должно быть унылым и официальным.

Брендовый дизайн. Чтобы сохранить ощущение, что клиент по-прежнему на нужном сайте.

Полезные ссылки. Ошибка 404 – аналог тупика. Избавьтесь от этого сходства, предложив посетителю несколько подходящих путей: на главную, к товарам, в блог и т. д.

Призыв к действию. Все верно, страница 404 – подходящее место для CTA-кнопки! Ведь пользователь в растерянности и не знает, что делать дальше.

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

Как настроить

Чтобы самостоятельно настроить страницу 404, понадобится базовое знание HTML и веб-разработки. Если пользуетесь услугами специалиста, скорее всего, он сможет сделать это для вас. Ему хватит рекомендаций из предыдущего раздела.

Для сайтов на популярных «движках» есть готовые плагины. Например, «404page» для WordРress, «Custom Error» для Drupal, «Rapi Custom 404 Page» для Joomla.

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

Шаг 1. Найти или создать файл .htaccess

Откройте корневую папку своего сайта на сервере. Найдите там файл с названием «.htaccess». Если его нет, создайте сами. Название должно быть именно таким, никаких символов до или после.

Шаг 2. Указать адрес страницы 404

Добавьте в .htaccess строку:

ErrorDocument 404 <полный путь к странице 404>

Допустим, ваша страница расположена в корневой папке и называется best404.html. Тогда строка будет иметь вид:

ErrorDocument 404 /best404.html

Не забудьте сохранить файл!

Шаг 3. Убедиться, что все работает

Введите любой неправильный URL на сайте. Должна появиться ваша новая страница по адресу /best404.html.

Не волнуйтесь, если этого не произошло. Иногда сервер просто не разрешает использовать собственные страницы с ошибками. Достаточно исправить его настройки, указав в них путь в новой 404-й – как правило, после этого все начинает работать.

Если нет – вероятно, вам все же потребуется помощь профессионала.

Итог

Продуманная страница 404 – возможность превратить досадную ошибку в шаг на пути к конверсии. А чем выше конверсионность сайта, тем выше эффективность рекламы!