Как сделать страницу ошибки 404

Как сделать 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

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

Что такое 404 ошибка. Как правильно сделать и настроить эту страницу

Причины возникновения ошибки 404

Чаще всего причиной такой ошибки становятся:

Появление большого количества ошибок 404 может быть вызвано вирусной атакой (например, размещением дорвеев на сайте).

Лучший способ сделать так, чтобы посетители не попадали на страницу 404 — регулярно проверять наличие на сайте «битых» (то есть неработающих) ссылок. Это касается как внутренней перелинковки, так и внешних ссылок на другие ресурсы.

Почему необходимо настроить код ответа 404?

Если вместо кода 404 будет даваться ответ 200 (OK), в индекс попадет множество пустых страниц. Они создадут дубли, которые будут сканироваться поисковым роботом вместо реально существующих страниц с качественным контентом.

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

Для чего нужна страница под ошибку 404?

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

Как должна быть оформлена страница с ошибкой 404?

Стандартная страница 404 обычно неинформативна и никак не связана с конкретным сайтом.

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

К оформлению страницы 404 есть целый ряд требований со стороны поисковых систем. Яндекс и Google неоднократно давали рекомендации по этому вопросу.

На основе данных рекомендаций можно выделить следующие светы:

Правильно оформленная страница ошибки 404 выглядит следующим образом:

Как создать страницу для ошибки 404?

Как уже говорилось, с технической точки зрения, это обычная страница сайта, и создается она средствами HTML. Также ее можно создать с помощью текстового редактора во всех популярных CMS:

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

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

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

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

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

Закажите статью у лучших копирайтеров Биржи

Зачем нужны страницы 404

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

Рекомендации по оформлению страницы 404

Специалисты составили список рекомендаций для разработки идеальной страницы ошибки.

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

2. Попросите проверить корректность введенной ссылки.

3. Предоставьте ссылки на вероятные совпадения, товары, самые популярные разделы сайта. Можно даже превратить ошибку 404 в landing page, добавив акции, спецпредложения, скидки и кнопки действий. Посетитель должен всегда находиться максимум в одном клике для перехода в меню.

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

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

5. Добавьте строку поиска. Ведь если пользователь столкнулся с ошибкой «404», значит, ранее он что-то искал — необходимо предоставить ему возможность это найти.

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

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

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

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

При оптимизации сайта постарайтесь исключить вероятность формирования неправильных URL-адресов, которые приводят к ошибкам 404. Для их выявления на сайте есть инструменты для веб-мастеров от Google и Яндекса. Такие сервисы помогут понять, почему и как сформировались ошибки.

Настройте нужный код ответа сервера 404 (Not Found), чтобы не допустить появления таких страниц в результатах выдачи поиска. В противном случае увеличится количество отказов с сайта, а поисковик расценит проиндексированные страницы 404 как дубли.

Варианты оформления ошибки 404

При оформлении дизайна страницы ошибки постарайтесь выдержать единый стиль всего сайта.

Есть 4 варианта оформления.

1. Развлекательная страница

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

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

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

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

4. Основные разделы

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

Вне зависимости от варианта оформления креатив не помешает. Юмор и оригинальность сгладят неприятное впечатление от ошибки.

Примеры страниц ошибок

Pixar

Мультипликационная студия Pixar оформила ошибку 404 с персонажем из известного мультфильма «Головоломка».

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

Kualo

Kualo — веб-хостинг, который предлагает свои услуги вот уже 15 лет. Особое внимание разработчики уделили оформлению страницы 404, которая представлена в виде классической аркадной игры Space Invaders. Она считается лучшей аркадой и способна надолго захватить внимание пользователя.

«Космические захватчики уничтожили эту страницу! Отомстите им!»/ Пробел — выстрелить, стрелки вправо/влево — переместиться.

Сразу же под подписью есть ссылка на возврат на предыдущий раздел.

Hot Dot Production

Веб-разработчик оформил ошибку 404 в интерактивном варианте — из множества маленьких ярко-красных точек. Они рассыпаются в стороны в зависимости от направления мышки (перед этим необходимо кликнуть на них).

Emirates

