Прикольные страницы 404: Лучшие 404 страницы

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

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

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

На этом сайте можно найти интерфейс Commodore 64.

---

Похоже, вам не стоило сюда заходить.

---

Попробуйте поймать кота 🙂

---

Студия дизайна делится забавными гифками про собак.

---

А эта страничка ушла в поход… и не вернулась.

---

Очень атмосферная интерактивная 404-ая страница.

---

Веб-страница ищет HTML своей жизни. Желательно без ошибок и вредных привычек.

---

Спасите несчастных леммингов!

---

Классический мем на сайте 9GAG.

---

Красивая иллюстрация броуновского движения от Hot Dot.

---

А этой страницы на сайте Mikandi нет, как и одежды у этой прекрасной леди.

---

Вам попалась страница 404? Решайте, кого уволить за такое свинство.

---

Синий экран смерти от Willismonds.

---

А эту страницу съели пациенты клиники. Очень сожалеем 🙁

---

Диаграмма Венна на сайте magnt.com.

---

Дыра в интернете на сайте CSS Tricks.

---

Поздравляем. Вы сломали наш сайт.

---

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

---

Здесь можно поиграть в пакмана.

---

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

---

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

---

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

---

Всё минималистично и главное — ссылка на релевантный материал.

---

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

---

Вот про экран с ошибкой от GitHub вы точно знаете, а как насчёт не менее известного Docker? Расстроенный кит смотрит на утонувший корабль, параллельно размышляя о ваших проектах.

---

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

---

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

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

---

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

---

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

---

Один из наиболее популярных сервисов общения между членами одной компании тоже вошёл в эту подборку. Ребята хорошо потрудились над созданием интересной и анимированной страницы ошибки 404 с небольшими элементами интерактивности (можно трогать кур и свинок). Также во время отсутствия активности на странице всё становится серым.

---

На странице 404 сайта Музея Сотворения Мира (там всё по Библии) отчётливо видно, что junior и senior не могут найти менеджера проекта. А вообще классно сделали: силуэт с отсутствующей стадией эволюции в центре отражает отношение создателей сайта к этой теории возникновения жизни. Кроме того, «that link is missing» можно перевести так: «связывающее звено отсутствует». Тут как в русском с фразой «я плачу» — либо платишь (за софт), либо плачешь (из-за багов).

---

Если вы думали, что новозеландцы не в восторге только от шуток про «Властелина Колец», то теперь вы знаете, что каждый раз, когда вы видите карту без Новой Зеландии, где-то в Шире плачет один хоббит. Собственно, на этом и решили акцентировать внимание новозеландцы на сайте правительства.

---

Самоиронией может похвастаться не только правительство Новой Зеландии. В Делавэре решили поиграть и с картой, и с названием. Хотя карта просто для красоты.

---

Мы тоже не исключение 🙂 Возможно, вы уже замечали, что мы, как и сайты выше, имеем собственную страницу 404.

Страницы 404 / Блог компании Edison / Хабр

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

Первая «4» — означает, что ошибка на стороне клиента, «04» — означает конкретную ошибку «Not Found».

Кому в пятницу нечего делать или кто в поисках вдохновения — добро пожаловать под кат, там подборка лучших (и худших) 404 страниц.

Коротко рассказываем о гибкой методологии разработки программного обеспечения (Agile), которую мы используем на проектах в EDISON Software Development Centre.

Your browser does not support HTML5 video.

Начнем с самых животрепещущих сайтов, а потом перейдем к «попсовым».

Роскомнадзор

PornHub

Старая версия 404 Хабра

Новая версия 404 Хабра

Virgin.

com

Google

YouTube

Facebook

Reddit.com

Amazon.com

Vk.com

Linkedin.com

Imgur.com

Aliexpress.com

Bing.com

Stackoverflow.com

Github.com

Dropbox.com

Craigslist.org

Dribbble.com

Awwwards.com

Csswinner.com

Coolhunting.com

Codyhouse.co

Mailchimp.com

Slack.com

Mashable.com

Bloomberg.com

Airbnb.com

Bitly.com

МГУ, психфак

Разговаривающая страница 404.

Еще подборки

404 pages from popular sites — Design Inspiration, Muzli, 2017

Anatomy of a 404 Error Page, Envato, 2016

Лучшие 404 страницы, Tproger, 2015

404 – страницы, ради которых стоит заблудиться на сайте, cossa, 2015

Идеальная страница 404 ошибки, или как удержать пользователя на сайте?, Habrahabr, 2014

Лучшие примеры 404 страницы, seo-design, 2013

Лучшие 404 страницы Рунета, oakhill, 2012

Лучшие примеры ошибки 404, netpeak, 2012

50 прикольных страниц ошибки 404 , Дежурка, 2009

Интерактивные

Играем в Pacman

Рушим сайт

Суслик

Спасаем леммингов

Поймай кота

P.

S.
Ну и напоследок

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

404 Error Pages – остроумные примеры, взятые с реальных сайтов.

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

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

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

Вашему вниманью несколько наших любимых креативных 404 error pages. Надеемся, они вдохновят вас на создание своих собственных сообщений об ошибке.

Что такое 404 error?

 

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

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

 

1) Bluegg

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

 

2) Spotify

Каждый год, Spotify выпускает свой микросайт «A Year in Music». Сайт позволяет посетителям просмотреть наиболее популярную музыку года со всего земного шара. Но есть там и настоящий «праздник для души» меломана – страница с ошибкой 404, которая отдает дань хиту Джастина Бибера 2015 года — «Sorry», что делает страницу уместной и веселой, не выпадающей из тематики сайта.

3) Cloud Sigma

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

 

4) CSS Tricks

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

 

5) Good Old Games (GOG)

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

 

6) Magnt

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

 

7) Bitly

