Поиск по сайту Поиск

Ошибаться красиво — рассказываем про ошибки 404

Когда мы вводим на сайте неверный адрес или щёлкаем по «мертвой» ссылке, он должен выдать стандартный код ответа HTTP — Not Found или «Ошибка 404». Но хорошо оформленная страница (с точки зрения дизайна и юзабилити) может не только поднять настроение пользователю, но и понять, что делать дальше. 

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

выдает ошибку 404

Что значит ошибка 404?

У этой ошибки много имён:

  • 404 Not Found
  • 404 Error
  • HTTP 404 Not Found
  • The page cannot be found
  • The requested URL was not found on this server

Своё название страница 404 получила от кода ответа сервера 404 — он означает, что сервер ничего не нашёл по указанному адресу. Обычно такая ошибка возникает, когда человек вводит некорректный адрес сайта или переходит по несуществующей ссылке (например, когда вы удалили старую ссылку, а в поисковой индексации она осталась). 

Страница 404 —  та, которая открывается автоматически, если запрашиваемый сайт невозможно найти. Такая страница может возникнуть на любом сайте, потому что её невозможно проконтролировать полностью.

Зачем нужна страница 404?

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

  1. Вы не можете предотвратить все случайные ошибки, опечатки. Например, ваш потенциальный клиент может пропустить букву, не найти того, что искал и просто уйти.
  2. Если у вас многостраничный сайт, то достаточно сложно отследить все адреса. К примеру, какой-то раздел сайта удалили, а где-то могли заменить адрес для улучшения SEO-показателей.
  3. Когда у вас много неоформленных страниц 404, с которых пользователи не могут перейти на главную или другие разделы, у вашего сайта снижаются позиции в органическом поиске. Так что продумать дизайн страницы 404 — полезно для SEO.

В каких случаях возникают ошибки 404

На самом деле причин не так много. Вот несколько наиболее распространённых примеров: 

  • удаление страницы с сайта;
  • перенос ресурса на другой URL без установки редиректа;
  • временная недоступность сайта;
  • ввод неправильного URL;
  • вирусы на сайте.

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

Памятка о создании страницы 404 — о чем стоит помнить

Хороший дизайн страницы 404 — способ по-человечески поговорить с вашим пользователем и удержать его на сайте. Поэтому при создании страницы с ошибкой держите в голове несколько правил.

Объясните пользователю, что вообще происходит

Для начала успокойте человека, попавшего на страницу 404. Объясните, что произошло. Например, можно перечислить причины ошибки: ссылка устарела и её убрали с сайта, допущена ошибка в адресной строке, раздел переехал на другую страницу и так далее.

Развлекайте и веселите

Дизайн такой страницы может быть не только удобным, но и забавным. Поэтому можете постараться отвлечь пользователей юмором и избавить их от чувства потерянности. С этим очень хорошо справляются изображения, видео, анимации (особенно смешные).

Конечно тон сообщения на странице ошибки зависит от позиционирования вашего бренда, но если есть возможность пошутить — почему нет?

Верните пользователя на сайт

Юмор и красивые картинки — это прекрасно. Но не стоит забывать, что вам нужно поскорее вернуть посетителя страницы 404 на сайт. Например, разместите кнопку «Вернуться на главную», чтобы не потерять потенциального клиента. Также можно разместить меню, поиск или раздел «Помощь», чтобы человек сам выбрал и нашёл, куда ему отправиться.

Сохраняйте свой стиль

Страница 404 — часть вашего сайта, поэтому она должна быть оформлена в стиле вашего бренда. Это касается цветов, шрифтов, персонажей и другого контента.

Будьте на шаг впереди

Лучший способ сделать так, чтобы пользователь не попал на страницу 404 — постоянно проверять «битые ссылки» на сайте. Если раз в месяц проверять потерянные статьи, видео, картинки и так далее, ваши пользователи будут все меньше попадать на страницу 404.

Кстати, у Google и Яндекс есть бесплатные сервисы для веб-мастеров, которые помогают найти неработающие ссылки.

error 404

12 примеров страниц 404

Теперь давайте рассмотрим удачные на наш взгляд примеры четырестачетвёртых страниц.

Посмотрите на крутую анимацию с сайта «Bench». Это ошибка? Или такой страницы нет, как и снежного человека, единорога или лох-несского чудовища. …или она существует? Хмм....

Пример страницы 404 Bench

