40 умных страниц ошибок 404 с реальных сайтов

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

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

Это неудобно, но факт. И реакция посетителей, когда они попадают на несуществующую страницу, может варьироваться от «принять это спокойно» до «полностью потерять рассудок».

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

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

 

Что такое ошибка 404?

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

По большей части вы можете настроить свой сервер для создания настраиваемой страницы с ошибкой 404. (Если вы являетесь клиентом HubSpot, нажмите здесь, чтобы узнать, как настроить страницу 404 в HubSpot.)

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

Лучшие примеры 404 веб-страниц

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

Страница не найдена: страницы ошибок 404 TK Creative

1. Pipcorn

В то время как страница 404 может легко отличаться от веб-сайта, страница ошибок Pipcorn идеально сочетается с остальным брендингом сайта. Есть красивый анимированный фон, понятная текстовая подсказка, направленная посетителям на поиск по сайту (в комплекте с умной игрой слов), и кусок попкорна, используемый в качестве «0» в «404».

2. Spotify

Гигант музыкального стриминга Spotify покрыл свои основы умной страницей 404. Остроумный каламбур из альбома Канье Уэста «808s and Heartbreak» и анимация записи, веб-сайт ненадолго развлекает, а затем отправляет посетителей обратно на страницу, с которой они пришли.

3. Добродушно

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

4. саман

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

5. Clorox

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

6. Думский Коллектив

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

7. чиллхаус

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

8. Bitly

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

9. Ikea

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

10 Мокси Дизайн Ко.

Конечно, фраза «взорвала Интернет» может показаться немного преувеличенной, но она говорит посетителям, что Moxie Design Co. не относится к себе слишком серьезно с такими небольшими промахами, как этот. Кроме того, внизу удобно расположена панель поиска, чтобы вы могли продолжить свой путь.

11 МакКиссак и МакКиссак

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

12 CSS хитрости

Вы когда-нибудь срывали обертку веб-сайта, чтобы посмотреть, что под ней? Это концепция, которую CSS Tricks использовали на своей странице с ошибкой 404. Это и остроумно, и напоминает о том, чем занимается веб-сайт: умное использование стилей страницы.

13 Хорошие старые игры

Для других веб-сайтов вы разворачиваете интерфейсную часть, и там . .. просто огромная пустота. Эта страница является умным отсылкой к GOG Galaxy, родному клиенту видеоигр Good Old Games. К счастью, здесь есть маленький персонаж видеоигры, чтобы дать посетителям возможность сообщить об ошибке, если они захотят.

14 Canva

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

15 Иннотек

Подобно подходу Canva, Innotech представляет игру в стиле Pong на своей странице 404, чтобы немного развлечься. Скорее всего, вы запомните такой веб-сайт. Кроме того, забавный обходной путь дополняет поистине впечатляющий веб-сайт — серьезно, когда вы закончите играть, перейдите на домашнюю страницу и изучите все.

16 Мириады

Видеоагентство Myriad выбрало причудливый фирменный дизайн страницы 404, имитирующий классические цветные полосы SMPTE, которые появляются на старых пленках и телевизорах. Это забавный возврат к старым технологиям, представляющий более современную проблему несуществующей веб-страницы.

17 KonMari

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

18 БрендCrowd

На этой странице с ошибкой не только подробная и интересная иллюстрация, но и умная копия. Нам нравится ссылка на песню Semisonic «Closing Time»: «Вы можете щелкнуть где угодно, но не можете щелкнуть здесь».

19 Хот Дот Продакшнс

Страница ошибок Hot Dot остается верной своему девизу: «пересечение новых технологий и дизайна». Страница анимирована сотнями крошечных точек, которые меняют направление в зависимости от того, куда вы перемещаете курсор. Это завораживает и демонстрирует дизайнерские возможности агентства.

20 ОранжевыйПальто

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

21 Эрвин и Смит

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

22 Студии DayCloud

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

23 Headspace

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

24 Пекарня Wildwood

Некоторые веб-сайты до сих пор интегрировали на свои страницы умные фирменные копии, в то время как другие размещали на своих страницах полноценные онлайн-игры. Но нет ничего плохого в кратком толчке в правильном направлении. Изысканный сайт пекарни Wildwood делает вещи короткими и милыми (в буквальном смысле).

Страница не найдена: TK Funny, страницы ошибок 404

25 Астутео

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

26 LEGO

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

27 Магнит

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

28 IconFinder

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

29 Сладкие Мечты

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

30 GitHub

Строка «Это не те дроиды, которых вы ищете» относится к уловке Джедая Оби-Вана Кеноби над штурмовиками в Звёздные войны. Эпизод IV, и эта фраза стала широко известной, чтобы сказать кому-то, что он придерживается неправильного курса действий. GitHub использует эту знаменитую строчку в своем сообщении об ошибке 404.

31 Патагония

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

32 Облачная сигма

Проверьте это: Cloud Sigma позволяет нам участвовать в некоторых закулисных действиях. Их страница с ошибкой 404 притворяется «домашней страницей младшего разработчика» — этот младший разработчик оказывается, ну, котом.

33 AMC Театры

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

34 коричневый

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

35 NPR

Поначалу страница ошибок NPR не кажется чем-то особенным. Но продолжайте читать, и вы увидите, как они умело связывают некоторые из своих замечательных историй о потерянных людях, местах и ​​вещах, например, рассказ об Амелии Эрхарт и рассказ об Уолдо. Это может просто заставить потерявшихся пользователей чувствовать себя менее одинокими.

36 Средний

Medium использует тот же подход, что и 404-я страница NPR, рекомендуя статьи о потерянных и потерянных вещах. Если у вас есть время, ознакомьтесь с этими статьями — они неплохо читаются.

37 ГлавнаяStarRunner

На сайте HomeStarRunner.com, где размещается мультсериал с Flash-анимацией, за многие годы появилось несколько забавных страниц с ошибками 404. В самых последних персонажах мультсериала изображена сцена, которая могла бы появиться прямо из одного из их эпизодов. Если вы включите звук при загрузке страницы, вы услышите, как их персонаж Strong Bad, известный своими громкими фразами, говорит: «404’d!»

38 Blizzard Entertainment

Вот простая идея, которая в конечном итоге выглядит привлекательно: страница 404 Blizzard Entertainment содержит анимированного персонажа, потерянного в настоящей метели, и немного юмора, которые оценят поклонники World of Warcraft.

39 Привет, большая идея

Краткий обзор экспертов по маркетингу и социальным сетям. Веб-сайт Hello Big Idea расскажет вам, что вам нужно знать о его смелом и прямолинейном стиле текста. И, конечно же, его страница с ошибкой 404 — не исключение.

40 HubSpot

С нами тоже бывает! Это сообщение, которое мы публикуем, чтобы сообщить посетителям нашего сайта, что на сайте есть некоторые проблемы. Нашей целью было оставаться верным Голос бренда HubSpot быть максимально милым, чутким и услужливым.

Превратите страницу с ошибкой 404 в радость

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

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

Оригинал статьи

21 потрясающая страница 404 для привлечения потерянных посетителей [2021]

Опубликовано: 2021-08-19

Что, если бы мы сказали вам, что ваша страница с ошибкой 404 действительно может увеличить количество конверсий и увеличить доход?

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

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

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

Что такое страница 404 (и почему они имеют значение)

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

Так, например, если вы искали определенную страницу на OptinMonster, но неправильно написали URL-адрес, вы попадете на эту страницу:

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

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

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

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

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

А чтобы создать свои собственные страницы 404, мы рекомендуем использовать SeedProd:

SeedProd — это ЛУЧШИЙ конструктор страниц 404 и целевых страниц для WordPress. Начать работу легко и совсем не требует кода.

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

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

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

Хотите попробовать сами? Нажмите здесь, чтобы открыть свой 100% безрисковый аккаунт SeedProd сегодня!

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

Лучшие примеры страниц 404

1. OptinMonster — Пример страницы 404

Почему это работает:

Мы уже мельком видели страницу 404 OptinMonster ранее в этом посте. Но поскольку это такой простой пример, мы начнем список здесь.

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

• Вернуться на главную
• На страницу » Связаться с нами»
• Панель навигационного поиска

Но цель всегда одна: удержать пользователей на сайте OptinMonster.

И мы можем с опытом сказать, что эта страница делает то, для чего она была создана.

2. WPForms

Почему это работает

Вот еще один пример урезанной страницы с ошибкой 404. Он использует игривую лексику («упс») и предлагает пользователям перемещаться по сайту с помощью панели поиска.

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

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