Помните знаменитый FailWhale на Твиттере? Точно так же, Bitly интегрирует свой талисман — Pufferfish — в сообщение об ошибке. Бедный малыш плавает кверху брюхом.

8) Daniel Karcher Film Design Studios

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

 

9) NPR

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

 

10) Blizzard Entertainment

Перед вами пример простой идеи, которая в конечном итоге выглядит потрясающе круто: 404 error page предстает перед пользователем «сломанной» версией настоящей домашней страницы.

 

11) Tin Sanity

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

 

12) OrangeCoat

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

 

13) Astuteo

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

 

14) BrandCrowd

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

 

15) Cooklet

Страница ошибки Cooklet проста и восхитительна как в дизайне, так и в копирайтинге. Блин, а я хотел кусок от этого!

 

16) GitHub

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

17) Grant Burke

Дизайнер Грант Берк показывает свои навыки проектирования даже на 404 error page. Графика проста и концептуальна — недостающее звено на пакете молока — весело и умно.

 

18) Moveline

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

 

19) LEGO

На странице ошибки 404 LEGO нет необходимости в сообщении: они просто предлагают своим героям сделать это: давай приятель, подключись обратно к сайту!

20) Hoppermagic

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

 

21) IconFinder

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

 

22) Hot Dot Productions

Страница ошибки Hot Dot Productions остается верна слогану компании: «the intersection of new technologies and design». Страница анимирована сотнями крошечных точек, которые изменяют направление, реагируя на наведение курсора. Завораживающе, классно, и дает большой простор для творчества. Главное – не скучно.

23) HomeStarRunner.com

HomeStarRunner.com – сайт флэш-анимированной серии мультфильмов, на протяжении многих лет создает свою собственную серию 404 error pages. Здесь встречаются самые последние персонажи из мультсериала, которые как будто пришли из одного из эпизодов. При включенном звуке, вы будете еще и слышать голос популярного персонажа Strong Bad, выкрикивающего фразу «404’d!».

24) HubSpot

 

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

 

Рейтинг лучших ошибок 404

Спонсор месяца — Биржа ссылок SetLinks. Надежный инструмент оптимизатора и стабильный заработок веб-мастера. Рекомендую.

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

А суть поста заключается в рейтинге 35-и лучших страниц с пресловутой ошибкой 404:

1. South park

2. Spore

3. D20srd

4. DigiGuru

5. Product planner

6. Lookitsme

7. Hobo wars

8. Cuoma

9. Expert Moscow

10. Fuelly

11. One horse shy

12. Channel8

13. Tele 2

14. Hasbro

15. Zanami

16. Twitter старая версия

17. Twitter new version

18. Mixx

19. Chelmsford library

20. Acromedia

21. Times Online старая версия

22. Times Online new version

23. 4chan

24. Springload

25. Wulffmorgenthaler

26. Gloovy

27. Sanalbaskan

28. Creationthing

29. Carsonified

30. Connexion

31. Amnetdatos

32. Southcreative

33. Getsongbird

34. Wufoo

35. Anthropologie

—

Немного хорошей музыки.

The Verve — Bittersweet Symphony:

Reamon — Supergirl:

—

Самые веселые страницы с «ошибкой-404» | AdYummy! | Новости

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

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

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

2.  Студия дизайна Agens сочувственно сравнивает юзера с одиноким космонавтом, потерявшимся в космосе.

3. Сервис Usersnap развивает схожую тему – пользователь сопоставляется с человеком на необитаемом острове. Кроме того, компания обещает все разместившим твит бесплатный пирожок.

4. Игровой портал Gamespot погрузил посетителя во тьму. А в качестве компенсации незадачливому юзеру предлагается бесплатная короткая онлайн-игра.

5. На сайте сериала «Южный парк» посетителей встречает один из излюбленных комических персонажей – офицер Барбреди, сообщающий, что это не та страница, которую они ищут. «Проходим мимо, товарищи, проходим».

6. Дизайнеры компании Dribble изобразили баскетбольное поле с надписью «мяч в воздух», что в этой игре означает «промазал».

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

8. Студия веб-дизайна Blue Foundation Media поместила в цифры «404» игру Pac-Man, развлечься которой и предлагается разочарованному пользователю.

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

10. Итальянское агентство недвижимости CaseTrentine уподобило ошибку на своем сайте с нападением Годзиллы.

11. Агентство Incore, занимающиеся digital-маркетингом, намекает, что при кликах на старые ссылки вас могут ожидать стервятники, слетающиеся на все несвежее.

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

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

14. Телекоммуникационная компания Vidéotron уверяет, что искомую страницу нужно сравнивать с единорогом – как и тот, она или никогда не существовала, или же давно вымерла. Но все равно все это магия, которая перенесет вас куда угодно.

15. Консультанты из BlueLeaf обыгрывают тему заблудившегося космонавта и предлагают нажать на кнопку «Вернуться на базу».

16. Стартап MyTaxi обыграл свою специализацию, показав на ошибочной странице улитку в роли такси.

17. Nestle предлагает поиграть в пинг-понг с помощью плиток KitKat, которые еще называют «четыре пальца».

18. Разработчики игр Blizzard иронически приободряют пользователя: «Поздравляем, вам удалось уничтожить эту страницу».

19. Агентство Rareview пытается прогнать всех с несуществующей страницы с помощью Чака Норриса с пистолетами. «Ты пропал, парень!»

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

21. Создатели программ Magnt предлагают пользователям рассмотреть два варианта попадания на несуществующую страницу: либо человек не умеет печатать, либо это в компании что-то сломали. Третьего не дано.

22. Портал mint.com предлагает финансовые консультации жителям США и Канады. Чтобы подчеркнуть, как старательно в компании искали страницу, создатели выставили на всеобщее обозрение хлам и написали, что посмотрели даже за диванными подушками, но страницы нет.

23. Австралийская фирма Huwshimi уверяет всех, что эту страницу украл ниндзя.

24. Автоэксперты сайта Checkmycar иллюстрируют случившееся картинкой со старой машиной, на которой точно так же никуда не уехать, как и со страницы-404.

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

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

27.  А эти веб-разработчики просто украли у телевизионщиков кусок «настроечной сетки».

28. Юмористический сайт Retard Zone показал, как словосочетание «битая ссылка (broken link)» может выглядеть буквально.

29. На американском сайте флеш-карикатур Homestar-Runner пользователя обругали, назвав его глупым.

30. У Mashable для вас две новости – хорошая и плохая. Плохая в том, что страницу они не нашли, а хорошая – нашли все потерянные вами носки.

31. Своеобразный юмор на одном из эстонских сайтов: «Простите, но тут была попойка 404 мужчин».

32. Разработчик игр Mythic Entertainment изобразил ошибку в игре Warhammer как результат воздействия сил Хаоса.

33. Художник Дэвид Бертон изобразил объявление о поиске нужной страницы.

34. На игровом сайте gog.com страница канула в черную дыру.

35. И наконец, ошибка-404 телефонной компании audiko.net показывает, что к поискам несуществующей страницы подключился даже Шерлок Холмс.

 

Ошибка 404 – что это? Нужна ли нам прикольная страница 404 ошибки. – Сайт о заработке в интернете, способах, кейсах, личностном росте!

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

Да, сегодня мы поговорим о том, как создать страницу 404 ошибки, как её редактировать и т.п.

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

Может быть ты в комментариях покажешь свою страницу с ошибкой 404 ?

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

Содержание статьи про ошибку 404:

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

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

Например, если зайти на страницу in4wp.ru/avgdeika.html или на страницу in4wp.ru/error.html – тебя перекинет на одну и туже страницу.

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

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

Вот, например, как выглядит 404 страница в CMS Joomla

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

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

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

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

 

Миф ошибки 404

Облазив интернет, в т.ч. зарубежные сайты, я встретил достаточно интересный миф о том, откуда собственно появилась ошибка 404. В мифе этом утверждалось что основная база данных научного центра CERN (European Organization for Nuclear Research), находилась как раз на 4ом этаже, в комнате 404.

К слову, этот центр принимал активное участие в развитии интернета. Так вот, когда они уже не могли справляться с объемом поступающих к ним данных – разработчики центра якобы начали выдавать ошибку вида “Room 404: file not found” .

Этот миф был развенчан одним из ученых, входивших в состав CERN, он сказал что комнаты 404 у них не могло быть, т.к. была другая нумерация комнат и начиналась эта нумерация с 410 кабинета :).

Как вам такой миф? Может быть кто-то еще что-то слышал интересненького на эту тему? Напишите об этом, мне тоже интересно.

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

Как сделать страницу 404 на блоге?

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

Создаешь файлик 404.php у себя на компьютере, потом через фтп загружаешь в папку http://твой_сайт/wp-content/themes/твой_шаблон/ .

Так, у нас есть пока что пустой файлик, поэтому теперь нужно его наполнить.

[warning]Внимание!
Без этого файла в шаблоне вордпресса не будет никакой страницы 404. При не правильном адресе будет происходить переадресация на главную.[/warning]

Можно скопировать в него содержимое файла page.php или single.php.

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

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

Возможно, тебе поможет следующий, самый элементарный код:

Все, что тебе нужно – это просто скопировать этот код и вставить в своё файлик 404.php вот так:

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

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

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

[sociallocker]>> Скачать архив с 404 страницей << [/sociallocker]

Как улучшить оформление страницы 404 ошибки ? Пару советов о улучшению.

В стандартных шаблонах из паблика есть такой файлик как 404.php – вот он то нам и нужен.

В принципе можно даже не использовать вспомогательные текстовые редакторы, я кстати пользуюсь Notepad++ . Вместо этих редакторов можно использовать внутренний редактор wordpress.

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

Напиши, что страница, которую ищет посетитель, не существует и главное объясните, почему именно она не существует.

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

Сделай её лучше и понятней.

Совет 1: Придерживайся дизайна. Средствами WordPress это сделать не сложно. Важно, чтобы дизайн 404 страницы не отличался от остального дизайна твоего блога.

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

Совет 3: Дружелюбность и понятность. Без комментариев. Не стоит думать, что все знают, что такое 404 ошибка. Тебе нужно объяснить, в чем проблема. Вариантов много, например: «Упс! Эта страница где-то потерялась, попробуйте зайти на другую страницу».

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

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

Да, это не идеал конечно, и я её еще буду редактировать.

Чтобы посмотреть её полностью – просто попробуй зайти на несуществующую страничку.

Работаем с 404 страницей с помощью плагинов.

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

– Smart 404. Этот плагин автоматически заменяет страницу 404 на список страниц, наиболее подходящих по запросу. Здесь автоматически используется функция «поиск по блогу».

— 404 Notifier. — плагин уведомляет об ошибках 404, когда они возникают.

— Redirection. – Этот плагин перенаправляет пользователя со страницы 404 на другую страницу, которую можно указать руками. Любая выбранная тобой страница может стать целевой.

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

Кто-то коллекционирует пачки из-под сигарет, кто-то коллекционирует вирусы (сам таким был).

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

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

Вот этот сервис и вот еще один – Наслаждайся.

Из парочку понравившихся мне на этом сайте 404 страниц:

http://theworstdrug.com/chris

http://www.bluefountainmedia.com/404/ – вот это вообще отпад!

http://www.lookitsme.co.uk/404_me

http://kinnet.ru/404.html

Такого я еще не видел. А ты?

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

[note]UPD (2017 Год) – К сожалению, многие сайты прекратили своё существование, поэтому здесь остаётся только Близзард.[/note]

Blizzard Intertaiment

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

