Как добавить страницы с ошибками на сайт

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

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

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

Почему обязательно надо делать свою 404-ую страницу?

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

Хватит воду лить! Давай конкретику!

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


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

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

Мы уже создали пустой файл 404.html и теперь будем наполнять HTML кодом саму 404 страницу, активно применяя HTML5 и CSS3. Я придумал свой способ, как сделать простую и красивую 404 страницу.

Первым делом нужно подобрать большую и качественную картинку или фотографию размером не менее 1200×750 пикселей. Существует много сайтов со свободной лицензией, откуда можно скачать очень качественные фотографии. Я бесплатно скачал с популярного сайта pixabay.com это забавное изображение.

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

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

Эффект полупрозрачности RGBA

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


background: rgba (0, 0, 0, 0.7);

Первые три буквы обозначают – красный, зеленый, синий и они равны нулю (то есть получаем черный цвет). А последняя буква «а» – представляет собой альфа-канал, отвечающий за полупрозрачность элемента. В нашем случае цифра 0.7 – говорит о 70% затемнения. Шкала от полной прозрачности до полной непрозрачности находиться между нулем и единицей (0…1).

Позиционирование элементов

Для правильной верстки моего примера 404 страницы, без понимания как работает свойство position, будет трудно. Посмотрев на конечный результат 404 страницы, нам надо понять структуру HTML документа. Здесь мы видим три слоя, наложенных друг на друга. Нижний слой <body> – сама картинка, средний в теге <div> – полупрозрачный блок затемнения и верхний <div> – текст. Наша задача задать нужное позиционирование содержимого этих слоев.

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


position: absolute;

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


position: relative;

Код страницы 404

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


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Код страницы 404</title>
<style>
html { height: 100%; }
body {
  background: url(your_image.jpg) no-repeat;
  background-size: cover; /* Масштабирует картинку сохраняя пропорции */
  }
.over {
  background: rgba(0, 0, 0, 0.7); /* Цвет фона и значение прозрачности */
  position: absolute; /* Абсолютное позиционирование */
  left: 0; right: 0; top: 0; bottom: 0; /* Отступы от краев браузера */
  }
.404 {
  margin-top: 100px;
  text-align: center; /* Выравнивание текста по центру */
  font-size: 10em;
  color: #fcf9f9;
  position: relative; /* Относительное позиционирование */
  z-index: 2; /* Порядок наложения элемента по высоте */
  }
.notfound {
  text-align: center;
  color: #fff;
  font-size: 2em;
  position: relative; /* Относительное позиционирование */
  z-index: 2; /* Порядок наложения элемента по слоям в глубину */
  }
.notfound a {
  color: #fff;
  font-size: 0.8em;
  }
.notfound a:hover {
  color: yellow;
  text-decoration: none;
  }
</style>
</head>
<body>
<div class="over"></div>
<div class="404">404</div>
<div class="notfound">страница не найдена<br>
<a href="#"> перейти на главную страницу..</a>
</div>
</body>
</html>

Если Вы планируете заниматься созданием сайтов на заказ, то разобраться во всех тонкостях верстки, используя HTML5 и CSS3, Вам поможет мой видеокурс.

  • Создано 05.10.2017 01:11:33


  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
Источник

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

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

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

http://site.ru/asdfjkl;

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



редирект 404 1
Ошибка 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 2
СберМаркет предлагает познать мудрость котов и цены на сайте



редирект 404 3
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) Нажмите Установить → Активировать:



    редирект 404 4

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

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



    редирект 404 5

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



    редирект 404 6

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

  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:



    редирект 404 7

Google Search Console

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

  1. 1.

  2. 2.

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

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

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

Источник

Почему любому сайту нужна страница 404

Приемы создания страницы и лучшие примеры от сайтов на Тильде и в вебе

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

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

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

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

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

Кажется, что можно и обойтись без собственного дизайна страницы ошибки — что в этом такого?

На самом деле страница 404 нужна всем, и вот почему:

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

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

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

www.cosowinerestaurant.com

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

Приемы создания страницы 404: о чем стоит помнить

Объяснить посетителю, что происходит.

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

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

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

Вернуть пользователя на сайт.

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

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

