1. Что такое 404 страницы ошибок?
2. Пользовательские страницы ошибок 404 Vs. Общие страницы ошибок 404
3. Как настроить пользовательскую страницу 404
4. Примеры пользовательских страниц с ошибками 404 и подсказок на вынос:
5. Пример # 1 AirBnb
6. Пример №2 - Агены
7. Пример № 3 - iFolderLinks
8. Пример № 4 - GitHub
9. Пример № 5 - Хайнц
10. Пример № 6 - iPlanWebsites.com
11. Пример № 7 - VisitSteve
12. Пример № 8 - BlueFountainMedia
13. Пример № 9 - Imgur.com
14. Пример №10 - HootSuite
15. Пример № 11 - iContact
16. Пример № 12 - PetFinder
17. Пример № 13 - Jhuskisson
18. Пример № 15 - ExpansionBroadcast
19. Пример № 16 - CSSLeak
20. Пример № 17 - BlueDaniel
21. Пример №18 - MailChimp
22. Пример №19 - ApartmentHomeLiving
23. Пример №20 - EternalMoon
24. Пример №21 - ShelfWorthy
25. Пример № 22 - Twingly
26. Пример №23 - Dropbox
27. Пример № 24 - LimpFish
28. Пример № 25 - Джабонг
29. Пример № 26 - Нош
30. Пример №27 - NotFound.org
31. Пример №28 - BrandCrowd
32. Пример № 29 - Хаким
33. Пример №30 - Mattel
34. Пример № 31 - электронная гармония
35. Пример №32 - Modcloth
36. Пример № 33 - BetaBrand

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

Существует два типа страниц с ошибками 404: общие 404 и пользовательские 404.

Пользовательский 404 помогает тремя способами:

• Уменьшает разочарование клиентов
• Помогает брендинг и ссылки на другие части вашего сайта
• В некоторых случаях это может даже привести к конверсии

Для всех тех, кто не знает, что такое страницы ошибок 404 и что означает пользовательский код 404, читайте дальше, чтобы прояснить свои концепции.

Мы собираемся обобщить основы ошибки 404 и изучить лучшие практики и советы, иллюстрированные несколькими вдохновляющими примерами:

Что такое 404 страницы ошибок?

Если страницу, которую вы пытаетесь открыть на веб-сайте, не удается найти на их веб-сервере, появляется страница с ошибкой 404. Ошибка 404 - это код ответа от сервера, который относится к категории HTTP коды состояния ,

Вы знаете, что это страница ошибки 404, когда видите следующие сообщения об ошибках:

• 404 Не Найдено
• Запрашиваемый URL не найден на этом сервере.
• HTTP 404 не найден
• Ошибка 404
• Страница не найдена

Ниже показаны два общих примера сообщений об ошибках 404.

Ошибки 404 могут быть вызваны различными причинами, такими как:

• Запрашиваемая страница не существует
• сервер упал
• Интернет не работает
• Неработающие ссылки
• Неверный URL
• Страница была перемещена на другой адрес

Пользовательские страницы ошибок 404 Vs. Общие страницы ошибок 404

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

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

Следовательно, наличие пользовательской страницы 404 ОБЯЗАТЕЛЬНО.

Как настроить пользовательскую страницу 404

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

Если ваш сайт построен на CMS (Система управления контентом), вы, вероятно, можете создать свою собственную страницу с ошибкой 404. Просто следуйте инструкциям, необходимым для создания новой веб-страницы в вашей CMS.

Ниже приведен список ссылок на документы, которые демонстрируют, как создать пользовательскую страницу 404 на соответствующих CMS:

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

Чтобы узнать больше, прочитайте эту статью о том, как настроить пользовательскую страницу ошибки 404 на thesitewizard.com ,

Примеры пользовательских страниц с ошибками 404 и подсказок на вынос:

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

Вы можете принять либо простую стратегию «управления пользователями», либо повысить ее, используя стратегию продаж в своих пользовательских 404-х, в зависимости от того, насколько вы уверены в своем поведении пользователя.

Давайте быстро обобщим некоторые из этих лучших практик. Они перечислены ниже:

