404 оформление страницы: опупенное оформление + 10 примеров

Оформление страницы 404 — SEO на vc.ru

{«id»:13783,»url»:»\/distributions\/13783\/click?bit=1&hash=f0cc7f316b770dc4875e7513d2029d033fc9167343c63983bb14feeb434669ad»,»title»:»\u0417\u043d\u0430\u043a\u043e\u043c\u0438\u043c \u0431\u0430\u0431\u0443\u0448\u043a\u0443 \u0441 \u0432\u0438\u0434\u0435\u043e\u0438\u0433\u0440\u0430\u043c\u0438 «,»buttonText»:»\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c»,»imageUuid»:»bfaa0db8-3bbe-5e0d-ac65-b3d1953a0a21″,»isPaidAndBannersEnabled»:false}

SEO

SEO блиц

5 авг 20195.08.2019

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

4805 просмотров

В большинстве CMS страница 404 предусмотрена по умолчанию. Но её оформление и польза для посетителя оставляют желать лучшего. Как правило, они имеют следующий вид:

Такая 404-ая генерирует высокий показатель отказов. Вы не предлагаете пользователю вариант дальнейшего взаимодействия с вашим сайтом, а значит с высокой вероятностью он просто покинет его.

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

Как правильно оформить страницу 404

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

• Страница 404 должна быть оформлена в едином стиле с дизайном сайта. Так вы поможете пользователю понять, что он все ещё находится на вашем ресурсе и не нужно торопиться закрывать вкладку в браузере. К примеру, в сервисах «Яндекса» ошибка оформлена так:

• Необходимо предлагать посетителю варианты дальнейшего взаимодействия с ресурсом. Мы рекомендуем оставлять ссылку на главную страницу сайта. Полезным будет добавить форму поиска или предпочесть ей карту сайта, если ресурс небольшой. В последнее время принято добавлять на 404 выборку товаров или статей в зависимости от типа вашего сайта. Например, на сайте газеты «Комсомольская Правда» оформить 404 страницу решили следующим образом:

• Мотивация к действию. Попробуйте убедить пользователя остаться на сайте. Этим приёмом успешно пользуется компания HeadHunter.

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

Вывод

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

Весь справочник в статьях на vc.ru или на сайте.

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

#Факторы ранжирования #Поведенческие

#138

Август’19

2

Август’19

2

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

В большинстве CMS страница 404 «Not Found» предусмотрена по умолчанию. Но её оформление и польза для посетителя оставляют желать лучшего. Как правило, они имеют следующий вид:

Такая 404-ая генерирует высокий показатель отказов. Вы не предлагаете пользователю вариант дальнейшего взаимодействия с вашим сайтом, а значит, с высокой вероятностью, он просто покинет его.

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

Как правильно оформить страницу 404

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

1. Страница 404 должна быть оформлена в едином стиле с дизайном сайта. Так вы помогаете пользователю понять, что он все ещё находится на вашем ресурсе и не нужно торопиться закрывать вкладку в браузере. К примеру, в сервисах Яндекса ошибка оформлена так:
2. Необходимо предлагать посетителю варианты дальнейшего взаимодействия с ресурсом. Мы рекомендуем оставлять ссылку на главную страницу сайта. Полезным будет добавить форму поиска или предпочесть ей карту сайта, если ресурс небольшой. В последнее время принято добавлять на четыреста четвертую выборку товаров или статей в зависимости от типа вашего сайта. Например, на сайте газеты «Комсомольская Правда» оформить 404 страницу решили следующим образом:
3. Мотивация к действию. Попробуйте убедить пользователя остаться на сайте. Этим приемом успешно пользуется компания HeadHunter:
4. Если тематика сайта позволяет Вам это сделать, добавьте креатива. Возможно, пользователь захочет поделиться вашим нестандартным решением с другими людьми. Такие страницы могут создавать большое количество трафика. Как пример — флеш-игра на странице 404 сайта Heyzap, или 404 страница сайта Dribbble:

Вывод

Битая ссылка или опечатка в URL не самое редкое явление. Возможно, периодически и у вас на 404-ой появляются посетители. Ваша задача — сделать столкновение пользователя со страницей «Not found» приятнее и попробовать удержать его у себя на ресурсе.

Похожее