Компания Emirates — одна из самых крупных в мире авиакомпаний из ОАЭ, поэтому она не может позволить себе на официальном сайте много креатива. Страница 404 полностью соответствует стилю сайта. Разработчики вычислили наиболее посещаемые клиентами разделы после ухода со страницы 404.

В результате появились 4 кнопки, позволяющие перейти в раздел поиска рейсов, брони, входа в аккаунт или на главную. А ниже располагается кнопка поиска.

В 2022 году на сайте организации по распространению новостей радиостанций США при попытке открыть несуществующую ссылку посетителям предлагается ознакомиться со статьями о других пропавших.

Заключение

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

Размещайте что-то полезное, веселое, понятное. Любой вариант лучше по сравнению со стандартной пустой страницей и надписью «Страницы не существует» на белом фоне — иначе пользователь не поймет, что делать дальше, и уйдет с сайта. Также не следует использовать простое шаблонное оформление и автоматическое перенаправление на главную или другой раздел сайта.

Регистрируйтесь на eTXT, заказывайте продающие тексты для своего ресурса и зарабатывайте с помощью качественного контента ещё больше!

Страница ошибки 404: как оформить, чтобы избежать оттока пользователей

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

Подпишись на Telegram

Ошибка 404: что это значит?

Иногда при переходе по ссылке вместо страницы сайта на экране появляется надпись: «Страница не найдена. 404 not found. Ошибка 404». Это значит, что такой веб-страницы нет или у неё поменялся адрес.

Пример страницы 404 на сайте Lenta.ru Подключить Roistat бесплатно

Почему возникает ошибка 404:

Иногда владельцы сайтов не догадываются о таких ошибках. Особенно сложно следить за корректностью ссылок на крупных порталах с тысячами страниц. Поэтому пользователи периодически сталкиваются с надписью «404 Page Not Found». Иногда страница 404 появляется из-за ошибки самого пользователя, если он вводит или корректирует URL-адрес вручную.

Почему нужна отдельная страница для 404 ошибки

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

Грамотно настроенная страница 404 поможет:

Как создать страницу с уведомлением об ошибке 404

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

Чтобы добавить страницу на сайт:

Некоторые CMS автоматизируют процесс создания страницы об ошибке: например, в WordPress это можно сделать с помощью плагина 404page. Плагин может кастомизировать страницу на разных темах. Для его установки нужна версия WordPress от 4.0.

Как оптимизировать страницу 404 ошибки

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

Советы по созданию страницы 404:

Примеры отличных 404 страниц для сайта

Пусть подборка классных примеров вдохновит вас на создание собственного креативного шаблона страницы 404.

У McDonalds на странице 404 есть навигация по сайту и даже форма для подписки на рассылку:

Пример страницы 404 на сайте McDonalds

На странице 404 блога Roistat пользователю предлагается вернуться на главную страницу блога, перейти в нужный раздел или воспользоваться кнопкой обратного звонка:

Пример страницы 404 в блоге Roistat

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

Пример страницы 404 на сайте Roistat

На сайте Спортмастера использована забавная тематическая картинка, есть ссылки на главную страницу, каталог товаров и поисковая строка:

Пример страницы 404 на сайте Спортмастер

Ещё одна страница известного интернет-магазина Lamoda. Кроме навигации и строки поиска, пользователям предлагают популярные товары:

Пример страницы 404 на сайте Lamoda

Тинькофф предлагает простую страницу, на которой сообщается об ошибке и даются ссылки на основные услуги банка:

Пример страницы 404 на сайте банка Тинькофф

Страница об ошибке у ресторана KFC очень лаконичная страница. Пользователю предлагают всего 2 кнопки с простым CTA — «Заказать еду» и «Найти ресторан»:

Пример страницы 404 на сайте KFC

Как избегать ошибок на сайте

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

Подключить Roistat бесплатно

Упростить проверку сайта поможет услуга SEO-аудита от Roistat. Аналитики проверят страницы сайта, найдут ошибки и создадут список рекомендаций по их исправлению. На весь оплаченный период оптимизации сайта за вами будет закреплён веб-аналитик, который сможет ответить на все вопросы по работе с сайтом.

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

