404 ошибка возникает, когда пользователь попадает на несуществующий URL сайта. Появление страницы этой ошибки может вызвать недоумение и желание покинуть ресурс. Чтобы этого избежать, стоит задуматься о том, как сделать 404 страницу красивой и полезной, сгладить негатив и постараться задержать пользователя на сайте.
Зачем нужна такая страница?
404 ошибка представляет собой ответ сервера, который появляется при переходе на несуществующий адрес сайта. Произойти такое может по причине того, что страница была удалена, у нее сменился URL или пользователь допустил ошибку при вводе адреса. В любом случае, задача вебмастера сделать так, чтобы отвлечь посетителя от негатива и смотивировать его на дальнейший серфинг по сайту. Именно поэтому для сайтов делают креативные 404 страницы, цель которых – снизить количество отказов.
Красивое оформление 404 страницы на сайте
По умолчанию на многих ресурсах можно встретить простые и малопривлекательные 404 странички, попав на которые, создается ощущение о неработоспособности всего сайта. После этого, как правило, потенциальный клиент безвозвратно уходит.
Неудачный вариант 404 страницы — пользователь точно уйдет
Как создать 404 страницу?
Дизайн и структура
Создание такой страницы стоит начать с подготовки ее дизайна, который обязательно должен соответствовать общей стилистике сайта. Задача данного подхода – дать понять посетителю, что он находится именно на том ресурсе, который планировал посетить, просто в данный момент текущая страница недоступна.
Также при проектировке и создании оформления страницы 404 стоит учитывать специфику сайта:
- Если это информационный сайт, то в таком случае, будет логичным сделать со страницы ошибки ссылки на другие материалы. Можно организовать показ ссылок, релевантных запросу пользователя.
- Если это интернет-магазин, то рекомендуется подумать о навигационном меню и поисковой строке.
- Для разработчиков игр – поместить на 404 простенькую флеш игру.
- И т.д.
Практически в любой сфере можно придумать свои креативы и свести негатив пользователя к минимуму, а может даже повысить его уровень доверия.
Технические аспекты настройки
После подготовки макета дизайна, необходимо сверстать HTML-код. Он включает в себя стандартные блоки разметки и подчиняется HTML синтаксису, как и любая другая страница. Если планируется использовать анимацию, видео вставки или прочие фишки, то нужно учитывать вес всех компонентов, а также помнить о скорости загрузки страницы.
Если движок сайта самописный, то готовую страницу (HTML, PHP и т.д.) следует поместить в шаблон по протоколу FTP. И подключить ее в файле .htaccess, который находится в корне сайта, используя следующий код:
ErrorDocument 404 http://URL_сайта/404.html
Для редактирования .htaccess рекомендуется использовать бесплатный редактор Notepad++.
При использовании одной из популярных CMS, к примеру, WordPress, делать 404 страницу скорее всего не придется. По крайней мере технически она уже настроена и подключена, но если есть необходимость создания уникального решения, то его лучше реализовать внутри специального файла, который находится в корне шаблона (/wp-content/themes/тема/) – 404.php. При вставке верстки, нужно учитывать подключаемые хуки движка, некоторые из них могут понадобиться для корректной его работы. В остальном же все схоже с обычной HTML-версткой.
Не все темы WordPress имеют готовый файл 404.php, поэтому если он отсутствует, следует его создать вручную, наполнить и подключить в .htaccess с помощью следующего кода (если он также отсутствует):
ErrorDocument 404/index.php?error=404
10 красивых примеров страниц 404 ошибки
Приведем примеры идеально сделанных страниц 404 ошибки, они позволят взглянуть на креативность с другой стороны.
Вариант 1
Использование видеокреатива маркетинговым агентством, погружает пользователя в процесс наблюдения за персонажем, который в итоге покидает свое рабочее место. Сделано качественно, с вниманием к мелочам, такая страница однозначно мотивирует на продолжение знакомства с сайтом.
Использование видеокреатива при создании страницы 404
Вариант 2
Отлично настроенная 404 страница популярного магазина бытовой техники и электроники. Хорошо продуманная навигация, а также выведены популярные категории товаров.
Страница 404 для интернет-магазина с категориями товаров
Вариант 3
Простая и стильная страница, текст которой прямо заявляет об ошибке, но тут же «переводит» фокус внимания на тематику сайта (кредиты, вклады).
Пример 404 страницы для банка
Вариант 4
Популярный ресторан быстрого питания, коротко и ясно.
Страница 404 ресторана быстрого питания
Вариант 5
Применение анимации задерживает внимание (лупа при перемещении мыши двигается).
Пример применения анимации на странице 404
Вариант 6
Тематический юмор сглаживает негатив. Кроме текста, на странице присутствует полноценное меню, контактная информация, калькулятор, а также чат со специалистом. Вероятность потерять лид, даже при возникшей 404 ошибке, минимальна.
Пример тематического дизайна на странице 404
Вариант 7
Провайдер, который даже при 404 ошибке, предлагает ознакомиться с тарифами. Если бы данная информация и призывы к действию (кнопка «Подключить») отсутствовали, то процент отказов был бы явно выше.
Пример страницы 404 на сайте интернет-провайдера
Вариант 8
Указание на отсутствие страницы и следом предложение об услуги (агрегатор, который поможет приобрести билет на самолет в любую точку планеты).
Вариант оформления 404 страницы для агрегатора авиабилетов
Вариант 9
Просто и понятно.
Страница 404 для сайта кофейни
Вариант 10
Использование забавных персонажей (которые гармонируют с дизайном сайта) позволяет повысить лояльность среди большого числа людей. В довесок используется торговое предложение, которое скорее всего заинтересует целевую аудиторию сайта
404 страница для турагентства
Вышеприведенные примеры страниц объединяют несколько качеств:
- Они креативные и уникальные – непохожие на 90% 404 страниц других сайтов.
- Помимо дизайна, несут в себе практическую пользу, удерживают внимание и сглаживают негатив у потенциального лида.
- В некоторых случаях наоборот могут повысить лояльность к компании (сайту) со стороны пользователя.
Мы привели примеры наиболее креативных 404 страниц и объяснили причины их успешности с точки зрения удержания пользователя. Создайте 404 страницу, увидев которую, посетителям не захочется покидать ваш сайт. Готовые шаблоны можно скачать с сайта .
* Meta Platforms Inc. (и принадлежащие ей соц.сети Instagram, Facebook) признана экстремистской организацией, ее деятельность в России запрещена.