Пользуясь случаем, хочу объявить о том, что у меня есть БЕСПЛАТНЫЙ курс по созданию блога с нуля – ПОЛУЧИТЬ КУРС. Помогаю новичкам в развитии.

Кстати про обновления – скоро я проведу очень интересный конкурс с очень интересными призами. А сейчас хочу попросить прощения за то что есть задержки с постами – у сына старшего – турниры танцевальные + эта предновогодняя суматоха… В общем головокружительные деньки. 🙂 Скоро я подведу итоги моих успехов в блоговодстве. Думаю, будет интересно. [urlspan]Не пропусти[/urlspan].

Всегда ваш, Денис Тумилович.

Зачем на сайте необходима страница «ошибка 404»

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

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

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

• Изменение URL;
• Удаление страницы;
• Допущена ошибка при написании ссылки;
• Сайт на момент захода пользователя находится оффлайн;
• Сайт закрыт и больше не существует.

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

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

Учитывая вышесказанное, важно правильно сформировать эту страницу. Итак:

• С пользователями нужно быть любезными и дружелюбными. Поскольку они попали на страницу с ошибкой не по своему желанию, следует выразить сожаление и предложить помощь.
• Не стоит вдаваться в технические моменты. Понятие «ошибка 404» более чем красноречиво говорит о технических сложностях. Поэтому совершенно необязательно погружать пользователя в специфику вопроса о том, почему возникла эта ошибка. В принципе можно даже не указывать цифры «404», можно доступно объяснить причину сбоя.
• Предложите посетителю проверить корректность написания ссылки. Ошибка могла возникнуть, например, вследствие введения адреса страницы вручную.
• Важно придерживаться единого стиля оформления сайта и страница «404» – не исключение. Хорошо, если оформление этой страницы будет выдержано в корпоративном стиле вашей компании. Это поможет пользователю сориентироваться и не допустить мысли, что он попал на другой ресурс.
• На странице с ошибкой 404 должно быть минимальное количество ссылок и контента. Это наглядно продемонстрирует пользователю, что страницы не существует или она не была найдена.
• Страница 404 нередко дает разработчикам и дизайнерам прекрасную возможность выразить свои идеи и мысли. При этом реализовать свои идеи можно креативно, ярко, с юмором. Так вы удержите внимание пользователей, которые наверняка не захотят покидать ваш сайт.
• На ненайденной странице нужно предоставить полезный контент, а также дать ссылки на страницы с похожим контентом, популярные страницы и, конечно, главную страницу вашего сайта. На ошибку 404 пользователя привел поиск определенной информации – нужно предоставить ему возможность получить актуальную для него информацию.
• Не забудьте разместить на страничке строку поиска, чтобы посетители могли продолжить «экскурсию» по вашему сайту и получить ответы на волнующие их вопросы.
• Дайте пользователям возможность отправить вам сообщение (отчет) об ошибке. Отличным вариантом является автоматическое уведомление, которое моментально будет вам сообщать о проблемах на сайте. Это актуальное решение, которое поможет исправлять возникающие ошибки в режиме реального времени. Это особенно актуально при внезапном всплеске ошибок 404.
• Вопросы SEO – важная составляющая оптимизации каждого ресурса. Для улучшения оптимизации сайта следует позаботиться о том, чтобы свести к минимуму число внутренних ссылок, ведущих посетителей на страницы с ошибкой 404. Идеальным решением станет отсутствие возможности формирования некорректных URL адресов, которые могут привести посетителей сайта на страницы с ошибкой 404.

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

11 лучших страниц 404 для превращения потерянных посетителей в постоянных клиентов

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

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

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

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

Что такое страница ошибки 404 и почему вам следует беспокоиться

Ссылки портятся со временем. Это происходит на каждом сайте. Удаляются продукты, удаляется контент или происходят изменения в структуре постоянных ссылок.

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

Отражает ли ваша страница 404 ваш бренд?

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

Это…

Ни для кого не годится.

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

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

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

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

1. Lego — Дружественная ошибка «Страница не найдена»

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

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

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

Как это сделать:

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

• «Страница не найдена».
• «К сожалению, мы не можем найти страницу, которую вы искали».
• «Ой! Что-то сломано ».
• «Ой, эта ссылка не работает».

2. Центр электронной почты Великобритании — Пример интерактивной страницы 404

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

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

Как это сделать:

Не вините посетителя в ошибке. Вместо этого принеси извинения .

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

Вы также можете сделать то, что сделал Email Center UK, и позволить пользователю «уволить» одного из разработчиков.

Бедный Люк, в самом деле.

3. List25 — Best 404 Page

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

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

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

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

Как это сделать:

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

Вот список возможных причин ошибки 404:

• Ошибочный URL
• Ошибка копирования и вставки
• Ссылка не работает
• Усеченная ссылка
• Перемещенное содержимое
• Удаленное содержимое

Если вы хотите добавить несколько забавных вещей, которые подходят вашему бренду, сделайте это!

4.Бретт Терпстра — Простой дизайн страницы 404

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

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

Страница

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

Страница невзрачная, но очень полезная.

Как это сделать:

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

Это требует доступа к консоли разработчика Google и не для слабонервных. На сайте Smashing Magazine есть отличное руководство, которое поможет вам начать работу.

5. Стив Мэдден — Страница 404 с продуктами

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

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

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

Как это сделать:

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

Что нужно включить в дизайн страницы 404:

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

6. 9gag — Текст страницы 404 с призывом к действию

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

Страница 404

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

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

Как это сделать:

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

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

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

7. Путь — сверхпростой дизайн страницы 404

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

Страница 404

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

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

Как это сделать:

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

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

8. IMDB — Смешные и фирменные 404 Страница

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

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

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

Как это сделать:

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

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

9. Everipedia — Пример текста сообщения об ошибке 404

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

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

Как это сделать:

Спикер и маркетолог TED Ренни Глисон сказал о странице ошибки 404,

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

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

10. Heyzap — Best Interactive 404 Page

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

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

Страница 404

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

Как это сделать:

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

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

11. OptinMonster — Пример страницы 404 с лид-магнитом

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

Страница 404

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

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

Да, мы немного предвзяты, но у нас тоже хорошо получается. Это превращается в бандитов.

Как это сделать:

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

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

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

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

Доказано, что эти типы оптинов увеличивают конверсию на 785%! Щелкните здесь, чтобы начать работу с OptinMonster, а затем следуйте этому руководству, чтобы добавить MonsterLink на страницу с ошибкой 404.

Бонусная секция: Выход-намерение

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

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

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

(Это было создано с использованием темы холста OptinMonster.)

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

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

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

Ищете другие советы по увеличению доходов? Ознакомьтесь с полным руководством по оптимизации электронной коммерции: 13 шагов к мгновенному увеличению дохода!

Подпишитесь на нас в Facebook и Twitter, чтобы получить больше полезных советов и руководств от OptinMonster.

Опубликовано Jacinda Santora

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

16 супер умных страниц 404, которые полностью соответствуют бренду

Креативные страницы 404 в наши дни пользуются популярностью.

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

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

… Но погодите — красивая эстетика — это только полдела!

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

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

Marvel

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

20th Century Fox

Такой простой, но такой умный. Компания 20th Century Fox использует сцены из своих фильмов, чтобы подшутить над ужасной страницей 404, как они это делают со сценой из «Мести ботаников».Вы даже можете немного отомстить — купив фильм со скидкой!

Specialized

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

Blizzard

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

eHarmony

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

Pixar

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

Distilled

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

PageCloud

Да, даже разработчикам веб-сайтов нужна страница 404! Страница PageCloud 404 объединяет бренд, продукт и контекст как единое целое. Вы находитесь на неработающей странице, почему бы вместо этого не создать ее? Ах да, на заднем плане тоже облако. Возьми? PageCloud.

airbnb

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

9 Gag

9GAG известен смешными видео, изображениями и гифками. На их странице 404 представлена ​​известная сцена из «Криминального чтива», где сбитый с толку Винсент (Джон Траволта) ищет Миа (Ума Турман). Подзаголовок: «Здесь ничего нет» и скачивание нашего приложения, чтобы найти то, что вы ищете, идеально связывает все воедино.

Дэн Вудгер

Популярный иллюстратор-фрилансер, чьи творения использовались такими гигантами, как McDonald’s, добавляет один из своих дружелюбных гамбургеров с извиняющимся флагом на свою умную страницу 404.Бонус? Тонкий призыв к действию, отправляющий посетителей посмотреть его другие иллюстрации.

Электронный центр UK

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

IMDb

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

Orange Coat

Страница 404 Orange Coat содержит продуманную блок-схему, которая поможет счастливому интернет-путешественнику найти информацию, которую он искал. Все, что вам нужно сделать, это ответить на их вопросы ДА / НЕТ, и вы отправитесь в путь. Бонус: их URL даже заканчивается на / дорогой-счастливый-интернет-путешественник — гораздо удобнее, чем / error, не так ли?

LEGO

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

TSheets

Поскольку они предлагают программное обеспечение для планирования, TSheets решили отметить одну из великих сцен из «Назад в будущее», где доктор Эммет Браун разгоняется до 88 миль в час на Delorean, используя свой конденсатор потока. Как и программное обеспечение TSheet, эта сцена демонстрирует важность точности и эффективности, чтобы вы не запускали OUTATIME.

Что вы думаете об этих конструкциях? Какой из них твой любимый?

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

30 креативных и умных страниц ошибок 404 | by Solodev

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

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

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

Кажется стандартной практикой для любого 404 вежливо сказать: «Извините, страница, которую вы ищете, недоступна.Попробуйте снова X, Y или Z ».

Хотя эта копия, безусловно, вежлива, она ожидаема и скучна. Скука не привлекает внимания.

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

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

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

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

Spotify использует простую анимацию со своим проигрывателем, добавляя как соответствующий визуальный элемент, так и уникальный элемент дизайна. Подобно звуку царапины, означающему, что что-то не работает, анимированная запись перестает вращаться через несколько секунд. Текст также ссылается на подпись Канье Уэста «808 and Heartbreak», которая остается в тренде с некоторыми из самых громких музыкальных произведений.

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

Ох, ДашЭто, ты точно знаешь, как доставить удовольствие фандому «Властелин колец» .Эта страница 404 заставляет наши ботанические сердца улыбаться и смеяться над неудобствами. Он такой умный и подробный, что даже вершина горы (404) Doom достигает 404 по оси y. Он не воспринимает себя так серьезно, как Сообщество, и прекрасно сочетает текст с умным дизайном.

Конечно, в этом списке есть и другие 404-е, связанные с фэндомом! GitHub превращает одну из самых культовых фраз кино в умную страницу 404. А если вы понятия не имеете, кто такой Оби Ван Кеноби, или вы не фанат Star Wars ? Тогда «это не та веб-страница, которую вы ищете.”

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

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

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

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

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

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

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

Опять щенки. Это то, что заставляет нас улыбаться, когда страница 404 заставляет нас хмуриться. И так же, как пост щенка Amazon, Huffington Post дает вам нового счастливого щенка с каждым обновлением.

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

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

Это одна из самых креативных групп в кино. Конечно, их страница 404 частично отражает это творчество. А с набором персонажей на выбор, Pixar может использовать любого персонажа, которого они хотят, чтобы стать лицом своего 404. Использование Sadness из Inside Out кажется идеальным сочетанием.

Umbro использует умный вид, чтобы сказать «что-то сломалось» не словами, а дизайном.

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