Сквозная аналитика
и маркетинговая платформа

Делаем собственную страницу ошибки 404

Здравствуйте, уважаемый посетитель!

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

Рекомендации по созданию страницы с ошибкой 404 Not found

Существуют различные варианты пользовательских страниц, предназначенных для отображения ошибки 404 (Not found). На то они и пользовательские, чтобы отражать всю креативность их авторов. О множестве вариантов можно судить хотя бы из примеров этой тематике из картинок Яндекса.

Но в любом случае, для того, чтобы правильно создать такую страницу, следует при ее оформлении принимать во внимание определенные правила и рекомендации, такие как:

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

Создаем каркас страницы и оформляем основное ее содержание

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

Поэтому в первую очередь создадим в корне сайта файл с именем, соответствующему данному случаю, например «page_404.php». Как создать новый файл ранее показывалось здесь. После чего можно перейти и к написанию кода страницы, определив ее структуру и содержание.

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

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

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

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

Рис.1 Файл «page_404.php» с кодом страницы 404

src = «/images/page_404/page_404.png» alt = «Страница 404» >

Как сделать редирект 404 ошибки

Что такое ошибка 404

Ошибка 404 (File not found) возникает, когда сервер не может найти запрашиваемую пользователем страницу. От ее появления не застрахован ни один сайт. Достаточно ввести в адресной строке после домена рандомный набор символов. Например:

Сервер не сможет найти страницу, и отобразится ошибка:

Ошибка 404 на сайте reg.ru

Также с ошибкой 404 можно столкнуться в следующих случаях:

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

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

Иногда при загрузке несуществующей страницы браузер получает ответ 200 вместо 404. Такой случай называют Ложной ошибкой (Soft 404). Он означает, что со страницей всё в порядке, хотя пользователь видит ошибку. Также проблема заключается в том, что Яндекс и Google показывают эту страницу в результатах поиска. Чтобы проверить код ошибки, воспользуйтесь проверкой URL от Google.

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

Возможные последствия для сайта

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

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

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

Рекомендации по созданию страницы 404

Если сайт создавался в CMS WordPress, Joomla, Drupal и т. п., в нем, скорее всего, предусмотрена страница ошибки 404. Но она может быть неинформативной или отличаться от дизайна остальных страниц вашего веб-ресурса.

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

Важно, чтобы страница была информативной и полезной:

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

Примеры страниц с ошибкой 404

СберМаркет предлагает познать мудрость котов и цены на сайте

404 ошибка в разделе «Помощь» на сайте REG.RU

Создайте страницу одним из следующих способов:

Если вы знаете HTML и CSS, напишите код страницы самостоятельно и загрузите файл с названием 404.html в корневую папку сайта.

Если навыков верстки нет, в интернете можно найти бесплатные шаблоны со страницами ошибки. Скачайте файл и добавьте его в корневую папку.

1) Откройте админку вашего сайта в WordPress.

2) Перейдите в раздел «Плагины» и нажмите Добавить новый.

3) В строке поиска введите название 404page — your smart custom 404 error page.

4) Нажмите Установить → Активировать:

5) Перейдите в раздел Внешний вид → 404 Error Page.

6) Выберите в списке Sample Page, чтобы сменить стандартную страницу ошибки, и нажмите Edit Page:

7) Создайте страницу в открывшемся визуальном редакторе и нажмите Обновить:

Готово! После обновления страница будет использоваться автоматически.

Где вместо site.ru — домен вашего сайта.

Готово! Теперь при возникновении 404 ошибки, в браузере пользователей будет открываться созданная вами кастомная страница.

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

Редирект с 404 на главную (не рекомендуется)

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

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

Рекомендуется использовать специальные страницы для ошибки 404.

Проверка редиректа 404

Проверить, корректно ли все настроено можно в Яндекс.Вебмастер и Google Search Console.

Яндекс.Вебмастер

Если вы используете его впервые, укажите домен вашего сайта и пройдите проверку валидации, добавив файл в корневую папку сайта. Это займет несколько минут.

В коде статуса HTTP должно отображаться 404 Not Found:

Google Search Console