Факторы ранжирования Поведенческие

Правильное оформление форм на сайте

Факторы ранжирования Поведенческие

Поведенческие факторы ранжирования

Факторы ранжирования Поведенческие

#139

Правильное оформление форм на сайте

Август’19

2835

1

Факторы ранжирования Поведенческие

#52

Поведенческие факторы ранжирования

Февраль’18

2862

1

9 Creative 404 Примеры дизайна страницы с ошибкой

Ссылка скопирована в буфер обмена

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

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

Ищете вдохновение, чтобы сделать страницу 404 вашего веб-сайта удивительно восхитительной? Мы провели некоторое время на Dribbble и собрали наши любимые дизайны 404 страниц.

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

Игорь Плац. Эта очаровательная иллюстрация пропавшей страницы на упаковке молока заставляет нас хотеть бросить все и отправиться на ее поиски.

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

Эрнест Асанов. Где-то в далекой-далекой стране находится страница 404, укрытая в ветвях куста, расцвеченного цветом. Кто бы не хотел посетить этот мир?

Лена Зайцева. Ваша страница ошибки не должна быть статической. На этой странице указано название веб-сайта, а затем показаны слова, разделенные «404». Это умный способ включить движение на страницу.

Виктор Керн. Иллюзия глубины на этой странице 404 затягивает вас в дизайн и заставляет вас чувствовать, что вы действительно парите в пространстве (и удобно заставляет вас забыть, что вы приземлились не в том месте!).

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

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

Здесь шрифт должен выглядеть как акварель ручной работы.

Ризван Багирли. Эта страница 404 может показаться простой с одним выбором цвета и простыми 3D-иллюстрациями, но она достаточно отличается, чтобы заставить вас остановиться и изучить дизайн, прежде чем пытаться вернуться домой.

Мы пропустили ваш любимый дизайн страницы 404? Поделитесь с нами в Твиттере: @InVisionApp.

Джейк Питерс

Джейк является генеральным директором HelpDocs, программного обеспечения самообслуживания для групповой поддержки клиентов. Когда он не помогает клиентам и не пишет код, вы, вероятно, найдете его на кухне, где он готовит что-нибудь вкусненькое.

Эмили Эспозито

Эмили писала для некоторых ведущих технологических компаний, охватывая все, от творческого копирайтинга до UX-дизайна. Когда она не пишет, она путешествует по миру (следующая остановка: Япония!), варит чайный гриб и катается на велосипеде по северо-западу Тихого океана.

Загрузка…

Загрузка…

Совместная работа в режиме реального времени на цифровой доске

Попробуйте от руки

Получайте потрясающие дизайнерские материалы в свой почтовый ящик каждую неделю

Попробуйте — нужно только попробовать щелчок, чтобы отписаться.

Спасибо за регистрацию!

Теперь в вашем почтовом ящике должен быть благодарственный подарок, и вы скоро снова получите от нас известие!

35+ шаблонов страниц HTML 404

Здравствуйте, друзья! В этой статье я перечислил 35+ лучших шаблонов страниц HTML CSS 404, которые доступны на CodePen.

Лучшая коллекция дизайна страницы с ошибкой 404

#1: Страница 404 – Затерянные в космосе

404 Страница – Lost In Space, разработанная Салехом Риазом Куреши. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Салех Риаз Куреши
Created on : 23 апреля 2018 г.
Сделано с : HTML, CSS & JS
Теги : 904 Страница Lost03 In Space # 2: Концепция анимированной страницы 404 SVG

404 Концепция анимированной SVG-страницы, разработанная Владимиром Гащенко. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Владимир Гащенко
Создано : 7 октября 2016 г.
Сделано с : HTML и CSS
Теги : 404 Концепция анимированной страницы SVG93

№3: Ой! Шаблон страницы с ошибкой 404

К сожалению, дизайн страницы с ошибкой 404, разработанный Israa Adnan. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Исраа Аднан
Создано : 30 июня 2021 г.
Сделано с : HTML и CSS
Теги : К сожалению, шаблон страницы с ошибкой 404

# 4: Простой шаблон ошибки 404 страницы

Простой шаблон ошибки 404 страницы, разработанный Naved khan. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Naved khan
Создано : 18 июня 2018 г.
Сделано с : HTML и CSS
Теги : Простой шаблон ошибки 404 страницы