В остальном это элегантный и профессиональный пример страницы 404, который, как мы знаем, работает.

3. Pixar

Почему это работает

Что касается творчества, Pixar стоит далеко от остальных. Вот почему неудивительно, что у них есть веселый, креативный и увлекательный пример страницы 404.

Интересно то, что у них нет навигационной панели поиска, чтобы пользователи могли найти то, что они ищут.

В этом разделе такие сайты, как OptinMonster или WPForms, имеют лучшие страницы 404.

Но страница Pixar предназначена для того, чтобы заставить пользователя улыбнуться, и они, безусловно, добиваются этого.

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

4. Дисней

Почему это работает

Как и в случае с Pixar, страница 404 Disney полностью соответствует бренду.

Фактически, как вы можете видеть, он идет с анимацией из их популярного фильма « Ральф ломает Интернет» .

Это отличный способ вернуть пользователей во Вселенную Диснея. Кроме того, у них есть навигационная панель поиска (в отличие от Pixar), чтобы помочь своей аудитории найти то, что они ищут.

5. Netflix

Почему это работает

У Netflix есть забавная страница из одного из предлагаемых ими фильмов, « Затерянные в космосе» . Это хорошо, учитывая причину, по которой люди попали на страницу.

Главное, на что стоит обратить внимание, — это большая кнопка CTA посередине: Netflix Home.

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

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

6. Хулу

Почему это работает

Другой пример страницы с кодом 404 был получен от конкурента Netflix: Hulu.

Что интересно на этой странице, так это то, насколько она урезана. Нет никаких цветов, и есть только одна кнопка с надписью «ОК».

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

Но если такой мегабренд, как Hulu, что-то делает, скорее всего, это потому, что это работает.

7. Нерф

Почему это работает

У Nerf есть подробная страница 404 с забавной графикой и большой кнопкой CTA с надписью «Перейти к брендам».

Это также объясняет, почему пользователь попал на эту страницу («ссылка либо устарела, либо изменилась»). Это объяснение полезно для их целевой аудитории: детей старшего возраста.

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

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

8. Tripadvisor.

Почему это работает

На сайте Tripadvisor есть забавный анимированный пример страницы 404.

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

• Отели
• Рестораны
• Список задач
• Аренда на время отпуска

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

9. Постоянный контакт

Почему это работает

Constant Contact использует более неформальный язык, который находит отклик у их целевой аудитории (молодые стартапы и специалисты по цифровому маркетингу).

Не столь сдержанный язык быстро объясняет это словами: «Вещи больше не так хороши».

Затем они дают пользователям быстрый способ вернуться на главную страницу.

Одна вещь, которую мы бы исправили, — это язык, окружающий CTA. В нем говорится: «Вы можете вернуться или попробовать одну из ссылок ниже». Но после этого пользователь может выбрать только одну ссылку.

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

10. Слабость

Почему это работает

Slack сделал целый анимированный фон для страницы с ошибкой 404.

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

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

11. Лего

Почему это работает:

Страница 404 Lego не только на 100% фирменная, но и интересная и простая для понимания. Нет никакой технической формулировки и нет ссылки на «ошибку 404», которую некоторые люди могут не понять.

Все, что нужно знать вашему посетителю, — это то, что он не получил нужную страницу. Их на самом деле не волнует, почему; они просто хотят решения.

12. Электронный центр Великобритании

Почему это работает:

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

Вы также заметите, что эта страница не обвиняет пользователя в проблеме. Вместо этого они извиняются .

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

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

13. Список25

Почему это работает:

Эта страница с ошибкой 404 из List25 великолепна, и, собственно говоря, это больно.

Основная передовая практика дизайна пользовательского интерфейса — объяснить, что пошло не так при доставке сообщения об ошибке. List25 предлагает 25 объяснений — некоторые серьезные, а некоторые — шутливые.

У них есть панель поиска вверху, поэтому посетителям не нужно прокручивать весь список, но мы уверены, что большинство посетителей List25 все равно будут.

14. Бретт Терпстра

Почему это работает:

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

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

Страница не броская, но чрезвычайно полезная.

15. Стив Мэдден

Почему это работает:

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

Они также включают ссылки на другие популярные продукты, чтобы отвлечь посетителей от того, что может быть очень неприятным. Подлый и эффективный.

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

Некоторые вещи, которые следует включить в дизайн страницы 404:

• Навигация по меню
• Ссылка на главную
• Ссылка на вашу карту сайта
• Панель поиска
• Ссылки на популярные посты

А с SeedProd вы можете легко отображать продукты на странице с ошибкой 404. Просто перетащите один из настраиваемых блоков WooCommerce от SeedProd и поместите его на место.

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

16. 9gag

Почему это работает:

Страница 404 от 9gag имеет одну цель: заставить вас загрузить их приложение . Они даже не делают вид, что хотят ничего другого.

Добавление полной страницы популярной гифки «Криминальное чтиво Траволта» в фоновом режиме — забавный штрих!

И здесь главное — простота.

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

17. Путь

Почему это работает:

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

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

Цель здесь — дать посетителям возможность сообщить о проблеме .

Вы можете сделать это несколькими способами. Вы можете сделать это простым, как Path, и включить возможность обращения в службу поддержки. Другой вариант — использовать форму обратной связи.

18. IMDB

Почему это работает:

IMDB показывает посетителям цитату из фильма на их странице 404.

Брендинг здесь тонкий. Здесь нет постеров к фильмам или трейлеров, соревнующихся за внимание посетителей. IMDB просто предлагает цитату из фильма, ссылку на домашнюю страницу сайта и ссылку на процитированный фильм.

Создавая страницу с ошибкой 404, убедитесь, что вы знакомы с брендом .

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

19. Эверипедия

Почему это работает:

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

Спикер и маркетолог TED Ренни Глисон сказал о странице с ошибкой 404: « Простая ошибка может сказать мне, чем вы не являетесь. Или напомни мне, почему я тебя люблю. ”

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

Если вы сможете быстро ответить на этот вопрос со своей страницы 404, вы сможете превратить потерянных посетителей в платящих клиентов.

20. Хейзап

Почему это работает:

Кто не любит играть в игры?

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

Нет, разрабатывать игру не обязательно. Но рассмотрите возможность добавления интерактивного элемента на вашу страницу .

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

21. Амазонка

Почему это работает

Если такая компания, как Amazon, развлекается со своей страницей 404, это означает, что вам, вероятно, тоже следует.

Amazon начинает с извинений большими жирными буквами. Затем он перенаправляет пользователей на домашнюю страницу Amazon ИЛИ позволяет пользователям познакомиться с «собаками Amazon».

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

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

Надеемся, вам понравился этот пост. Если да, то вам обязательно стоит ознакомиться со следующими ресурсами:

• Как легко создавать целевые страницы менее чем за 5 минут
• 38 инструментов для создания целевых страниц для увеличения числа конверсий
• Анатомия идеальной целевой страницы

В этих статьях будет все необходимое для создания более качественных и высококонвертируемых целевых страниц для ваших веб-сайтов.

Как сделать редирект 404 ошибки – Помощь

Посетители сайта видят 404 ошибку, если страница, на которую они пытаются перейти, не существует или по какой-то причине сервер не может её найти. В статье рассмотрим, что это за ошибка и какое влияние она оказывает на поведенческие факторы пользователей и SEO. А также разберем, как настроить редирект 404 ошибки через .htaccess.

Что такое ошибка 404

Ошибка 404 (File not found) возникает, когда сервер не может найти запрашиваемую пользователем страницу. От ее появления не застрахован ни один сайт. Достаточно ввести в адресной строке после домена рандомный набор символов.

Например:

http://site.ru/asdfjkl;

Сервер не сможет найти страницу, и отобразится ошибка:

Ошибка 404 на сайте reg.ru

Также с ошибкой 404 можно столкнуться в следующих случаях:

• Администратор сайта удалил или переместил страницу, но не сделал редирект на актуальный материал.
• Изменилась структура сайта, а у страниц остались старые URL.
• Посетитель опечатался в адресе, когда вводил его вручную.
• Посетитель перешел по «битой» ссылке, которая ведет на несуществующую (удаленную или перемещенную) страницу.

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

Код 404 не стоит путать с другими похожими ошибками. Например, 403-й, которая означает, что доступ к ресурсу ограничен или запрещен. Подробнее о том, как ее исправить в статье.