Если вы используете этот инструмент впервые, укажите свой домен и пройдите валидацию, добавив TXT-запись/загрузив файл в корневую папку сайта или с помощью других способов.

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

404 страница: идеальное оформление + 10 примеров

Все, кто хоть раз пользовался интернетом, попадали на страницу “ошибка 404”. И наверняка, видя её у себя на экране, просто брали и уходили с этого сайта.

Особо настойчивые пытались разобраться в ссылке и понять, что в ней не так. Но из этого скорее всего тоже ничего хорошего не выходило.

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

Почему она появляется

Данная ошибка бывает у всех, даже если Вы мне скажете, что у Вас её нет. Она появляется, когда клиент пытается зайти на несуществующую страницу. Без дизайна она выглядит вот так:

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

Теперь давайте определимся, почему же посетитель сайта может видеть такую ошибку. А все происходит потому что:

Ещё раз, если Ваш сайт состоит из 10+ страниц, то скорее всего у Вас уже есть эта ошибка, и Вы о ней просто не знаете.

Кстати, для поиска битых ссылок, как минимум, в рамках сайта, можете воспользоваться бесплатной программой Xenu. Делает всё быстро и легко.

Чем грозит

Как Вы поняли, от этого не уйти. Такие коллапсы будут, если не по Вашей вине, то по вине клиентов.

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

А если Ваша страница не будет следовать дальнейшим рекомендациям, то посетители будут уходить с сайта, расстраиваться, и их уровень доверия к Вам будет падать.

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

Как Сделать такую страницу

Если Вы задались вопросом, как сделать страницу ошибки 404, то хочу Вас поздравить, она у Вас уже есть (кроме landing page).

Потому что страницы ошибок для сайтов по умолчанию предусмотрены при работе в любой CMS. Конечно, дизайн её на данный момент оставляет желать лучшего.

404 для сайта – это такая же страница, как самая обычная другая страница Вашего сайта.

И просто в любое место с новой строки вписать – ErrorDocument 404 http://ВАШ_САЙТ/404.php

Данная ссылка будет являться указанием пути к файлу, который будет показывать Ваш сайт при возникновении ошибки.

как оформить

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

В остальном он может преследовать разные задачи. Для этого давайте рассмотрим разные варианты и их преимущества.

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

Можно сделать ставку на дизайн в виде креативного изображения с оригинальной надписью.

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

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

Ох, капитан, мы потерялись.
(404. Это не то место, где ты должен быть)
Идти домой Хлоп!
Я стесняюсь…
Извините, Вы попали на “битую” страницу
Свалить отсюда

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

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

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

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

– Попробуй ещё раз/поиск

Возможно клиент искал нужный контент и не нашел его, но у Вас то он есть. Для этого ему нужно показать поле для поиска и предложить попробовать найти его еще раз.

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

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

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

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

Причём показать Ваш продукт можно даже когда он искал что-то другое. В идеале, не просто показать, но и сделать специальное предложение на него.

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

– Интерактив

Чтобы клиент чуть больше провёл на Вашем сайте и повзаимодействовал с ним, можно на данной странице создать “интерактив”, с которым он может что-то поделать, потаскать, покликать, посмотреть или даже поиграть.

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

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

Раз к Вам попали, значит это судьба. Только вот она жёстко бьёт, и выражается это в том, что больше половины людей уходит с ошибки в закат.

Поэтому, чтобы не терять посетителя, и чтобы он к Вам ещё раз вернулся, нужно взять его контактные данные и добавить в свою e-mail рассылку.

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

Пример формы захвата

Это наш вариант страницы, на который Вы можете легко попасть введя in-scale.ru/любыеслова. Самое интересное, что такого рода ошибок почти нет на просторах интернета.

Поэтому рекомендую сделать акцент именно на этом, если Ваш бизнес подразумевает e-mail маркетинг.

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

Страница ошибки всегда вызывает негатив, поэтому его нужно развернуть в нужную нам сторону.

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

Тут и встаёт вопрос, что нужно Вашему посетителю в тот момент, когда он попал на эту страницу и как его плавно перевести на то, что Вы хотите от него.

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

Страница 404: самые креативные, смешные и лаконичные варианты

