Содержание

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

..или страница которой нет!

Прежде чем создавать страницу ошибки 404 давайте сначала разберёмся что это вообще за ошибка такая..

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

Возникать данная ошибка может в ряде случаев:

  • Ссылка, по которой пришёл пользователь, неверна.

  • Пользователь неправильно указал путь в адресной строке к одной из страниц Вашего сайта.

  • Ранее существовавшая страница Вами уже удалена или переименована, однако всё ещё существует в индексе поисковых систем или закладках пользователей.

Что увидит пользователь в результате этой ошибки?

В лучшем случае страницу с рекламой Вашего хостера и кратким объяснением что мол Вы «не туда попали».. в худшем это будет просто надпись: 404 Not Found — The requested URL /page.html was not found on this server — собственно «Запрашиваемый URL отсутствует на этом сервере».

Теперь представьте, что сделает пользователь когда увидит эту картину? Правильно!! закроет эту страницу и пойдёт искать интересующую его информацию в другом месте!! — в результате чего Вы потеряете целевого посетителя!

В этом уроке мы займёмся тем что создадим свою собственную пользовательскую страницу ошибки 404 — Которая в отличии от стандартных страниц ошибки будет иметь ряд несомненных преимуществ:

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

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

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

Как видите сплошные плюсы..

Создаётся страница ошибки 404 точно так же как и любая другая страница на Вашем сайте.. никаких нюансов в коде странице нет..

Ну например создадим файл с именем 404.html

<html>
<head>
<title>Ошибка 404</title>
</head>
<body>
<img src=»graphics/404.gif» alt=»Ошибка 404″>
<p>К сожалению, запрашиваемая Вами страница не найдена..</p>
<p>Почему?</p>
<ol>
<li>Ссылка, по которой Вы пришли, неверна.
<li>Вы неправильно указали путь или название страницы.
<li>Страница была удалёна со времени Вашего последнего посещения.
</ol>
<p>Для продолжения работы с сайтом Вы можете воспользоваться формой поиска по сайту:</p>
<form>
<input type=»text» size=»30″>
<input type=»submit» value=»Поиск»>
</form>
<p>..или перейти на:</p>
<ul>
<li><a href=»#»>Главную страницу сайта.</a>
<li><a href=»#»>Карту сайта</a>
</ul>
</body>
</html>

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

Создали? а вот теперь поговорим о нюансах..

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

Что это за файл такой спросите Вы?

Файл .htaccess (я не опечатался, пишется с точкой в начале имени и не использует никакого расширения) – дает возможность конфигурировать работу сервера в отдельных его директориях..

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

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

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

ErrorDocument 404 http://www.site.ru/404.html

И заливаем его на сервер в корневую папку сайта.

Ну только естественно сначала поменяйте в файле .htaccess ссылку http://www.site.ru/404.html на адрес Вашей собственной страницы которая должна будет открываться при возникновении ошибки 404.

Вот собственно и всё! теперь если Вы всё сделали правильно, при возникновении ошибки 404 будет загружаться Ваша «ошибочная» страница.

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


