Главная » Блог » SEO | Органическое продвижение сайта » 101 пример как оформить страницу с ошибкой 404

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

18.06.2021

Алексей Бакуменко, автор блога Webpromo


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

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

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

Содержание:

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

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

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

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

Выводы

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



 

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

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

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

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

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

 

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

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

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

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

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

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

Ольга Ильюхина, SEO-специалист Webpromo:

«Все инструменты для проверки сайта можно разделить на онлайн и офлайн, которые в свою очередь делятся на массовые и постраничные. Для массовой проверки страниц можно использовать Screaming Frog SEO Spider, Netpeak Spider, Xenu, а также такие сервисы, как Serpstat. В случае проверки только одной страницы можно выбрать наиболее подходящих вариант среди букмарклетов (например, проверка кода ответа в bertal.ru), расширений для Chrome (Redirect path), плагинов для многих CMS и т.д.»

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

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



 

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

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

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

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

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

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

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



 

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

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

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

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

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

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

 

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

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

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

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

И напоследок мы собрали просто эстетичные страницы с ошибкой 404, в оформлении которых сплелись и креатив, в которых сплелись креатив и информативность.

 

Выводы

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

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

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

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

 

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

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

Последние материалы рубрики

Как разработать лендинг в сервисе SendPulse

Как разработать лендинг в сервисе SendPulse

Ранее мы рассмотрели анатомию лендинга и этапы его подготовки. Для выбора посадочной страницы вам не понадобятся знания кода или...

Spark Ads — новый нативный формат рекламы для брендов в TikTok

Spark Ads — новый нативный формат рекламы для брендов в TikTok

Spark Ads обеспечивает более высокие результаты от проведения рекламных кампаний при минимальном бюджете.Новый нативный формат...

Как создать и использовать воронки продаж в маркетинге? Отслеживаем воронку с помощью Google Analytics

Как создать и использовать воронки продаж в маркетинге?...

Что такое воронка продаж, как создать и использовать, для чего отслеживать ваши воронки в Google Analytics? Все, что вы хотели узнать об этом...

Подготовка эффективного лендинга: 8 шагов к высоким...

Перед разработкой лендинга нужно продумать весь путь потенциального клиента. Как? Конвертировать лидов в клиентов с привлечением...

Остались вопросы?
Наши эксперты готовы ответить на них

Свяжитесь по указанному ниже телефону с нашим менеджером или воспользуйтесь услугой «Перезвонить мне». Мы свяжемся с вами в ближайшее время.

Каждый участник — мастер своего дела
Ценю Webpromo за гибкость
Команда Webpromo, как продолжение нашего отдела маркетинга
Спокоен за продвижение своих проектов в интернете