4 апреля веб-мастера отмечают день 404 страницы. Почему сегодня? Потому что 4 апреля – это 4.04!

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

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

«Человечная» надпись и такая же картина делают так, что не хочется убегать обратно в поиск

Быстро и эффективно

Aviasales

Aviasales, по традиции, чуть поиграли словами – страницы нет, билеты есть

Blizzard

404-я у Blizzard анимированная: посмотрите, как симпатично выглядит

Coca-Cola

Coca-Cola тоже сыграла словами: «Здесь больше нет Coca-Cola» уместно смотрится рядом с пустыми бутылочками

Convert Monster

Content Monster меняет призыв и картинку каждый раз при обновлении страницы

Amazon

А у Amazon кликабельная собака – она отправляет нас на страницу «Собаки Amazon»

«Тупичок Гоблина»

Дизайн на сайте Дмитрия Юрьевича не обновляется годами (и смотрится по-своему стильно). Графическое оформление 404-й в стиле игр конца 90-х смотрится тут органично

«Лабиринт»

Еще одна ожидаемая игра слов: страница «Лабиринта» потерялась в лабиринте

OZON вернулся к минимализму

Что интересно – старая страница была немного креативнее (и как будто заимствовала идею eBay):

А это старая 404 страница на сайте OZON

Сотмаркет

Тот же тренд на минимализм – у «Сотмаркета»: только навигация, только хардкор

А вот как выглядела эта страница раньше:

Интереснее по задумке, но уже не так трендово (да, 404 тоже стоит обновлять в духе времени)

Студия Артемия Лебедева

Кстати, тайтл у страницы иронично спрашивает: «Потерялись?»

Банк «Тинькофф»

«Тинькофф» перешел от минимализма к ультраминимализму – смотрите следующее фото: это старая страница 404

Когда страницу освежали в плане дизайна, отсюда в числе прочих изменений ушел смайлик

«Яндекс»

Коротко и понятно – и тоже с навигацией

Университет «Синергия»

У «Синергии» как будто отсылка к фильму «Гравитация»

Студия Дениса Каплунова

Стильно и минималистично

Выражение лица человечка демонстрирует панику. А вот надпись говорит, что все прекрасно

«Кинопоиск»

На «Кинопоиске» тоже есть элемент анимации

PlayboyRussia

404 страница PlayboyRussia

«Единый визовый центр»

Нетривиальный ход – для дочитавших подарок

Pikabu

Заморочились и отрисовали – узнаваемо и на века

Pixar

Более удачный образ, чем Печаль из мультика «Головоломка» для страницы 404 трудно представить

Какой не должна быть страница 404

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

Ошибка 404: ответы на распространенные вопросы и советы по оформлению страницы

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

Что такое ошибка 404 и почему она возникает

Ошибка 404 или Not Found появляется, если страница, на которую вы переходите, не найдена. Чтобы лучше понять, как возникает ошибка Not Found, рассмотрим этот процесс детально:

Если соединиться с сервером не получилось, вы увидите сообщение «не удается получить доступ к сайту».

Если соединение с сервером установлено и страница, которую вы запросили, существует, браузер получит ответ с кодом 200 OK. Этот код означает, что сервер успешно обработал запрос и запрашиваемая страница будет загружена. А вот если страница, которую вы искали, не найдена, появится экран 404.

Пример страницы 404

Причины ошибки 404 Not Found:

Что такое ложная ошибка 404 и почему она возникает

Ложная ошибка появляется, когда браузер получает успешный ответ 200 OK, но все равно выводится сообщение 404 Not Found. Также можно увидеть страницу, на которой мало контента, или пустой экран.

Причины ложной ошибки 404:

Чем вредны ошибки 404 для SEO

Падает рейтинг сайта. Негативно влияют на SEO не столько страницы 404, сколько внешние URL-адреса, которые ссылаются на эти страницы. Большое количество таких адресов указывает на плохое качество сайта. Это может ухудшить индексацию ресурса и привести к потере его позиций в поисковой выдаче. Также возникает негатив со стороны пользователей — растут показатели отказов и снижается время взаимодействия с сайтом.