P.S.Таким же способом с помощью файла .htaccess Вы можете обрабатывать и другие ошибки сервера:

  • 401 ошибка(ErrorDocument 401 http://www.site.ru/page.html)- Требуется авторизация.
  • 403 ошибка(ErrorDocument 403 http://www.site.ru/page.html)- Пользователь не прошел аутентификацию, доступ запрещен.
  • 500 ошибка(ErrorDocument 500 http://www.site.ru/page.html)- Внутренняя ошибка сервера.

Если что-то непонятно или Вы в чем-то сомневаетесь, то за дополнительными разъяснениями обращайтесь на форум.

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

Серёжа СыроежкинКопирайтер

Существует несколько вариантов возникновения ошибки 404 на сайте:

  • Страница была удалена вами или перенесена на другой адрес, но поисковые системы еще не провели переиндексацию;
  • Пользователь ошибся при вводе ссылки;
  • Ссылка не верна (битая ссылка).

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

Настройка ошибки 404, т.е. отображения определенной страницы при возникновении ошибки «Not Found», производится в файле .htaccess (который находится в корне вашего сайта). Для этого нужно прописать следующую строку:

ErrorDocument 404 /nubex404.html

Здесь /nubex404.html — это относительный путь к вашей странице 404 (относительно корневого каталога сайта).

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

  • Поскольку ошибка может возникнуть в любом месте сайта, нужно использовать абсолютные пути для ссылок, изображений (http://nubex.ru/404.png), или относительные пути относительно корневого каталога (/404.png). Это позволит корректно отображать графические элементы и элементы навигации на странице ошибки.
  • Дизайн страницы должен быть удобным и привлекательным, ведь цель использования своей 404-страницы — не спугнуть пользователя, а удержать его.
  • Страница должна отвечать на вопрос пользователя «И что мне теперь делать?». Т.е. на странице рекомендуется дать четкие инструкции для пользователя.
  • Стили и картинки желательно включать в HTML-код, чтобы минимизировать число запросов.

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

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

В конструкторе сайтов «Нубекс» есть возможность показать пользователю красивую страницу с ошибкой 404.

Смотрите также:

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

Автор Максим Остропольский На чтение 4 мин. Просмотров 1.8k. Опубликовано

В данной руководстве мы разберем следующие вопросы и темы:

  • Что такое “404” и почему она так называется?
  • Нужно ли на своем сайте настраивать страницу “404 – not found”?
  • Нестандартный подход к созданию страницы “не найдено” .
  • Примеры крутых “404” страниц.

Что такое код состояния HTTP?

Первая строка в ответе сервера при запросе по протоколу HTTP – код состояния HTTP. Этот код состоит из трех десятичных чисел (цифры от 0 до 9). Клиент определяет по этому коду результат обращения и определяет, что делать дальше.

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

Примеры кодов ответа и их значение: 200 – “хорошо”, 301 – “перемещено навсегда”, 403 – “запрещено”  и так далее.

Коды состояния HTTP разделены на 5 групп:

  • 1** – информация;
  • 2**- успешно;
  • 3**- перенаправление;
  • 4**- ошибка клиента;
  • 5**- ошибка сервера.

Код ответа 404

Коды ответа под номером  404 Not Found (перевод c англ. – “не найдено”) обозначает что сервер понял запрос, но не нашел соответствующего ему URL (адрес страницы).  Данная ошибка может возникнуть вследствие  ошибки в написании адреса страницы, либо если страницу удалили или еще не успели создать.

Почему важно настроить страницу “404 – not found” на своем сайте?

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

При этом как бы технический правильно не был сделан ваш сайт в любом случае люди будут попадать на несуществующие страницу и получать код ответа “404”.

Причина ошибки:

  • ошибка в написании URL страницы;
  • страница удалена;
  • страница перемещена.

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

Как подключить свою страницу вместо стандартной?

Необходимо просто прописать в файл .htaccess, который располагается в корневой папке сайта следующую инструкцию:

ErrorDocument 404 //website.ru/404.html

Как нестандартно подойти к созданию страницы “четыре  ноль четыре”?

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

Что необходимо обязательно указать на странице 404?

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

Что будет полезно пользователю?

  • Информация о том, почему он сюда попал;
  • Инструкции по дальнейшим действиям;
  • Поиск по сайту;
  • Меню;
  • Бесплатный бонус;
  • Юмор.

Но самое интересное, что есть очень крутые решения, которые превращают страницу в инструмент для работы.

Два интересных примера:

  • На сайта amazon.com. Там на 404 странице появляются собаки (фото + кличка), при чем там несколько десятков разных страниц. Возле каждой собаки – ссылка “Познакомиться с собаками Амазона” . При переходе по ссылке вы попадаете на страницу с фотографиями собак и их мини-досье. А в конце этой страницы предлагается купить календарь с собаками. Получился очень интересный способ монетизации 404 страницы.
  • На сайте wpnew.ru. На блоге Петра также была реализована интересная задумка. Попадая на 404 вам сообщают о том, что вы попали на страницу с секретными материалами и 6 ссылочек на статьи. Такой прием можно использовать для направления трафика сайте на определенные страницы.

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

Еще примеры классный “404” страниц:

Помните! В странице “404” на вашем сайте есть скрытый потенциал, который можно использовать и обратить недостаток в преимущество!

Как сделать редирект 404 ошибки | REG.RU

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

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

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

http://site.ru/asdfjkl;

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

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

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

  • Администратор сайта удалил или переместил страницу, но не сделал редирект на актуальный материал.
  • Изменилась структура сайта, а у страниц остались старые URL.
  • Посетитель опечатался в адресе, когда вводил его вручную.
  • Посетитель перешел по «битой» ссылке, которая ведет на несуществующую (удаленную или перемещенную) страницу.

Технически ошибка 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

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

  1. 1.

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

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

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

    • Если вы используете WordPress, воспользуйтесь плагином 404page — your smart custom 404 error page по инструкции ниже. Обратите внимание! Если вы воспользовались плагином, вам не нужно прописывать путь к файлу в .htaccess.

    Как настроить страницу в плагине WordPress

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

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

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

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

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

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

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

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

  2. 2.

    Откройте конфигурационный файл .htaccess в корневой папке вашего сайта и добавьте в него строку:

    ErrorDocument 404 https://site.ru/404.html

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

  3. 3.

    Сохраните изменения.

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

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

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

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

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

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

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

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

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

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

  1. 1.
    Откройте Яндекс.Вебмастер.
  2. 2.

    Перейдите в раздел ИнструментыПроверка ответа сервера.

  3. 3.

    Введите название страницы ошибки и нажмите Проверить.

  4. 4.

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

Google Search Console

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

  1. 1.
    Откройте Google Search Console.
  2. 2.

    Перейдите в раздел «Покрытие» в меню справа. Здесь будет отображаться информация о страницах ошибок.

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

Если сайт многораздельный и многостраничный, вручную мониторить его будет сложно. Рекомендуется использовать для поиска страниц ошибки 404 онлайн-сервисы (Serpstat, BadLincs.ru и другие). Также можно воспользоваться плагинами в CMS. Замените ссылки и настройте редиректы. А также создайте понятную красочную страницу ошибки с объяснением причины, ссылками на основные разделы и строкой поиска.

Помогла ли вам статья?

2
раза уже
помогла

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

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

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

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

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

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

  • в URL ссылки была допущена ошибка;
  • был изменён URL-адрес страницы;
  • сайт временно не работал или вообще не существовал;
  • неправильно сработал сервер;
  • веб-страницу удалили.

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

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

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

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

  1. Сохранить трафик сайта и позиции в выдаче результатов поиска. Сайт теряет трафик, если пользователи часто закрывают его из-за ошибки 404. Из-за этого поисковые системы могут понизить уровень ранжирования сайта.
  2. Предложить посетителю что-то взамен неоткрывшейся страницы. Пользователь попал на неработающую страницу, когда искал конкретный контент, возможно, даже форму регистрации. Сделайте страницу 404 полезной для посетителя, предложите ему почитать о ваших ключевых продуктах, дайте ссылки на полезные статьи.
  3. Вызвать доверие. Грамотно оформленная страница 404 — это возможность сохранить потенциального клиента на сайте. Извинитесь и помогите пользователю найти то, зачем он зашёл на сайт. Так посетитель с большей вероятностью останется на сайте и завершит оформление заявки или покупку.

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

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

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

  1. Перенесите шаблон страницы ошибки 404 в корневую папку сайта.
  2. Откройте файл .htaccess и пропишите код: ErrorDocument 404 http://АДРЕС_САЙТА/404.html
  3. Впишите код в любую свободную строку, залейте на хостинг и проверьте: совершите ошибку в какой-нибудь ссылке, например, удалите букву. Вместо стандартного шаблона 404 должен отобразиться новый вариант. Если нет — проверьте правильность кода, возможно, была допущена ошибка.

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

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

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

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

  1. Будьте доброжелательны. Расскажите посетителю, что страница удалена или произошла ошибка, помогите вернуться на основные страницы сайта.
  2. Предложите посетителю проверить точность адреса или дайте ссылки на разделы, которые были недавно перемещены.
  3. Дайте ссылки на продукт или статьи, релевантные поиску. Для этого нужно знать, на какую страницу пользователь пытался перейти. Это можно сделать, когда в URL указан раздел или категория.
  4. Сделайте страницу полезной: дайте возможность скачать книгу или перейти на статьи в блоге, которые рассказывают о ценности продукта.
  5. Не ограничивайтесь забавной картинкой. Добавьте ссылку на главную страницу сайта, блог, каталог или афишу событий компании.
  6. Предложите посетить страницу с акциями, спецпредложениями.
  7. Разместите строку поиска, чтобы посетитель сайта мог найти то, что он искал. Например, модель телефона в интернет-магазине или статью на новостном портале.
  8. Покажите посетителю квиз или мини-игру. Это отличный способ свести негативное впечатление пользователя к минимуму.
  9. Выдержите единое оформление, чтобы страница 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

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

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

Рассказали, как SEO-аудит помогает оптимизировать работу сайта.

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

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

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

ответы на распространенные вопросы и советы по оформлению страницы

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

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

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

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

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

  • Некорректная настройка кода ответа: Для несуществующих страниц сообщение об ошибке 404 владелец сайта заменил на страницу-заглушку с кодом 200 OK. 
  • Недостаточное количество контента. На странице мало материалов или они отсутствуют.
  • Нет доступа к ресурсам. В корневом каталоге сайта помимо прочих находится файл robots.txt. Он содержит информацию для поисковых систем о том, какие ресурсы сайта можно сканировать, а какие — нет. Если в robots.txt заблокирован доступ к странице или каким-то ее файлам, это может вызывать ошибку Soft 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 и правильный ответ сервера (http-код страницы): shalenaolena — LiveJournal

Страница 404 призвана сообщать пользователю, что заданный им url (адрес страницы) не существует.
Такие неправильные урлы еще можно назвать «битыми ссылками».
Многие сайты делают свои страницы 404 для удобства своих пользователей. Часто это красивые и интересные страницы, которые вызывают у пользователя улыбку вместо разочарования от того, что адрес страницы неправильный.
При создании страницы 404 есть важная техническая составляющая, которая сильно влияет на ранжирование сайтов в поисковых системах, если все не настроено правильно.

Если вы озадачились созданием страницы 404, то вам нужно учитывать три момента:
1) Переадресация со всех неправильно введенных url на страницу 404 в .htaccess.
2) Правильный ответ сервера после переадресации (http-код страницы должен быть 404, а не 200).
3) Закрытие страницы 404 от индексации в robots.txt

Сразу отмечу, что все вышеизложенное написано для самописных сайтов, преимущественно на php. Для wordpress существуют плагины по настройке того же самого. Но в этой статье мы рассмотрим, как все выглядит в реальности. %)

Переадресация (редирект) неправильных url на страницу 404

Первое, что вы делаете – создаете саму страницу 404, чтобы было куда людей посылать %).
Перенаправление url настраивается в файле .htaccess
Просто вписываете строчку:
ErrorDocument 404 http://mysite.com/404.php
Где «mysite.com» – ваш домен, а http://mysite.com/404.php — путь к реальной странице. Если ваш сайт на html, то строка будет выглядеть как:
ErrorDocument 404 http://mysite.com/404.html
Проверка очень проста. После заливки на хостинг файла .htaccess с вышеуказанной строкой, делаете проверку, вводя заведомо не существующий урл (битая ссылка), например: http://mysite.com/$%$%
Если переадресация на созданную вами страницу произошла, значит все работает.
Итак, полностью файл .htaccess, где настроена ТОЛЬКО переадресация на 404 будет выглядеть так:
____________________________
RewriteEngine on
ErrorDocument 404 http://mysite.com/404.html
____________________________

Правильный ответ сервера (http-код страницы)

Очень важно, чтобы при перенаправлении был правильный ответ сервера, а именно – 404 Not Found.

Тут следует объяснить отдельно.
Любому url при запросе назначается статус (http-код страницы).
• Для всех существующих страниц, это: HTTP/1.1 200 OK
• Для страниц перенаправленных: HTTP/1.1 302 Found
• Если страницы не существует, это должен быть HTTP/1.1 404 Not Found

То есть, какой бы урл не был введен, ему присваивается статус, определенный код ответа сервера.
Проверить ответ сервера можно на такой ресурсе как bertal.ru или SEARCH CONCOLE GOOGLE – Сканирование/Посмотреть как GOOGLE бот.
Когда у вас не было перенаправления через .htaccess на страницу 404, то на любой несуществующий урл, введенный пользователем, а также на битые ссылки был ответ «HTTP/1.1 404 Not Found»

Итак, после краткой теоритической части, вернемся к нашим баранам настройкам.

После того, как вы настроили перенаправление на свою авторскую страницу 404 через .htaccess, как описано выше, то вводя битую ссылку (неверный url, который заведомо не существует), типа http://mysite.com/$%$%, ответ сервера будет:
— сначала HTTP/1.1 302 Found (перенаправление),
— а затем HTTP/1.1 200 OK (страница существует).

Проверьте через bertal.ru.
Чем это грозит? Это будет означать, что гугл в свою базу данных (индекс) может внести все битые ссылки, как существующие страницы с содержанием страницы 404. По сути — дубли страниц. А это невероятно вредно для поисковой оптимизации (SEO).

В этом случае нужно сделать две вещи:
1) Настроить правильный ответ сервера на странице 404.
2) Закрыть от индексирования страницу 404. Это делается через файл robots.txt

Настраиваем ответ сервера HTTP/1.1 404 Not Found для несуществующих страниц

Ответ сервера настраивается благодаря функции php в самом начале страницы:

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

Закрыть страницу 404 от индексирования

Закрыть страницу от индексирования можно в файле rodots.txt. Будьте внимательны с этим инструментом, ведь через этот файл ваш сайт, по сути, общается с поисковыми роботами!
Полный текст файла rodots.txt, где ТОЛЬКО закрыта индексация 404 страницы, выглядит так:
____________________________
User-agent: *
Disallow:
Disallow: /404.php
____________________________

Замечания по коду: «/404.php» означает путь к странице. Если на вашем сайте страница 404.php (или 404.html соответственно) находится в какой-то папке, то путь будет выглядеть:
/holder/404.php
где «holder» — название папки.

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

Читать также:
Быстро создать свой сайт на WordPress
Сколько стоит создать сайт
Как залить сайт на хостинг
Зарегистрировать торговую марку самостоятельно
Самое ценное на сайте
Сайт бесплатно – это миф!
Продвижение сайта
Резервная копия сайта (бэкап)

Создание HTML 404! Ошибка веб-страницы%

Может быть много причин, по которым пользователь не может получить доступ к веб-сайту. Один из них известен как 404! ошибка. Довольно просто HTML 404! Сообщение об ошибке представляет собой код состояния протокола передачи гипертекста (HTTP), указывающий, что сервер не может найти запрошенный веб-сайт. Другими словами, ваш веб-браузер может подключиться к серверу, но конкретная страница, к которой вы пытаетесь получить доступ, не может быть достигнута. В этом руководстве мы создадим веб-страницу с ошибкой HTML 404, чтобы настроить то, что видит посетитель, когда попадает туда.Мы также будем использовать CSS для дальнейшего улучшения страницы.

404! Ошибка

Почему 404! Ошибка HTML

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

Есть несколько причин, по которым вы можете получить код HTTP 404:

  • Типичным триггером сообщения об ошибке 404 является удаление страницы с веб-сайта.
  • Страница была перемещена на другой URL-адрес, и перенаправление было выполнено неправильно.
  • Вы ввели неверный URL-адрес.
  • Хотя это случается очень редко, иногда случаются сбои в работе сервера.
  • Введенное доменное имя больше не существует.

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

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

Создание веб-страницы HTML «Страница не найдена»

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

Давайте перейдем к первому шагу нашего руководства.

Шаг 1. Создайте целевую веб-страницу в формате HTML

Давайте начнем с простого создания базовой HTML-страницы. Это станет основой для создания более интересного и информативного 404! Ошибка веб-страницы, на которую посетители попадают.

Откройте текстовый редактор, сохраните файл как « beachlinesurfteam.html ”и вставьте следующий HTML-код. Когда закончите, снова сохраните файл.







< / body>

Чтобы помочь тем, кто попал на эту «несуществующую» страницу, вы можете добавить некоторую полезную информацию, которая направит их на правильный путь.Возможно, добавьте информацию о том, почему страница больше не существует. Добавьте что-то подобное в HTML. Не стесняйтесь скопировать следующий код и повторно сохранить свой html-файл.





Это была веб-страница для организация, которая когда-то существовала. Эта организация больше не существует, поскольку ее заменила новая организация, которая обучает серфингистов ценностям и любви к океану.Новый сайт: https://www.pleasurepointsurfclub.com/

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



< / body>

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

Чтобы увеличить шрифт текста, давайте добавим стиль . Скопируйте следующий код и повторно сохраните HTML-файл.

! DOCTYPE html>




Это была веб-страница существующей организации.Эта организация больше не существует, поскольку ее заменила новая организация, которая обучает серфингистов ценностям и любви к океану. Новый сайт: https://www.pleasurepointsurfclub.com/

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



< / body>

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

! DOCTYPE html>








Это была веб-страница для организации, которая когда-то существовала. Эта организация больше не существует, так как была заменена новой организацией, чтобы научить серфингистов ценностям и любви к океан. Новый сайт: https://www.pleasurepointsurfclub.com/

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




Шаг 2: Сообщите серверу использовать ваш HTML 404! Страница ошибки

Создайте «.htaccess ”файл. Этот текстовый файл служит для передачи инструкций серверу.

Возможно, в корневой папке вашего веб-хостинга уже есть файл .htaccess. Если есть, скачайте и исправьте. Это может быть скрытый файл. В таком случае вам может потребоваться изменить настройки сервера, чтобы вы могли просматривать этот файл.

В этот файл « .htaccess » вам нужно будет добавить эту строку:

ErrorDocument 404 / beachlinesurfteam.html

Это все, что вам нужно добавить. Вам не нужно добавлять HTML-код.

Это означает, что сервер сообщает серверу, что при обнаружении ошибки 404 он должен загрузить файл Shorelinesurfteam.html в корневую папку.

Шаг 3. Сохраните файл .htaccess в корневом каталоге

Сохраните файл « .htaccess » и загрузите его в корневую папку своего веб-сайта. Когда сервер обнаруживает ошибку "не найдено", отображается страница вашей ошибки.

Теперь, когда посетитель находит веб-страницу (в соответствии с нашим кодом выше)

Вместо того, чтобы видеть это:

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

Чтобы зеленый текст выделялся больше, вы можете добавить элемент div с цветным фоном как таковой:


Сайт

Это была веб-страница существующей организации. Эта организация больше не существует, поскольку ее заменила новая организация, которая обучает серфингистов ценностям и любви к океану. Новый сайт: https://www.pleasurepointsurfclub.com/

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


Это даст следующее:

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

См. Семейства шрифтов HTML, чтобы узнать, как улучшить текст, а также ознакомьтесь с Учебным пособием по фону CSS, чтобы узнать, как улучшить фон веб-страницы.

Куда дальше?

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

Зарегистрируйтесь сегодня в нашей программе «Введение в программирование Nanodegree»!

Начать обучение

Руководство для начинающих по пользовательским страницам 404

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

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

LCN 404 стр.

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

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

  • Помогите посетителям сориентироваться
    Включите набор ссылок на популярные страницы вашего сайта и попытайтесь соблазнить потерявшегося посетителя продолжить просмотр.В противном случае им придется полностью вернуться на главную страницу и рыться в содержимом сайта, чтобы найти то, что они ищут (если они вообще останутся).
  • Сделайте страницу с ошибкой удобной для пользователя
    Сделав страницу 404 дружественной и приветливой, вы можете облегчить разочарование посетителя, а не увеличивать его с помощью тупой надписи «Ошибка», наклеенной на страницу.
  • Используйте преимущества SEO
    Настройте страницу с ошибкой, чтобы она напоминала другие страницы сайта.Предоставьте возможность поиска по сайту или ссылку на карту сайта. Таким образом вы побуждаете пользователя продолжать просмотр.

  • Получить новые ссылки
    Трудно, но возможно. Если вы создадите действительно уникальную, увлекательную и забавную страницу 404, посетители захотят рассказать об этом всему миру. Это может быть отличным источником новых ссылок. Подробнее о действительно отличных страницах 404 в конце этой статьи…

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

