Основы

«Ошибка 404» – как оформить эту страницу на своем сайте

Код ошибки «404» и надпись «page not found», сервер возвращает, в случае если пользователь запрашивает адрес страницы, которой на сайте не существует. Причин этому может быть много – админ удалил ее, такого URL вообще никогда не существовало, и тому подобное.

В любом случае, в ответ он получит примерно что-то такого вида:

standart server responcse

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

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

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

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

creative 404 page 1

creative 405 page 2

creative 404 page 3

creative page 4

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

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

Можно назвать несколько основных элементов, которые она должна включать:

  • текст
  • изображение
  • призыв к действию (CTA-элемент).

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

mokap1

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

mokap2

Ну и финальный штрих – объясняем, что же именно случилось, и как жить дальше. А также, добавляем CTA-элемент, в нашем случае – кнопка перехода на главную страницу, в каталог, и форма поиска:

mokap3

Маркетинговый ход – извиняемся, и дарим промокод на скидку при покупке. Вполне вероятно, что это позволит не только вернуть посетителя, но еще и заполучить клиента:

mokap4

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

После того как верстальщик сверстает ее и выдаст вам готовую HTML-страницу, нужно загрузить ее в папку с шаблоном своего сайта, а для того, чтобы она показывалась посетителям в случае необходимости, прописать новый шаблон в файле .htacess. Для этого, откройте его в HTML-редакторе, например, Notepad++ и пропишите там следующую строчку текста:

mokap5

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

Страница «404» на WordPress

Для любимого мной и миллионами других пользователей движка, существует немало инструментов, позволяющих максимально просто и быстро решить задачи, для реализации которых для других CMS пришлось бы потратить немало времени и работать с кодом вручную. Так и в данном случае – сделать пользовательскую страницу 404 для сайта на WordPress, можно при помощи специального плагина – «Custom 404 Pro».

"Custom 404 Pro WordPress plugin

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

Таким образом, потратив немного времени на работу – ведь все это нужно сделать один раз – вы получите возможность избежать потери трафика с сайта, а в случае с коммерческим проектом, еще и прибыли.