Искусство ошибаться: 27 примеров проработанной страницы 404

В дополнение к статье на vc.ru «20 страниц 404 от digital-агентств, которые задержат вас на сайте» публикуем свежую подборку с примерами необычного оформления страницы 404.

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

Искусство ошибаться: 27 примеров проработанной страницы 404

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

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

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

Сервис email-рассылок «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fmailchimp.com%2F&postId=50308" rel="nofollow noopener" target="_blank">MailChimp</a>»
Сервис email-рассылок «MailChimp»
Производитель монтажной пены «<a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fwww.profflex.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">Profflex</a>»
Производитель монтажной пены «Profflex»
Доска бесплатных объявлений «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.olx.ua%2F&postId=50308" rel="nofollow noopener" target="_blank">OLX</a>»
Доска бесплатных объявлений «OLX»
Графический редактор «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.figma.com%2F&postId=50308" rel="nofollow noopener" target="_blank">Figma</a>»
Графический редактор «Figma»
Станция технического обслуживания «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fremontov.kz%2F&postId=50308" rel="nofollow noopener" target="_blank">Ремонтов</a>»
Станция технического обслуживания «Ремонтов»
Интернет-магазин техники «<a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fwww.sotmarket.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">Сотмаркет</a>»
Интернет-магазин техники «Сотмаркет»
Сайт «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.kinopoisk.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">КиноПоиск</a>»
Сайт «КиноПоиск»
Интернет-магазин автозвука «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fzvukdv.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">ZvukDV</a>»
Интернет-магазин автозвука «ZvukDV»
Платформа «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Ftheoryandpractice.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">Теории и практики</a>»
Платформа «Теории и практики»
Сервис для дизайнеров «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fmarvelapp.com%2F&postId=50308" rel="nofollow noopener" target="_blank">Marvel</a>»
Сервис для дизайнеров «Marvel»
Агентство интернет-маркетинга «<a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fleadmachine.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">ЛидМашина</a>»
Агентство интернет-маркетинга «ЛидМашина»
Еженедельник «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.newyorker.com%2F&postId=50308" rel="nofollow noopener" target="_blank">The New Yorker</a>»
Еженедельник «The New Yorker»
Платформа для создания посадочных страниц «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Flpgenerator.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">LPgenerator</a>»
Платформа для создания посадочных страниц «LPgenerator»
Клининговая компания «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fqlean.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">Qlean</a>»
Клининговая компания «Qlean»
Официальный сайт «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fkfc.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">KFC</a>» в России
Официальный сайт «KFC» в России
Сайт для поиска работы и сотрудников «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.superjob.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">Superjob</a>»
Сайт для поиска работы и сотрудников «Superjob»
Служба доставки еды «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fdostaevsky.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">Достаевский</a>»
Служба доставки еды «Достаевский»
Издательство «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.mann-ivanov-ferber.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">МИФ</a>»
Издательство «МИФ»
Интернет-магазин креативных подарков «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fenjoyme.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">Enjoyme</a>»
Интернет-магазин креативных подарков «Enjoyme»
Сайт журнала «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.zr.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">За рулём</a>»
Сайт журнала «За рулём»
Сервис отзывов «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fflamp.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">Фламп</a>»
Сервис отзывов «Фламп»
Доска объявлений по продаже автомобилей «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fkolesa.kz%2F&postId=50308" rel="nofollow noopener" target="_blank">Колёса</a>»
Доска объявлений по продаже автомобилей «Колёса»
Сервис «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fcarfix.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">CarFix</a>»
Сервис «CarFix»
Девелоперская компания «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.ingrad.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">Инград</a>»
Девелоперская компания «Инград»
Магазин строительных материалов «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fpetrovich.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">Петрович</a>»
Магазин строительных материалов «Петрович»
Сеть книжных магазинов «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.chitai-gorod.ru%2F&postId=50308" rel="nofollow noopener" target="_blank">Читай-город</a>»
Сеть книжных магазинов «Читай-город»

Идеальной формулы для страницы 404, конечно, не существует. Здесь всё индивидуально и зависит от конкретного бизнеса.

В целом страница 404 должна решать следующие задачи:

  • Объяснять посетителю, что произошло.

  • Указывать причины, по которым пользователь попал на эту страницу.
  • Подсказывать, что делать дальше.

Общие рекомендации по теме

  1. При разработке или редизайне страницы 404 проявляйте творчество и креатив, отталкиваясь от сферы бизнеса. Здесь можно разместить ограниченные по времени купоны на скидку, форму подписки на выгодные акции, тематическую иллюстрацию, строку поиска по сайту, интерактивные элементы, генератор случайных советов и так далее.
  2. Обязательно проверьте, чтобы страница ошибки 404 на вашем сайте была правильно настроена, а сервер возвращал код статуса HTTP 404 Not Found. Иначе в результатах выдачи поисковых систем могут начать появляться ссылки на несуществующие страницы вашего сайта, что негативно повлияет на SEO.
  3. Регулярно проверяйте ссылки, размещённые на сайте, на предмет актуальности. Заменяйте или удаляйте битые ссылки при обнаружении.

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

1717
32 комментария

А как насчет такой 404 (после прочтения можно обновлять страницу, пока не надоест):
https://ragemarket.ru/404

4

"Это грустно или весело? - Это.. это печально".
А если серьезно, то у вас отличная реализация страницы 404.

1

6 раз обновил и закончился креатив

Извиняйте если не к месту, сделайте аудит доступности вашего сайта с мобилок, очень плохо грузится (Chrome F12 / Audits) (: За СЕО 100 бальный лайк, молодцы!

Каждый раз захожу и ищу анимекартинку с борды какой-нибудь
(каждый раз, два раза всего, ага)
Ну это, как знаете....

2