Вы начинаете с создания новой веб-страницы на своем сайте (либо на вашей CMS, такой как WordPress, либо на обычной HTML-странице / PHP-скрипте).

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

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

  • Постарайтесь, чтобы это было беззаботно
    Помните, одна из основных причин, по которой мы создаем настраиваемую страницу 404, заключается в замене тупого и раздражающего сообщения «страница не может быть отображена» на что-то, что с меньшей вероятностью будет преследовать гости.
  • Включите окно поиска
    Кроме того, убедитесь, что поле поиска размещено на видном месте на вашей пользовательской странице 404. Это позволяет потерявшемуся посетителю искать то, что они ищут на сайте.
  • Включите важные ссылки
    Вы знаете, что страница с ошибкой 404 - это тупик. Теперь ваша задача - предложить посетителю альтернативные варианты действий. Вы можете сделать это, предоставив ссылки на важные и популярные разделы сайта, такие как недавние сообщения, подписки, связаться с нами и т. Д.
  • Не заставляйте посетителя чувствовать себя глупо
    Хотя ваш посетитель мог ввести неправильную ссылку, не вините посетителя в ошибке. Вместо этого объясните проблему непринужденно и беззаботно. Кроме того, возможно, ссылка на вашем веб-сайте и отправила вашего посетителя именно туда!

Создание пользовательской страницы 404

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

Процесс начинается с разработки стандартной веб-страницы и включения всех элементов, необходимых для вашей страницы 404.

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

Важно то, как вы назовете свою страницу 404. В данном случае мы назовем его « 404.html ». Затем загрузите свою страницу в корневой каталог вашего сервера / веб-пространства.

При использовании WordPress процесс немного отличается. Доступны плагины, которые делают работу еще проще, без необходимости касаться какого-либо кода.

Для получения полной информации о страницах 404 для WordPress, ознакомьтесь с этим полным руководством на Elegant Themes.

Настройте сервер для перенаправления на пользовательскую страницу 404

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

Подавляющее большинство веб-серверов используют программное обеспечение Apache, поэтому мы будем использовать метод apache для перенаправления.

Для начала вам нужно будет либо найти файл .htaccess вашего веб-сайта, либо создать его.

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

.htaccess файл в корневом каталоге установки WordPress

.htaccess может иметь множество функций; это шаги для создания вашей страницы 404.

Шаг 1: Создание или поиск файла «.htaccess»: Чтобы найти файл .htaccess, просто загляните в корневой каталог своего веб-сайта с помощью обычного FTP-клиента. Вы должны увидеть это там. Если вам нужно создать его, это просто. Просто откройте текстовый редактор, например «Блокнот», и назовите файл «.htaccess».

Шаг 2: Добавьте следующий текст в файл.htaccess: «ErrorDocument 404 /404.html». Эта строка называет вашу страницу с ошибкой 404 как «404.html» и размещает ее в корневом каталоге вашего веб-сайта.

Добавьте этот код в свой файл .htaccess

Шаг 3: Сохраните файл и загрузите его в корневой каталог вашего сервера.

Шаг 4 : Проверьте, все ли работает нормально, открыв веб-браузер и перейдя на www.yourdomain.com/asdf (случайная страница, которой не существует).

Чего нельзя делать:

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

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

Блестящие 404 страницы

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

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

Щелкните заголовок веб-сайта, чтобы перейти на страницу 404.

Хороший дизайн собаки

Помогите Good Dog Design найти потерянную собаку!

IMDB

Страница 404 IMDBs приветствует вас подборкой соответствующих цитат из фильмов.

Romainbrasier.fr

Ребята из Romainbrasier позволяют вам забыть о 404 бедах, спасая 404 леммингов!

Magnt

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

Modcloth

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

Ваше слово!

Вы создали свою собственную страницу 404? Нам бы очень хотелось это увидеть.

Как посетитель, что вы ищете на странице 404? И что заставляет вас сразу же отказываться от страницы?

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

Обновлено 16.07.20, чтобы включить новую информацию.

Вы потратили много времени на то, чтобы убедиться, что ваш веб-сайт удобен для пользователя, имеет наглядную навигацию, организован разумным образом, но что, если кто-то допустит опечатку при вводе URL-адреса? Что делать, если другой веб-сайт ссылается на страницу, которой у вас больше нет? Что увидит пользователь на вашей странице с ошибкой 404?

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

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

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

Страница с ошибкой 404 с redwingshoes.com

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

eFax имеет настраиваемую страницу 404, которая довольно хороша. Это не креативная или глупая страница 404, но она очень хорошо помогает пользователям вернуться в нужное русло:

Страница с ошибкой 404 с сайта efax.com

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

Шаг 1. Дизайн страницы

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

Страница с ошибкой 404 от moz.com

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

В любом случае хорошая страница 404 должна иметь следующие характеристики:

  • Четкое заявление о том, что страница, запрошенная пользователем, недоступна
  • Совет, который поможет вашим пользователям исправить возможную ошибку в URL-адресе
  • Основной заголовок и навигация в нижнем колонтитуле
  • Ссылки на важные разделы веб-сайта
  • Строка поиска для функции внутреннего поиска веб-сайта

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

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

Шаг 2. Настройка сервера

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

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

Если ваш веб-сайт разработан как приложение с такими фреймворками, как ReactJS, Angular или Ruby on Rails, вам понадобится часть приложения для маршрутизации. Эти подходы имеют тенденцию выглядеть как создание всеобъемлющего маршрута, который отправляет пользователей на компонент страницы 404.

Изучая этот пост, я обнаружил новую идею рекомендовать наиболее вероятное исправление несуществующего URL. Если ваша инфраструктура поддерживает этот тип функции, обязательно добавьте ее на страницу ошибки.

Шаг 3. Проверьте свою конфигурацию

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

Вернуть код ответа HTTP 404

Отображение сообщения об отсутствующем содержимом и возврат кода состояния 200 (обычный ответ для работающей веб-страницы) запутает сканеров, и вы получите программные ошибки 404 в консолях поиска. Проверьте это с помощью сканера, такого как ScreamingFrog, или средства проверки кода состояния HTTP, введя поддельный URL-адрес, например «www.yourbrand.com/asdf ».

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

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

Устранение ошибки в веб-аналитике Страница

Нам нужно узнать, как часто пользователи попадают на страницу 404 и куда они переходят.

Не перенаправлять на страницу с ошибкой

Убедитесь, что ваш веб-сайт просто отображает содержимое страницы с ошибкой, а не перенаправляет пользователя на URL, например / 404 или / error.html. Перенаправление помешает пользователям изучить проблемный URL и не отправит полезную информацию в вашу веб-аналитику.

Не перенаправлять на домашнюю страницу

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

Не используйте перенаправление мета-тега обновления

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

Шаг 4. Отслеживание сеансов 404 в Google Analytics

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

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

Посмотрите, какие URL-адреса возвращают 404

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

Затем перейдите в Поведение> Контент сайта> Все страницы, чтобы просмотреть отчет о просмотрах страниц с ошибками 404:

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

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

