Оформление 404 страницы – важно или нет?

28 мая 18:08 2012

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

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

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

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

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

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

Ещё пример, плохо оформленной страницы «Ошибка 404»:

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

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

Улучшаем оформление 404 страницы

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

Совет 1: Сохраняйте целостность дизайна

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

Сохраняйте целостность дизайна

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

Совет 2: Максимальная информативность и полезность

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

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

Совет 3: Быть дружественным и понятным

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

Лучше написать что-то вроде простой фразы: «Ошибка 404: Страница не найдена» или «Ой Мы не смогли найти страницу, которую вы искали!». И обязательно добавить информативности из второго совета, который я описывал выше.

Пример креативной страницы 404 на сайте habrahabr.ru:

habrahabr

Совет 4: Минималистский дизайн работает

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

habrahabr

Ведь неизвестно, что пользователю надо и что он ищет на таком большом сайте. Поэтому минималистический дизайн будет очень кстати.

Поисковая оптимизация и 404 страница

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

Есть два способа, чтобы 404 страница не появлялась в результатах поиска:

  • Убедитесь, что ваш сайт возвращает правильный HTTP заголовок (HTTP/1.1 404 Not Found) в ответе сервера, проверить можно на сайте bertal.ru:

    ответ сервера

    При таком HTTP коде, поисковые системы будут автоматически игнорировать эти страницы.

  • Закрыть 404 страницу от индексации в robots.txt:
    [php]Disallow: /404.html[/php]

Настройка

У многих CMS, страница «ошибка 404» отдаётся автоматически. Но есть движки, у которых эта функция не работает, поэтому надо настроить её.

Для этого, надо создать файл 404.html (можно любое другое название), оформить его и добавить полезную информацию, о которой я писал выше. Загрузить файл в корень сайта и прописать в файле .htaccess вот такой код:
[php]ErrorDocument 404 /404.html[/php]
Теперь у вас должен заработать редирект, который будет отправлять пользователя на страницу ошибки 404, если он попал на несуществующую страницу.