101 пример как оформить страницу с ошибкой 404

18.06.2021

Алексей Бакуменко

С ошибкой 404 сталкивались абсолютно все, чей опыт серфинга в интернете превышает хотя бы месяц. Какие эмоции испытывает пользователь, когда на экране появляется страница 404? Непонимание, растерянность и злость. Он уйдет искать решение своих проблем на другие ресурсы. Чтобы этого не случилось, к созданию и оформлению страницы ошибки 404 необходимо подойти с точки зрения пользовательского опыта. Мы подготовили 101 вариант дизайна страницы 404, способные вдохновить вас на креативные идеи.

Но прежде, чем мы посмотрим примеры оформления страницы с ошибкой 404, разберемся с теорией.

Содержание:

Что такое ошибка 404 и ее влияние на SEO

Ошибка 404: суть, причины, аудит сайта

Что должно быть на странице 404

101 пример, как оформить страницу 404 стильно и удобно для пользователя

• Информативные страницы 404
• Оформление страниц 404 с креативом
• Красиво оформленные страницы 404

Выводы

Что такое ошибка 404 и ее влияние на SEO

404 страница означает, что она не найдена (Not Found). Хорошо это или плохо для SEO? Если оценивать в общем, то это нормально. Google рассматривает появление ошибок 404 как естественный процесс работы сайта. 

Но не все так однозначно. На практике сайт действительно может «просесть», если ошибка 404 появилась на странице, которая приносит трафик на сайт.

В любом случае, лучшим решением с точки зрения SEO будет разобраться, почему возникла ошибка 404 Not Found. Выявление причины подскажет наиболее верный путь устранения проблемы.

Ошибка 404: суть, причины, аудит сайта

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

Почему так происходит:

• Ошибка в URL. Пользователь неправильно ввел ссылку или в нее были внесены изменения на стороне сайта. 
• Страница переехала или удалена. Это следствие изменения структуры сайта, технических работ или банально «факап» контент-менеджера. Понятное и нескучное оформление страницы 404 поможет свести на нет негативные последствия технического сбоя.

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

• Google вебмастер. Бесплатный и простой в использовании инструмент. Аудит сайта доступен в отчете “Сканирование”, вкладка “Ошибки сканирования”.
• Seoto.me. Мощный сервис, способный проанализировать даже самые крупные сайты. Но платный.
• Serpstat.com. Инструмент отличается широким функционалом. Кроме битых ссылок, показывает качество оптимизации домена и график глубины проверки. Позволяет проанализировать сайты конкурентов. Все платно.
• Check My Links. Это бесплатный плагин для Google Chrome. Его минус в том, что он работает постранично, проверить весь сайт сразу нельзя. 

Однако вне зависимости от приложенных усилий к сокращению количества страниц с ошибками, необходимо тщательно подойти к оформлению страницы 404 Not Found. Мы подготовили ряд рекомендаций для разработки дизайна страницы ошибки 404 и 101 реальный пример, которыми вы можете вдохновиться.

Что должно быть на странице 404

Что думает пользователь, увидевший такое? Скорее всего «Ой, что это? 404 не найдено? Непонятно… Пойду-ка я на другие сайты». И будет прав. На приведенном выше скриншоте нет абсолютно никакой полезной информации, нет ни малейшей попытки что-то объяснить пользователю, удержать его и помочь ему. Как сделать страницу 404 такой, чтобы она была способна понравиться гостю и одновременно отвечала на его потребности?

Шаблон информативной страницы 404 зависит от специфики сайта. Однако есть несколько правил, обязательных для всех.

1. Дайте пользователю понять, что он попал на тот сайт, который искал. Важную роль в этом играют хедер (шапка сайта) и футер (подвал сайта).
2. Объясните, почему пользователь видит эту ошибку, а не контент, за которым пришел. Желательно, простыми и понятными словами.
3. Разместите в видимой зоне контактные данные (телефоны, e-mail и т. д.), чтобы пользователь знал, куда ему обращаться со своим запросом.
4. Добавьте кнопку возврата на главную страницу, чтобы пользователь мог повторить свой сеанс и вновь попробовать найти то, что ему нужно.
5. Не стоит настраивать 301 редирект на главную. Пользователь не поймет, почему он попал не туда, куда хотел. Возможно, он предпримет несколько повторных попыток, но потом уйдет.
6. Интернет-магазинам полезно добавлять на страницу 404 поисковую строку, чтобы пользователь, столкнувшись с ошибкой, мог сразу найти альтернативный товар. Если в URL прописаны категории, добавьте в шаблон ссылки на похожие товары или тематические статьи.
7. Помните, что любая ошибка вызывает негатив со стороны пользователя. Отвлеките его анимацией или мини-играми. Креативные 404 страницы повышают шанс, что разочарованный посетитель задержится на сайте.
8. А еще люди обожают жаловаться. Дайте им такую возможность! Добавьте строку обратной связи с предложением сообщить вам о проблеме. Это проявление заботы о пользователе и дополнительная возможность сгладить негатив.

Совет! Если ваша страница с ошибкой 404 Not Found будет не просто информативной и полезной, но и визуально красивой ― пользователь получит приятный опыт взаимодействия с сайтом и уровень его стресса существенно снизится.

101 пример, как оформить страницу 404 стильно и удобно для пользователя

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

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

Информативные страницы 404

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

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

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

Оформление страниц 404 с креативом

Креативный дизайн страниц с ошибкой 404 — способ снять стресс пользователя от взаимодействия с битой ссылкой, сохранить его лояльность и перенаправить на актуальную страницу. Инструментарий для креативного оформления не ограничивается визуалом. Уместно использовать ux-копирайтинг, кнопки CTA, гифки и даже вовлекающие интерактивные элементы. На последние рекомендуем обратить особое внимание, поскольку вы сможете увеличить длительность сеанса на странице с ошибкой 404 и даже обеспечить взаимодействие с ней, несмотря на отсутствие контента. Прикольные страницы 404 репостят, скриншотят, отправляют знакомым, поэтому вместо негатива и оттока пользователей есть шанс получить рекламный эффект.

Красиво оформленные страницы 404

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

Выводы

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

• карусель товаров;
• кнопка «На Главную»;
• кнопки категорий услуг;
• строка поиска;
• кнопка вызова онлайн-чата.

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

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

Также читайте другие статьи в блоге Webpromo:

• Офлайн-конверсии Facebook Ads и Google Ads. Как повысить качество лидов?;
• Что такое SEO-тексты и как их правильно писать? Научитесь, чтобы оказаться в Топе Google;
• Performance Marketing в диджитал – тренды 2021, которые нужно внедрить;

И подписывайтесь на наш Telegram-канал про маркетинг.