Только 44% пользователей покидают сайт после просмотра этой страницы.Неплохо, но не идеально.

Посмотреть, какие страницы отправляют трафик

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

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

Link Rot - это реально, и все в порядке

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

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

Как создать страницу с ошибкой 404 для вашего веб-сайта | Рахит | Дизайнерские рецепты

Шаг 1. Используете ли вы конструктор веб-сайтов, например Squarespace или Weebly?

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

В моем случае мой веб-сайт работал локально. Если вы похожи на меня, идите дальше!

Шаг 2. Создайте собственную страницу 404 в HTML.

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

Шаг 3: Найдите файл «.htaccess» в корневом каталоге вашего сервера

FTP на своем сервере и найдите этот файл в корневом каталоге. Вам нужно будет его отредактировать. Если вы не можете его найти, вам придется его создать. Назовите его «.htaccess». Никаких данных до и после . Всего «.htaccess» .

Шаг 4. Отредактируйте файл .htaccess

Откройте его и добавьте следующую строку:

 ErrorDocument 404 / not-found-page.html 

… где /not-found-page.html - это полный путь к новой пользовательской странице 404, которую вы создали.

Этой строкой мы просто сообщаем серверу, что в случае ошибки 404 верните этот файл в браузер.

Шаг 5. Убедитесь, что путь указан правильно, и проверьте его.

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

Шаг 6: Сработало? Если нет, обновите настройки вашего сервера.

В моем случае, поскольку я запускаю свой веб-сайт локально на Mac, Apache не позволяет настраивать.htaccess файл . Мне пришлось зайти в конфигурацию Apache и отредактировать настройки.

Вот как я это сделал для всех, кто интересуется и идет по тому же пути:

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

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

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

1. Веб-сайт Drupal

  1. Создайте свою страницу 404 в Drupal CMS. Это может быть так же просто, как создание базовой страницы и добавление на нее некоторого настраиваемого текста и ссылок.
  2. В разделе администратора Drupal перейдите в раздел Конфигурация> Информация о сайте.
  3. В разделе «Страницы ошибок» обновите поле пути, чтобы оно указывало на пользовательскую страницу 404.

2. Сайт на WordPress

  1. По умолчанию WordPress будет искать файл с именем 404.php в вашей теме. В каждой теме WordPress должен быть файл 404.php, но это может быть не настраиваемая страница.
  2. Вы можете настроить этот файл или создать новый файл с именем 404.php и загрузите его в свою тему вместо текущей. Если по какой-то причине на вашем сайте нет файла 404.php, вы можете создать его как простой HTML-файл с расширением .php, а затем загрузить его в каталог тем вашего сайта.
  3. Каждый раз, когда возникает ошибка 404, WordPress предоставляет пользователю эту страницу 404.php.

3. Пользовательский / статический веб-сайт - сервер Apache

  1. Создайте страницу 404 как файл HTML. Имя файла не имеет значения, но в этом примере, допустим, вы назвали его 404page.html.
  2. Загрузите этот файл в корневой каталог своего веб-сайта.
  3. Добавьте эту строку в свой. htaccess файл: ErrorDocument 404 /404page.html.

Предложения по содержанию страницы 404

  1. Дружественный текст, объясняющий ошибку. Обычно здесь помещают что-то остроумное или забавное, чтобы пользователь знал, что то, что он видит, нормально и не беспокоился. Это также хорошо с точки зрения удобства использования и помогает уменьшить разочарование пользователей.
  2. Полезные ссылки на общие страницы веб-сайта, включая домашнюю страницу, страницу контактов и страницу карты сайта.
  3. Поле поиска по сайту.
  4. Телефон и адрес.
  5. Дизайн отличается от вашего веб-сайта, который предупреждает пользователей о том, что они находятся не на стандартной странице.

Самые лучшие страницы 404 встречаются редко!

Хорошо продуманная страница 404, безусловно, является маркетинговым активом, но лучше всего она работает, когда ее просматривают нечасто.

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

Как создать впечатляющую страницу ошибки 404 (с 12 примерами)

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

Но опыт нового посетителя может стать ужасным, если он увидит сообщение «страница не найдена».Страницы ошибок могут убить всю вашу тяжелую работу.

Итак, что посетитель будет делать дальше?

Они немедленно нажмут кнопку «Назад», если вы неправильно указали страницу с ошибкой 404 (код состояния). И они, вероятно, никогда больше не посетят ваш сайт.

Вы только что испортили свое первое впечатление своей страницей ошибок.

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

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

Результат?

Ну…

Снижение вашего рейтинга в поиске.

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

  • Перезапуск сайта
  • Внутренняя ссылка не работает
  • Ссылка на устаревшую поисковую систему

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

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

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

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

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

Зачем нужно создавать индивидуальную страницу 404?

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

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

Но зачем вам тратить время или деньги на этот индивидуальный проект?

Вот 5 причин.

1. Увеличьте количество проиндексированных страниц вашего веб-сайта в поисковых системах. Если на вашем веб-сайте много страниц, будет много неработающих ссылок.

Как бы вы хотели увеличить свой поисковый трафик за счет индексации большего количества страниц веб-сайта с помощью страницы с ошибкой 404?

Сладкое. Не правда ли?

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

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

Путем перехода с него на случайные внутренние страницы вашего сайта.

Я использовал эту стратегию, чтобы увеличить посещаемость Techcrunch на 9% за месяц. Я связался со случайными 25-50 внутренними страницами, запустив алгоритм.

У вас наверняка будут неработающие ссылки на вашем сайте.

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

Вывод - создать согласованный образ. Обычные страницы с ошибкой 404 - плохой опыт.

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

Вам нужен файл журнала для записи информации о проблеме и код ответа для ее надлежащего решения.

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

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

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

Как ты себя чувствуешь?

Совершенно верно.

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

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

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

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

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

Принятие того, что что-то пошло не так (код состояния HTTP), признание разочарования клиента и предложение другой помощи. Это то, что вы сделали бы при личном общении. Лучшие страницы с ошибками 404 делают именно это.

Но как именно?

Развлекаясь, как Магнт.

Или продвигать любовь, как eHarmony. Эта настраиваемая страница с ошибкой укрепляет их бренд.

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

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

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

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

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

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

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

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

6 элементов соблазнительной 404 стр.

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

