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

Здравствуйте!

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

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

Почему появляется ошибка 404

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

Стандартная ошибка 404 not found

Причины появления ошибки могут быть разными:

1. Сторонний сайт указал неверную ссылку.
2. Пользователь допустил опечатку в адресе.
3. Страница была удалена.
4. Адрес страницы изменился.

Если на сайте больше десяти страниц, вероятность появления битых ссылок довольно высока. Для их поиска можно использовать бесплатную программу Xenu — она быстро сканирует ресурс и показывает все проблемные URL.

Чем опасна ошибка 404

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

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

Как создать страницу 404

Если вы задаётесь вопросом, как сделать страницу ошибки 404, поздравляем: она уже существует на вашем сайте (кроме landing page). Страницы ошибок предусмотрены по умолчанию в любой CMS, однако их стандартный дизайн обычно оставляет желать лучшего.

Страница 404 — это обычная страница вашего сайта. Чтобы задать ей индивидуальный дизайн, нужно зайти в корневую папку, найти файл .htaccess (или создать его) и добавить строку:

ErrorDocument 404 http://ВАШ_САЙТ/404.php

Как сделать

Эта строка указывает путь к файлу, который будет отображаться при ошибке. Можно использовать и расширение .html — принципиальной разницы нет.

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

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

Просто и красиво

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

Пример текста:

Хлоп!
Я стесняюсь...
Извините, вы попали на «битую» страницу.
Свалить отсюда

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

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

Пример текста:

Упс!
Я стесняюсь...
Мы не можем показать страницу, которую вы ищете.

Поиск по сайту

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

Пример текста:

Попробуйте ещё раз

Реклама продукта

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

Пример рекламы 1

Интерактив

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

Интерактив игра

Интерактив видео

Форма захвата

Чтобы не потерять посетителя, предложите оставить контактные данные в обмен на полезный материал. Яркий дизайн и ценное предложение повысят конверсию.

Если ваш бизнес активно использует e-mail-маркетинг, этот вариант особенно эффективен.

Коротко о главном

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

Ух, я вам покажу!

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

До новых встреч!