Как сделать из страницы 404 что-то полезное и интересное: 30 примеров

1. Что такое ошибка 404Функции страницы 404 ошибка
   1. Разъяснительная функцияПродающая функцияРазвлекательная функцияВажные моменты

   Исправьте и настройте отслеживание 404 ошибкокПримеры страниц 404 в наших проектах

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

Сайт русский, а страница 404 на английском

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

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

Почти всегда страница с 404 ошибкой — это полупустой экран, непонятная надпись на английском языке «Error 404. Page cannot be found», корявая вёрстка текста и никакой информации, что делать дальше.

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

Варианта развития ситуации два:

1. Целеустремленный пользователь догадается нажать кнопку «Назад» в браузере или перейти на Главную, если найдет соответствующую ссылку на странице.
2. Менее опытный (а, может, ленивый) посетитель сайта, вероятнее всего, закроет вкладку решив, что сайт неисправен или взломан. Результат: минус один потенциальный клиент.

Функции страницы 404 ошибка

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

Разъяснительная функция

Объясните посетителю, что произошло, в чём суть ошибки и что теперь делать. Как правило, это текст подобного содержания: «К сожалению, запрашиваемая страница не найдена. Возможно, вы перешли по ссылке, в которой была допущена ошибка, или ресурс был удален. Попробуйте перейти на главную страницу или каталог (список афиш, расписание поездов, популярные товары)». И обязательно сделайте ссылки на соответствующие страницы. Так человек не закроет страницу, потому что ему показали, куда перейти дальше.

Объяснение и подсказка для посетителя

Посетителю предлагается перейти на основной раздел сайта

Не только объяснение и подсказка, но и телефон для связи

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

Продающая функция

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

Сеть магазинов Lego предлагает популярные серии товаров

«Лабиринт» на 404 странице продает бестселлеры

«Аквалого» даёт возможность посмотреть хиты продаж

Развлекательная функция

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

Важные моменты

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

Любая удаленная страница на сайте или несуществующий URL должны отдавать код ответа сервера 404 (Not found) и использовать шаблон, заданный для 404 страницы.

Узнать, какой код ответа сервера отдает любая страница можно с помощью онлайн-сервиса bertal.ru или в Яндекс Вебмастере в разделе Инструменты — Проверка ответа сервера.

Исправьте и настройте отслеживание 404 ошибкок

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

Отлавливать URL, отдающие 404 ошибку, можно с помощью отчетов в Яндекс Метрике, настроив цель на сбор 404 ошибок, и отчетов в Google Analytics, настроив отслеживание через Google Tag Manager. В Яндекс Вебмастере выявить 404 ошибки можно перейдя в раздел Индексирование — Статистика обхода и нажав в правом верхнем углу История обхода.

Расположение 404 ошибок в Яндекс Вебмастере

Далее в фильтре столбца Стало надо выбрать HTTP-код 404 (Not found) и нажать Применить.

Выборка страниц в Яндекс Вебмастерес кодом ответа 404 (Not found)

Полученный список можно выгрузить в формате CSV и XLS при помощи кнопок в правом нижнем углу.

В Google Search Console информация о 404 ошибках находится в разделе Сканирование — Ошибки сканирования — Не найдено. Выгрузить список страниц в формате CSV можно нажав на кнопку Загрузка.

Расположение 404 ошибок в Google Search Console

Хорошим тоном будет разместить призыв отправить отчёт об ошибке. Тогда, особенно если ошибка выдается часто, вы быстро узнаете о проблеме от самих пользователей, получив на почту URL страницы с 404 ошибкой и страницы, с которой человек перешел по «битой» ссылке.

Призыв сообщить о 404 ошибке

Еще один вариант предложения отправить отчет о 404 ошибке

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

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

belcantofund.com

vertum.su

drenazh.su

chopshopsamara.ru

monahotel.ru

rielt-bg63.ru

Нужно эффективное SEO?

Обращайтесь, сделаем, как для себя

Все знают, как обидно вместо желаемой страницы получить ошибку 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, могут покинуть сайт. Допускать этого нельзя. Владельцы как молодых, так и давно работающих веб-ресурсов должны заботиться об удержании любого посетителя. Поможет в этом грамотное оформление несуществующих страниц. В этом материале вы узнаете о том, что представляет собой ошибка 404, как ее обнаружить и оформить на пользу сайта.

Суть ошибки 404

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

Ведущие в пустоту ссылки именуют «сломанными» или «битыми». Появление 404 ошибки может быть по следующим причинам:

