Ошибка 404 оформление страницы

Время на прочтение
4 мин

Количество просмотров 143K

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

В качестве вступления отметим, что страница 404 «Не найдено» (404 Page Not Found) – это один из кодов состояния HTTP, принятых Консорциумом Всемирной паутины (W3C) в 1992 году. Для тех, кому интересно значение цифр 404, вкратце расскажем.

1. Первая «4» означает, что произошла ошибка со стороны клиента. Такой ошибкой может быть неверно написанный URL или запрос несуществующей страницы. В свою очередь, первая «5» значила бы ошибку со стороны сервера.
2. Цифры «04» — определяют конкретную ошибку Not Found из группы 4хх. Среди других ошибок из этой группы — 400 Bad Request, 401 Unauthorized, 402 Payment Required, 403 Forbidden и так далее.

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

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

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

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

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

Принимая это во внимание, приведем список рекомендаций по созданию кастомной 404-й страницы.

1. Будьте любезны с посетителями.Они попали на эту страницу не по своей вине. Постарайтесь выразить свое сожаление и готовность помочь.
2. Не углубляйтесь в технические детали. Термин «ошибка 404» сам по себе уже в достаточной мере техничен и в то же время понятен большинству пользователей. Нет никакой необходимости отпугивать посетителей любой другой специфической информацией о причинах этой ошибки. По сути, необязательно даже использовать цифры «404», достаточно просто объяснить суть проблемы.
3. Предложите пользователям проверить написание ссылки. Если они вводили адрес ссылки самостоятельно, то вполне вероятно могли допустить ошибку.
4. Придерживайтесь единого стиля сайта. Дизайн страницы 404 по оформлению и по ощущениям должен быть выдержан в стиле Вашего бренда, чтобы у пользователей не возникло заблуждения, что они попали на какой-то другой сайт.
5. Страница ошибки 404 не должна выглядеть как обычная страница. Ваши посетители должны ясно видеть, что страница не была найдена и не содержит какого-либо контента. Поэтому не стоит наполнять ее слишком большим количеством текста и ссылок.
6. Небольшая порция юмора никогда не помешает. Довольно часто 404 страница становится для дизайнеров и разработчиков платформой для выражения своих креативных и юмористических идей. Вместо того чтобы пользователи быстро закрывали ненайденную страницу, лучше удержать их от закрытия сайта, заинтересовав забавно и изобретательно выполненной страницей.
7. Будьте полезными и предоставьте ссылки на возможные совпадения. Если пользователи оказались на ненайденной странице, они, вероятно, что-то искали. Так помогите же им это найти. Разместите на странице меню или ссылки на недавно перемещенные страницы. Или почему бы не дать ссылки на самые популярные страницы Вашего сайта? Либо на самый новый и актуальный контент. Так или иначе, пользователи должны быть не более чем в одном клике от перехода на какую-либо другую страницу сайта. И, конечно же, всегда давайте ссылку на главную страницу.
8. Добавьте строку поиска. Чтобы не потерять своих посетителей, позвольте им найти то, что они искали, оказавшись на странице ошибки.
9. Обеспечьте способ отправить отчет об ошибке. У пользователя всегда должна быть возможность отправить вам сообщение об ошибке, если он пожелает. Это поможет Вам узнать о каких-либо внутренних недочетах сайта. Еще лучшим решением для отслеживания проблем на сайте станет автоматическое уведомление. А если произойдет внезапный всплеск 404-х ошибок, полезным будет мгновенное уведомление. Это позволит исправить проблему в режиме реального времени, пока она еще релевантна.
10. Позаботьтесь о вопросах SEO. Для оптимизации сайта важно максимально сократить количество внутренних ссылок на 404-е страницы, а еще лучше вовсе исключить возможность формирования некорректных URL адресов, ведущих на страницы 404. Инструменты для вебмастеров помогут Вам отслеживать ошибки на сайте, в том числе и ошибки с кодом 404 Not found. Более того, эти инструменты помогут Вам понять, откуда берутся ошибки и как они формируются – ошибка в URL ссылки на сайте, либо это атака конкурентов.

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

    

    Яндекс:

    
    Также рекомендую ознакомиться с официальной информацией о страницах 404 от поисковых систем: Google — здесь и Яндекс — здесь.

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

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

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

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

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

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

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

Вывод

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

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

Ошибка 404: что это значит?

Иногда при переходе по ссылке вместо страницы сайта на экране появляется надпись: «Страница не найдена. 404 not found. Ошибка 404». Это значит, что такой веб-страницы нет или у неё поменялся адрес.

Почему возникает ошибка 404:

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

Иногда владельцы сайтов не догадываются о таких ошибках. Особенно сложно следить за корректностью ссылок на крупных порталах с тысячами страниц. Поэтому пользователи периодически сталкиваются с надписью «404 Page Not Found». Иногда страница 404 появляется из-за ошибки самого пользователя, если он вводит или корректирует URL-адрес вручную.

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

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

Грамотно настроенная страница 404 поможет:

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

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

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

Чтобы добавить страницу на сайт:

1. Перенесите шаблон страницы ошибки 404 в корневую папку сайта.
2. Откройте файл .htaccess и пропишите код: ErrorDocument 404 http://АДРЕС_САЙТА/404.html
3. Впишите код в любую свободную строку, залейте на хостинг и проверьте: совершите ошибку в какой-нибудь ссылке, например, удалите букву. Вместо стандартного шаблона 404 должен отобразиться новый вариант. Если нет — проверьте правильность кода, возможно, была допущена ошибка.

Некоторые CMS автоматизируют процесс создания страницы об ошибке: например, в WordPress это можно сделать с помощью плагина 404page. Плагин может кастомизировать страницу на разных темах. Для его установки нужна версия WordPress от 4.0.

