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

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

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

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

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

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

Сервис email-рассылок «MailChimp»
Производитель монтажной пены «Profflex»
Доска бесплатных объявлений «OLX»
Графический редактор «Figma»
Станция технического обслуживания «Ремонтов»
Интернет-магазин техники «Сотмаркет»
Сайт «КиноПоиск»
Интернет-магазин автозвука «ZvukDV»
Платформа «Теории и практики»
Сервис для дизайнеров «Marvel»
Агентство интернет-маркетинга «ЛидМашина»
Еженедельник «The New Yorker»
Платформа для создания посадочных страниц «LPgenerator»
Клининговая компания «Qlean»
Официальный сайт «KFC» в России
Сайт для поиска работы и сотрудников «Superjob»
Служба доставки еды «Достаевский»
Издательство «МИФ»
Интернет-магазин креативных подарков «Enjoyme»
Сайт журнала «За рулём»
Сервис отзывов «Фламп»
Доска объявлений по продаже автомобилей «Колёса»
Сервис «CarFix»
Девелоперская компания «Инград»
Магазин строительных материалов «Петрович»
Сеть книжных магазинов «Читай-город»

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

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

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

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

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

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

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

0
31 комментарий
Написать комментарий...
Илья Меджидов

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

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Stamp Rbt
Автор

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

Ответить
Развернуть ветку
Citizen Di

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

Ответить
Развернуть ветку
Stamp Rbt
Автор

Согласен, можно добавить еще креатив. Сейчас около 11 вариантов. А так - здорово.

Ответить
Развернуть ветку
Илья Меджидов

Они показываются рандомно. Думаю доработаем, чтобы сначала показывалось все то, что конкретный посетитель еще не видел, а уже потом рандом.
А если есть предложения, что можно написать - предлагайте свои варианты, с удовольствием добавим самые интересные)

Ответить
Развернуть ветку
Алексей Долгих - CVO Scout VC

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

Ответить
Развернуть ветку
Илья Меджидов

Все времени не было заняться оптимизацией :)
Но сегодня прогер все-таки немного добавил фич, теперь сайт более оптимизирован для мобильных (1 скрин) и еще лучше оптимизирован для десктопа (2 скрин)

Ответить
Развернуть ветку
Andrew Podolsky

прикольно))

Ответить
Развернуть ветку
For Nothing

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

Ответить
Развернуть ветку
For Nothing
Ответить
Развернуть ветку
Andrew Podolsky

у нас такая https://xpert-studio.ru/404 скоро телек можно будет смотреть))

Ответить
Развернуть ветку
Stamp Rbt
Автор

Дизайн интересный. Только не хватает ссылки на главную страницу, добавьте.

Ответить
Развернуть ветку
Andrew Podolsky

да спасибо упустили этот момент)

Ответить
Развернуть ветку
Andrew Podolsky

Мы кстати обновили там теперь глич фишечка появилась и кнопка тож) https://xpert-studio.ru/404

Ответить
Развернуть ветку
Sergey Mikhalev

Интересно, какой процент трафика в среднем уходит на 404 страницу?

Ответить
Развернуть ветку
Stamp Rbt
Автор

Точных показателей нет. Это сильно зависит от конкретного сайта.
Например, сайт постоянно наполняется контентом, производится ручная перелинковка и периодически какие-то старые статьи отваливаются (удаляются по каким-то причинам), а на них все еще стоят ссылки с других внутренних страниц сайта или же других ресурсов. В этом случае, процент трафика на страницу ошибки 404, конечно, будет намного больше.
Главное - следить за битыми ссылками и вовремя заменять или удалять их.
Также, если неверно настроена страница 404 (как упоминается в этой статье во 2 пункте), и сервер возвращает «200 ОК» вместо «404 Not Found», то в выдаче поисковиков могут начать появляться битые ссылки. Таким образом, страдает SEO и процент ошибочного трафика становится еще выше. И т.д.

Ответить
Развернуть ветку
Alexander Lebedev

Вот наша страничка (логистическая компания): https://www.eride.ru/404
В поиске можно ввести, например "таможня" или "перевозки", нажать "Enter" и посмотреть все статьи на тему в нашем блоге.

Ответить
Развернуть ветку
Stamp Rbt
Автор

Отличный вариант.

Ответить
Развернуть ветку
Alexander Lebedev

Спасибо!

Ответить
Развернуть ветку
Airtemium

---

Ответить
Развернуть ветку
Andrew Podolsky

блин пакман круто)

Ответить
Развернуть ветку
Оскар Моргенштерн

У Slack прекрасная:
https://slack.com/404

Ответить
Развернуть ветку
Дмитрий Дробышевский

Не могу удержаться и не показать наш вариант: https://profibeer.ru/404/

Ответить
Развернуть ветку
Stamp Rbt
Автор

Действительно, очень оригинально!

Ответить
Развернуть ветку
Ильдар Хайрисламов

Нельзя перенаправлять. Но можно показать релевантные статьи.

Ответить
Развернуть ветку
Stamp Rbt
Автор

Да, все верно.

Ответить
Развернуть ветку
Кирилл Бородин

Такое внимание странице 404, которую и видеть никто не должен. Мне кажется за последний год активного использования интернета, я попадал на 404 один или два раза.

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

Ответить
Развернуть ветку
Ольга Буряк

Серьезно?) Аудио?) это неожиданная проработка для статьи

Ответить
Развернуть ветку
Stamp Rbt
Автор

Озвучка создается автоматически на vc.ru. Посмотрите другие статьи на главной, там тоже есть аудио.

Ответить
Развернуть ветку
Ольга Буряк

У меня не на всех выскакивает)

Ответить
Развернуть ветку
Andrew Podolsky

вот такую сделали клиенту http://st-std.com/not_found

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
28 комментариев
Раскрывать всегда