Геймификация страниц 404 — это умный способ удержать людей на вашем веб-сайте. Куало не только предлагает версию Galaga (или Space Invaders или Galaxian), но и дает скидочный код тем, кто достигает определенных пороговых значений.(И это одна из самых захватывающих и простых игр, с которыми мы сталкивались за очень долгое время.)

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

Как и MailChimp, G2 Crowd включает в сообщение об ошибке фирменный знак компании. Это милый, простой и отличный способ неожиданно включить повествование и буквальный характер в ресурс веб-сайта.

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

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

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

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

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

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

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

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

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

Мы не стали бы критически смотреть на 404 страницы других компаний, не обращая этого взора на себя! Мы хотели немного развлечься с нашей страницей 404, включив в нее самого озорного члена команды Солодева — Code Monkey. Он не нарушит ваш код, но он может нести ответственность за другие нарушения … Для нас это интересный способ объединить тематический текст с визуальным элементом, который можно найти в другом месте на нашем сайте.

С какими еще замечательными страницами с ошибками 404 вы сталкивались? Оставляйте ссылки на избранное в комментариях!

Нужна помощь в отслеживании событий 404? У нас есть для этого учебник! Ознакомьтесь с нашим сообщением о , как использовать Google Analytics и Диспетчер тегов , чтобы отслеживать их и, в конечном итоге, какие уловки помогают уменьшить количество запусков ваших веб-посетителей с ошибками 404 (и горе).

Первоначально опубликовано на www.solodev.com .

13 лучших примеров дизайна страницы с ошибкой 404 в WordPress

Вы ищете лучшие примеры дизайна страницы с ошибкой 404 в WordPress?

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

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

Оптимизация страницы с ошибкой 404 в WordPress

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

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

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

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

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

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

Шаблоны страниц 404 от SeedProd

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

1. Пустой стакан 404 Страница

2. В центре внимания 404 Страница

3. Бесплатно 404 Page

4. Пустыня 404 Страница

5.Скоро появится Horizon Страница

6. Звезды 404 Страница

7. Цвет Темный 404 Page

8. Цветной свет 404 Страница

9. Электронная торговля 404 Page

10. Ой Нет 404 Страница

11. Потерянная страница 404

12. Под водой 404 Page

13. Разбитое яйцо 404 Page

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

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress.Вы также можете найти нас в Twitter и Facebook.

Дизайн страницы 404: лучшие практики и отличные примеры

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

Вы знаете это чувство. Вы нажимаете интересную ссылку на сообщение в блоге, которое хотите прочитать, и БАМ! 404 Страница не найдена. Это автоматически раздражающий и негативный опыт. Но как эта страница 404 говорит с вами? Это полезно? Даже восхитительно?

Начните создавать запоминающиеся интерактивные страницы 404 с помощью Justinmind

Скачать бесплатно

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

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

Коды состояния HTTP: краткая история страницы 404

Так почему же она вообще называется страницей 404? Как обычно, объяснение довольно загадочно и возвращает нас в темные века Интернета (где-то около 1990 года). Несмотря на популярные мифы о 404, относящиеся к древней серверной комнате или к офису изобретателя во всемирной паутине Тима Бернерса-Ли, оказывается, что 400 — это произвольный ярлык, прикрепленный к ошибкам клиента, который включает 404: Страница не найдена.

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

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

Конкурирующие философии страницы с ошибкой 404

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

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

Что должна включать страница 404?

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

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

Более пристальный взгляд: важные аспекты вашей страницы 404

Превратите ошибку пользователя в возможность UX

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

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

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

Перегрузка пользователя страницей 404, заполненной ссылками на каждый уголок вашего сайта, — верный способ когнитивно перегрузить и без того разочарованного пользователя. И, как ясно дает понять гуру NN Group Кэтрин Уитентон, когнитивная перегрузка и удобство использования несовместимы.

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

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

Лучшие страницы 404 — это возможности для брендинга

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

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

Великолепный дизайн страниц 404 для вдохновения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

12. Музей науки и промышленности Чикаго

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

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

Дэн Вуджер — иллюстратор и графический дизайнер, работавший в таких крупных компаниях, как McDonald’s, Bloomberg’s и New York Times.Нам нравится, что дизайн его страницы 404 веселый и непринужденный, с некоторыми вещами, кроме иллюстрации гамбургера, в котором он сожалеет о пропущенной странице. Иногда это все, что вам нужно.

Дэн взял то, что побуждает большинство пользователей покинуть веб-сайт, и превратил это в возможность со ссылкой на свое портфолио. Это умный UX-дизайн!

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

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

Blue Path — это консалтинговая компания по науке о данных, которая предлагает пользователям отличную страницу 404. Эта страница хороша своим юмором и простой графикой, которая представляет собой текст и график.Юмор размещать карту слева и сигнализировать пользователю, что он будет далеко от этой карты, справа? Отличная аналогия!

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

Это момент, когда вы выбираете момент, который обычно наполнен разочарованием и негативом, и превращаете его во что-то хорошее.Сделайте его незабываемым по правильным причинам!

Как создать впечатляющую страницу с ошибкой 404 (с 12 примерами)

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

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

Итак, что посетитель будет делать дальше?

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

Вы только что испортили свое первое впечатление собственной страницей ошибок.

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

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

Результат?

Ну…

Снижение вашего рейтинга в поиске.

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

• Перезапуск сайта
• Внутренняя ссылка не работает
• Ссылка на устаревшую поисковую систему

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

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

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

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

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

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

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

Конечно, вы также можете нанять программиста, который сделает это за вас.

Но зачем вам тратить время или деньги на этот индивидуальный проект?

Вот 5 причин.

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

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

Сладкое. Не правда ли?

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

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

Путем перехода с него на случайные внутренние страницы вашего сайта.

Я использовал эту стратегию, чтобы увеличить посещаемость Techcrunch на 9% за месяц. Я связался со случайными 25-50 внутренними страницами, запустив алгоритм.