Лучший способ сделать так, чтобы пользователь не попал на страницу 404 — постоянно проверять «битые ссылки» на сайте. Если раз в месяц проверять потерянные статьи, видео, картинки и так далее, ваши пользователи будут все меньше попадать на страницу 404.

У Google и Яндекс есть бесплатные сервисы для веб-мастеров, которые помогают найти неработающие ссылки.

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

Создайте новую страницу сайта на Тильде.

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

Перейдите в «Настройки сайта > Еще > 404 страница». Выберите из списка страницу, которую вы создали и сохраните.

Важно:

  • Не задавайте адрес /404 — будет появляться стандартная ошибка Тильды
  • Чтобы 404 заработала, вам нужно переопубликовать все страницы сайта

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

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

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

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

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

Как должна выглядеть моя страница 404?

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

Примеры классных страниц 404 на Тильде

Текст: Варя Гурова
Иллюстрации, дизайн и верстка: Юлия Засс

Если материал вам понравился, расскажите о нем друзьям. Спасибо!

Источник

Закрытие

7

×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

⯈

Статья сборника Как установить графический редактор GIMP

Устанавливаем графический редактор GIMP

  1. Выбор графического редактора
  2. Устанавливаем программу GIMP
  3. Устанавливаем Руководство пользователя

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

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

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

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

