Зачем нужна страница 404 и как ее оформить

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

При вводе URL страницы в адресную строку браузера или клике по ссылке вы ожидаете увидеть нужный контент: товар в интернет-магазине, статью или новость из блога. Но иногда случается неожиданное, и вместо этого на экране появляется сообщение об ошибке 404 — “Страница не найдена” или “Запрашиваемый URL не найден на сервере”. 

В числе 404 нет никакой магии — это просто код ответа сервера, который он выдает при запросе несуществующей на сайте страницы. Эта ошибка может возникнуть в следующих случаях:

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

Когда браузер получает код ответа сервера 404, он автоматически открывает страницу, отображающую информацию об этой ошибке. По умолчанию это стандартное сообщение браузера.

Чтобы уменьшить вероятность возникновения ошибки 404, рекомендуется периодически проверять сайт на наличие “битых ссылок”. Сделать это можно, например, с помощью специальных сервисов для отслеживания неработающих ссылок от Яндекса и Google. Также в интернете можно найти и другие подобные инструменты, как бесплатные, так и платные. Особенно важно проверять актуальность ссылок на сайте после внесения изменений в его структуру. 

 

Зачем создавать страницу 404

Если пользователь, зайдя на ваш сайт, увидит стандартное сообщение браузера об ошибке 404, скорее всего он просто закроет вкладку и не будет разбираться, что же пошло не так. По статистике так поступают более 70% пользователей. 

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

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

Правильно оформленная страница ошибки 404 будет мотивировать посетителя остаться на сайте и продолжать просмотр других разделов ресурса. Это принесет пользу как для репутации сайта, так и для SEO.

Итак, кастомная страница ошибки 404 поможет:

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

 

Приемы создания страницы 404

Чтобы помочь пользователю, попавшему по несуществующему адресу, желательно сделать его пребывание на странице ошибки максимально полезным и комфортным. Этому будут способствовать следующие шаги:

1. Объясните причины.
Расскажите пользователю, что произошло — перечислите возможные причины ошибки: страница была удалена или перемещена, допущена ошибка при вводе URL и т.п. Текст сообщения должен быть простым, понятным и информативным.

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

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

Важные аспекты при оформлении страницы 404:

• Стиль.
  Постарайтесь сохранить стилистику вашего сайта, согласовав дизайн страницы с общей концепцией бренда. Используйте фирменные цвета, присущие сайту графические элементы и типографику. 
   
• Тональность сообщения.
  Соблюдайте принятый на вашем сайте стиль общения с пользователем. Неплохо добавить немного юмора, но уровень креатива желательно регулировать в зависимости от вашей целевой аудитории. 

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

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

 

Как сделать страницу ошибки 404 в Taptop

В конструкторе Taptop базовая страница 404 создается автоматически для каждого проекта. Вам останется только стилизовать ее и наполнить контентом. 

Добавляйте любые элементы и блоки по своему желанию, выбирая для них подходящий стиль. 

Например:

• меню
• текстовый блок с описанием
• картинку
• кнопку со ссылкой на главную страницу
• ссылки на другие разделы

Страница автоматически заработает после публикации проекта и будет открываться при попадании пользователя на несуществующий URL.

Примеры страниц 404, созданных в Taptop:

 

 

 

 

Эти страницы вы можете найти в бесплатных шаблонах на платформе Taptop.

 

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

Вот небольшая подборка креативных страниц 404 с просторов интернета — для вдохновения и новых идей.

1. Tripadvisor

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

2. Dribbble

Пользователю предлагается подборка дизайнов в случайно выбранной цветовой гамме, которую он может изменить с помощью ползунка. Превью макетов размещены в виде надписи “404”, на каждый из них можно кликнуть и перейти на соответствующую страницу. Также есть ссылка на главную страницу и контакты.

3.Pixar

Отсылка к героине мультфильма “Головоломка” по имени Печаль и призыв не плакать, потому что “Это всего лишь ошибка 404”. Меню со ссылками на разделы сайта и ссылки на соцсети.

4. Додо пицца

Минималистичный дизайн, обыграна темы еды — аналогия потерянной страницы с пустой коробкой из-под пиццы. Ссылка на главную страницу сайта.

5. Zoom

Неформальное сообщение и предложение помощи, подходящая картинка, меню и ссылки на разделы сайта.

6. Figma

Пользователю предлагается поиграть, редактируя надпись “404” с помощью перетаскивания контрольных точек мышкой. Есть ссылка на главную страницу сайта, хотя она и не совсем очевидно размещена на логотипе.

7. Discord

Интересная анимация и креативный текст. Меню и дополнительные ссылки.

8. Freepik

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

А вот пример того, как делать не надо. Subway не разместил на странице ни одной ссылки. Пользователю остается только закрыть вкладку и покинуть сайт.

 

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

 

P.S. И напоследок еще немного смешных и оригинальных макетов страниц 404 для поднятия настроения.