• Добавьте намек на юмор
• Ссылка на популярные страницы
• Панель поиска
• Текст, который сопереживает посетителям и направляет их
• Дать контактную информацию
• Ссылки верхнего и нижнего колонтитула с основного сайта
• Сохранение темы бренда на пользовательской странице 404
• Разрешить сообщение о проблеме (необязательно)
• Добавить игру (необязательно)
• Добавить видео (необязательно)
• Добавить кнопки призыва к действию (необязательно)

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

Давайте посмотрим на несколько вдохновляющих примеров пользовательских 404.

Пример # 1 AirBnb

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

Выводы из страницы Airbnb custom 404:

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

• Полезные ссылки на популярные страницы также включены в тело страницы.

• Приводится код ошибки с объяснением причины ошибки.

Пример №2 - Агены

Выводы с сайта Agens custom 404:

• Ссылки верхнего и нижнего колонтитула: страница бренда должна соответствовать основному веб-сайту со ссылками верхнего и нижнего колонтитула

• Контактная информация: могут быть включены контактные данные, такие как номер телефона, адрес электронной почты, ссылки на страницы социальных сетей и ссылки на страницу о нас.

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

• Empathize And Guide User: сопереживайте поисковику и помогайте ему, предоставляя ссылку на ваши старые проекты (если таковые имеются) или недавние проекты, как, например, в этом случае, где говорится, что, возможно, вы искали один из наших недавних проектов (ссылка) или, может быть, старый (ссылка)?

Пример № 3 - iFolderLinks

Выводы из пользовательской страницы 404 iFolderLinks:

• Юмор: добавьте намек на юмор с милой фотографией плачущего ребенка.

• Известность 404: заметьте, что это страница ошибки 404.

• Причины 404. Перечислите причины, по которым пользователь мог попасть сюда.

• Дайте быстрые решения: перечислите различные способы устранения проблемы

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

Пример № 4 - GitHub

Выводы с пользовательской страницы 404 GitHub:

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

• Используйте фирменный талисман: фирменный талисман может быть использован, чтобы подчеркнуть брендинг вашей пользовательской страницы 404. Интересно, что в этом случае талисман (octocat) используется не где, на основном веб-сайте, кроме в значках и на пользовательской странице 404.

• Параметр входа: укажите параметр входа на странице ошибок, чтобы устранить ошибки, которые произошли из-за того, что пользователи не вошли в систему.

• Панель поиска: предоставьте заметную панель поиска и опишите, что в ней можно найти, как в этом случае написано «Поиск кода, проектов и людей на GitHub».

• Ссылки на социальные сети: дайте ссылки на поддержку, страницу социального бренда (в данном случае это твиттер) и страницу, которая дает свежие обновления на сайте, в данном случае, статус GitHub.

Пример № 5 - Хайнц

Выводы из Heinz custom 404 страницы:

• Меню навигации: меню навигации должно соответствовать основному веб-сайту.

• Панель поиска: включить опцию поиска.

• Ссылки на популярные страницы: предоставьте массив аккуратно упорядоченных ссылок на популярные страницы.

• Посетители гида: Объясните простым языком, как пользователи могут максимально использовать все опции, доступные на этой странице.

В этом примере на пользовательской странице 404 Хайнца написано « Вы пробовали поиск?». Введите ключевое слово (слова) в поле поиска выше или попробуйте одну из ссылок ниже.

Пример № 6 - iPlanWebsites.com

Выводы с iPlanWebsites Custom 404 Страница:

• Добавьте пользователей с любопытством и интригой: от этого примера мало что можно убрать, если только вы не заинтриговали своих посетителей, купив любопытство на несколько секунд.

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

Пример № 7 - VisitSteve

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

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

Пример № 8 - BlueFountainMedia

Выводы с Пользовательской Страницы BlueFountainMedia 404:

• Добавить игру: добавьте игру и подбодрите своих потерянных посетителей сайта.

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

Пример № 9 - Imgur.com

Выводы из Страницы Imgur's Custom 404:

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

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

Пример №10 - HootSuite

Выводы с пользовательской страницы HootSuite 404:

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

Пример № 11 - iContact

Выводы с пользовательской страницы iContact 404:

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

Пример № 12 - PetFinder

Выводы со страницы PetFinder's Custom 404:

• Главная тема сайта сохранилась без изменений со всеми оригинальными ссылками на панели меню и панелями поиска.
• Объявление размещено справа.
• Ссылка на домашнюю страницу и контактная страница рядом с текстом ошибки 404 и изображением питомца.

Пример № 13 - Jhuskisson

Выводы из Пользовательской Страницы Джейми Хаскиссона 404:

• Ссылки на страницы социальных сетей и RSS-каналы.
• Ссылка на почтовый архив.
• Главное меню навигации по сайту.

Выводы с пользовательской страницы 404 PoemOfQuotes:

• 404 сообщение об ошибке в виде творческого стихотворения.
• Ссылки на популярные страницы сайта внизу страницы.

Пример № 15 - ExpansionBroadcast

Выводы с пользовательской страницы 404 Expansion Broadcast:

• Ссылки верхнего и нижнего колонтитула сохраняются с основного сайта.
• Контактная форма предоставляется.

Пример № 16 - CSSLeak

Выводы с страницы CSS Leak's Custom 404:

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

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

Пример № 17 - BlueDaniel

Выводы с пользовательской страницы BlueDaniel 404:

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

Пример №18 - MailChimp

Выводы с пользовательской страницы MailChimp 404:

• Творческое использование фирменного талисмана, чтобы передать это 404 страницы.
• Панель поиска и заголовок навигационных ссылок.

Пример №19 - ApartmentHomeLiving

Выводы с пользовательской страницы ApartmentHomeLiving 404:

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

Пример №20 - EternalMoon

Выводы из пользовательской страницы EternalMoon 404:

• Драматическое представление украденной веб-страницы с вымышленным анимационным персонажем.
• Ссылки на сообщение об ошибке и на домашнюю страницу.

Пример №21 - ShelfWorthy

Выводы из Шелфвортис Custom 404 Страница:

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

Выводы с пользовательской страницы ClubPenguin 404:

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

Пример № 22 - Twingly

Выводы из Страницы Twingly's Custom 404:

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

Выводы из Страницы Мутакао Custom 404:

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

Пример №23 - Dropbox

Выводы с пользовательской страницы Dropbox 404:

• Загадочное изображение значка Dropbox говорит о том, что что-то не так.
• Предоставляются ссылки на справочный центр, форум и домашнюю страницу.

Пример № 24 - LimpFish

Выводы с Custom Limpfish 404 Страница:

• Забавное представление страницы 404, не найденной в виде объявления WANTED.
• Ссылки на основной сайт и дочерние сайты.

Пример № 25 - Джабонг

Выводы с Jabong's Custom 404 Page:

• Верхний и нижний колонтитулы основного сайта сохранены.
• Вариант поиска.
• Категории продуктов предоставляются пользователям с миниатюрами изображений продуктов.

Пример № 26 - Нош

Выводы из Nosh's Custom 404 Page:

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

Пример №27 - NotFound.org

Выводы из совета NotFound:

NotFound.org - отличная инициатива, которая хочет лучше использовать любые страницы ошибок 404. Эта инициатива нашла способ использовать пространство в Интернете, которое не использовалось, и превратить его во что-то полезное: повышение осведомленности о пропавших детях. Если вы хотите присоединиться к этой инициативе, следуйте инструкциям, которые вы найдете на их сайте.

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

Пример №28 - BrandCrowd

Выводы со страницы 404 BrandCrowd:

• Ссылки верхнего и нижнего колонтитула с основного сайта сохранены.
• На 404 нестандартных эскизах карандашей нет кликабельной области.
• Удобный текст.

Пример № 29 - Хаким

Выводы из 404 страницы Хаким:

• Жуткие глаза, которые следуют за курсором, куда бы он ни шел, кажутся инновационным прикосновением к обычаю 404.
• Ссылки на опцию поиска и домашнюю страницу.

Пример №30 - Mattel

Выводы со страницы Mattel 404:

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

Пример № 31 - электронная гармония

Выводы со страницы 404 eHarmony:

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

Пример №32 - Modcloth

Выводы со страницы 404 Модклота:

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

Пример № 33 - BetaBrand

Выводы со страницы БетаБранда 404:

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

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