Как сделать страницу ошибок
Как сделать 404 страницу
Почему обязательно надо делать свою 404-ую страницу?
Главная и единственная причина – это не потерять посетителя. У каждого пользователя наверняка возникала такая ситуация, когда нажимая на ссылки на каком-нибудь сайте, браузер вместо запрашиваемой страницы показывал свою дефолтную страницу ошибки. Ошибка возникает в результате неправильно введенного запроса или запрашиваемая страница, была удалена самим веб-мастером. В таком случае все посетители ведут себя одинаково – закрывают страницу и уходят с вашего сайта.
Хватит воду лить! Давай конкретику!
Создаем два файла – 404.html и .htaccess (этот файл без имени, но с расширением htaccess), который автоматически перенаправляет посетителя на 404.html, в случае возникновения ошибки. Чтобы перенаправление работало, в этот файл надо прописать одну единственную строку:
ErrorDocument 404 http://www.site.ru/404.html
Когда оба файла будут готовы, залить их на сервер в корень домена.
Мы уже создали пустой файл 404.html и теперь будем наполнять HTML кодом саму 404 страницу, активно применяя HTML5 и CSS3. Я придумал свой способ, как сделать простую и красивую 404 страницу.
Первым делом нужно подобрать большую и качественную картинку или фотографию размером не менее 1200×750 пикселей. Существует много сайтов со свободной лицензией, откуда можно скачать очень качественные фотографии. Я бесплатно скачал с популярного сайта pixabay.com это забавное изображение.
Я хочу расположить картинку как фон на все окно браузера и в центре браузера написать – 404 страница не найдена и поставить ссылку на главную. Разберем подробнее самые важные моменты.
Эффект полупрозрачности RGBA
Выбранное изображение слишком яркое, надо его слегка затемнить, тогда текст будет более читаемый. Эффект полупрозрачного затемнения, можно получить используя RGBA, прописав в стилях блока следующую строчку кода:
background: rgba (0, 0, 0, 0.7);
Первые три буквы обозначают – красный, зеленый, синий и они равны нулю (то есть получаем черный цвет). А последняя буква «а» – представляет собой альфа-канал, отвечающий за полупрозрачность элемента. В нашем случае цифра 0.7 – говорит о 70% затемнения. Шкала от полной прозрачности до полной непрозрачности находиться между нулем и единицей (0. 1).
Позиционирование элементов
Для правильной верстки моего примера 404 страницы, без понимания как работает свойство position, будет трудно. Посмотрев на конечный результат 404 страницы, нам надо понять структуру HTML документа. Здесь мы видим три слоя, наложенных друг на друга. Нижний слой – сама картинка, средний в теге
У среднего слоя будет абсолютное позиционирование, поскольку положение элемента (блок затемнения) задается относительно краев браузера с нулевыми отступами.
Верхний текстовый слой позиционируем относительно элемента среднего слоя.
Код страницы 404
Имея этот готовый код и меняя только само изображение, можно наделать себе массу разных «ошибочных» страниц.
WordPress 404 страница — как настроить
Рассмотрим, как настроить шаблон ошибки 404 в WordPress, чтобы создать полезную страницу, которая поможет пользователям сориентироваться на вашем сайте и улучшить поведенческие факторы.
Что такое ошибка 404 и почему важно правильно настроить страницу?
Ошибка 404 возникает, когда посетитель пытается получить доступ к странице, которая не существует. Многие склонны игнорировать эту страницу при использовании шаблонов WordPress и не задумываются о ее существовании. Тем не менее, если вы потратите время на создание удобной страницы 404, это поможет задержать пользователя на вашем сайте.
Интернет-адрес, ведущий на страницу с ошибкой 404, может оказаться просто неправильно набранным URL либо возникнуть со временем, если вы удалили проиндексированную страницу и забыли об этом. При выдаче кода 404 WordPress настроен на автоматический поиск файла 404.php. Базовый шаблон с этой ошибкой включен в некоторые темы WordPress. Если же этого файла нет, то будет показано системное сообщение, которое не несет полезной для пользователя информации.
Как создать страницу 404 ошибки, если ее нет в шаблоне — настройка
Не все темы WordPress имеют собственный файл шаблона ошибки 404. Если разработчик темы предусмотрел это, такой файл будет называться 404.php. WordPress автоматически использует эту страницу, когда возникает ошибка 404. Если в вашей теме нет этого файла, его можно создать самостоятельно.
Что разместить на wordpress странице 404
Когда пользователь обнаруживает вместо искомой страницы сообщение об ошибке 404, разочарование может заставить его покинуть ваш сайт преждевременно. Задача веб-мастера помочь найти посетителю информацию, которую он искал, и тем самым снизить процент отказа и улучшить поведенческие факторы на сайте.
Рекомендуется указать пользователю правильное направление действий, которое заставит его задержаться на сайте. Это можно сделать несколькими способами:
- предоставить информацию о других разделах вашего интернет-ресурса, которые можно посмотреть; дать посетителю возможность связаться с вами по указанным контактным данным; добавить ссылки на популярные сообщения, последние комментарии, архивы; разместить строку поиска, чтобы посетитель сам нашел нужную информацию на сайте.
Чтобы сделать страницу уникальной, вы можете снабдить ее фоновым изображением в стиле оформления сайта. Допустимо также использовать html-теги и css-стили, чтобы придать шаблону индивидуальность.
Как создать в вордпресс 404 страницу при помощи плагина
Создать собственную страницу 404, как и любую другую страницу в WordPress можно при помощи плагина 404page (https://wordpress.org/plugins/404page/). Важной особенностью этого плагина является то, что он не создает перенаправление, а формирует правильный ответ сервера с кодом 404. Он сообщает поисковым системам, что страница не существует и должна быть удалена из индексирования, тогда как перенаправление приведет к HTTP-коду 301 или 302 и URL-адрес останется в индексе поиска.
После активирования плагина в меню «Внешний вид» (1) появился раздел «404 Error Page» (2), в котором можно настроить отображение страницы ошибки.
Выберите созданную страницу 404 из списка страниц сайта (3). Убедитесь, что отмечен флажок (4), чтобы сервер отдавал код 404 при доступе к этой странице. Если вы используете кэширование, плагин выдаст предупреждение – страница из кэша будет отдавать код 200, поэтому ее нужно исключить из кэширования.
При возникновении проблем или конфликта с другими плагинами 404page может быть запущен в режиме совместимости. Нажмите кнопку «Сохранить изменения» (5).
iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.
Ошибка 404: как несуществующую страницу сделать инструментом маркетинга
Есть, есть коммерческий потенциал у notfound-страницы!
Когда попадаешь на несуществующую страницу интернет-магазина, чаще всего тебя встречает грустный белый экран и унылое пояснение об ошибке 404. Разочарование, раздражение и обманутые ожидания. И не только у вас, но и у владельца магазина, который только что лишился потенциального дохода. А ведь он мог сделать мир лучше, заранее подумав о том, как превратить страницу 404 в этап воронки продаж. О том, как несуществующую страницу сделать инструментом маркетинга, в своём корпоративном блоге рассказала scrum-студия Sibirix.
Когда пользователь попадает на страницу 404, то не находит нужную информацию и не получает альтернативы ей. Если пользователю не важно, купит ли он товар или услугу в вашей компании, тогда, скорей всего, одним из его следующих действий будет:
возврат на предыдущую страницу;
закрытие страницы 404;
попытка поискать товар/информацию в общем поиске и уход на сайт к конкурентам.
Ни один из сценариев вам не выгоден. А ведь страница с кодом ошибки «404» умеет и будет продавать, если наполнить её правильным контентом. Ловкие вебмастера и маркетологи используют потенциал несуществующей страницы на полную катушку, размещая там полезную для пользователя информацию.
Итак, давайте посмотрим, что вы можете сказать через страницу 404:
1. «Ой, вы зашли куда-то не туда, но можете скачать наше мобильное приложение или воспользоваться другим сервисом»
2. «Как грустно, здесь ничего нет. Подпишитесь на рассылку или на наши соцсети и вы больше ничего не пропустите»
3. «Как? Вы ничего не нашли? Тогда посмотрите, что у нас ищут и покупают чаще всего. Вдруг и вам понравится»
Страница 404 компании мебельной фурнитуры «КДМ» предлагает несколько разделов, куда можно заглянуть. Если пользователь не хочет тратить кучу времени на изучение всего сайта, ему легче посмотреть, что выбирают другие.
4. «Упс, что-то пошло не так и не туда. Может быть вам будут полезны эти разделы?»
5. «Если вы ничего не нашли, не хмурьтесь, ведь у нас всегда есть чем вас порадовать. Например, сейчас действуют акции и бонусы»
Страница 404 сайта ювелирной компании Mr. Diamond между делом рассказывает о скидке за регистрацию. Пользователь ещё ничего не купил, он вообще ошибся адресом, а возможность сэкономить у него уже в кармане.
Страница 404 мебельной компании «Чу» предлагает найти на сайте что-то конкретное или, если пользователь не знает, чего хочет, зайти в каталог.
Сайт серьёзной интернет-конференции «СПИК» не прочь пошутить. Шутки шутками, а на конференцию нужно как-то попасть: спикером, гостем или партнёром. На главной быстрее найти нужный раздел для такой разной аудитории.
Оформление несуществующей страницы положительно влияет и на другие вещи:
Вы не потеряете потенциального клиента. Ошибки будут всегда: пользователи случайно вводят лишние символы или, напротив, удаляют их. Не находят то, что нужно, и уходят.
404 становится «заглушкой» для битых ссылок. Если у сайта действительно много страниц, сложно уследить, чтобы все адреса оставались валидными: поменяли адрес, удалили раздел, а урлы по-прежнему есть в поиске. Так и плодятся 404.
404 может вернуть пользователя на сайт. Рассмешите и расположите пользователя к себе забавной картинкой, гиф-анимацией или игрой. Это утеплит его.
Несуществующая страница сайта может стать эффективным инструментом digital-маркетинга. Подберите своему сайту и типу бизнеса подходящий контент и не теряйте ни одного клиента. Для вдохновения посмотрите больше примеров 404 от «Сибирикс».
P. S. Пользователи должны попадать на 404 случайно. Доверяй, но проверяй. Сервисы Google и Яндекс помогут найти битые ссылки. Это бесплатно.
Как использовать страницы 404 для продаж
В большинстве случаев, во время разработки сайта о страничке 404 даже не вспоминают. Вместе с тем, если вы заглянете в логи своего сервера, вы увидите, что эту страничку посещают: кто-то опечатался, кто-то перешел по битой ссылке, где-то программист не доработал… И чем больше и старше ваш сайт, тем больше посетителей будут видеть надоедливый 404.
Если вы ничего не делали со своей 404 страничкой, попавший на нее человек для вас – потерянный потенциальный клиент. А ведь можно сделать так, чтобы страничка 404 тоже продавала. Давайте разбираться как.
Загадка: Какая страница на сайте самая незаметная, малоизвестная, НО при этом знакома всем пользователям?
Ответ: Cтраница 404 “Не найдено”.
“Страница не существует” или Что такое страница 404
Прежде всего, немного теории. Ошибка “404 Not found” (Страница не найдена)— это один из стандартных кодов ответа сервера. Он сообщает, что пользователь соединился с ним нормально, но искомый объект не найден.
Основные причины возникновения ошибки “404 Not found”:
— Неправильно введен адрес в адресной строке браузера.
— Пользователь перешел по “битой” ссылке, которая ведет на несуществующую страницу.
— Ссылка правильная, но страница была удалена или перенесена.
Как правильно сделать страницу 404
Если создатель не побеспокоился о странице 404 на своем сайте, посетители видят примерно такое:
Стандартная страница 404 Internet Explorer.
Этого можно избежать, если придерживаться основных правил оформления 404 страницы:
1. “Нет” стандартным 404 страницам
Соответственно, не забываем сделать свою 404.
2. Сделайте страницу в стиле сайта
Если страница 404 ничем не напоминает общий дизайн, посетитель может решить, что это совсем другой ресурс. Оно вам надо?
Сделайте страницу 404 похожей на остальные страницы, сохраните основную структуру сайта, ваши баннер и логотип. Это сохранит у пользователя ощущение “присутствия”.
Yahoo! придерживается единого лаконичного стиля. Даже попав на 404-ю страницу, посетителям ясно, где они находятся
3. Подскажите посетителю направление
Функцию “Поиск по сайту” оценят посетители, которые точно знают, что ищут.
Посетитель не теряется, попав на эту несуществующую страницу, ведь у него есть большой выбор свежего контента
4. Используйте творчество с умом
Креатив приветствуется, однако не переусердствуйте. Если хотите продать товар, не переключайте посетителя на размышления о другом.
Как превратить страницу 404 в инструмент продаж
Добавьте форму обратной связи
Вам напишут, чтобы сообщить об ошибке. А там слово за слово: «Что вы искали, чего не нашли, чем помочь?».
Предоставьте вашему пользователю возможность заполнить форму обратной связи прямо на странице ошибки 404. Это поможет исправить ошибки, о которых вы не в курсе.
Добавьте блок социальных сетей
Таким элементарным способом вы повысите вовлечённость своей аудитории. Когда вашу страничку залайкало достаточное количество людей, можно делать акции и продавать ваш продукт.
Почему бы не соединить несколько методов? Используйте и форму обратной связи, и ссылки на социальные сети.
Покажите уцененные товары
Если у Вас интернет-магазин, вы можете продавать прямо на странице 404!
Для этого разместите на странице 404 не абстрактную картинку, а список уцененных товаров. Это “зацепит” многих участников, заставит активнее взаимодействовать с сайтом.
Думаете вы в интернет-магазине? Нет, это 404-я страничка.
Также хорошо работает подборка самых популярных товаров.
Дайте скидку или устройте лотерею
Дайте скачать полезный материал бесплатно
Cubeecraft предлагает своим посетителям (любителям создавать и строить объекты) скачать изображение героя игры, которое легко распечатать, вырезать, склеить и поставить себе на стол. Хитрость в том, что на макете персонажа указан сайт и электронная почта компании.
Mint.com предлагает посетителям сайта скачать бесплатные приложения.
Направьте на интересные статьи
Пишете интересные статьи? Почему бы не разместить подборку самых популярных их них на страничке 404? Заинтересуйте пользователя сайтом и компанией в целом. Пусть он поймет, насколько вы опытны в своей отрасли и как много новой и интересной информации предлагаете.
Разработчики данного сайта использовали всевозможные инструменты: соцсети, поиск, блог, слайдеры, динамическую рекламу… Но будьте осторожны с подобным рвением! Ведь такая загруженность затрудняет восприятие информации пользователями.
Предложите бесплатную консультацию или совет
Можно “подсластить пилюлю” для потерявшегося пользователя. Для этого предложите совет или бесплатную консультацию.
Подобные вещи мягко затянут потенциальных клиентов в воронку продаж, а дальше его уже можно знакомить с менеджером отдела продаж.
FreshIT.net предлагает потерявшемуся посетителю почитать блог компании или заказать бесплатный аудит сайта
Расскажите о других ваших проектах
У вашей компании есть дочерние сайты? Познакомьте вашего посетителя с ними на странице 404.
Примеры оригинальных страничек 404
И напоследок еще немного примеров страничек 404, которые нам показались достойными внимания.
Mint.com – помогает пользователю собрать все финансовые документы в одном месте, тем самым помогая контролировать, например, семейный бюджет. Чтобы поднять настроение взволнованных посетителей, Mint сделал одну из самых известных «страниц ошибки». Получилось неожиданно удачно: у персонажа Джастина завелась целая армия преданных поклонников.
Еще одна “страница ошибки” от Mint.com. “Мы смотрели везде, но не смогли найти ту страницу. Но мы нашли это под диванным покрывалом.”
Canva.com предлагает вернуться на главную страницу или попробовать собрать пазл. Собрав пазл, посетитель сайта получает изображение шаблона и может перейти к нему для создания своего дизайна.
Pinterest.com советует просмотреть другие материалы сайта.
Грустный мальчик на Megogo предлагает посмотреть рекомендуемые фильмы и мультфильмы.
А можно просто «раздавать деньги» на «секретной страничке» 🙂
Более подробное руководство к действию, чем на сайте Pervushin.com трудно и представить.
Blizzard.com сообщает посетителю: “Поздравляем. Ты сломал сайт.”
Интернет-магазин Ролспорт предлагает“подвести” пользователей на нужную страницу
А еще Страницы 404 могут выполнять и совсем необычную общественно-полезную роль. Например, сайт NotFound.org устанавливает на ваши странички 404 информацию о потерянных детях.
Качественные сайты от некачественных отличаются вниманием к мелочам. Даже такая «мелочь» как страничка 404 способна «вытянуть» почти потерянных посетителей и превратить их в клиентов. Смотрите наши примеры, включайте фантазию и создавайте свои оригинальные и продающие странички 404.