Или, к примеру, сервис email-рассылок «MailChimp» не только порадует пользователя прикольной иллюстрацией, но и вернёт на главную страницу.

Пример страницы 404 MailChimp

Сайт игровой компании «Blizzard» ломается в прямом смысле этого слова. 

Пример страницы 404 Blizzard

Некоторые компании делают страницы 404 интерактивными. Например, «Canva» предлагает пользователю собрать несложный пазл.

Пример страницы 404 сайта Canva

А сайт «Amphibian» — целую мини-игру с лягушками. 

пример страницы 404 сайта Amphibian

А как насчёт не менее известного «Docker», где расстроенный кит смотрит на утонувший корабль. Нравится ли вам такая анимация? 

Пример страницы 404 Docker

Ещё одну интересную реализацию ошибки 404 можно найти в блоге «Я люблю иконки». Попадая на такую страницу, посетитель увидит светящиеся число 404, по которому пробегает ящерица — очень креативно!

Пример страницы 404 Я люблю иконки

Если продолжать говорить о милых анимациях, то посмотрите на сайт «Airbnb» — при переходе на сломанную ссылку вы увидите не только девочку с упавшим мороженным, но и найдёте полезные ссылки.

Пример страницы 404 в Airbnb

На странице ошибке сайта «Pirate Code» вас встретит персонаж с главной страницы. Сейчас он задумчиво прогуливается по 404-й и ждет фикса...

Пример страницы 404 в Pirate Cod

А некоторые сайты предлагают целую блок-схему действий для тех, кто попал на страницу с ошибкой. Отличный пример — сайт «Orangecoat». 

Пример страницы 404 в Orangecoa

Страница «9GAG» обыгрывает ошибку 404, используя популярные мемы. 

Пример страницы 404 в 9GAG

И ещё один пример — сайт «Discord». Здесь вы не только увидите анимацию с робото-хомяком, который старательно чинит страницу, но и полезные ссылки с очень креативным текстом для поднятия настроения! 

Пример страницы 404 в Discord

⌘⌘⌘

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

Подписывайтесь на рассылку нашего блога — впереди ещё больше интересных статей и вдохновляющих подборок 💙.

Что такое информационная безопасность

Угрозы для информационной безопасности могут возникать не только извне, но, наример, и внутри компании, а защищать порой стоит не только...
Read More

Для чего нужен межсетевой экран и как он работает

Разберемся, что такое межсетевой экран (иначе называется firewall или файрвол, а также brandmauer или брандмайэр), как он работает и для...
Read More

Аутсорсинг VS собственное производство одежды: опыт бренда кроссовок

Один способ позволяет отслеживать каждую деталь изделия, другой – сфокусироваться на брендинге и маркетинге. Разбираемся в плюсах и минусах каждого варианта и выбираем оптимальный для старта бизнеса.
Read More

Как сократить затраты на инфраструктуру в два раза: опыт ИТ-компании Ctrl2GO

Рассказываем, как помогли российскому разработчику систем аналитики мигрировать в частное облако и сократить затраты на аутсорсинговые услуги. (далее…)
Read More

Каким должен быть сайт-визитка для эксперта

Рассказываем, как создать сайт-визитку и какой должна быть структура. Внутри — инструкция, которая поможет предпринимателям.
Read More

Как продвигать бизнес с помощью геосервисов

Онлайн-карты — хорошая площадка для привлечения аудитории в бизнес. Рассказываем об инструментах продвижения в геосервисах.
Read More

Как открыть своё digital-агентство

Можно стартовать с багажом знаний из найма или практически без опыта. Рассказываем, что нужно делать: от проработки идеи и миссии до поиска первых клиентов и сотрудников.
Read More

Что такое Data Science и кто такой Data Scientist

Что такое наука о данных, чем занимается Data Scientist и можно ли обучиться этой специальности с нуля – об этом...
Read More

Как и зачем малому бизнесу работать с НКО

Начинающим компаниям в сфере IT, дизайна, PR и маркетинга, бухгалтерских и аудиторских услуг НКО могут быть очень полезны как клиенты. Раскрываем все нюансы такого сотрудничества: от выбора партнёра до менеджмента проекта и финансовых отношений.
Read More

K8s для начинающих

Применение контейнеризации стало неотъемлемой частью процесса разработки и тестирования программного обеспечения. Контейнеры позволяют разработчикам упаковывать приложения вместе со всеми зависимостями,...
Read More