# 5: Йети 404 Страница

Yeti 404 Страница, разработанная Дарином. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Darin
Created on : 17 августа 2018 г.
Сделано с : HTML, CSS(SCSS) & JS
Теги : Yeti 404 Страница

# 6: Интерфейс страницы 404

404 Пользовательский интерфейс страницы, разработанный Рафаэлой Лукас. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями. Страница

# 7: Шаблон страницы Fargo 404

Дизайн страницы Fargo 404, разработанный Нейтом Уотсоном. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Нейт Уотсон
Created on : 18 ноября 2015 г.
Сделано с : HTML(Pug), CSS(SCSS) & JS
Теги : Fargo 9043 page design

#8: Сообщение, напечатанное в формате GSAP 404 с использованием SplitText

Напечатанное сообщение GSAP 404 с использованием SplitText, разработанного Selcuk Cura. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Selcuk Cura
Создано : 22 октября 2017 г.
Сделано с помощью : HTML, CSS(SCSS) и JS
Теги : GSAP 404 введено сообщение с использованием SplitText

# 9: Страница ошибки Mars 404

Страница ошибки Mars 404, разработанная Asyraf Hussin. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Asyraf Hussin
Создано : 2 сентября 2018 г.
Сделано с : HTML и CSS
Теги : Марс 404 Ошибка Страница

# 10: Пример шаблона страницы ошибки 404

404 Дизайн страницы ошибок, разработанный Рикардо Прието. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Ricardo Prieto
Created on : 4 ноября 2017 г.
Сделано с : HTML и CSS
Теги : 404 Error Page Design

# 11: Шаблон страницы CSS 404

Шаблон страницы CSS 404, разработанный agathaco. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : agathaco
Created on : 28 июля 2018 г.
Сделано с : HTML(Pug) & CSS(SCSS)
Теги : CSS 4093 страница 90

#12: Ошибка 404 Страница не найдена

Ошибка 404 Страница не найдена, разработанная Робином Селмером. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Робин Селмер
Создано : 22 августа 2017 г.
Сделано с : HTML и CSS(SCSS)
Теги : Ошибка 404 Страница не найдена

# 13: Неон — HTML-шаблон 404

Neon — 404 html шаблон, разработанный Tibix. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Tibix
Created on : 27 августа 2019 г.
Сделано с : HTML и CSS (SCSS)
Теги : Неоновый 404 HTML-шаблон

# 14: Нахальный шаблон страницы не найден

Шаблон Sassy page not found, который разработал Джастин Джуно. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Джастин Джуно
Создано : 7 мая 2020 г.
Сделано с : HTML и CSS(SCSS)
Теги : страница не найдена шаблон

#15: Анимированный HTML-дизайн страницы 404

Анимированный HTML-дизайн страницы 404, разработанный Джейми Розеном. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Джейми Розен
Created on : 15 октября 2017 г.
Сделано с : HTML, CSS и JS
Теги : Анимированный 404 page design 3

# 16: Чистая страница ошибки CSS 404 вампир

Pure CSS Error Page 404 вампир, разработанный Омаром Дсуки. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Omar Dsooky
Создано : 10 августа 2017 г.
Сделано с : HTML и CSS
Теги 900 CSS86 : Pure Error Page 4093 вампир

# 17: Простая страница ошибки 404

Простая страница ошибки 404, разработанная vineeth.tr. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : vineeth.tr
Создано : 12 апреля 2016 г.
Сделано с : HTML и CSS(SCSS)
Теги : Простая страница ошибки 404 3 9009

# 18: HTML CSS 404 Шаблон страницы плачущего ребенка

HTML CSS 404 Шаблон страницы Crying Baby, разработанный vineeth. tr. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : vineeth.tr
Создано : 12 октября 2016 г.
Сделано с : HTML(Мопс) и CSS(SCSS)
Теги : HTML CSS 404 Шаблон страницы плачущего ребенка

# 19: Страница CSS Train 404

Страница CSS Train 404, разработанная Карлой. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Carla
Создано : 3 ноября 2018 г.
Сделано с : HTML и CSS
Теги : CSS Train 404 Страница

# 20: Анимированный шаблон страницы с ошибкой 404 на чистом CSS