У вас наверняка будут неработающие ссылки на вашем сайте.

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

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

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

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

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

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

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

Как ты себя чувствуешь?

Совершенно верно.

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

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

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

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

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

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

Но как именно?

Развлекаясь, как Магнт.

Или продвигать любовь, как eHarmony. Эта настраиваемая страница с ошибкой укрепляет их бренд.

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

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

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

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

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

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

Согласно результатам What Test Won, эта страница с рекомендациями по продуктам привела к увеличению общего количества покупок, покупкам новых клиентов, увеличению количества добавленных в корзину и более высокому среднему количеству просмотров страниц.

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

6 элементов соблазнительной 404 стр.

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

Вот 6 особенностей соблазнительной страницы 404.Помните, что вам не обязательно размещать их все на своей странице.

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

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

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

Интернет-пользователю нравится нажимать на ссылки. И, если вы разместите свои самые популярные статьи, высока вероятность, что посетитель останется, чтобы их прочитать.

ModCloth предлагает ссылки на различные разделы своих продуктов на странице пользовательских ошибок.

Design Shack предлагает ссылку на их последние статьи, галерею дизайна и на их домашнюю страницу, когда вы, к сожалению, найдете их код статуса http.

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

Или, может быть, ссылку на вашу карту сайта, например Starbucks.

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

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

Видите ли, никого не волнует, что пошло не так с «вашим сервером».

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

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

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

Страница ошибки 404 X-Cart имеет простой заголовок «Страница не найдена».

Вы заметили еще один аспект на странице выше?

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

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

Также не забудьте не винить посетителя за код ошибки (код статуса http).

Я знаю.

Есть вероятность, что пользователь действительно ошибся при вводе URL. Или, возможно, это был ошибочный перенаправление.

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

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

Разве ты не хочешь их уже простить?

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

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

Так как же побудить посетителя сообщить об ошибке?

Вы предоставляете контактную форму или адрес электронной почты своей службы технической поддержки.

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

Бен Кук реализовал простую контактную форму на странице с ошибкой 404 во время восстановления и перезапуска клиентского веб-сайта.

Получил ли он какие-нибудь ответы?

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

5. Переведите страницу на несколько языков. Маркетинг — это общение с пользователем так, как ему нравится, и на языке, который он использует. Верно?

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

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

David Hell Man — отличный пример страницы с ошибкой 404 не на английском языке.

6. Предложите им возможность присоединиться к вашему списку рассылки или использовать ваш продукт — Да, вы даже можете конвертировать этих посетителей. Это просто указание пользователю выполнить действие, которое вы от него хотите.

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

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

Вот видеоурок Джоша Бэйлесса о том, как собирать лиды со страниц с ошибкой 404.

