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

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

1. Что такое страница 404?
2. Что лучше, стандартное или уникальное сообщение про 404?
3. Как создать собственную страницу 404?
4. Лучшие примеры

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

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

• 404 Not Found;
• The requested URL was not found on this server;
• HTTP 404 Not Found;
• 404 Error;
• The page cannot be found.

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

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

Стандартный ответ сервера выглядит так: Другой вариант страницы выглядит так: Причины появления ошибки 404:

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

Что лучше?

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

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

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

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

Примеры

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

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

Некоторые веб-мастера настраивают редирект 301, таким образом при наборе неверного URL-адреса автоматически происходит перенос на главную страницу. Это не совсем корректное решение, поскольку запутывает посетителя. Допустим, пользователь однажды был на работающей странице и занес ее в закладки. Через некоторое время он заходит на нее и попадает на главную. Пытается опять – и снова. Не все сразу поймут, что такой страницы больше не существует. Лучший выход в этой ситуации не настраивать переадресацию, а грамотно и нестандартно оформить страницу 404. Рассмотрим несколько примеов нестандартных страниц, составленных с юмором и фантазией. 1. Сайт Heinz

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

В приведенном примере сообщается: «Вы пробовали искать информацию? Введите ключевое слово в форму поиска или кликните по одной из предложенных ссылок». 2. Сайт Agens

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

3. Сайт iFolderLinks:

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

4. Сайт GitHub:

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

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