Анимированный шаблон страницы с ошибкой 404 на чистом CSS, разработанный Sergio. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Sergio
Создано : 27 марта 2018 г.
Сделано с : HTML и CSS(SCSS)
Теги 900 CSS86 : Чистый анимированный шаблон страницы ошибки 4040 9093

# 21: Шаблон страницы SVG 404 не найден

Шаблон страницы SVG 404 не найден, разработанный Sylvain Lepinard. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Sylvain Lepinard
Создано : 9 августа 2019 г.
Сделано с : HTML и CSS(SCSS)
Теги : Шаблон SVG 409093 не найден

# 22: Полностью адаптивная страница 404

Полностью адаптивная страница 404, разработанная Kasper De Bruyne. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Kasper De Bruyne
Created on : 18 февраля 2020 г.
Сделано с : HTML, CSS(SCSS) & JS
Теги : 904 страница 9440404040404040404040страницы

# 23: Отзывчивая пользовательская страница 404

Адаптивная пользовательская страница 404, разработанная Ash. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Ясень
Создано : 28 сентября 2017 г.
Сделано с : HTML и CSS
Теги : Адаптивная пользовательская страница 404

# 24: Концепция страницы ошибки Wild West 404

Wild West 404 Error page Концепция, разработанная Zissis Vassos. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Zissis Vassos
Создано : 26 августа 2019 г.
Сделано с : HTML и CSS
Теги : Wild West 404 Страница ошибки Концепция

# 25: HTML-шаблон 404

HTML-шаблон 404, разработанный Jhey. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Jhey
Создано : 23 марта 2020 г.
Сделано с : HTML(Pug), CSS и JS
Теги : HTML шаблон 404

# 26: дизайн ошибки 404 в стиле Windows 10

Дизайн ошибки 404 в стиле Windows 10, разработанный Марко Перетто. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Marco Peretto
Создано : 8 февраля 2019 г.
Сделано с : HTML и CSS
Теги : 404 error design

# 27: Страница ошибки 404: анимированный SVG GSAP

404 Ошибка: анимированный SVG GSAP, разработанный Кристин И. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : christine i
Создано : 22 февраля 2020 г.
Сделано с : HTML, CSS и js
Теги : 404 Ошибка

# 28: Пользовательский дизайн страницы с ошибкой 404

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

Автор : Мухаммад Рауф
Создано : 3 декабря 2021 г.
Сделано с : HTML и CSS
Теги : Пользовательский дизайн страницы с ошибкой 404

№ 29: Ой! страница не найдена шаблон

Ой! страница не найдена, разработанный Swarup Kumar Kuila. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Swarup Kumar Kuila
Создано : 14 августа 2020 г.
Сделано с : HTML и CSS
Теги : страница не найдена шаблон

#30: Потрясающая страница 404 не найдена

Потрясающая страница 404 не найдена, разработанная gavra. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : gavra
Создано : 19 апреля 2014 г.
Сделано с : HTML, CSS и JS
Теги : Awesome 404 страница не найдена

# 31: Ошибка 404: Вдохновение Долины монументов

Ошибка 404: вдохновение Долины монументов, разработанное Sussie Casasola. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Sussie Casasola
Created on : 29 апреля 2018 г.
Сделано с : HTML(Pug) & CSS(Sass)
Теги : 90 Ошибка 404 404

#32: 404 страница

404 страница, которую разработала Юлия. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Юлия
Создано : 7 сентября 2018 г.
Сделано с : HTML & CSS(Sass)
Метки : 404 стр.

# 33: Страница с ошибкой 404 SVG

404 Страница на основе ошибок SVG, разработанная Дэйвом Праттом. Кроме того, вы можете настроить его в соответствии с вашими пожеланиями и потребностями.

Автор : Дэйв Пратт
Created on : 6 сентября 2017 г.
Сделано с : HTML и CSS(SCSS)
Теги : 404 SVG Error Based3 Page 90

# 34: шаблон страницы ошибки 404 при начальной загрузке

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

Автор : Aji
Создано : 26 июня 2021 г.
Сделано с : HTML и CSS
Теги : шаблон страницы ошибки bootstrap 404

# 35: Классная страница ошибки 404

Классная страница ошибки 404, которую разработал Антон Лукин.