Вот 6 особенностей соблазнительной страницы 404.Помните, что вам не обязательно размещать их все на своей странице.

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

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

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

Интернет-пользователю нравится нажимать на ссылки. И, если вы разместите свои самые популярные статьи, высока вероятность, что посетитель останется с ними, чтобы их прочитать.

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

Design Shack предлагает ссылку на их последние статьи, галерею дизайна и на их домашнюю страницу, когда вы, к сожалению, найдете их код статуса http.

Вы также можете предложить обратную ссылку на домашнюю страницу, например Deviant Art. Это забавная, простая настраиваемая страница ошибок, соответствующая их бренду.

Или, может быть, ссылку на вашу карту сайта, например Starbucks.

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

3. Использует простой человеческий язык, чтобы объяснить, что пошло не так. Во-первых, вы обслуживаете ошибку.Затем вы используете технические термины и коды, чтобы объяснить ситуацию. Вы вообще хотите, чтобы пользователь был на вашем сайте?

Видите ли, никого не волнует, что пошло не так с «вашим сервером».

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

Простой заголовок, например «Страница не найдена», работает лучше, чем «ошибка 404», потому что большинство посетителей вашего веб-сайта ничего не знают о вашем сервере или ошибке 404.

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

Страница ошибки 404 X-Cart имеет простой заголовок «Страница не найдена».

Вы заметили еще один аспект на странице выше?

В нем указаны «возможные причины», по которым вы столкнулись с ошибкой.

Это работает, потому что люди - любопытные существа. Объясняя причину и предлагая решение, вы мотивируете пользователя предпринять корректирующие действия.

Также не забудьте не винить посетителя за код ошибки (код статуса http).

Я знаю.

Есть вероятность, что пользователь действительно ошибся при вводе URL. Или, возможно, это был ошибочный перенаправление.

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

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

Разве ты не хочешь их уже простить?

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

Конечно, вы получите файл журнала инцидента, но не лучше ли поговорить с клиентом, который тоже найдет время, чтобы сообщить вам об этом?

Так как же побудить посетителя сообщить об ошибке?

Вы предоставляете контактную форму или адрес электронной почты своей группы технической поддержки.

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

Бен Кук реализовал простую контактную форму на странице с ошибкой 404 во время восстановления и перезапуска клиентского веб-сайта.

Получил ли он какие-нибудь ответы?

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

5. Переведите страницу на несколько языков. Маркетинг - это общение с пользователем так, как ему нравится, и на том языке, который он использует. Верно?

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

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

David Hell Man - отличный пример страницы с ошибкой 404 не на английском языке.

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

А что может быть лучше, чем превратить плохой пользовательский опыт в положительный и прибыльный?

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

Вот видеоурок Джоша Бейлесса о том, как собирать лиды со страниц с ошибкой 404.