• посетитель неправильно ввел адрес страницы;
• страница на сайте была перемещена или удалена. Так, URL страницы мог быть изменен, но «битая» ссылка сохранилась на сторонних ресурсах или в закладках браузера.

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

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

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

Способы обнаружения ошибки 404

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

Яндекс.Метрика

Отслеживать посещения страниц 404 можно используя «Параметры визитов» в Яндекс.Метрике. Для этого в код счетчика необходимо добавить код «params:windows.yaParams||{ }» в качестве последнего параметра:

Далее, на 404 странице в тег BODY до кода счетчика Яндекс.Метрики необходимо разместить следующий JS-скрипт:

url здесь — это адрес неработающей страницы, а url_referrer — откуда на него пришли.

После внесения данных изменений вы сможете в отчете «Параметры визитов» в Яндекс.Метрике посмотреть полную статистику по посещенным 404 страницам и информацию – с каких страниц на них попадают:

В графе «from» — будут собраны URL, с которых пользователи попали на страницы 404, а в графе «page» — адреса несуществующих страниц.

Google Analytics

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

document.referrer здесь – это URL предыдущей страницы, а document.location.pathname + document.location.search — адрес несуществующей), title – передаваемый в GA параметр, задающий название страницы (для последующей фильтрации в отчете).

document.addEventListener(‘DOMContentLoaded’, function(){}) — это аналог функции $(document).ready(function(){}) на jQuery. Если на вашем сайте вы используете JS-фреймворк jQuery – вы можете использовать данную функцию, если нет – используйте пример выше целиком.

Чтобы проверить отработку скрипта и увидеть, сколько пользователей посетили несуществующие страницы – зайдите в отчет «Поведение», «Контент сайта», «Все страницы» в Google Analytics. Фильтр настраивается по названию отсутствующей страницы (параметр title, переданный в GA):

Другие способы

Узнать о несуществующих страницах помогут также инструменты веб-мастеров – Яндекс.Вебмастер и Google Search Console. В Вебмастере нужно открыть: «Индексирование» — «Страницы в поиске» — «Исключенные страницы» и отфильтровать отчет по статусу «ошибка 404».

В Google Search Console это отчет «Покрытие» — «Исключено» — «Не найдено — 404»:

Влияет ли ошибка 404 на индексирование сайта?

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

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

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

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

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

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

• 1. Любезность с посетителями и объяснение ситуации. Человек оказался на «сломанной» странице не по своей вине. Необходимо обозначить свое сожаление и оказать ему помощь.

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

• 2. Отсутствие необходимости в объяснении технических деталей. Сама «ошибка 404» уже понятна большинству посетителей. В связи с этим нет нужды доносить им какую-то сложную техническую информацию. Достаточно кратко обозначить суть сложившейся ситуации. Вот как это сделали на сайте компании «СТАЙЕР»:

• 3. Предложите проверить адрес ссылки. Если пользователи прописывали адрес самостоятельно, то вполне могли где-то сделать ошибку.
• 4. Дизайн страницы 404 в едином для сайта стиле. Очень важно, чтобы «поломанная» страница была выдержана в стиле дизайна бренда. Благодаря этому пользователи не будут введены в заблуждение. Напротив, они лояльно отнесутся к произошедшему, после чего продолжат взаимодействие с веб-ресурсом.

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

• 5. Отсутствие спама. Посетители должны четко понимать, что случилось. Несуществующую страницу не следует наполнять множеством ссылок или рекламных баннеров. Достаточно будет небольшого блока с объяснением ситуации, выдержанного в общей стилистике сайта. Многие интернет-магазины все еще ведут споры о том, стоит ли размещать популярные товары на страницу 404. Если сайт изначально хорошо структурирован, то карта товаров или блок рекомендаций может смотреться вполне органично. Например, как на сайте ЭЛЬДОРАДО.ру:

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

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

На сервисе по созданию дизайнов Crello сообщают, что страницу украли голуби:

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

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

• 8. Страница 404 должна быть полезной. Зачастую креатива недостаточно. Заботиться нужно и о пользовательском удобстве. Оптимальный вариант – дать ссылки на совпадения по запросу. Также на странице можно разместить ссылки на актуальный или популярный контент.

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

Мы на нашей 404 странице показываем ссылки на основные разделы сайта:

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

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

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

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

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

Подытожим всё вышесказанное. Грамотно оформленная страница 404 должна быть:

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

Используемые источники:

• https://liderpoiska.ru/blog/stranitsa-404-nie-oshibka-a-pomoshchnik/
• https://tproger.ru/devnull/best-404-notfound-pages/
• https://promo.altera-media.com/information/expert/404pages/