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

Ошибаться красиво — рассказываем про ошибки 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, конечно, не существует. Всё индивидуально и зависит от конкретного бизнеса — будьте креативными, но и не забывайте о пользе для посетителя сайта. 

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

Собственный магазин или маркетплейс: где выгоднее продавать?

58% всех интернет-заказов в 2023 году совершили на маркетплейсах.  Популярность маркетплейсов активно растет. При этом рост количества продавцов снижается: в...
Read More

SEO для бизнеса: поисковики — тоже реклама

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

Какие показатели нужно отслеживать новому бизнесу? 10 главных метрик

Полный список финансовых показателей, которые нужно учитывать при запуске и развитии бизнеса. С формулами, комментариями и понятными примерами расчета. (далее…)
Read More

Драма Microsoft и Apple: от вражды до сотрудничества

Техногиганты всё время своего существования судились, обменивались колкостями и пытались обогнать друг друга по уровню новаторства в разработках. Наши коллеги...
Read More

Как компании меняли свой бренд из-за испорченной репутации: три кейса

В бизнесе нет страховки от ошибок — любой промах отражается на репутации. И иногда исправить ситуацию может только ребрендинг и...
Read More

Запускаем email-рассылку: как не попасть в спам при отправке писем

В статье рассказываем, почему рассылки попадают в спам, и делимся советами, как сделать так, чтобы письма всегда доставлялись до адресатов....
Read More

Ключ к успешному продвижению: что такое SMM-стратегия и как ее составить

Разберем, что такое SMM-стратегия, зачем она нужна и как эффективно использовать социальные сети для решения бизнес-задач. (далее…)
Read More

Новогодний маркетинг: лучшие приемы праздничной рекламы

Для бизнеса Новый год и Рождество — время всплеска продаж и увеличения прибыли. А способствуют этому всем знакомые персонажи: от...
Read More

Россияне предпочитают .ru вместо .com, а Дональд Трамп проиграл доменный спор за mar-a-lago.com

Рассказываем самые интересные новости доменного мира. (далее…)
Read More

Прокрастинация: что такое, виды и как бороться

Прокрастинатор полон идей и амбиций, но ему часто не хватает самодисциплины и силы воли, чтобы начать действовать. Что заставляет нас...
Read More