Как оптимизировать страницу 404 ошибки

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

Советы по созданию страницы 404:

1. Будьте доброжелательны. Расскажите посетителю, что страница удалена или произошла ошибка, помогите вернуться на основные страницы сайта.
2. Предложите посетителю проверить точность адреса или дайте ссылки на разделы, которые были недавно перемещены.
3. Дайте ссылки на продукт или статьи, релевантные поиску. Для этого нужно знать, на какую страницу пользователь пытался перейти. Это можно сделать, когда в URL указан раздел или категория.
4. Сделайте страницу полезной: дайте возможность скачать книгу или перейти на статьи в блоге, которые рассказывают о ценности продукта.
5. Не ограничивайтесь забавной картинкой. Добавьте ссылку на главную страницу сайта, блог, каталог или афишу событий компании.
6. Предложите посетить страницу с акциями, спецпредложениями.
7. Разместите строку поиска, чтобы посетитель сайта мог найти то, что он искал. Например, модель телефона в интернет-магазине или статью на новостном портале.
8. Покажите посетителю квиз или мини-игру. Это отличный способ свести негативное впечатление пользователя к минимуму.
9. Выдержите единое оформление, чтобы страница 404 не отличалась от остальных страниц сайта.

Рассказали, как квиз-маркетинг помогает пользователям совершить покупку.

Примеры отличных 404 страниц для сайта

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

У McDonalds на странице 404 есть навигация по сайту и даже форма для подписки на рассылку:

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

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

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

Ещё одна страница известного интернет-магазина Lamoda. Кроме навигации и строки поиска, пользователям предлагают популярные товары:

Тинькофф предлагает простую страницу, на которой сообщается об ошибке и даются ссылки на основные услуги банка:

Страница об ошибке у ресторана KFC очень лаконичная страница. Пользователю предлагают всего 2 кнопки с простым CTA — «Заказать еду» и «Найти ресторан»:

Как избегать ошибок на сайте

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

Рассказали, как SEO-аудит помогает оптимизировать работу сайта.

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

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

Немного о термине

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

Причины появления проблемы  

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

Неправильный адрес 

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

Человек сам поймет, что опечатался, перейдет на главную и продолжит искать нужную ему категорию. Например, юзер захотел посетить интернет-магазин https://www.sportmaster.ru/catalog/brendy/reebok/ , но при написании адреса ошибся и вместо доменной зоны .ru, указал .com. В таком случае пользователь увидит следующую информацию: 

Неправильная ссылка на каналах для привлечения трафика 

Причиной появления ошибки 404 «Страница не найдена» может быть не только сайт и опечатка юзеров. Ошибиться может как и сам владелец, так и подрядчик, который занимается рекламой. Например, если в email-рассылке указан неверный адрес, то пользователь перейдет на ресурс по битому url, увидит, что на страничке нет нужной для него информации и уйдет. В таком случае бюджет на рекламу пропадет впустую, потому что такая оплошность не приведет к росту клиентов.  

Технические неполадки 

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

Битые ссылки 

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

Эту неполадку можно обнаружить с помощью различных сервисов: Labrika, Screaming Frog и тд. Чтобы решить проблему, необходимо с битого урла настроить 301 редирект на актуальный или же совсем убрать такие гиперссылки, чтобы пользователь не смог перейти по ним.  

Читайте также


Самостоятельная регистрация организации в каталогах и справочниках: как делать и чего ожидать

Неправильная работа сервера 

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

Последствия 

Если странички вашего ресурса начали отображать еррор 404 request failed with status code, необходимо как можно скорее обратиться к компетентному специалисту, который обнаружит сбой и поправит его в краткий срок. Такая проблема может негативно повлиять на продвижение сайта, то есть: 

Код ошибки 404: что это такое и как ее устранить 

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

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

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

Чтобы найти площадки, которые ссылаются на ваш сайт, следует перейти в категорию с внешними линками:

Google Search Console

 Чтобы посмотреть, какие странички перестали работать, нужно перейти в инструмент от Google в раздел «Страницы» и найти причину «Не найдено (404)».

Xenu

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

После того как все url загрузятся, можно просто отсортировать список по статусу и найти обозначение not found: 

Screaming Frog

Это многофункциональный сервис для проверки веб ресурсов. Для того чтобы выявить ошибки 404, программа должна отсканировать площадку и выгрузить все гиперссылки. Для начала вам нужно ввести url в специальную строку, а затем нажать на Start, чтобы началось сканирование. После проверки перейдите во вкладку Response Codes и поставьте фильтр Client Error (4xx). После введения всех параметров на экране появятся не найденные странички. 

Netpeak Spider

Это платный сервис, который устанавливается на компьютер. После установки необходимо оплатить лицензию. С помощью этой программы вы сможете не только искать странички, которые не работаю, но и проводить полноценный технический аудит. Чтобы найти разделы с 404 кодом ответа сервера, нужно ввести адрес в специальную строку и дождаться выгрузки всех url. Затем кликните на кнопку «Старт», потом на «Отчеты» и после на «Сводка». Как только вы увидите список ссылок, нужно найти в категории «Статус страницы» параметр «Битые».  

404 that’s an error: как ее исправить  

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

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

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

Оформление несуществующей страницы 

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

Развлекательный блок 

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

Оформление несуществующей страницы 

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

Развлекательный блок 

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

Дополнительная перелинковка на товары или услуги 

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

Внедрить строку поиска   

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

Читайте также


Продающие тексты: как писать маркетинговые статьи для интернет-магазина

Ссылки на основные разделы 

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

Что предпринять, если проблема осталась 

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

Заключение 

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