[youtube https://www.youtube.com/watch?v=yRGuAwBIRig]

Я уже показал вам, как Ballard Designs рекомендовала продукты на своей странице с ошибкой 404, чтобы увеличить количество конверсий.

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

12 блестящих примеров ошибок 404 страницы

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

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

Надеюсь, ваши творческие соки начнут течь после просмотра этих страниц.

1. Поцелуй

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

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

2. Джейми Хаскиссон

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

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

3. Centresource

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

Затем он предлагает всего два варианта — вернуться на главную страницу или ударить лося. Здесь нет жаргона кода статуса http.

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

4. Huwshimi

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

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

5. Хиллари Клинтон

На веб-сайте политика есть страница с ошибкой, которая вас крякнет.

Она была даже признана Huffington Post за то, что она каламбур через эту страницу.

Показав счастливую фотографию, Хилари предлагает вам записаться на волонтерство.

Итак, это отличный способ направить посетителей вашего сайта к вашим целям, не так ли?

6. Дизайн кролика

Еще одна блестящая концепция от дизайнерской компании.Jackrabbit указывает на «опасность» в своем коде ошибки и сообщает пользователю, что они отклонились от маршрута. У них также есть крутой кролик-талисман, чтобы привлечь вас, в то время как их серверная часть создает файл журнала с кодом состояния http.

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

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

7.Блюгг

Это британское брендовое агентство, и их страница с ошибкой очень веселая.

Это не минимализм. У них есть куча навигационных ссылок вверху и контактная информация в нижнем колонтитуле.

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

Они ясно передают ошибку — «Аааааааааааааааааааааааааааааааааааааааааааааааааааааааамамамамамамам приятнее! Этой страницы не существует «. Затем видео с козлом с высоким тоном воспроизводится в цикле, пока вы не вернетесь назад, прочь от страниц с ошибками, на их домашнюю страницу (или приостановите воспроизведение видео).

8. Whitespark

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

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

Вы также можете нажать на красный CTA «Good Riddance» и уволить Брента.

Нажав эту кнопку, вы увидите обеспокоенного Брента и получите сообщение о том, что многие дети Брента будут голодать на улицах.

Дело в том, что ваши пользователи больше не обращают внимания на жаргон кода ошибки, например на код состояния http «что?» Они видят, что что-то пошло не так, и видят способы решения проблемы.

9. Квартира Home Living

Какой бы вы хотели видеть овцу в ванной?

Вообразить это само по себе забавно, правда?

Это иллюстрация, которую сайт поиска квартир Apartment Home Living использует на своей странице с ошибкой.

И, признав, что страница не существует, они возвращают пользователей на свою домашнюю страницу.

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

10. Лего

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

И внизу слева они предлагают обратную ссылку на главную страницу.

11. Mattel

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

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

Но, чтобы оставаться на сайте, вы получаете анимированный шар Magic 8, который отвечает на ваши вопросы.

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

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

Помимо шара magic-8, Mattel имеет 3 ссылки внизу. Вы можете вернуться на главную страницу, выполнить поиск на веб-сайте или посетить магазин Mattel.

12. Дефрозо

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

Во-первых, он говорит на языке аудитории: «страница не в фокусе.’

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

Или вы можете отправить электронное письмо команде по разморозке о проблеме.

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

3 метода создания настраиваемой ошибки 404 страница

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

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

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

1. Используйте плагин 404 Page WordPress — Вам повезло, если вы ведете свой блог на WordPress.Существует множество мощных плагинов, которые помогут вам легко реализовать расширенные функции на вашем веб-сайте.

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

Вот видеоролик о плагине кода ошибки.

[youtube https://www.youtube.com/watch?v=VTL07Lf0IsY]

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

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

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

Но по мере вашего продвижения ваш брендинг и обслуживание аудитории вашего веб-сайта становятся все более важными.

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

.

Инвестируйте в найм талантливых разработчиков с сайтов-фрилансеров, таких как UpWork и Freelancer. Опубликуйте требование с как можно большим количеством конкретных деталей. У вас должен быть приличный бюджет, чтобы привлекать качественные приложения.

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

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

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

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

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

[youtube https://www.youtube.com/watch?v=l-YJlu4CpYU]

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

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

Вы используете свой сайт на WordPress?

Многие темы WordPress снабжены файлом 404.php (пользовательский файл шаблона 404).

Вы можете редактировать их в текстовом редакторе и редактировать отображаемое сообщение об ошибке.

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

[youtube https://www.youtube.com/watch?v=YDN47iDc2_0]

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

Что бы вы ни делали, не выбирайте ни одну из этих настроек страницы 404.

3 инструмента для отслеживания неработающих ссылок и предотвращения ошибок 404 страницы

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

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

1. Проверьте расширение Chrome «Мои ссылки» — Это отличный инструмент, используемый в стратегии построения битых ссылок. Он сканирует веб-страницу, перечисляет общее количество ссылок, находит и помечает все неработающие ссылки красным цветом.

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

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

2. Плагин WordPress для проверки неработающих ссылок — Если вам нравится автоматизация, вам понравится этот инструмент.

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

Установите плагин и перейдите в Настройки »Проверка ссылок.

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

Чтобы просмотреть более подробный список неработающих ссылок и проблем с кодами ошибок на вашем веб-сайте, перейдите в Инструменты »Неработающие ссылки.

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

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

3. Google Analytics (GA) — Это один из самых мощных инструментов для веб-мастеров. Вы уже знаете о его функциях для отслеживания производительности вашего веб-сайта и разделения источников трафика.

Но знаете ли вы, что он может даже найти неработающие ссылки на вашем сайте?

Войдите в свою учетную запись аналитики. Перейдите в раздел Поведение »Контент сайта» Все страницы.

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

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

WordStream обнаружил, что его страница с ошибкой 404 была посещена 126 раз через 79 страниц (с 1 по 30 апреля).

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

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

Заключение

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

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

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

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

https://archive.org/web/wb404.js

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

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

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

• SEO — разблокируйте огромное количество SEO-трафика.Смотрите реальные результаты.
• Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
• Paid Media — эффективные платные стратегии с четкой окупаемостью.

Заказать звонок

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

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

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

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

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

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

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

• Протокол
• Доменное имя
• Путь

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

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

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

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

6 основных компонентов Cool 404 Pages

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

Юмор

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

Это гарантирует, что вы предоставите своим клиентам хорошее впечатление от вашего веб-сайта, даже если что-то, кажется, «идет не так».«

Четкая тема бренда

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

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

Использование графики

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

Хорошая практика — сделать так, чтобы ваша графика каким-то образом соответствовала вашей копии.

Ссылки на другие популярные страницы

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

Текст, который направляет пользователей в нужное место

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

Не бойтесь придавать тексту свое собственное восприятие вместо использования стандартной строки «Вы попали не на ту страницу» или «Страница не найдена».

Ссылки верхнего и нижнего колонтитулов

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

Это означает, что они с меньшей вероятностью откажутся от вашего сайта.

20 лучших примеров страниц 404

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

1. Amazon

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

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

2. Чудо

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

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

3. Pixar

На странице

Pixar 404 опубликована «Печаль» из «Наизнанку» 2015 года вместе с сообщением «Оууу … Не горюй, это просто ошибка 404».

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

4. Произвольная форма

Страница 404

Freeform является представителем одного из популярных шоу Freeform, Siren . Их изображение бухты в ночное время привлекает внимание, а их копия проста и умна.

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

5. Bitly

Страница ошибки

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

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

6. Huda Beauty

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

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

7. Австралийский

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

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

8.Codecademy

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

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

9. Восточный рынок

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

У

Eastern Market в Детройте есть страница с ошибкой, на которой изображена игра «Flappy Spud», в которой вы летите картофелем сквозь стены. Когда вы сталкиваетесь с препятствием, оно превращается в груду картошки фри. Приятное прикосновение.

10. Индекс бесполезной сети

Индекс бесполезных веб-сайтов — это крупнейший индекс совершенно бесполезных веб-сайтов в Интернете.Даже у них есть выходные.

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

11. Дом пингвинов в случайном порядке

У

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

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

12. IMDb

Страница ошибок

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

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

13. Мемориальная библиотека Фалви

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

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

14. Эмирейтс

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

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

15. Одинокая планета

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

16. Bluleadz

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

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

17. Студия 20-го века

У

20th Century Studios есть потрясающая фирменная страница 404 с большим черно-белым кадром из одного из их знаменитых старых фильмов. Они обыгрывают изображение забавным текстом под заголовком.

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

18. Дисней

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

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

19. Лиса

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

И, конечно же, там есть саркастический Стьюи из Family Guy со скрещенными руками. Помимо классного изображения и CTA, у Fox есть полное меню вверху, которое помогает людям перемещаться по сайту оттуда.

20. HelpScout

У

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

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

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