Дизайн Stamp Rbt
4 772

Искусство ошибаться: 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. Регулярно проверяйте ссылки, размещённые на сайте, на предмет актуальности. Заменяйте или удаляйте битые ссылки при обнаружении.

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Stamp Rbt", "author_type": "self", "tags": [], "comments": 31, "likes": 26, "favorites": 69, "is_advertisement": false, "subsite_label": "design", "id": 50308, "is_wide": false, "is_ugc": true, "date": "Tue, 06 Nov 2018 23:48:47 +0300" }
{ "id": 50308, "author_id": 218945, "diff_limit": 1000, "urls": {"diff":"\/comments\/50308\/get","add":"\/comments\/50308\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/50308"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

31 комментарий 31 комм.

Популярные

По порядку

Написать комментарий...
3

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

Ответить
2

Забавно, молодцы

Ответить
1

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

Ответить
0

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

Ответить
2

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

Ответить
0

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

Ответить
0

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

Ответить
1

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

Ответить
0

прикольно))

Ответить
2

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
1

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

Ответить
1

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

Ответить
1

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

Ответить
0

Спасибо!

Ответить
1

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
{ "page_type": "default" }