Как оформить страницу ошибки 404
ГлавнаяCRM и бизнес-процессыСтраница ошибки 404: как оформить, чтобы избежать оттока пользователей
CRM и бизнес-процессы
Дизайн
Содержание
- Ошибка 404: что это значит?
- Почему нужна отдельная страница для 404 ошибки
- Как создать страницу с уведомлением об ошибке 404
- Как оптимизировать страницу 404 ошибки
- Примеры отличных 404 страниц для сайта
- Как избегать ошибок на сайте
Расскажем, что такое ошибка 404, почему она возникает и как оформить под неё страницу, чтобы не терять посетителей сайта. Объясним, как найти ошибки на сайте и предотвратить их появление.
Подпишись на Telegram
ПодписатьсяОшибка 404: что это значит?
Иногда при переходе по ссылке вместо страницы сайта на экране появляется надпись: «Страница не найдена. 404 not found. Ошибка 404». Это значит, что такой веб-страницы нет или у неё поменялся адрес.
Пример страницы 404 на сайте Lenta.
ruПочему возникает ошибка 404:
- в URL ссылки была допущена ошибка;
- был изменён URL-адрес страницы;
- сайт временно не работал или вообще не существовал;
- неправильно сработал сервер;
- веб-страницу удалили.
Иногда владельцы сайтов не догадываются о таких ошибках. Особенно сложно следить за корректностью ссылок на крупных порталах с тысячами страниц. Поэтому пользователи периодически сталкиваются с надписью «404 Page Not Found». Иногда страница 404 появляется из-за ошибки самого пользователя, если он вводит или корректирует URL-адрес вручную.
Почему нужна отдельная страница для 404 ошибки
При вводе URL в строке браузера вручную возможны неточности и опечатки. Пользователи так или иначе могут столкнуться с ошибкой 404 на любом сайте. Если не задать такую страницу, посетитель не поймёт, что произошло, почему по ссылке не открылась ожидаемая страница. Для страницы с ошибкой 404 нужно придумать интересное оформление, оптимизировать её, чтобы пользователи не покидали сайт.
Хотите освоить сквозную аналитику?
Посетите регулярный мастер-класс по аналитике от Roistat.
ПодключитьсяГрамотно настроенная страница 404 поможет:
- Сохранить трафик сайта и позиции в выдаче результатов поиска. Сайт теряет трафик, если пользователи часто закрывают его из-за ошибки 404. Из-за этого поисковые системы могут понизить уровень ранжирования сайта.
- Предложить посетителю что-то взамен неоткрывшейся страницы. Пользователь попал на неработающую страницу, когда искал конкретный контент, возможно, даже форму регистрации. Сделайте страницу 404 полезной для посетителя, предложите ему почитать о ваших ключевых продуктах, дайте ссылки на полезные статьи.
- Вызвать доверие. Грамотно оформленная страница 404 — это возможность сохранить потенциального клиента на сайте. Извинитесь и помогите пользователю найти то, зачем он зашёл на сайт. Так посетитель с большей вероятностью останется на сайте и завершит оформление заявки или покупку.
Как создать страницу с уведомлением об ошибке 404
Во многих CMS стандартная страница 404 создаётся автоматически для любых страниц, кроме одностраничных сайтов-визиток. Или можно создать дизайн этой страницы самостоятельно. Для создания страницы нужно продумать веб-дизайн и призыв к совершению целевого действия. Это может быть ссылка на каталог товаров или строка поиска, чтобы найти нужную страницу.
Чтобы добавить страницу на сайт:
- Перенесите шаблон страницы ошибки 404 в корневую папку сайта.
- Откройте файл .htaccess и пропишите код: ErrorDocument 404 http://АДРЕС_САЙТА/404.html
- Впишите код в любую свободную строку, залейте на хостинг и проверьте: совершите ошибку в какой-нибудь ссылке, например, удалите букву. Вместо стандартного шаблона 404 должен отобразиться новый вариант. Если нет — проверьте правильность кода, возможно, была допущена ошибка.
Некоторые CMS автоматизируют процесс создания страницы об ошибке: например, в WordPress это можно сделать с помощью плагина 404page.
Плагин может кастомизировать страницу на разных темах. Для его установки нужна версия WordPress от 4.0.
Как оптимизировать страницу 404 ошибки
Страница должна быть простой и понятной для пользователя. Пусть она будет креативной и гармонично продолжать концепцию всего сайта, но не усложняет путь к основному пространству, например, в каталог товаров или на главную страницу.
Советы по созданию страницы 404:
- Будьте доброжелательны. Расскажите посетителю, что страница удалена или произошла ошибка, помогите вернуться на основные страницы сайта.
- Предложите посетителю проверить точность адреса или дайте ссылки на разделы, которые были недавно перемещены.
- Дайте ссылки на продукт или статьи, релевантные поиску. Для этого нужно знать, на какую страницу пользователь пытался перейти. Это можно сделать, когда в URL указан раздел или категория.
- Сделайте страницу полезной: дайте возможность скачать книгу или перейти на статьи в блоге, которые рассказывают о ценности продукта.
- Не ограничивайтесь забавной картинкой. Добавьте ссылку на главную страницу сайта, блог, каталог или афишу событий компании.
- Предложите посетить страницу с акциями, спецпредложениями.
- Разместите строку поиска, чтобы посетитель сайта мог найти то, что он искал. Например, модель телефона в интернет-магазине или статью на новостном портале.
- Покажите посетителю квиз или мини-игру. Это отличный способ свести негативное впечатление пользователя к минимуму.
- Выдержите единое оформление, чтобы страница 404 не отличалась от остальных страниц сайта.
Рассказали, как квиз-маркетинг помогает пользователям совершить покупку.
Примеры отличных 404 страниц для сайта
Пусть подборка классных примеров вдохновит вас на создание собственного креативного шаблона страницы 404.
У McDonalds на странице 404 есть навигация по сайту и даже форма для подписки на рассылку:
Пример страницы 404 на сайте McDonaldsНа странице 404 блога Roistat пользователю предлагается вернуться на главную страницу блога, перейти в нужный раздел или воспользоваться кнопкой обратного звонка:
Пример страницы 404 в блоге RoistatНа странице 404 для основного сайта Roistat отсутствие страницы нивелируется подарком для пользователя.
Дополнительно посетитель может прочитать кейсы работы с сервисом:
На сайте Спортмастера использована забавная тематическая картинка, есть ссылки на главную страницу, каталог товаров и поисковая строка:
Пример страницы 404 на сайте СпортмастерЕщё одна страница известного интернет-магазина Lamoda. Кроме навигации и строки поиска, пользователям предлагают популярные товары:
Пример страницы 404 на сайте LamodaТинькофф предлагает простую страницу, на которой сообщается об ошибке и даются ссылки на основные услуги банка:
Пример страницы 404 на сайте банка ТинькоффСтраница об ошибке у ресторана KFC очень лаконичная страница. Пользователю предлагают всего 2 кнопки с простым CTA — «Заказать еду» и «Найти ресторан»:
Пример страницы 404 на сайте KFCКак избегать ошибок на сайте
Неработающие ссылки и большое количество ошибок приводят к потере трафика и снижают позиции сайта в выдаче поисковых систем. Поэтому важно регулярно проверять сайт на ошибки и исправлять их.
Рассказали, как SEO-аудит помогает оптимизировать работу сайта.
Упростить проверку сайта поможет услуга SEO-аудита от Roistat. Аналитики проверят страницы сайта, найдут ошибки и создадут список рекомендаций по их исправлению. На весь оплаченный период оптимизации сайта за вами будет закреплён веб-аналитик, который сможет ответить на все вопросы по работе с сайтом.
Хотите освоить сквозную аналитику?
Посетите регулярный мастер-класс по аналитике от Roistat.
ПодключитьсяНа нашем Telegram-канале делимся полезными материалами по маркетингу и аналитике, кейсами клиентов, собираем познавательные дайджесты и анонсируем бесплатные обучающие вебинары. Подписывайтесь, чтобы ничего не пропустить!
Лучшие 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 страницы изображений | Скачать бесплатные картинки на Unsplash
404 Page Pictures | Скачать Free Images на Unsplash- ФотоФотографии 7k
- Стопка фотографийКоллекции 10k
- Группа людейПользователи 0
страница
на улице
природа
гора
каньон
аризона
серый
долина
электронный
404
подковообразный изгиб
США
Эрик Маклинссылка не работаетtechHd обои для ПК
визуальные эффектытик ток безопасностьсоциальная сеть
–––– –––– –––– – –––– – –––– –– – –– –––– – – – – ––– –– –––– – –.
errorcodecoding
Erik Mclean404electronicsHd обои для компьютера
Erik Mcleanстраница не найдена404 errorHd обои для ноутбука
бен о’бро обои С уважением МедиаКнига изображения и фототексточки
Эрик Маклинтехнологиимобильный телефонHd обои для телефона
Akbarsait NoorMohamedUnited Statesaz 86040Hd синие обои 9001 1 Ян Шнайдер
социальные сетиВеб-сайтыцитировать
Пол Ван КоттемаризонаПрирода фотоТекстуры фоны
Wenhao RyanЗакат фото и картинкиПейзаж фото и картинкиГоры фото 9HD арт обои телефон
Том ГейнорusasunburstHq фоновые изображения
Теренс Старкиantelope canyoncoloursantelope
Jim WitkowskiHd серые обоимирные люди
Carl Nenzen LovenHq фоновые изображенияHd обоиRock
неработающая ссылкаtechHd обои для ПК
код ошибкикодирование
страница не найдена404 errorHd обои для ноутбука
технологиимобильный телефонHd обои для телефона
социальныесетиФон сайтацитата
Закат фото и картинкиПейзаж фото и картинкиГоры фото и картинки
исходный кодlangensendelbachdeutschland
Hd обои redditHd обои на андроидсотовый телефон
Hd серые обои, мирные люди
–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –– –– – –.
тик токбезопасностьсоциальная сеть
404электроникаHD обои для компьютера az 86040Hd синие обои
arizonaПрирода фотографииТекстура фоны
каньон антилопы xна улицеHd арт обои
usasunburstHq фоновые изображения
Связанные коллекции
404 страница
13 фото · Куратор Бен Пирс404 страница
9 фото · Куратор Кристина Лэннинг404 Страница
6 фотографий · Куратор Серена Порреллоканьон антилопыцветаантелопа
Hq фоновые изображенияHd обоирок
ссылка не работаетtechHd обои для ПК
страница не найдена404 errorHd обои для ноутбука
социальные сетиВеб-сайт фоныцитата
arizonaПрирода фотоТекстура фоны
Закат фото и картинкиПейзаж фото и картинкиГоры фото и картинки
Hd reddit картинкиHd android обоиМобильный телефон
tik tokбезопасностьсоциальная сеть
pagecanyonshoe
90 010 Book images & photostextglassesUnited Statesaz 86040Hd blue wallpapers
исходный кодlangensendelbachdeutschland
usasunburstHq фоновые изображения
каньон антилопыcolorsantelope
Hq фоновые изображенияHd wallpapersRock
–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –– –– – –.
errorcodecoding
404электроникаHd обои для компьютера
Horseshoe BendСоединенные Штаты АмерикиHd небо обои
технологиимобильный телефонHd обои для телефона
Связанные коллекции
404 страница
13 фото · Куратор Бен Пирс404 страница
9 фото · Куратор Кристина Лэннинг404 Страница
6 фото · Куратор Serena PorrelloКаньон антилопы xoutdoorsHd art wallpapers
Серые обои Hdpeacefullno people
Просмотр премиальных изображений на iStock | Скидка 20% на iStock
Логотип UnsplashСделайте что-нибудь потрясающее
16 из величайших страниц с ошибкой 404
Кричащая коза, милые псы и точный штурмовик приветствуют заблудших пользователей Интернета на некоторых из самых великолепных страниц 404, не найденных в Интернете. Вот они.
Аманда Кузер
Снимок экрана: Amanda Kooser/CNET Вот 15 сайтов с причудливыми, забавными и откровенно странными страницами ошибок 404.
Предоставьте 501st, международной группе фанатов «Звездных войн», приверженцев создания костюмов, соответствующих экрану, адаптировать классическую реплику «Звездных войн» к ошибке 404: «Это не та страница, которую вы ищете. … Двигайтесь вперед…» Прочный, изношенный Штурмовик, указывающий вдаль, просто возвращает все это домой.
2 из 16 Скриншот Amanda Kooser/CNET
НАСА восхитительно занудно со своим сообщением 404, говорящим заблудшим веб-серферам, что «космический объект, который вы ищете, исчез за горизонтом событий». Кружащееся ложе из звезд добавляет сообщению приятный визуальный интерес.
3 из 16 Скриншот Amanda Kooser/CNET
Высшая лига бейсбола обладает чувством юмора, когда речь заходит о том, чтобы сообщить пользователям Интернета, что они заблудились в сети. Страница 404 профессионального бейсбола загружает один из множества различных GIF-файлов с сообщением «OOF!» в верхней части страницы. GIF-файлы показывают различные грубые ошибки, такие как столкновение талисманов друг с другом или столкновение игроков при попытке поймать мяч.
4 из 16 Скриншот Amanda Kooser/CNET
У Amazon есть страницы с ошибкой 404, которые вы захотите обновлять снова и снова. На каждом изображена отдельная собака, которая живет с сотрудником Amazon, а также ссылка на страницу с описанием всех разных собак.
Оливер, изображенный здесь, любит сидеть, вертеться и играть с игрушечным дикобразом. Продолжайте обновляться, чтобы увидеть остальных, в том числе корги по имени Вафли и француза по имени Бисквит. Собери их всех.
5 из 16 Скриншот Аманды Кузер/CNET
Британская компания по цифровому маркетингу Bluegg готова заставить вас вскочить со своего места своей страницей 404, которая постоянно перезагружает видео с кричащей козой.
«А-а-а-а-а! Эта страница не существует. Не беспокойтесь. Вы можете либо вернуться на нашу домашнюю страницу, либо сидеть там и слушать, как коза кричит, как человек», — пишет компания.
6 из 16 Скриншот Amanda Kooser/CNET
Если вы ведете комедийный сайт, вы должны попытаться создать забавную страницу 404.
Funny or Die достигает этого с помощью сообщения «Пусть! Вы только что сломали Интернет» вместе с идеальным изображением бывшего вице-президента США Эла Гора (создавшего интернет-славу), осуждающе смотрящего с экрана.
7 из 16 Снимок экрана: Amanda Kooser/CNET
Официальный сайт Брюса Спрингстина хочет поразить вас своим сообщением 404. На нем есть большая черно-белая фотография, на которой Спрингстин скользит к краю сцены на коленях, делая впечатляющий изгиб назад. Резкие слова «Ты ничего не найдешь здесь, друг / Кроме семян, взрывающихся на шоссе на южном ветру» взяты из его песни «Seeds».
8 из 16 Скриншот Аманды Кусер/CNET
Компания по производству игрушек Mattel выделяет свой Magic 8 Ball на странице 404. Анимированный шар сверкает и вращается, когда вы нажимаете на него, показывая классический ответ, такой как «Это определенно так», «Перспектива не очень хороша» или очень подходящий «Спросите еще раз позже».
9 из 16 Скриншот Amanda Kooser/CNET
The Onion известен своими забавными вымышленными новостными статьями.
Страница 404 сайта минирует ту же территорию с поддельной новостной статьей с заголовком «Страница, которую вы искали, сгорела». Короткая история включает в себя потогонную мастерскую, бесплатную горячую линию фонда восстановления и горько-сладкую дань уважения потерянным веб-страницам.
10 из 16 Скриншот Amanda Kooser/CNET
Lego позволяет своим игрушкам играть главную роль на странице 404. Возможно, вы перешли по старой ссылке, но вы все равно можете вызвать улыбку на изображении компании классической минифигурки, держащей оборванный шнур питания, в то время как другие минифигурки корчат рожи на заднем плане.
11 из 16 Скриншот Amanda Kooser/CNET
Сенатор США Берни Сандерс, возможно, больше не баллотируется на пост президента, но на веб-сайте его кампании все еще размещено очень личное сообщение 404. Сам Сандерс записал короткое видео, в котором говорится: «Хорошая новость заключается в том, что вы находитесь на правильном веб-сайте, и это действительно хороший веб-сайт.
Плохая новость заключается в том, что вы находитесь не на той странице».
12 из 16 Скриншот Аманды Кузер/CNET
Тот, кто сделал страницу 404 Национального общественного радио США, обладает чувством юмора и любовью к истории. Сообщение простое: «Страница не найдена», но затем оно уточняется: «Жаль, что ваша страница потеряна, но, по крайней мере, она в хорошей компании; оставайтесь поблизости, чтобы просмотреть истории NPR о потерянных людях, местах и вещах, которые все еще не явился».
Далее следует множество ссылок на истории о пропавших без вести людях и вещах: Амелия Эрхарт, часть записей Уотергейта, Джимми Хоффа, Атлантида, Уолдо и «Ваш багаж».
13 из 16 Снимок экрана: Amanda Kooser/CNET
Визуально страница 404 базы данных Internet Movie Database выглядит не так уж и много, но важно ее содержание. Меняющаяся подборка измененных цитат из фильмов приветствует людей, которые сбиваются с пути IMDb. Вот несколько жемчужин:
«Веб-страницы? Куда мы идем, нам не нужны веб-страницы.
» — Доктор Эммет Браун, «Назад в будущее» (1985)
«Страница не найдена? — Виццини, «Принцесса-невеста» (1987)
«Когда-нибудь мы найдем это… связь с веб-сайтом…» — Лягушка Кермит, «Маппет-фильм» (1979)
14 из 16 Скриншот Amanda Kooser/CNET
Сайт деловых новостей Bloomberg сходит с ума со своей забавной страницей с ошибкой 404, показывающей повторяющуюся последовательность человека в деловом костюме, сбивающего старомодный компьютерный монитор со стола, а затем он распадается на части. Это странно, но это также подходит для разочаровывающего 404.
15 из 16 Скриншот Amanda Kooser/CNET
Многогранное интернет-сообщество Reddit позволяет своему инопланетному талисману занять центральное место на странице 404. Когда вы попадаете на ошибку, вы получаете одну из нескольких различных иллюстраций, изображающих потерянного и отчаявшегося инопланетянина. Это может быть пот в пустыне, застрявший в космосе или окруженный сном о лихорадке, кишащей улитками.