Тратится краулинговый бюджет. У каждой поисковой системы есть бот, который анализирует страницы сайтов. Максимальное количество URL-адресов, которые он может обойти за один визит, называется краулинговым бюджетом. Ошибки 404 впустую тратят этот бюджет, поскольку вместо действительно важных страниц бот будет сканировать некорректные URL-адреса.

Как найти внутренние и внешние ссылки на страницы 404

Битые ссылки бывают внутренние и внешние. Внутренние расположены на самом сайте и ведут на внутренние страницы своего же сайта. Внешние битые ссылки расположены на сторонних ресурсах и отправляют на страницы своего сайта.

Обнаружить оба вида ссылок помогут бесплатные сервисы Яндекс.Вебмастер, Google Search Console, Xenu’s Link Sleuth, условно-бесплатный Screaming Frog SEO Spider Tool и платный Netpeak Spider.

Яндекс.Вебмастер

Как найти внутренние ссылки: добавьте URL сайта → зайдите в панель «Ссылки» → «Внутренние ссылки».

Страница 404. Не ошибка, а помощник

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

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

Сайт русский, а страница 404 на английском

Что такое ошибка 404

Это страница, которой по запрашиваемому адресу нет. Попасть на такую страницу можно либо нажав на ссылку, которая ведет на удаленный материал, либо сделав ошибку в URL.

Почти всегда страница с 404 ошибкой — это полупустой экран, непонятная надпись на английском языке «Error 404. Page cannot be found», корявая вёрстка текста и никакой информации, что делать дальше.

Всё потому, что её никто не продумал, а движок сайта использовал стандартную версию.

Варианта развития ситуации два:

Функции страницы 404 ошибка

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

Разъяснительная функция

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

Объяснение и подсказка для посетителя

Посетителю предлагается перейти на основной раздел сайта

Не только объяснение и подсказка, но и телефон для связи

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

Продающая функция

Усложняем задание. Теперь пусть страница ещё и продаёт. Разместите на ней ссылки на продвигаемые категории или товары из вашего каталога, блок горячих предложений или просто свежих статей. Так ошибка превратится в витрину сайта. Предложите человеку задать вам вопрос или заказать обратный звонок. Вдруг он долго искал, а ошибка прервала этот процесс и теперь расстроен, но всё ещё нуждается в вашем товаре.

Сеть магазинов Lego предлагает популярные серии товаров

«Лабиринт» на 404 странице продает бестселлеры

«Аквалого» даёт возможность посмотреть хиты продаж

Развлекательная функция

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

Важные моменты

Title, тем не менее, лучше прописать без креатива: 404 — страница не найдена.

Любая удаленная страница на сайте или несуществующий URL должны отдавать код ответа сервера 404 (Not found) и использовать шаблон, заданный для 404 страницы.

Узнать, какой код ответа сервера отдает любая страница можно с помощью онлайн-сервиса bertal.ru или в Яндекс Вебмастере в разделе Инструменты — Проверка ответа сервера.

Исправьте и настройте отслеживание 404 ошибкок

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

Отлавливать URL, отдающие 404 ошибку, можно с помощью отчетов в Яндекс Метрике, настроив цель на сбор 404 ошибок, и отчетов в Google Analytics, настроив отслеживание через Google Tag Manager. В Яндекс Вебмастере выявить 404 ошибки можно перейдя в раздел Индексирование — Статистика обхода и нажав в правом верхнем углу История обхода.

Расположение 404 ошибок в Яндекс Вебмастере

Далее в фильтре столбца Стало надо выбрать HTTP-код 404 (Not found) и нажать Применить.

Выборка страниц в Яндекс Вебмастерес кодом ответа 404 (Not found)

Полученный список можно выгрузить в формате CSV и XLS при помощи кнопок в правом нижнем углу.

В Google Search Console информация о 404 ошибках находится в разделе Сканирование — Ошибки сканирования — Не найдено. Выгрузить список страниц в формате CSV можно нажав на кнопку Загрузка.

Расположение 404 ошибок в Google Search Console

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

Призыв сообщить о 404 ошибке

Еще один вариант предложения отправить отчет о 404 ошибке

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