[youtube https://www.youtube.com/watch?v=yRGuAwBIRig]

Я уже показал вам, как Ballard Designs рекомендовала продукты на своей странице с ошибкой 404, чтобы увеличить количество конверсий.

Точно так же HubSpot предлагает пользователям возможность «подписаться на бесплатную демонстрацию» на их странице с ошибкой 404. Два других варианта над бесплатной демонстрацией также соответствуют целям конверсии HubSpot.

12 блестящих примеров страниц с ошибкой 404

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

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

Надеюсь, ваши творческие соки начнут течь после просмотра этих страниц.

1. Поцелуй

Сайт знакомств добавляет индивидуальности на странице с ошибкой. Они принимают ошибку (называя ее неудобной), чувствуют боль посетителя и затем предлагают помощь, а не просто позволяют кому-то читать тарабарщину с кодом статуса http.

И что может быть лучше, чем попросить пользователя подать заявку в службу поддержки для решения проблемы?

2. Джейми Хаскиссон

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

Кроме того, вам будут предложены два варианта: окно поиска для поиска релевантной информации или ссылка на архив сообщений для чтения старого содержания, написанного Джейми.

3. Centresource

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

Затем он предлагает всего два варианта - вернуться на главную страницу или ударить лося. Здесь нет жаргона кода статуса http.

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

4. Huwshimi

У австралийской дизайнерской компании есть героическое изображение на странице с ошибкой: эту страницу украл ниндзя.

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

5. Хиллари Клинтон

На сайте политика есть страница с ошибкой, на которой крякнет вас.

Она была даже признана Huffington Post за то, что она каламбур через эту страницу.

Показав счастливую фотографию, Хилари предлагает вам записаться на волонтерство.

Итак, это отличный способ направить посетителей вашего сайта к вашим целям, не так ли?

6. Дизайн зайца

Еще одна блестящая концепция от дизайнерской компании.Jackrabbit указывает на «опасность» в своем коде ошибки и сообщает пользователю, что они отклонились от маршрута. У них также есть крутой кролик-талисман, чтобы привлечь вас, в то время как их серверная часть создает файл журнала с кодом состояния http.

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

Разве не прекрасно, что пользователь может извлечь полезность даже из своей страницы с ошибкой?

7.Блюгг

Это брендовое агентство из Великобритании, и их страница с ошибкой очень забавна.

Это не минимализм. У них есть куча навигационных ссылок вверху и контактная информация в нижнем колонтитуле.

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

Они ясно передают ошибку - «Аааааааааааааааааааааааааааааааааааааааааааааааааааааааамамамамамамам приятнее! Этой страницы не существует ". Затем видео с козлом с высоким тоном воспроизводится в цикле, пока вы не вернетесь назад, прочь от страниц с ошибками, на их домашнюю страницу (или приостановите воспроизведение видео).

8. Whitespark

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

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

Вы также можете нажать на красный CTA «Good Riddance» и уволить Брента.

Нажав эту кнопку, вы увидите обеспокоенного Брента и получите сообщение о том, что многие дети Брента будут голодать на улицах.

Дело в том, что ваши пользователи больше не обращают внимания на жаргон кода ошибки, такой как http-код статуса «что?» Они видят, что что-то пошло не так, и видят способы решения проблемы.

9. Квартира Home Living

Какой бы вы хотели видеть овцу в ванной?

Вообразить это само по себе забавно, правда?

Это иллюстрация, которую сайт поиска квартир Apartment Home Living использует на своей странице с ошибкой.

И, признав, что страница не существует, они возвращают пользователей на свою домашнюю страницу.

Есть вероятность, что вы покажете смешную страницу своим друзьям.

10. Лего

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

И внизу слева они предлагают обратную ссылку на главную страницу.

11. Mattel

Еще одна игрушечная компания с еще более интересной и интерактивной настраиваемой страницей ошибок.

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

Но, чтобы оставаться на сайте, вы получаете анимированный шар Magic 8, который отвечает на ваши вопросы.

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

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

Помимо шара magic-8, Mattel имеет 3 ссылки внизу. Вы можете вернуться на главную страницу, выполнить поиск на веб-сайте или посетить магазин Mattel.

12. Дефрозо

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

Во-первых, он говорит на языке аудитории: «страница не в фокусе.’

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

Или вы можете отправить электронное письмо команде по разморозке о проблеме.

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

3 метода создания настраиваемой ошибки 404 страница

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

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

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

1. Используйте плагин 404 Page WordPress - Вам повезло, если вы ведете свой блог на WordPress.Существует множество мощных плагинов, которые помогут вам легко реализовать расширенные функции на вашем веб-сайте.

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

Вот видеоролик о плагине кода ошибки.

[youtube https://www.youtube.com/watch?v=VTL07Lf0IsY]

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

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

2. Наймите разработчика-фрилансера - плагины могут быть чрезвычайно полезны на начальных этапах работы вашего веб-сайта.

Но по мере вашего продвижения ваш брендинг и обслуживание аудитории вашего веб-сайта становятся все более важными.

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

.

Инвестируйте в найм талантливых разработчиков с сайтов-фрилансеров, таких как UpWork и Freelancer. Опубликуйте требование с как можно большим количеством конкретных деталей. У вас должен быть приличный бюджет, чтобы привлекать качественные приложения.

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

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

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

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

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

[youtube https://www.youtube.com/watch?v=l-YJlu4CpYU]

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

Если вы запускаете свой веб-сайт на информационном сервере в Интернете, вы можете следовать инструкциям в этой статье.

Вы используете свой сайт на WordPress?

Многие темы WordPress снабжены файлом 404.php (пользовательский файл шаблона 404).

Вы можете редактировать их в текстовом редакторе и редактировать отображаемое сообщение об ошибке.

В приведенном ниже видеоуроке WebTegrity показывает, как настроить сообщение, отредактировав файл темы 404.php.

[youtube https://www.youtube.com/watch?v=YDN47iDc2_0]

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

Что бы вы ни делали, не выбирайте ни одну из этих настроек страницы 404.

3 инструмента для отслеживания неработающих ссылок и предотвращения ошибок 404 страницы

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

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

1. Проверьте расширение Chrome My Links - Это отличный инструмент, используемый в стратегии построения битых ссылок. Он сканирует веб-страницу, перечисляет общее количество ссылок, находит и помечает все неработающие ссылки красным цветом.

Недостаток расширения в том, что вы не можете автоматизировать проверку.

Вам нужно будет вручную перейти на веб-страницу, которую вы хотите проверить, и нажать на расширение.

2. Плагин WordPress для проверки неработающих ссылок - Если вам нравится автоматизация, вам понравится этот инструмент.

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

Установите плагин и перейдите в Настройки »Проверка ссылок.

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

Чтобы просмотреть более подробный список неработающих ссылок и проблем с кодами ошибок на вашем веб-сайте, перейдите в Инструменты »Неработающие ссылки.

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

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

3. Google Analytics (GA) - Это один из самых мощных инструментов для веб-мастеров. Вы уже знаете о его функциях для отслеживания производительности вашего веб-сайта и разделения источников трафика.

Но знаете ли вы, что он может даже найти неработающие ссылки на вашем сайте?

Войдите в свою учетную запись аналитики. Перейдите в раздел Поведение »Контент сайта» Все страницы.

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

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

WordStream обнаружил, что его страница с ошибкой 404 была посещена 126 раз через 79 страниц (с 1 по 30 апреля).

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

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

Заключение

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

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

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

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

https://archive.org/web/wb404.js

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

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

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

  • SEO - разблокируйте огромное количество SEO-трафика.Смотрите реальные результаты.
  • Контент-маркетинг - наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
  • Paid Media - эффективные платные стратегии с четкой окупаемостью.

Заказать звонок

Как установить пользовательскую страницу 404 с помощью .htaccess

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

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

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

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

Нет времени прочитать статью? Посмотрите наше пошаговое видео.

Создание или изменение пользовательской страницы 404 с помощью .htaccess

  1. Войдите в свою cPanel.

  2. В разделе Files щелкните File Manager .
  3. Перейдите в корневую папку документов на сайте.
  4. Щелкните Настройки .
  5. Убедитесь, что выбрано Показать скрытые файлы .
  6. Затем нажмите Сохранить .
  7. Щелкните правой кнопкой мыши файл .htaccess и выберите Edit .

  8. Если файл .htaccess не существовал на предыдущем шаге, щелкните ссылку + File в левом верхнем углу, назовите файл .htaccess и установите каталог для создания / public_html. / или корень документа вашего сайта.
  9. У вас может появиться всплывающее диалоговое окно кодирования текстового редактора, продолжайте и просто нажмите Edit .
  10. Теперь, когда вы готовы отредактировать файл .htaccess , самый простой способ установить страницу с ошибкой 404 - это напрямую задать сообщение об ошибке 404 в самом файле .htaccess :
     ErrorDocument 404 "

    Страница не найдена

    "

    Если у вас уже есть статическая HTML-страница, которую вы хотите использовать для ошибок 404, вы также можете напрямую указать на этот файл с помощью .htaccess . В этом примере у нас есть страница 404.html, которую мы хотим обслуживать. Не забудьте заменить «404.html» фактическим именем страницы:

     ErrorDocument 404 /404.html 

  11. После внесения изменений в файл .htaccess нажмите Сохранить изменения .

    Вы должны увидеть всплывающее окно зеленого цвета Success

  12. Теперь, если вы попытаетесь открыть страницу, которой не будет на сервере, например / ThisPageWon'tExist , вы должны увидеть пользовательское сообщение об ошибке 404, которое мы я настроил.Это первое изображение ниже является страницей ошибки 404 по умолчанию, когда пользовательская страница не задана:

    Второе изображение - это страница ошибки 404, которую мы только что создали:

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

    Получите лучшую производительность и безопасность с нашим VPS-хостингом.

    Джон-Поль Брионес
    Content Writer II

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

    Еще статьи Джона-Пола

    Сообщение навигации

.