Иногда при загрузке несуществующей страницы браузер получает ответ 200 вместо 404. Такой случай называют Ложной ошибкой (Soft 404). Он означает, что со страницей всё в порядке, хотя пользователь видит ошибку. Также проблема заключается в том, что Яндекс и Google показывают эту страницу в результатах поиска. Чтобы проверить код ошибки, воспользуйтесь проверкой URL от Google.

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

Возможные последствия для сайта

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

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

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

Рекомендации по созданию страницы 404

Если сайт создавался в CMS WordPress, Joomla, Drupal и т. п., в нем, скорее всего, предусмотрена страница ошибки 404. Но она может быть неинформативной или отличаться от дизайна остальных страниц вашего веб-ресурса.

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

Важно, чтобы страница была информативной и полезной:

• Объясните, что случилось и почему пользователю попалась ошибка;
• Посоветуйте, что пользователю стоит сделать, чтобы найти интересующий его контент;
• Оставьте каналы для связи и возможность связаться с поддержкой сайта.

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

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

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

404 ошибка в разделе «Помощь» на сайте REG.RU

Как создать страницу ошибки 404 и настроить редирект на нее в .htaccess

1. 1.

   Создайте страницу одним из следующих способов:

   • Если вы знаете HTML и CSS, напишите код страницы самостоятельно и загрузите файл с названием 404.html в корневую папку сайта.

   • Если навыков верстки нет, в интернете можно найти бесплатные шаблоны со страницами ошибки. Скачайте файл и добавьте его в корневую папку.

   • Если вы используете WordPress, воспользуйтесь плагином 404page — your smart custom 404 error page по инструкции ниже. Обратите внимание! Если вы воспользовались плагином, вам не нужно прописывать путь к файлу в .htaccess.

   Как настроить страницу в плагине WordPress

   1) Откройте админку вашего сайта в WordPress.

   2) Перейдите в раздел «Плагины» и нажмите Добавить новый.

   3) В строке поиска введите название 404page — your smart custom 404 error page.

   4) Нажмите Установить → Активировать:

   5) Перейдите в раздел Внешний вид → 404 Error Page.

   6) Выберите в списке Sample Page, чтобы сменить стандартную страницу ошибки, и нажмите Edit Page:

   7) Создайте страницу в открывшемся визуальном редакторе и нажмите Обновить:

   Готово! После обновления страница будет использоваться автоматически.

2. 2.

   Откройте конфигурационный файл .htaccess в корневой папке вашего сайта и добавьте в него строку:

   ErrorDocument 404 https://site. ru/404.html

   Где вместо site.ru — домен вашего сайта.

3. 3.

   Сохраните изменения.

Готово! Теперь при возникновении 404 ошибки, в браузере пользователей будет открываться созданная вами кастомная страница.

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

Редирект с 404 на главную (не рекомендуется)

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

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

Рекомендуется использовать специальные страницы для ошибки 404.

Проверка редиректа 404

Проверить, корректно ли все настроено можно в Яндекс.Вебмастер и Google Search Console.

Яндекс.Вебмастер

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

1. 1. Откройте Яндекс.Вебмастер.
2. 2.

   Перейдите в раздел Инструменты → Проверка ответа сервера.

3. 3.

   Введите название страницы ошибки и нажмите Проверить.

4. org/HowToStep»> 4.

   В коде статуса HTTP должно отображаться 404 Not Found:

Google Search Console

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

1. 1. Откройте Google Search Console.
2. 2.

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

На сайте небольшого объема можно самостоятельно следить за наличием ошибок и постараться не допускать того, чтобы на нём было много страниц, утративших актуальность. Своевременно настраивайте 301 редиректы, когда статья в справке, страница или товар теряют актуальность.

Если сайт многораздельный и многостраничный, вручную мониторить его будет сложно.

Рекомендуется использовать для поиска страниц ошибки 404 онлайн-сервисы (Serpstat, BadLincs.ru и другие). Также можно воспользоваться плагинами в CMS. Замените ссылки и настройте редиректы. А также создайте понятную красочную страницу ошибки с объяснением причины, ссылками на основные разделы и строкой поиска.

Как создать страницу ошибки 404?

..или страница которой нет!

Прежде чем создавать страницу ошибки 404 давайте сначала разберёмся что это вообще за ошибка такая..

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

Возникать данная ошибка может в ряде случаев:

• Ссылка, по которой пришёл пользователь, неверна.

• Пользователь неправильно указал путь в адресной строке к одной из страниц Вашего сайта.

• Ранее существовавшая страница Вами уже удалена или переименована, однако всё ещё существует в индексе поисковых систем или закладках пользователей.

Что увидит пользователь в результате этой ошибки?

В лучшем случае страницу с рекламой Вашего хостера и кратким объяснением что мол Вы «не туда попали».. в худшем это будет просто надпись: 404 Not Found — The requested URL /page.html was not found on this server — собственно «Запрашиваемый URL отсутствует на этом сервере».

Теперь представьте, что сделает пользователь когда увидит эту картину? Правильно!! закроет эту страницу и пойдёт искать интересующую его информацию в другом месте!! — в результате чего Вы потеряете целевого посетителя!

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

• Данная страница будет содержать элементы дизайна Вашего сайта — тем самым даст понять посетителю что, несмотря на то что он попал не совсем туда куда хотел он всё таки попал именно на Ваш сайт!

• Пользовательская страница 404, в отличие от стандартных, не будет «тупиковой», а на ней будут располагаться ссылки на основные страницы сайта.

  . — Что позволит посетителю двигаться дальше и тем самым удержит его на Вашем сайте.

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

Как видите сплошные плюсы..

Создаётся страница ошибки 404 точно так же как и любая другая страница на Вашем сайте.. никаких нюансов в коде странице нет..

Ну например создадим файл с именем 404.html

<html>
<head>
<title>Ошибка 404</title>
</head>
<body>
<img src=»graphics/404.gif» alt=»Ошибка 404″>
<p>К сожалению, запрашиваемая Вами страница не найдена..</p>
<p>Почему?</p>
<ol>
<li>Ссылка, по которой Вы пришли, неверна.
<li>Вы неправильно указали путь или название страницы.
<li>Страница была удалёна со времени Вашего последнего посещения.
</ol>
<p>Для продолжения работы с сайтом Вы можете воспользоваться формой поиска по сайту:</p>
<form>
<input type=»text» size=»30″>
<input type=»submit» value=»Поиск»>
</form>
<p>..или перейти на:</p>
<ul>
<li><a href=»#»>Главную страницу сайта.</a>
<li><a href=»#»>Карту сайта</a>
</ul>
</body>
</html>

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

Создали? а вот теперь поговорим о нюансах..

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

Что это за файл такой спросите Вы?

Файл .htaccess (я не опечатался, пишется с точкой в начале имени и не использует никакого расширения) – дает возможность конфигурировать работу сервера в отдельных его директориях..

На данный файл может быть возложен ряд специфических задач.. например: устанавливать права доступа к файлам в папке, менять названия индексных файлов, глобально перенаправлять посетителей на другой сайт, запретить доступ к сайту с определённого ip адреса… и еще много всяких иногда очень полезных вещей может делать этот чудо файл.. в том числе может самостоятельно обрабатывать ошибки сервера — что нам собственно и нужно!

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

Итак, создаём файл под названием .htaccess который содержит в себе одну единственную строчку (если таковой файл уже имеется с какими ни будь другими инструкциями серверу, то просто дописываем в него эту строчку):

ErrorDocument 404 http://www.site.ru/404.html

И заливаем его на сервер в корневую папку сайта.

Ну только естественно сначала поменяйте в файле .htaccess ссылку http://www.site.ru/404.html на адрес Вашей собственной страницы которая должна будет открываться при возникновении ошибки 404.

Вот собственно и всё! теперь если Вы всё сделали правильно, при возникновении ошибки 404 будет загружаться Ваша «ошибочная» страница.

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

---

P.S.Таким же способом с помощью файла . htaccess Вы можете обрабатывать и другие ошибки сервера:

• 401 ошибка(ErrorDocument 401 http://www.site.ru/page.html)- Требуется авторизация.
• 403 ошибка(ErrorDocument 403 http://www.site.ru/page.html)- Пользователь не прошел аутентификацию, доступ запрещен.
• 500 ошибка(ErrorDocument 500 http://www.site.ru/page.html)- Внутренняя ошибка сервера.

Если что-то непонятно или Вы в чем-то сомневаетесь, то за дополнительными разъяснениями обращайтесь на форум.

Ошибка 404 (страница не найдена) что делать? — Примеры

404 ошибка — что это такое?

Каждая страница в интернете имеет свой адрес — URL. Например, эта

http://shpargalkablog.ru/2012/03/404.html

Его браузеры отображают сверху экрана в адресной строке.

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

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

1. плохая связь,
2. при вводе в строку адреса браузера была допущена опечатка, скажем, не дописана последняя буква l

   http://shpargalkablog.ru/2012/03/404.htm

3. ссылка, ведущая на страницу, устаревшая или не корректная,
4. страница была перенесена, а автоматическое перемещение посетителя на новый адрес не настроено,
5. страница была удалена.

Запрашиваемый сайт также может не открываться, если

1. сервер выдаёт другую ошибку,
2. системный администратор закрыл к нему доступ, допустим, через файл hosts, который находится на диске C компьютера,
3. он включён в Единый реестр доменов Роскомнадзора, то есть запрещён законодательством РФ,
4. в компьютере вирус. Есть и такие вредоносные программы, которые не только блокируют ресурс, а перенаправляют на другой [help. yandex.ru]. Будьте бдительны.

Что делать посетителю?

1. пару раз перезагрузить страницу (нажать на символ ⟳ или клавишу клавиатуры F5),
2. попробовать найти ошибки в написании URL,
3. воспользоваться поиском по сайту,
4. если возможно, подняться по структуре URL на ступень выше и посмотреть там

   http://shpargalkablog.ru/2012/03/

5. если страница осталась в основном индексе поисковой системе (чаще у Яндекса, так как он медленнее реагирует на изменения на сайтах), можно взглянуть на её сохранённую копию. Для просмотра результатов определённого проекта, в строку поиска нужно ввести

   site:сайт.ru запрос

6. если документ когда-то существовал и был разрешён для сканирования, то его копию на конкретную дату часто можно найти в вебархиве (в России периодически блокируется Роскомнадзором),
7. если страница существует, но запрещена к показу, можно воспользоваться услугами анонимайзера или изменить прокси (по тому же принципу работает расширение браузера friGate). Однако из-за того, что доступ осуществляется через посредника, вводить пароли небезопасно.
8. описать разработчику (службе поддержки) сайта проблему, вероятно, так он сможет предпринять шаги по её устранению или предупредить других пользователей.

Что делать вебмастеру? Как исправить 404 ошибку?

1. убрать с сайта битые ссылки.
2. при смене домена сайта или URL страницы настроить перенаправление (301 редирект) со старых URL на новые. С удалённых или ошибочных URL, на которые часто переходят посетители (можно узнать из статистики Google Analytics) или на которые ссылаются авторитетные источники (можно узнать из ошибок сканирования Яндекса/Google) сделать перенаправление на похожие существующие материалы.
3. не делать перенаправление со всех не найденных веб-страниц на Главную без желания человека, это не поможет ему найти искомую информацию.
4. чтобы посетитель вместо белой страницы с надписью «Not Found» или страницы с реквизитами хостера видел HTML-страницу сайта с рекомендуемыми навигационными вариантами, нужно в файле . htaccess добавить строку

   ErrorDocument 404 http://сайт.ru/404.html

Какой должна быть 404 страница

НЕТ	ДА
Отдавать код ответа сервера «200 OK», а значит индексироваться, что создаёт бесконечное число дублей.	Код ответа сервера должен быть «404 Not Found». Здесь можно проверить [redbot.org].
Быть перегружена графикой и отвлекающими элементами дизайна, чтобы человек не сразу понял, что искомая информация тут отсутствует. Пример (картинка) нужно смотреть в полном размере, чтобы прочувствовать суть.	Содержать логотип, фирменные цвета, чтобы человек сразу смекнул, что находится на нужном ему сайте
Показывать Google AdSense, что запрещено правилами этой контекстной рекламы [справка]	Желательно иметь ссылку на Главную страницу и значимые разделы сайта, поиск по сайту, красиво оформленные блоки с акциями, рекомендациями, популярными статьями, форму обратной связи: «Вы можете обратиться к системному администратору сайта и описать проблему». Можно попробовать объяснить что за ошибка такая и что можно сделать. Сгладить ситуацию необычным весёлым элементом и попасть в списки собирателей эффектных 404.

Вот, например, на сайте Hotels.com, создаётся впечатление, что идёт диалог

Как в Google Analytics узнать статистику посещений 404 ошибки

В Google Analytics создаём примерно такой отчёт Он фильтрует данные по title страницы. То есть вместо «Страница отсутствует» нужно написать свой вариант. Полученный отчёт можно трактовать так:

• После просмотра 404 страницы часть посетителей, в том числе перешедшие по внутренним ссылкам, (их количество указано в графе «Переходы«) покидают сайт.
• После просмотра 404 страницы часть посетителей, пришедших из внешних источников, таких как поисковые системы и социальные сети, (их количество указано в графе «Отказы«) покидают сайт.

Идеи по оформлению 404 страницы и работа над ошибками

Иногда на сайте мы получаем страницу, информирующую пользователей об ошибке, – Not Found или «Страница не найдена». Причины для этого: либо страница удалена, либо указан неправильный ее адрес. Как правило, такая страница сопровождается цифровым кодом 404. Получается, страница ошибки является бесполезной? Или все считают, что ее никто не увидит, поэтому не стоит ею заниматься? Конструкцию 404-й страницы часто упускают из виду и недооценивают.  Такую страницу вполне реально доработать и использовать. Есть два направления в разработке страницы ошибки:

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

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

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

Стоит познакомиться с хорошими примерами. Возможно, в них вы найдете решение для своей страницы ошибки. ТОП-10 «вдохновляющих страниц ошибок» и их реализация:

1. Поиск и главная страница

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

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

2.

Карта сайта, раздел FAQ и форумы

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

3. Игра

Можно организовать интересное применение страницы 404, например, использовать целевую игру! Отличный способ сделать страницу ошибки просто интересной. Предусмотрите все детали вплоть до звукового сопровождения, например, 8-битной музыки. Пользователь отвлечется игрой и поднимет себе настроение. С такой страницы можно уйти на дальнейшие поиски, только если преодолеешь в себе чувство азарта. Посетитель обязательно сохранит страницу в закладки, чтобы снова вернуться и поделиться этим с друзьями. Ну или попробует ещё раз заблудиться на сайте:

или

Мы тоже заранее позаботились о своей странице 404 и добавили для пользователей небольшой лабиринт. Оцените:

4. Использовать логотип компании

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

5. Поместить сотрудников компании

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

6. Поместить персонажей и известных людей

Иногда для страницы 404 (и не только для нее) используют не сотрудников, а более известных людей или персонажей, используя тем самым мемы. Так многоликий Леонардо Ди Каприо красуется на странице ошибки одного из сайтов, почему бы не сделать аналогичное:

7. Хорошая работа дизайнеров, проявление фантазии, смелая реализация идей

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

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

Еще одна дизайнерская задумка. Вид «сдувшейся» страницы подчёркивает её неработоспособность:

или сломанной:

или полностью разрушенной:

Уникальный подход — «Grats. You broke it», эта страница 404 отличается ещё и тем, что благодарит пользователей за ее нахождение.

8. Использование анимация. Оцените это вживую!

Удобная и акцентирующая внимание пользователей страница ошибки:

или

или

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

Можно даже использовать ссылки в социальные сети на странице ошибки. На следующем примере призрак не просто водит глазами при движении мышки, но и переводит в Twitter компании при клике на него.

[EPSB] А как с навигацией на вашем сайте? Проверим и дадим советы. [/EPSB]

9. Служба поддержки

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

Ранее эта страница присутствовала на сайте www.kiss.com, сейчас разработчики сайта решили поменять такой вид страницы на следующий:

10. Игнорирование деталей

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

или

Пример последней страницы можно отнести к нескольким принципам построения страниц 404. Она сочетает в себе персонажа мультсериала «Adventure Time», не имеет кнопок или ссылок на другие страницы и позволяет донести информацию на нескольких языках для разных пользователей.

Страницы ошибки должны давать твердое представление о вас и вашей работе. Вы можете уже сегодня взять под контроль эту страницу. Удачи :)

Как найти и исправить страницы 404 на сайте ᐉ WEBMAESTRO

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

Чем вредны страницы 404 для сайта?

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

Если ошибка 404 возникает из-за удаления страницы или «битой» ссылке на сайте, это плохо сказывается на продвижении.

А все потому, что:

1. Потерпают поведенческие факторы
   Пользователям не нравятся сайты с неработающими страницами. Они быстро покидают такие сайты и редко возвращаются.
2. «Сливается» впустую краулинговый бюджет
   Любой сайт имеет ограниченный краулинговый бюджет и поисковые роботы не могут проиндексировать много страниц сразу.  И если при сканировании сайта возникает много 404 страниц – низкая вероятность того, что роботы доберутся до новых или обновленных страниц.
3. Утрачивается ссылочный вес
   При удалении страницы все ссылки, которые ведут на нее или с нее уходят в никуда.

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

Как появляются страницы 404?

Причин возникновения 404 ошибок несколько:

1. Неправильное написание УРЛа.
2. Удаление страницы.
3. Страница переведена на новый адрес, а редирект не настроен.

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

Как обнаружить страницы 404?

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

Поиск ошибок в Google Search Console

1. Зайдите в панель для вебмастеров Google и перейдите на вкладку «Покрытие».
2. Если кликните по вкладке «Ошибка» – Вам откроется список страниц с ошибкой 404.
   

Поиск ошибок в Google Analytics

Узнать сколько пользователей столкнулось с ошибкой на сайте можно в сводке по страницам.

1. Нажмите на пункт меню Поведение/Контент сайта/Все страницы.
   
2. Отсортируйте страницы по названию «Страница не найдена» или «404» в зависимости от того, как она называется на Вашем сайте.
   
3. Нажмите «Название страницы» и с помощью кнопки «Еще» воспользуйтесь поиском по запросу «404» (или «Страница не найдена»):
   
4. GA отфильтрует все страницы по заданному заголовку и покажет отчет по количеству сеансов, получивших код ответа 404:
   
5. Нажмите по названию страницы и получите список УРЛов с ошибкой 404, который нужно будет проработать:
   

Анализ сайта программой ScreamingFrog

1. Пропишите адрес сайта и нажмите кнопку «Start».
   
2. После завершения процесса сканирования перейдите во вкладку «Response Codes» — там Вы увидите список всех страниц с кодом 404.
   

Поиск ошибок с помощью расширения Check My Links

1. Установите в Google Chrome специальное расширение Check My Links. 
2. Введите в поисковую строку Google адрес сайта с оператором «site:»
   и увидите все проиндексированные страницы Вашего сайта и коды их ответа:
   

Что делать со страницами 404?

Если Вы обнаружили страницы 404 – нужно немедленно от них избавляться.
Способы устранения ошибок 404:

1. Замена неработающих ссылок на работающие.
2. Удаление всех ссылок ведущих на страницы 404.
3. Удаление страниц 404 из индекса поисковых систем.
   О том, как удалить страницы из индекса Google узнаете в справке. 

Примеры оригинального оформления страницы с 404 ошибкой:

 

 

 

 

 

Заключение

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

1. Написать почему посетитель здесь очутился и что ему дальше делать.
2. Предложить посетить главную страницу сайта или самые популярные разделы.
3. Добавить форму поиска по сайту.
4. Дизайн страницы 404 должен соответствовать оформлению сайта.
5. Можно оставить контактную информацию.

Проводите регулярный аудит сайта для быстрого обнаружения и устранения 404 страниц! Если нужна помощь – обращайтесь!

17 креативных страниц ошибок 404 от SaaS-компаний!

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

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

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

Недавно, Шпигель.de — один из крупнейших немецких новостных сайтов — включил нашу страницу 404 в свою коллекцию творческих страниц 404.

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

Мейлчимп

Люди в Mailchimp знают, как общаться. И это не останавливается на их целевой странице 404.

http://mailchimp.com/404/

Слабый

Мы в Usersnap большие поклонники Slack.Это наш основной инструмент общения, и мы даже разработали собственную интеграцию со Slack. Поскольку Slack помогает компаниям общаться, они также знают, как общаться со страницей 404.

https://slack.com/404

Гитхаб

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

https://github.com/404

Асана

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

https://asana.com/404

Новая реликвия

New Relic, самый известный среди DevOps, имеет действительно выдающуюся целевую страницу 404. Кто не любит мысленный эксперимент Шредингера 🙂

https://newrelic.com/404

Толкатель

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

Вы только что получили 404.

https://pusher.com/404

GrooveHq

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

https://www.groovehq.com/404

Отключить

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

Основной призыв к действию на этой странице? Игра в понг 🙂

http://unbounce. com/asd

Orat.io

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

https://orat.io/404

Домофон

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

https://intercom.io/404

Битмовин

Bitmovin, который вам больше известен как Pied Piper из сериала «Силиконовая долина» (шучу!), предлагает видеоинфраструктуру для Интернета.Ура!

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

https://bitmovin.com/404

Список чудес

Wunderlist, список дел, приобретенный Microsoft, предлагает простую, но привлекательную целевую страницу 404.

Первомай! У нас есть 404!

https://www.wunderlist.com/404/

Трэвис-КИ

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

https://travis-ci.com/404

Инфинум

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

Что ж, я думаю, вы должны винить своего тестировщика программного обеспечения.Извини Ваня 😉

https://infinum.co/404

Зендеск

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

Поэтому, оказавшись там, вы должны почувствовать себя особенным.

https://www.zendesk.com/404

Вуфу

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

http://www.wufoo.com/404/

ГитЛаб

Подобно GitHub, GitLab — это менеджер репозиториев, который позволяет вам совместно работать над кодом.

https://about.gitlab.com/404

404 страницы нашего сообщества

После публикации этой статьи мы получили несколько действительно отличных рекомендаций по некоторым дальнейшим творческим страницам 404.Среди них следующие:

Какая ваша любимая страница 404?

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

Что такое страница 404 и как ее создать для своего сайта?

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

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

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

Вы хотите, чтобы ваши пользователи испытали это? Без прав? Это связано с тем, что пользовательский опыт — это то, на чем сосредоточен каждый веб-сайт, особенно после объявления Google о Core web vitals.

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

Итак, приступим!

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

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

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

• Сервер доменных имен (DNS) не работает
• Параметры DNS настроены неправильно
• Произошло изменение исходного URL-адреса страницы без надлежащего перенаправления.
• Неверные параметры запроса от внешних средств отслеживания.

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

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

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

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

Кроме того, пользовательская страница 404 также имеет ряд других преимуществ. Давайте посмотрим.

Добавить окно поиска

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

Направлять посетителей на другие страницы

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

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

Предлагайте скидки или купоны 

Ну, средний коэффициент конверсии сайта всего 2%! Итак, вы можете себе представить, каким был бы сценарий для страницы с ошибкой 404. Кроме того, непросто удержать людей на сайте и в конечном итоге конвертировать посетителей в продажи.

Быстрый вопрос: что бы вы почувствовали, если бы нашли скидки или коды купонов на странице, на которую попали по ошибке? Повезло, верно?

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

Используйте ошибки 404 конкурентов для линкбилдинга

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

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

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

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

Амазонка

Привет собакам! Amazon использует свои страницы 404, чтобы дать вам некоторое представление о культуре своей компании вместе с милыми фотографиями щенков. Кроме того, Amazon немедленно приносит свои извинения за ошибку — с сообщением «ИЗВИНИТЕ», информирующим пользователя о том, что он находится не на той странице.

Adobe

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

Гугл

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

Канва

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

Движение пользовательского интерфейса

Немного маркетинга никому не повредит. Что ж, UI Movement использует свою страницу ошибок для продвижения еженедельной подписки на свой информационный бюллетень. Вот это гениальный ход!

вебдью

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

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

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

Создать новый шаблон системной страницы 404

• Откройте свою учетную запись HubSpot и перейдите в раздел Маркетинг > Файлы и шаблоны > Инструменты дизайна.
• В левом верхнем углу щелкните раскрывающееся меню «Файл» и выберите «Новый файл».
•  Выберите «Перетащить» в диалоговом окне.

• Щелкните раскрывающееся меню Тип шаблона и выберите шаблон Система страницы ошибок.

• Укажите имя файла для вашего шаблона.
• Если вы хотите обновить местоположение файла, перейдите в раздел «Расположение файла», нажмите «Изменить» и выберите папку, в которую нужно добавить новый файл.
• Затем нажмите «Создать».

Настройка шаблона системы

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

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

Посмотрите это видео, чтобы узнать, как настроить страницу с ошибкой 404.

Применить системные шаблоны в настройках

После того, как вы закончите настройку шаблона страницы с ошибкой 404, примените его к своему веб-сайту в настройках HubSpot.

• Зайдите в свою учетную запись HubSpot, щелкните значок настроек на главной панели навигации.
• Перейдите на веб-сайт> Страницы в меню левой боковой панели.
• Перейдите на вкладку «Системные страницы».
• Щелкните соответствующее раскрывающееся меню, чтобы выбрать шаблон страницы с ошибкой 404.

• Наконец, нажмите «Сохранить» в левом нижнем углу.

Подведение итогов

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

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

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

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

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

Редактор: Рича Шарма

Лучшая страница 404: 20+ примеров страниц в 2021 году

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

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

Что такое ошибка 404?

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

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

Конструктор веб-сайтов с искусственным интеллектом

1. Клаус: лучший компьютерщик 404 Страница ошибки

Посетите страницу: https://klaus.дк/404/ 

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

Вы смотрите на интерфейс Commodore 64, домашнего компьютера с 64 КБ ОЗУ, выпущенного в августе 1982 года по цене 595 долларов! Ты, наверное, не помнишь, но у твоего отца, наверное, было.

И это не просто картинка, а анимация: курсор мигает в конце строки, и периодически добавляется новый текст, как будто его кто-то редактирует.Выглядит очень круто и свежо!

2. Хаким 404 Страница ошибки

Посетите страницу: https://hakim.se/404

Когда мы открыли эту страницу, наша первая мысль была: «Вы зашли не в тот район, м*****р!».

Как говорит этот шведский интерфейсный разработчик и дизайнер интерфейсов на своей странице «обо мне»: «Я люблю экспериментировать с графикой и интерактивностью». Молодец, Хаким Эль Хаттаб!

3. Студия HotDot: лучшая гипнотизирующая страница 404

Посетите страницу: http://hotdot.pro/en/404/

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

4. Бехеровка: лучшая креативная страница 404

Перейти на страницу: https://becherovka.com/ru/error/404

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

5. Toggl 404 Страница ошибки

Посетите страницу: https://toggl. com/404

Здесь у нас есть 404 страницы с прекрасно анимированной 3D-сказкой с сюжетом 404 error page . Выглядит очень реалистично и увлекательно.

6. Weemss: самый трогательный пример на 404 страницах

Посетите страницу: https://weemss.com/страница не найдена/

Это просто одна из самых удивительных 404-страничных идей ! На странице написано: «Каждый раз, когда кто-то посещает эту страницу, пони превращается в зомби», после чего вам предлагается зарегистрироваться или авторизоваться на сайте Weemss!

Этот маркетинг до сих пор такой трогательный, вы не поверите, но он до сих пор работает!

7. Slack: лучшая анимированная страница 404

Посетите страницу: https://slack.com/404

Ребята из Slack постарались сделать красиво анимированную страницу.Их креативная 404 страничка напоминает сказку с крошечными интерактивными элементами (можно «потрогать» цыплят и поросят).

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

8. Love Beets: лучшая страница 404, ориентированная на социальный маркетинг

Посетите страницу: http://www.lovebeets.com/404

Этот веб-сайт принадлежит английской ферме, которая выращивает органические овощи для ваших салатов. Страница проста , но все же имеет интригу: взгляните на эти кнопки социальных сетей, замаскированные под свеклу на грядке (да, они анимированы) — довольно интересное маркетинговое решение!

9. Хитрости CSS: лучшая простая идея страницы 404

Посетите страницу: https://css-tricks.com/thispagedoesntexist

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

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

10.Лимпфиш 404 Страница ошибки

Посетите страницу: http://www.limpfish.com/404

На наш взгляд, это одна из самых простых, но смешных 404 страниц . «Веб-страница отчаянно ищет HTML ее жизни. Желательно без ошибок и вредных привычек»! Ярко и креативно!

11. Оранжевое пальто: лучшее креативное/руководящее стр. 404

Посетите страницу: https://www.orangecoat.com/dear-happy-internet-traveler

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

12. Заштрихованная: лучшая интерактивная страница 404

Посетите страницу: https://hatchedlondon.com/tproger

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

HatchedLondon решил сделать 404-й страницей оооочень длинной, но можно дойти до конца всего за одну секунду, нажав кнопку «Ready Jump» — или можно чуть дольше падать вниз.Самая интересная часть находится внизу страницы, предлагая вам полезные меню, CTA и ссылки.

При этом страница хорошо вписывается в дизайн и выглядит интересно и здорово!

13. Глубокое время 404 Страница ошибки

Посетите страницу:   http://deeptime.info/

Затерянный во времени винтажный 404 страница проекта интерактивной инфографики предлагает вам интересный способ исследовать историю Земли.

14. Kualo: лучшая интерактивная ретро-игра 404 стр.

Посетите страницу: https://www. kualo.co.uk/404

Веб-хостинг встречает всех своих гостей увлекательной игрой. «Космические захватчики» — это просто милое воспоминание из детства. Используйте стрелки для управления кораблем и пространство для стрельбы. Эта пользовательская страница 404 — идеальный способ провести день с большим удовольствием!

15. Imgur: лучший креатив 404 страница

Посетите страницу: https://imgur.ком/тпрогер

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

16. Фигма: 404 стр.

Посетите страницу: https://www.figma.com/404/

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

17. Hugoware: лучшая интерактивная графика 404 стр.

Посетите страницу: http://hugoware.net/tproger

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

18. Lyft: лучшая простая/анимированная страница 404

 

Посетите страницу: https://www.lyft.com/404

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

19. Epic: лучший персонал 404 стр.

Вот одна красивая страница ошибки 404 , сделанная как креативная версия страницы «О нас».

20. Веб-сайт Вадав

Посетите веб-сайт:  https://www.wadav.com/404.html

21. Weblium: лучшая простая идея 404 стр.

 

Посетите страницу:   https://weblium.com/klf

Weblium имеет простую, но привлекательную страницу ошибки 404, показывающую, что НЛО крадет вашу страницу!

Карты Google имели аналогичную концепцию. Это классическая история — вам предлагают вернуться на главную страницу или выбрать соответствующий раздел из меню в футере страницы.

22. Возвратные платежи911: забавная и дружелюбная ошибка на 404 странице

Посетите страницу: https://chargebacks911.com/play-404/

О, эта страница 404 просто потрясающая! Эта страница похожа на онлайн-игру . Никто не устоит перед 5-минутным шутером. Респект, ребята из chargebacks911!

Что делает страницу с ошибкой 404 отличной?

Вы должны понимать, что страница ошибки 404 не является (и не должна быть!) бесполезной для вашего посетителя: многие владельцы сайтов думают, что ее почти никто не увидит, так зачем ее создавать или делать интересной? Но они ошибаются, и дизайн 404-й страницы часто недооценивают.

Есть два направления создания дизайна 404 страницы на выбор:

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

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

• объяснить, что произошло;
• указать причины происшествия;
• скажите посетителю, что делать дальше.

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

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

5 основных элементов успешной страницы с ошибкой 404

1. Ссылки на важные разделы сайта и мотивирующие призыв к действию .Добавьте кнопку «Вернуться на главную» и разместите несколько ссылок на самые популярные страницы сайта.
2. Добавить поисковую строку , чтобы посетитель мог быстро перейти в тот раздел, который искал до возникновения ошибки.
3. Придерживайтесь фирменного стиля и дизайна . Навигация, логотип, цветовая схема и другие элементы веб-дизайна должны быть идентичными. Слишком большая разница с дизайном бренда настораживает и заставляет вашего посетителя думать, что он случайно перешел на другой ресурс.
4. Говорите ясно и дружелюбно. Если вы думаете, что каждый пользователь знает, что такое « 404 ошибка », вы ошибаетесь. Поэтому постарайтесь объяснить, в чем проблема, и по-дружески подскажите, что делать дальше.
5. Внесите немного творческого потока и юмора в создание ваших пользовательских 404 страниц! Креативные иллюстрации привлекают внимание, вызывают интерес и желание узнать больше, изучить сайт.
6. Замечательно, если ваша страница 404 содержит и интерактивную анимацию , которую можно привести в движение с помощью курсора мыши — это может удерживать ваших посетителей на вашем сайте в течение длительного времени.

Резюме

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

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

С конструктором веб-сайтов Weblium AI вы можете создать веб-сайт своей мечты без чьей-либо помощи в кратчайшие сроки!

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

Ярослава

Контент-менеджер, маркетолог и SEO-специалист!

Все, что вам нужно знать о странице 404

(Последнее обновление: 11 января 2021 г. )

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

Страница 404 выполняет две основные функции:

1. Сообщает посетителю, что он успешно установил связь с веб-сервером, но веб-сервер не смог найти запрошенную страницу.
2. Предлагает посетителю вернуться в рабочую часть вашего сайта.

Вот почему страница 404 вашего сайта чрезвычайно важна.

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

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

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

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

Зачем создавать пользовательскую страницу 404?

Зачем создавать пользовательскую страницу 404, если вы можете получить ее по умолчанию?

Ну потому что они часто слишком расплывчаты .

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

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

После того, как ваши посетители попадут на такую ​​страницу, они, скорее всего, покинут ваш сайт и больше никогда не вернутся. По данным Econsultancy, 88% потребителей с меньшей вероятностью вернутся на сайт после неудачного опыта.

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

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

Изображение предоставлено: Y Times

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

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

В этом разделе мы предоставим вам пошаговые инструкции о том, как создать пользовательскую страницу 404 на:

.

• WordPress
• Конструкторы сайтов
• Пользовательские веб-сайты i.е. HTML

Создание пользовательской страницы 404 на WordPress

Самый простой способ создать страницу 404 в WordPress — установить плагин. Затем вы можете просто выбрать любую страницу в редакторе WordPress и сделать ее страницей 404 по умолчанию.

Вот два плагина, которые мы рекомендуем для этой цели:

• Страница 404: после установки этого плагина перейдите в раздел «Внешний вид» → «Страница ошибки 404» и выберите любую страницу, которую вы хотите сделать страницей 404 по умолчанию.
• Custom 404 Pro: этот плагин появится на вашей главной панели управления WordPress, где вы можете просто выбрать любую страницу (или даже добавить URL-адрес), и этот плагин превратит ее в страницу 404 по умолчанию.

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

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

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

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

Создание пользовательской страницы 404 на пользовательском веб-сайте (HTML)

Если у вас есть веб-сайт, который не использует CMS или конструктор веб-сайтов, вы все равно можете установить пользовательскую веб-страницу 404 по умолчанию.

Вот как:

• Шаг 1: Загрузите и установите FTP-клиент на свой компьютер. FileZilla отлично подходит, если вы используете Windows. Fetch отлично подходит, если вы используете Mac.
• Шаг 2: В FTP-клиенте введите имя хоста i.е. IP-адрес или доменное имя вашей учетной записи хостинга, а также имя пользователя и пароль для этой учетной записи.
• Шаг 3: Перейдите в корневой каталог вашего хостинг-сервера и найдите файл с именем « .htaccess ». Если его нет, создайте его. Откройте его и добавьте следующую строку:
.

ErrorDocument 404 /not-found-page.html

Этот код указывает вашему серверу хостинга искать этот файл HTML в случае ошибки 404.

• Шаг 4: Просто создайте файл HTML с именем « страница не найдена».html » и скопируйте/вставьте сюда код пользовательского файла 404.

Вот и все.

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

Изображение предоставлено: Журнал поисковой системы

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

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

Вот три основных качества, которыми должна обладать страница 404.

1. Простое объяснение

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

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

.

«Ссылка, по которой вы щелкнули, не работает.

«Страница, которую вы ищете, не существует».

«Мы не смогли найти страницу, которую вы искали».

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

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

«Возможно, вы неправильно набрали URL-адрес или сделали ошибку копирования/вставки».

«Возможно, владелец веб-сайта удалил/переместил эту страницу на другой URL-адрес.

Использование простого языка и предоставление пояснений снизит вероятность отпугивания ваших посетителей от пользовательской страницы 404.

Вот, например, страница 404 Диснея.

Это просто, понятно и понятно. Это хорошо сочетается с их брендом, используя один из их персонажей и копируя эту рифму. Кроме того, он содержит только одну ссылку — «Назад домой» .

2. Полезные альтернативные CTA

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

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

Призыв к действию (CTA) поможет вашим посетителям перейти в другое место на вашем веб-сайте, которое может быть им полезно. Эти CTA могут быть:

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

… и многое другое.

Если на вашей странице 404 нет CTA, ваши посетители могут покинуть ваш сайт. CTA помогает предотвратить это.

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

Вот страница 404 Airbnb. Он включает в себя краткое объяснение, строку поиска, ссылки на меню навигации и всю карту сайта внизу, чтобы люди могли быстро перейти к следующему действию.

3. Немного юмора и индивидуальности

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

Вам решать каким он должен быть, например:

• Остроумная веб-копия,
• Забавный мем/GIF,
• Милая иллюстрация

Это сделает вашу страницу 404 чем-то, на что ваши посетители будут улыбаться, а не хмуриться. Например, вот страница Imgur 404.

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

Почему появляются страницы с ошибкой 404

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

К трем наиболее распространенным причинам относятся:

1. Удаление страницы с сайта;
2. Изменение каталога, в котором ранее находилась страница;
3. Изменение URL-адреса.

Как исправить ошибки 404

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

Некоторые из доступных опций включают:

1. Если ваш сайт на WordPress, вы можете использовать плагин MonsterInsights. Он автоматически отметит для вас ошибки 404, что позволит исправить их как можно быстрее.
2. Если вы не используете WordPress или не хотите платить за инструмент для веб-мастеров, вместо этого вы можете использовать Google Search Console.

Вот как найти ошибку 404 с помощью Google Search Console:

• Он будет сканировать ваш веб-сайт на наличие возможных ошибок 404 с помощью «роботов-пауков»: программ, которые сканируют ссылки и страницы на вашем веб-сайте.
• Откройте панель инструментов Google Search Console и перейдите в раздел Сканирование → Ошибки сканирования , чтобы просмотреть существующие ошибки 404 на вашем веб-сайте.
• Как только вы обнаружите ошибку 404, проверьте ссылку, перейдя по ней в браузере. Если это работает, отметьте это как исправленное. Если это не так, проанализируйте, на какую страницу ссылка пытается привести ваших посетителей, и замените ее ссылкой, которая вместо этого работает.

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

У вас есть настраиваемая страница 404 на вашем сайте?

Креативные страницы ошибок 404 с реальных сайтов

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

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

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

Что такое ошибка 404?

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

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

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

Скажи нет настройкам по умолчанию

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

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

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

Страница ошибки 404 с естественным потоком UX

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

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

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

Страница 404 на самом деле является извинением за то, что раздражает посетителей — сделайте это классным и простым способом!

Определить причину ошибки 404 несложно, поэтому лучше все упростить, чем все усложнять. Считаете ли вы, что ваши посетители будут зря тратить свое время на исправление этих ошибок 404, если им не будет предоставлен root-доступ к серверу?

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

Будьте проще, просто подумайте, как бы вы себя чувствовали на их месте. Юмор может быть отличным способом удержать ваших людей. Здесь вы пытаетесь извиниться за то, что раздражаете своих посетителей. Зачем усложнять вещи, когда можно сделать их простыми и скромными?

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

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

Читайте также: 10 распространенных ошибок веб-разработки, которые вы совершаете, и как их избежать

Ниже приведены некоторые из интересных страниц ошибок 404 в Интернете:

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

.

№1. Прижаться к ошибкам

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

#2. Акодез

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

№3. Вилка CMS

Вау, теперь это выглядит потрясающе! Впечатляющий культовый брендинг Fork CMS привлекает внимание на странице с ошибкой 404. Чтобы добавить крема к торту, блестящее слияние красиво сплетенного копирайтинга хорошо вписывается в их водную тему.

№4. Гумроуд

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

№5. Рамоция

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

№6. Злые птицы

Посмотрите на брендинг, используемый на странице Angry Birds, вам не кажется, что он играет жизненно важную роль в дизайне.Он содержит ссылку, по которой люди вернутся домой, а также другие важные компоненты, которые являются обязательными. Брендинг помогает людям понять, какова природа сайта, который они просматривают.

№7. Ларкеф

Как мы уже говорили, люди любят юмор, и вот прекрасная иллюстрация того, как эффективно вы можете использовать юмор, чтобы извиниться за неудобства, которые испытывают посетители. Посмотрите, как остроумно они использовали фоновый видеоклип на всю страницу от The IT Crowd.Единственным ограничением является отсутствие ссылок, так как нет способа помочь людям вернуться на главную страницу, если они не отредактируют адресную строку вручную.

№8. Гитхаб

Посмотрите на огромную панель поиска на странице 404 GitHub. Разве это не нечто сложное и впечатляющее? Люди с готовностью хватали бы его и искали все, что хотели.

№9. веби сделать

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

Читайте также: Почему типографика так важна в веб-дизайне?

№10. Штормовая тропа

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

№11. Подбрюшье

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

№12. Форбс

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

№13. Приложение Marvel

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

№15. Engadget

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

№16. Трипоматик

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

№17. Аэролаб

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

№18. MailChimp

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

№19. Код школы

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

№20. Крошечный перевозчик

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

№21. Центр электронной почты Великобритании

Веселая игра с персоналом, которая демонстрирует 404 страницы Email Center, помогающие удерживать посетителей.

№22. ArtStation

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

Заключение

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

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

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

Acodez IT Solutions — индийская компания, занимающаяся веб-разработкой, которая обслуживает широкий круг клиентов, работающих в различных отраслях, предлагая решения для бизнеса, отвечающие их требованиям.Мы также агентство цифрового маркетинга, помогающее предприятиям планировать и организовывать свои бизнес-решения в соответствии с различными требованиями индустрии онлайн-маркетинга.

Ищу хорошую команду

для вашего следующего проекта?

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

11 примеров церквей, совершающих ошибки. Маркетинг церкви — отстой

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

Но многие ли из нас знают, для чего они нужны?

Немного 404 Фон

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

Разорванные отношения

Мне нравится, как видео сравнивает страницы ошибок 404 с « разорванные отношения ».«Это правда, не так ли?

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

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

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

Не все страницы 404 одинаковы.Плохие страницы ошибок 404 почти так же распространены, как и сами ошибки.

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

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

1. Церковный маркетинг — отстой

Почему бы не начать с веб-сайта, который мы все знаем и любим, — с этого. Справедливости ради, это не самый творческий пример, но он охватывает основы.

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

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

2. Церковь Жизни

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

Это , чистый и простой, но эффективный — такой же, как и дизайн остальной части их веб-сайта. У них также есть несколько полезных ссылок, смешанных с текстом.

3. Церковь Северной Звезды

North Star Church в Кеннесо, штат Джорджия, предоставляет полный список ссылок и, что еще лучше, панель поиска , помогающую избежать страницы с ошибкой.

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

4. Часовня Пьемонта

В соответствии с той же идеей, Piedmont Chapel в Гринсборо, Северная Каролина, включает строку поиска и кнопку домой на странице с ошибкой 404.

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

5. Церковь Уэст-Ридж

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

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

6. Сандалии церковные

Мы все знаем насколько важны визуальные элементы онлайн . Страница ошибки 404 на веб-сайте Sandals Church в Риверсайде, штат Калифорния, показывает, как включить визуальные эффекты на страницу 404.

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

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

7. Церковь Хиллсонг

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

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

8. Евангелическо-лютеранская церковь в Америке

Этот веб-сайт может быть немного более традиционным , чем некоторые другие, которые мы видели, но, тем не менее, он эффективен.

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

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

9. Церковь Эльмбрук

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

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

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

10.Возвышенная церковь

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

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

11.Церковь Ньюспринг

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

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

Чему мы научились?

Страницы с ошибками

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

Как сделать самому

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

. Фото brionv.

20 лучших примеров страницы 404 (+ советы, как сделать вашу страницу потрясающей)

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

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

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

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

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

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

• Протокола
• Доменного имени
• Пути

Например, примите во внимание URL нашего блога: https://www.bluleadz.com/блог. Протокол — https://, домен — bluleadz. com, а /blog — это путь.

Страница 404 появляется, когда пользователи случайно вводят что-то вроде https://www.bluleadz.com/bling. Домен правильный, но путь /bling никуда не ведет.

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

Таким образом, ваш URL-адрес будет https://www.hintbiz.com/products/shirt-1, со ссылкой на этот товар на главной странице. Если вы решите удалить этот продукт, но забудете удалить ссылку, пользователь будет перенаправлен на страницу 404, которая сообщает ему, что страница не может быть найдена.

6 основных компонентов классных страниц 404

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

Юмор

через GIPHY

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

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

Четкая тема бренда

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

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

Использование графики

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

Хорошей практикой является сделать вашу графику связанной с вашей копией каким-то осмысленным образом.

Ссылки на другие популярные страницы

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

Текст, который направляет пользователей в нужное место

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

через GIPHY

Не бойтесь придумывать текст по-своему, вместо того, чтобы использовать стандартную строку «Вы попали не на ту страницу» или «Страница не найдена».

Ссылки на верхний и нижний колонтитулы

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

Это означает, что они с меньшей вероятностью уйдут с вашего сайта.

20 лучших примеров страницы 404

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

1. Amazon

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

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

2. Marvel

На странице 404 у Marvel есть привлекающее внимание изображение.Они используют одного из своих персонажей и Глаз Уату, чтобы добавить юмора на свою страницу, заявив, что даже она не может «увидеть ваш запрос».

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

3. Pixar

На странице Pixar 404 изображена грусть из фильма «Головоломка» 2015 года, а также сообщение «Ооо… не плачь, это просто ошибка 404».

Довольно просто и понятно, и это работает.Это также очень симпатичный визуальный идентификатор бренда Pixar!

4. Freeform

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

У них также есть четкий CTA, который возвращает посетителей прямо на главную страницу.

5. Bitly

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

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

6. Huda Beauty

Хорошо иметь иллюстрации на странице 404, но еще лучше иметь собственные иллюстрации вашего основателя. Huda Beauty добавляет нотку стиля на каждую страницу своего веб-сайта, и их страница 404 ничем не отличается.

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

7. The Australian

Австралийская национальная газета, принадлежащая News Corp. The Australian имеет уникальную страницу с ошибками, которая идеально сочетается с их обширным освещением правительства и политики. Он высмеивает политический язык и публичные промахи политиков.

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

8.Codecademy

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

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

9. Восточный рынок

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

На Восточном рынке в Детройте есть страница с ошибкой, на которой представлена ​​игра под названием «Flappy Spud», в которой вы запускаете картошку сквозь стены. Когда вы сталкиваетесь с препятствием, оно взрывается грудой картофеля фри. Приятное прикосновение.

10. Индекс бесполезных веб-сайтов

Индекс бесполезных веб-сайтов — это крупнейший каталог совершенно бесполезных веб-сайтов в Интернете. Даже у них есть выходные.

Когда они не могут найти то, что вы ищете, у них есть идеальная страница ошибок; видео о том, как сурикаты становятся сурикатами, и другие забавные вещи.

11. Penguin Random House

В Penguin Random House есть отличная страница 404 с забавной иллюстрацией книги, спящей на работе. Их копия умна, потому что она остается на бренде и перенаправляет пользователей на домашнюю страницу.

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

12. IMDb

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

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

13. Мемориальная библиотека Фалви

Мемориальная библиотека Фалви расположена в кампусе Виллановы в Пенсильвании. Хотя это не библиотека мирового класса, ее страница 404 довольно забавна.

Он имеет заголовок «Осторожно! Вместо того, чтобы найти то, что вы искали, вы, кажется, наткнулись на несколько драконов». Затем у вас есть возможность уйти от этих красивых иллюстрированных зверей.

14. Эмирейтс

Эмирейтс — ультра-шикарная международная авиакомпания ОАЭ, известная своей роскошью, стилем и высоким качеством. Их страница с ошибкой идеально сочетается с остальной частью их веб-сайта.

Это идеальное отражение имиджа их бренда и предоставляет вам множество вариантов, чтобы легко найти именно то, что вы ищете на сайте.

15. Lonely Planet

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

16. Bluleadz

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

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

17. Студии 20th Century Studios

У Студии 20th Century Studios есть потрясающая фирменная страница 404 с большим черно-белым кадром из одного из их знаменитых старых фильмов. Они обыгрывают изображение забавным текстом под заголовком.

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

18.Disney

Disney не предлагает ничего, кроме превосходства, и их страница 404 не исключение. У них есть анимированный Wreck it Ralph, просовывающий голову через 0 в 404, чтобы отразить замешательство пользователя. Под большим числом 404 находится отчетливая и остроумная копия, которая отсылает к одному из их фильмов.

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

19. Fox

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

И, конечно же, саркастичный Стьюи из Гриффины со скрещенными руками. Помимо крутого изображения и CTA, у Fox есть полное меню вверху, чтобы помочь людям перемещаться по сайту оттуда.

20. HelpScout

У HelpScout отличная страница 404, которая соответствует их бренду.Он отображает очаровательную иллюстрацию, которая относится к их копии. Они не используют стандартное «Эта страница не существует». Вместо этого у них есть заголовок, который гласит: «Рух Рох!»

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

Пользовательские страницы ошибок 404 не должны быть скучными.

No related posts.