Для тех же, кто хочет заниматься дизайном на платном Adobe Photoshop (фотошоп), здесь также упомянут и такой вариант, основанный на использовании продления льготного бесплатного периода фотошопа на неопределенное время…

    Cайт на практическом примере

    Текущее состояние создаваемого сайта

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

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

    • Предыдующая статья: Обработка ошибок PHP и статуса 404 HTTP

    Лого sayt-sozdat.ru

    2019-11-12

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

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

    • Рекомендации по созданию страницы с ошибкой 404 Not found
    • Создаем каркас страницы и оформляем основное ее содержание
    • Перенаправляем запросы с ошибкой на страницу 404
    • Исходные файлы сайта

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

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

    скриншот 78

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

    • Необходимость поддержания единого стиля сайта. Дизайн страницы 404 не должен вызвать у пользователя ощущение, что он попал на какой-нибудь другой ресурс.
    • Страница 404 не должна выглядеть как обычная страница. Посетитель должен отчетливо понять, что ресурс, который он хотел увидеть, не найден. И что в основном содержании нет искомого контента.
    • В описании возникшей проблемы не следует отпугивать посетителей излишней технической терминологией или какой-либо другой специфической информацией о причинах этой ошибки. Необходимо постараться кратко, простыми словами объяснить суть проблемы.
    • Для придания большей индивидуальности при оформлении страницы желательно текст сопроводить каким-либо подходящим к этому случаю графическим изображением.
    • Для того, чтобы попытаться удержать пользователя на сайте, желательно предоставить ему возможность в один клик перейти на другие доступные разделы или популярные страницы, которые могут его заинтересовать. Хорошим решением также будет, если позволить ему через поиск по сайту найти нужный контент. Ведь попав сюда, он, вероятно, что-то искал. И нужно помочь ему это сделать. При этом обязательным условием является наличие ссылки на главную страницу сайта.
    • Не лишним будет предложить пользователю проверить написание ссылки в случае, если он вводил URL искомой страницы в адресной строке браузера самостоятельно. Вполне возможно, что он допустил ошибку. И лучше будет, если он попытается исправить ее не покидая сайт в поисках нужной информации.
    • И конечно, содержание страницы должно показывать любезность к посетителю. Чтобы он смог почувствовать желание и готовность владельца ресурса (администратора сайта) помочь ему в дальнейшем поиске и использовании контента сайта.

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

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

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

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

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

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

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

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

    kak-sdelat-sobstvennuyu-stranicu-404_1

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

    А далее следует создать файл block_404.php, подключаемый инструкцией require_once «blocks/block_404.php»;?> в строке 39 (рис.1), в котором будет размещаться основное содержание страницы.

    1. class=«error-empty»>

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

  • Ошибка 404

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

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

  • В любом случае для поиска нужной информации вы можете использовать любые доступные разделы через меню сайта или href=»/»>Главную страницу. Либо воспользоваться поиском по сайту.

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

  • Ключевое слово / фраза / URL страницы:

  • class=«ya-site-form ya-site-form_inited_no» onclick=«return {‘action’:’https://avtobezugona.ru/poisk.html’,’arrow’:false,’bg’:’transparent’,’fontsize’:16,’fg’:’#000000′,’language’:’ru’,’logo’:’rb’,’publicname’:’Введите запрос’,’suggest’:true,’target’:’_self’,’tld’:’ru’,’type’:2,’usebigdictionary’:true,’searchid’:2301097,’input_fg’:’#000066′,’input_bg’:’#fdfadc’,’input_fontStyle’:’normal’,’input_fontWeight’:’normal’,’input_placeholder’:’Введите запрос’,’input_placeholderColor’:’#5f5f5f’,’input_borderColor’:’#eaeaea’}»>

  • action=«https://yandex.ru/search/site/» method=«get» target=«_self» accept-charset=«utf-8»>

  • type=«hidden» name=«searchid» value=«2301097»/>

  • type=«hidden» name=«l10n» value=«ru»/>

  • type=«hidden» name=«reqenc» value=«»/>

  • type=«search» name=«text» value=«» placeholder=«Введите запрос»/>

  • type=«submit» value=«Найти»/>

    • Рис.2 Блок основного содержания в файле «block_404.php»

    Где в качестве элемента поиска применен тот же блок (поз.11÷26), который ранее рассматривался при организации поиска на сайте. Более подробно об этом можно посмотреть в соответствующем разделе.

    Кроме того здесь предусмотрено использование графического изображения src=«/images/page_404/page_404.png» alt=«Страница 404»> (поз.3). Поэтому необходимо также будет подобрать подходящую по теме готовую картинку или составить из каких-либо заготовок свою композицию. О том как это сделать можно посмотреть здесь.

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

    Полученная картинка с фотостока

    Рис.3 Полученная картинка с фотостока

    И с помощью графического редактора дополним ее некоторыми подходящими по смыслу элементами, как показано ниже.

    Изображение по теме ошибки 404

    Рис.4 Изображение по теме ошибки 404

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

    1. /*——Страница 404——*/

    2. .error-block {

    3. width:95%;

    4. margin:0 auto 0 auto;

    5. position:relative;

    6. }

    7. .error-empty {

    8. min-height:1.875em;

    9. }

    10. .error-text {

    11. display:block;

    12. padding-right:0;

    13. }

    14. .error-img {

    15. float:left;

    16. width:30%;

    17. display:block;

    18. padding:0 1em .5em 0;

    19. }

    20. .error-img img{

    21. width:100%;

    22. }

    23. .error-text h1{

    24. font-size:1.5625em;

    25. font-style:normal;

    26. font-weight:normal;

    27. color:#006;

    28. font-family:’Comfortaa’, cursive;

    29. text-shadow:1px 1px 0px #eee, 2px 2px 2px #222;

    30. text-align:center;

    31. margin-bottom:.5em;

    32. }

    33. .error-text p{

    34. text-indent:1em;

    35. color:#006;

    36. padding-bottom:.25em;

    37. font-size:0.9375em;

    38. }

    39. .error-text hr{

    40. height:.0625em;

    41. background:#bd072e;

    42. margin:1em 0 1em 0;

    43. box-shadow:0 0 .0625em 0 #bd072e;

    44. }

    45. @media only screen and (min-width: 600px) {

    46. .error-text{

    47. width:60%;

    48. display:table-cell;

    49. vertical-align:middle;

    50. }

    51. .error-img{

    52. width:40%;

    53. display:table-cell;

    54. float:none;

    55. vertical-align:middle;

    56. padding:0 2em .5em 0;

    57. }

    58. .error-text p{

    59. font-size:1em;

    60. }

    61. }

    62. @media only screen and (min-width: 800px) {

    63. .error-text{

    64. width:65%;

    65. }

    66. .error-img{

    67. width:35%;

    68. padding:0 3em .5em 0;

    69. }

    70. }

    71. @media only screen and (min-width: 1000px) {

    72. .error-block{

    73. width:83.33%;

    74. }

    75. }

    76. @media only screen and (min-width: 1280px) {

    77. .error-text p{

    78. font-size:1.0625em;

    79. }

    80. }

    81. @media only screen and (min-width: 1500px) {

    82. .error-text p{

    83. font-size:1.125em;

    84. }

    85. }

    86. @media only screen and (min-width: 1700px) {

    87. .error-text{

    88. width:70%;

    89. }

    90. .error-img{

    91. width:30%;

    92. }

    93. .error-text p{

    94. font-size:1.1875em;

    95. }

    96. }

    Рис.5 CSS-код блока основного содержания

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

    А для адаптации страницы для разного разрешения, чтобы она выглядела надлежащим образом на всю ширину экрана во всем заданном диапазоне от 320px до 1920px, применено несколько медиа-запросов: для разрешения более 600px, 800px, 1000px, 1280px, 1500px и 1700px (поз.45÷96).

    В приведенной таблице показана сквозная нумерация строк кода. Что касается позиций в каскадной таблице стилей CSS, находящейся в файле «main.css» исходных файлов сайта, то при необходимости, его фрагменты можно найти по следующим номерам строк: для разрешения менее 600px (поз.980÷1024), более 600px (поз.1597÷1611), более 800px (поз.1661÷1667), более 1000px (поз.1728÷1730), более 1280px (поз.1784÷1786), более 1500px (поз.1827÷1829) и более 1700px (поз.1853÷1861).

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

    Вид созданной страницы 404

    Рис.6 Вид созданной страницы 404

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

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

    Рис.6 Вид страницы при малом разрешении экрана

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

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

    Перенаправляем запросы с ошибкой на страницу 404

    Так как на сайте применяется ЧПУ с перенаправлением запросов с помощью директив модуля MOD_REWRITE в файле .htaccess, то редирект на страницу 404 необходимо предусмотреть для двух вариантов:

    • Сервер выдает ошибку 404 (Not Found) в случае, если запрос не обрабатывается шаблоном правил RewriteRule модуля MOD_REWRITE и не найден соответствующий его адресу файл. В таких ситуациях редирект обеспечивается применением надлежащей директивы в файле .htaccess.
    • Запрос обработан правилом RewriteRule модуля MOD_REWRITE и перенаправлен в шаблон главной страницы в файл index.php. Но при дальнейшей его обработке не была обнаружена какая-либо существующая страница сайта. В этом случае редирект на страницу 404 выполняется средствами PHP.

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

    Ниже показан пример отображения в браузере технической страницы 404 при обнаружении сервером ошибки Not Found в запросе на одну из страниц сайта newsite.local, установленном на локальном веб-сервере Open Server. В котором в расширении html ошибочно указано htm.

    Ошибка 404 при неправильном расширении в URL

    Рис.7 Ошибка 404 при неправильном расширении в URL

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

    1. ErrorDocument 404 /page_404.php

    Рис.8 Редирект 404 в файле .htaccess

    В которой во второй части директивы ErrorDocument 404 выполняется перенаправление на нашу, созданную в предыдущей части статьи страницу 404 с адресом /page_404.php.

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

    Редирект на страницу 404 через файл .htaccess

    Рис.9 Редирект на страницу 404 через файл .htaccess

    Как видно, в данном случае через редирект в файле .htaccess мы попали на ранее созданную нами страницу 404.

    А теперь рассмотрим другой вариант, при котором при запросе на несуществующий ресурс сайта сервер не выдает ошибку Not Found, в случае, если он обрабатывается правилом RewriteRule модуля MOD_REWRITE и перенаправляется в файл index.php.

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

    Ниже показан пример запроса на страницу «Контакты», в адресе которого допущена ошибка /kontbakty.html (лишний символ b).

    Ошибка при неправильном адресе страницы

    Рис.10 Ошибка при неправильном адресе страницы

    Здесь видно, что в этом случае сервер не выдает ошибку 404, так как запрос обрабатывается файлом index.php. Однако, динамическая страница с несуществующим адресом не смогла быть сформирована. И в области основного содержания станицы вместо контента отображается ошибка PHP (не найден соответствующий запросу файл, указанный в инструкции include_once, в строке 126 файла index.php).

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

    Ниже показан PHP-код обработчика запросов, расположенный в файле index.php, в котором в случае отсутствия в базе данных заданной страницы, происходит нужный редирект.

    kak-sdelat-sobstvennuyu-stranicu-404_2

    Рис.11 PHP-код обработчика запросов с редиректом на страницу 404

    В данном коде проверка на наличие в базе данных записи, соответствующей заданной странице (поз.11÷23), выполняется с помощью вызова пользовательской функции getLineThreeColumnThreeСondition() (поз.18). Которая извлекает запись исходя из всех трех значений GET-параметров, сохраненных в массиве $get_array (поз.3÷9) и определяющих URL страницы: section ($get_array[2]), rubric ($get_array[1]) и page ($get_array[0]).

    И в случае, если такой станицы не существует, то с помощью отправки HTTP заголовка header() (поз.21) производится редирект на страницу 404 с прекращением выполнения текущего скрипта exit (поз.22).

    Если же заданный URL указан правильно, и такая страница существует, то выполняются дальнейшие действия по получению данных для формирования динамической страницы (поз.25÷53).

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

    Редирект при неправильном адресе страницы

    Рис.12 Редирект при неправильном адресе страницы

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

    В следующей статье мы сделаем то же самое, но уже для другого вида ошибок, а именно: ошибок PHP.

    Исходные файлы сайта

    Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

    • Файлы каталога www
    • Таблицы базы данных MySQL

    Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

    Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

    С уважением,

    • Следующая сатья: Выводим страницу ошибки 500

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

    Буду Вам за это очень признателен!

    Источник

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

    Уровень сложности
    Простой

    Время на прочтение
    6 мин

    Количество просмотров 3.4K

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

    Стандартный вид Ошибки 404 в Nginx

    Стандартный вид Ошибки 404 в Nginx

    Для упрощения процесса, я создал небольшую утилиту (прямая ссылка на проект в GitHub), по сути Node.js скрипт, которая позволяет создавать статические страницы ошибок в собственном дизайне и со своими текстовыми сообщениями. По умолчанию, утилита содержит только один шаблон в минималистичном дизайне (с поддержкой доступности и адаптивности, на сколько это возможно в такой простой странице). Но если вас не устраивает такой дизайн, то вы можете с легкостью изменить его, путем создания собственного: со своими стилями, шрифтами, изображениями и текстами.

    Пример страницы для Ошибки 404

    Пример страницы для Ошибки 404

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

    Для упрощения интеграции, утилита автоматически создает сниппет с конфигурацией веб сервера, который легко может быть добавлен в конфигурацию вашего веб сервера. На текущий момент сниппет создается только для Nginx. Другие виды серверов будут добавлены позже (в качестве альтернативы, вы можете создать Pull Request с таким улучшениями, либо оформить Feature Request).

    Использование

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

    $ git clone git@github.com:sapachev/error-pages.git
…
$ npm install --production
…
$ npm run build
…
INFO: Start building process
INFO: Flush build directory '/home/error-pages/dist'
INFO: Compile pages from source data:
 • /home/error-pages/dist/400.html
 • /home/error-pages/dist/401.html
 • /home/error-pages/dist/403.html
 • /home/error-pages/dist/404.html
 • /home/error-pages/dist/410.html
 • /home/error-pages/dist/500.html
 • /home/error-pages/dist/502.html
 • /home/error-pages/dist/503.html
 • /home/error-pages/dist/504.html
INFO: Compile web servers config snippets from source data:
 • /home/error-pages/dist/nginx-error-pages.conf
INFO: Build Tailwind CSS styles
INFO: Run 'INPUT="/home/error-pages/themes/minimalistic/@assets/css/main.twnd.css" OUTPUT="/home/error-pages/dist/@assets/css/main.css" npm run build:tailwind' command
INFO: Tailwind CSS styles were built
INFO: Copying assets to '/home/error-pages/dist/@assets' directory
INFO: Building process was completed in 1.727s

    Продвинутое использование

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

    Основная конфигурация утилиты хранится в файле config.json в корневой папке, которую можно менять в соответствии со своими требованиями:

    {
  "tailwind": true,
  "theme": "minimalistic",
  "locale": "en"
}

    Шаблоны

    Все шаблоны хранятся в папке themes, где стандартной темой является minimalistic, которую можно изменить или добавить новую. Каких‑то особых требований к шаблонам страниц нет: каждый шаблон является обыкновенным HTML документом, с внедренными переменными, на месте которых будут текстовки из файлов локализации. Для обработки внедренных переменных используется библиотека mustache.js. Таким образом, если нужно реализовать какую‑то особенную логику в своих шаблонах, то вы можете ознакомиться с документацией этой библиотеки для определения имеющихся возможностей шаблонизации.

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

    Стили

    Стилизация шаблонов базируется на фреймворке Tailwind CSS. С помощью этого фреймворка, можно быстро описывать стили страниц без необходимости писать отдельный CSS код. Точкой входа для стилей Tailwind должен быть файл themes/<name>/@assets/css/main.twnd.css. Из него в дальнейшем будет создан файл main.css, который содержит скомпилированные и минифицированные стили. В дополнение, можно настроить Tailwind с помощью создания кастомной конфигурации, расположенной в файле theme.tailwind.config.js в корне папки с темой, и описать в ней любые опции Tailwind. Полный список опций Tailwind доступен в документации самого Tailwind.

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

    Текстовые сообщения и Локализация

    Все текстовые сообщения хранятся в JSON файлах, разделенных по признаку языка, и расположены в папке src. Каждая страница создается из соответствующего ей файла локализации вида <Код HTTP>.json (<Код HTTP> – это число, соответствующее коду ошибки HTTP). Таким образом, если нужно создать страницу для кода, который еще не описан, то просто создайте соответствующий JSON файл, содержащий описание этого статуса в соответствующих свойствах.

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

    Для локализации страниц, просто создайте новую папку в директории src, содержащую JSON файлы с текстами страниц. Создавая JSON файлы, вы можете описать любой набор HTTP кодов (например, только для 400-ых ошибок) – просто следуйте конвенции именования, и не забывайте выделять общие тексты в файл common.json.

    Конфигурации сервера

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

    Для использования полученных страниц, остается только скопировать на сервер все файлы из папки dist и включить использование сниппета в уже существующей конфигурации сервера. В соответствии с шаблоном сниппета, все страницы должны быть расположены в папке /usr/share/nginx/html/error-pages. В случае если настройки в снипетта не подходят, то вы можете отредактировать шаблон сниппета в папке snippets. Так же как и для тем оформления, шаблоны конфигураций поддерживают mustache.js, тем позволяя реализовать в шаблоне любую логику (списки, условия и т. д.).

    Сам по себе конфиг, я рекомендую располагать в папке /etc/nginx/snippets/, а для его подключения использовать строчку конфигурации: include /etc/nginx/snippets/nginx-error-pages.conf;. Разумеется, это не более чем рекомендация, т.к. в реальности всё может быть иначе или сложнее.

    Ниже приведен простой пример конфигурации веб‑сервера с включенным в нее сниппетом кастомных ошибок:

    server {
    server_name example.com;
    access_log /var/log/nginx/example.access.log;

    include /etc/nginx/snippets/nginx-error-pages.conf;

    location / {
        root /data/www;
    }
}

    Демо

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

    • 400 Bad Request

    • 401 Unauthorized

    • 403 Forbidden

    • 404 Not Found

    • 410 Gone

    • 500 Internal Server Error

    • 502 Bad Gateway

    • 503 Service Unavailable

    • 504 Gateway Timeout

    Сообщение об ошибках и запрос новых функций

    Код утилиты нельзя назвать каким‑то сложным, однако, несмотря на этот факт, все значимые части покрыты юнит‑тестами. Впрочем, это не является гарантией отсутствия каких‑либо ошибок, поэтому если вы столкнетесь с какими‑то проблемами, то, пожалуйста, сообщите мне о них, через создание Issue в репозитории проекта: https://github.com/sapachev/error‑pages/issues

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

    Участие в разработке

    Проект открыт для всех желающих, и если у вас есть идеи, а главное желание и возможности их реализовать, то с радостью рассмотрю их в виде Pull Request. Со своей стороны готов предоставить вам поддержку в реализации вашей задумки. Не стесняйтесь спрашивать меня о коде, и возможных решениях вашей идеи.

    Источник

    Возможно, вам также будет интересно:

  • Как вычислить ошибку второго рода
  • Как вычислить ошибка среднего в excel
  • Как вычислить относительную ошибку формула
  • Как вычислить относительную ошибку результата
  • Как вычислить относительную ошибку опыта

    • Понравилась статья? Поделить с друзьями:
    0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии