Как кастомизировать стандартные страницы ошибок
Уровень сложности
Простой
Время на прочтение
6 мин
Количество просмотров 3.4K
В процессе настройки нового веб‑сервера, вы можете захотеть чтобы страницы ошибок отображались в красивом виде, вместо стандартного. Также иногда страницы ошибок должны быть в том же оформлении, что и основной сайт и/или предоставлять пользователям какую‑то дополнительную информацию, такую как, например, контакты, альтернативные способы решения возникшей проблемы или что‑то иное.
Для упрощения процесса, я создал небольшую утилиту (прямая ссылка на проект в GitHub), по сути Node.js скрипт, которая позволяет создавать статические страницы ошибок в собственном дизайне и со своими текстовыми сообщениями. По умолчанию, утилита содержит только один шаблон в минималистичном дизайне (с поддержкой доступности и адаптивности, на сколько это возможно в такой простой странице). Но если вас не устраивает такой дизайн, то вы можете с легкостью изменить его, путем создания собственного: со своими стилями, шрифтами, изображениями и текстами.
Для возможности создания страниц на других языка, утилита позволяет использовать собственные языковые пакеты, включающие свои кастомные текстовые сообщения.
Для упрощения интеграции, утилита автоматически создает сниппет с конфигурацией веб сервера, который легко может быть добавлен в конфигурацию вашего веб сервера. На текущий момент сниппет создается только для 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. Со своей стороны готов предоставить вам поддержку в реализации вашей задумки. Не стесняйтесь спрашивать меня о коде, и возможных решениях вашей идеи.
Посетители сайта видят 404 ошибку, если страница, на которую они пытаются перейти, не существует или по какой-то причине сервер не может её найти. В статье рассмотрим, что это за ошибка и какое влияние она оказывает на поведенческие факторы пользователей и SEO. А также разберем, как настроить редирект 404 ошибки через .htaccess.
Ошибка 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.
Создайте страницу одним из следующих способов:
-
Если вы знаете HTML и CSS, напишите код страницы самостоятельно и загрузите файл с названием 404.html в корневую папку сайта.
-
Если навыков верстки нет, в интернете можно найти бесплатные шаблоны со страницами ошибки. Скачайте файл и добавьте его в корневую папку.
-
Если вы используете WordPress, воспользуйтесь плагином 404page — your smart custom 404 error page по инструкции ниже. Обратите внимание! Если вы воспользовались плагином, вам не нужно прописывать путь к файлу в .htaccess.
Как настроить страницу в плагине WordPress1) Откройте админку вашего сайта в WordPress.
2) Перейдите в раздел «Плагины» и нажмите Добавить новый.
3) В строке поиска введите название 404page — your smart custom 404 error page.
4) Нажмите Установить → Активировать:
5) Перейдите в раздел Внешний вид → 404 Error Page.
6) Выберите в списке Sample Page, чтобы сменить стандартную страницу ошибки, и нажмите Edit Page:
7) Создайте страницу в открывшемся визуальном редакторе и нажмите Обновить:
Готово! После обновления страница будет использоваться автоматически.
-
- 2.
Откройте конфигурационный файл .htaccess в корневой папке вашего сайта и добавьте в него строку:
ErrorDocument 404 https://site.ru/404.htmlГде вместо site.ru — домен вашего сайта.
- 3.
Сохраните изменения.
Готово! Теперь при возникновении 404 ошибки, в браузере пользователей будет открываться созданная вами кастомная страница.
Также рекомендуется закрыть служебную страницу 404 от индексации, чтобы она не возникала в поисковой выдаче вместе с остальными страницами сайта. Для этого откройте файл robots.txt в корневой папке сайта, добавьте соответствующую команду и сохраните изменения:
Редирект с 404 на главную (не рекомендуется)
Чтобы не создавать отдельную страницу ошибки 404, некоторые веб-разработчики прописывают в .htaccess редирект на главную страницу сайта. Это нежелательно делать с точки зрения SEO-оптимизации.
Также редирект на главную страницу может ввести пользователей в заблуждение. Представьте, что вместо искомой страницы у посетителя открывается главный экран сайта. Будет непонятно, почему это произошло, ведь пользователь искал какой-то конкретный контент и не узнает, что не сможет найти его.
Рекомендуется использовать специальные страницы для ошибки 404.
Проверка редиректа 404
Проверить, корректно ли все настроено можно в Яндекс.Вебмастер и Google Search Console.
Яндекс.Вебмастер
Если вы используете его впервые, укажите домен вашего сайта и пройдите проверку валидации, добавив файл в корневую папку сайта. Это займет несколько минут.
- 1.
- 2.
Перейдите в раздел Инструменты → Проверка ответа сервера.
- 3.
Введите название страницы ошибки и нажмите Проверить.
- 4.
В коде статуса HTTP должно отображаться 404 Not Found:
Google Search Console
Если вы используете этот инструмент впервые, укажите свой домен и пройдите валидацию, добавив TXT-запись/загрузив файл в корневую папку сайта или с помощью других способов.
- 1.
- 2.
Перейдите в раздел «Покрытие» в меню справа. Здесь будет отображаться информация о страницах ошибок.
На сайте небольшого объема можно самостоятельно следить за наличием ошибок и постараться не допускать того, чтобы на нём было много страниц, утративших актуальность. Своевременно настраивайте 301 редиректы, когда статья в справке, страница или товар теряют актуальность.
Если сайт многораздельный и многостраничный, вручную мониторить его будет сложно. Рекомендуется использовать для поиска страниц ошибки 404 онлайн-сервисы (Serpstat, BadLincs.ru и другие). Также можно воспользоваться плагинами в CMS. Замените ссылки и настройте редиректы. А также создайте понятную красочную страницу ошибки с объяснением причины, ссылками на основные разделы и строкой поиска.
Ошибка 404, либо Error 404 Not Found — ошибка, которая появляется, если браузеру не удалось обнаружить на сервере указанный URL.
Сообщение об ошибке 404
Что означает ответ 404
Error 404 Not Found отображается по-разному: «HTTP 404 не найден», «Ошибка 404 Not Found», «404 Страница не найдена». Смысл надписи всегда остаётся тем же: страница отсутствует либо просто не работает. Not Found в переводе означает «не найдено».
Ошибка 404 — классический код ответа по протоколу HTTP. Он свидетельствует, что связь с сервером установлена, но информации по заданному запросу нет.
Однако если просто ввести в поисковую строку произвольный набор символов, то браузер не покажет ошибку 404 Not Found — появится сообщение, что установить соединение с конкретным сервером невозможно.
Разберёмся в техническом формировании ответа Error 404 Not Found.
Техническая сторона вопроса. При связи по HTTP браузер запрашивает указанный URL и ждёт цифрового ответа. То есть любой запрос пользователя направляется на сервер размещения искомого сайта. Когда браузеру удаётся связаться с сервером, он получает кодированный ответ. Если запрос корректный и страница найдена, отправляется ответ с кодом 200 OK, что соответствует благополучной загрузке. При отсутствии страницы отправляется ответ об ошибке.
Что значит код «404». В ответе 404 первая четвёрка указывает на то, что запрос был чрезмерно длительным или в самом адресе была ошибка. Ноль предполагает синтаксическую неточность. Завершающая цифра кода отображает конкретную причину ошибки — «4» означает отсутствие данной ссылки.
Какие ещё ошибки бывают. Ошибку 404 не нужно путать с другими ответами, которые указывают на невозможность связи с сервером. Например, ошибка 403 сообщает, что доступ к URL ограничен, а ответ «Сервер не найден» свидетельствует, что браузер не смог обнаружить место размещения сайта.
Google на 404 странице сообщает о возможных причинах ошибки
Причины ошибки
Причины, по которым HTTP возвращает ответ 404 Not Found:
- Неверный адрес. К примеру, при ручном наборе пользователь допустил опечатку в URL либо ссылка ведёт на несуществующую страницу.
- Битая ссылка. Это нерабочий URL, который никуда не ведёт. Данный вариант иногда возникает при внутренней перелинковке. К примеру, раньше страница существовала, а потом её удалили и забыли убрать ссылку.
- Удалённая страница. Когда пользователь попытается перейти на удалённую с сервера страницу, он также увидит ошибку 404. Ссылка для перехода может сохраниться в браузерных закладках или на сторонних ресурсах.
- Неправильный редирект на страницу с изменённым адресом. Допустим, в процессе редизайна URL изменили, но оставили без внимания связанные ссылки.
- Неполадки на сервере. Это самый редкий вариант.
В большинстве ситуаций ошибка 404 отображается, когда не удаётся обнаружить нужную страницу на доступном сервере.
Причины отсутствия страницы на сайте бывают разными
Возможные последствия для сайта
Нужно ли считать 404 ошибку опасной для сайтов? Кажется, что нет ничего плохого в том, что пользователь не смог открыть одну веб-страницу. Однако если такая ситуация будет повторяться регулярно, это чревато оттоком аудитории. Одни пользователи решат, что сайт вовсе не существует. Другие подумают, что лучше не заходить на сайт, который работает с ошибками. Третьи будут игнорировать ресурс, на котором не смогли получить обещанную информацию.
Поисковые системы относятся к Not Found более лояльно. Например, Google отмечает, что 404 страницы не влияют на рейтинг. Но если при индексации роботы будут находить все больше ошибочных страниц, вряд ли это приведёт к более высокому ранжированию.
Если вы хотите улучшить взаимодействие с посетителями, важно найти и исправить все ошибки 404 на сайте.
Как выявить ошибку
На небольшом ресурсе легко проверить работоспособность ссылок вручную. Но если на сайте сотни и тысячи страниц, без дополнительного софта не обойтись. Есть немало сервисов и программ, позволяющих находить битые ссылки. Рассмотрим некоторые из них.
Search Console Google
Консоль поиска Google позволяет находить страницы с ошибкой 404 за несколько кликов:
- Войдите в учётную запись Google и перейдите в Search Console.
- Откройте раздел «Ошибки сканирования» → «Диагностика».
- Кликните на «Not Found».
Чтобы получить список страниц с ошибками, подтвердите права на ресурс — добавьте проверочную запись TXT в записи DNS регистратора домена. Такая запись не повлияет на работу сайта. Подробнее о процедуре подтверждения, читайте в справке Google.
Для использования Search Console Google нужно подтвердить свои права на сайт
Яндекс Вебмастер
Сервис для вебмастеров от Яндекса поможет быстро найти все ошибки 404:
- Откройте Вебмастер после авторизации в Яндекс-аккаунте.
- Выберите «Индексирование» → «Доступные для поиска страницы» → «Исключённые страницы».
- В выданном списке выберите фильтр «Ошибка HTTP: 404».
Чтобы использовать Яндекс.Вебмастер, также нужно подтвердить право владения сайтом — добавить метатег в HTML-код главной страницы.
Для входа в Вебмастер авторизуйтесь в Яндексе
Screaming Frog
Для начала загрузите и установите программу на компьютер. После запуска добавьте URL проверяемого сайта и начните поиск проблем. Неработающие ссылки можно искать даже в бесплатной версии.
Инструмент SEO-паук в Screaming Frog помогает найти технические неисправности сайта
SiteAnalyzer
Эта бесплатная десктопная программа позволяет обнаружить технические погрешности на сайте. SiteAnalyzer быстро отыщет нерабочие и несуществующие ссылки.
SiteAnalyzer бесплатно найдёт неработающие URL
Как исправить ошибку Not Found
Выбор конкретного решения зависит от причины ошибки:
- Ссылка ведёт в никуда из-за неверного URL. Для решения проблемы замените ошибочную ссылку на правильный адрес, чтобы сервер отдавал код 200 OK.
- Битая ссылка. Подобная ситуация не редкость при внутренней перелинковке страниц. К примеру, ссылка есть, а саму страницу давно удалили. Решений два: удалить ссылку или заменить её на другую.
Удалять и менять ссылки вручную удобно только на небольших сайтах. Исправление ошибок на крупных порталах лучше автоматизировать. Например, с помощью специальных плагинов для внутренней перелинковки (Terms Description, Dagon Design Sitemap Generator) и для автоматического формирования адресов страниц (Cyr-To-Lat).
Чтобы ошибки 404 появлялись как можно реже, достаточно соблюдать простые рекомендации:
- Не присваивайте сложные адреса основным разделам сайта. Это снизит число ошибок, связанных с опечатками в URL.
- Не меняйте адреса страниц слишком часто. Это неудобно для пользователей и вводит в заблуждение поисковых роботов.
- Размещайте сайт на надёжном сервере. Это предотвратит ошибки, возникающие из-за неработоспособности сервера.
Мы разобрались, как найти и исправить ошибки Not Found внутри сайта. Но неработающая ссылка может быть расположена и на стороннем ресурсе. Допустим, когда-то на другом сайте разместили рекламную публикацию со ссылкой на определённую страницу. Спустя какое-то время страницу удалили. В этом случае появится ошибка 404. Устранить её можно, связавшись с администрацией ссылающегося сайта. Если же удалить/исправить ссылку нельзя, постарайтесь использовать ошибку с выгодой.
Как сделать страницу 404 полезной
Грамотно оформленная страница с ошибкой Error 404 Not Found — действенный инструмент конвертации посетителей. Ограничений по использованию страницы с ошибкой 404 нет. При этом практически все CMS позволяют настраивать дизайн этой страницы.
Что публиковать на странице 404:
- меню с кликабельными ссылками;
- ссылку на главную страницу;
- анонс последних публикаций;
- контакты для обратной связи.
При оформлении страницы-ошибки желательно опираться на рекомендации поисковиков:
- Яндекс настоятельно рекомендует, чтобы страница контрастировала с основным содержанием сайта — иные цвета, другие графические приёмы либо их отсутствие. Необходимо чётко и понятно объяснить пользователю, что запрошенной страницы не существует и предложить другое решение.
- Google советует придерживаться единого стиля оформления. Но также рекомендует понятно рассказать об ошибке и предложить полезные материалы.
Главное — по возможности отказаться от стандартной страницы 404. Подумайте, как привлечь внимание пользователя. Расскажите ему об отсутствии искомой страницы и предложите взамен что-то полезное или интересное.
Примеры оформления страниц 404
Designzillas
Мультяшная страница креативной студии привлекает внимание и её хочется досмотреть до конца. Если прокрутить страницу, можно увидеть, как из яйца вылупится дракон. При этом на странице есть ссылки на все основные разделы сайта.
Меню на сайте Designzillas есть и на 404 странице
Domenart Studio
Веб-студия «Домен АРТ» использует красочную страницу 404, оформленную в единой стилистике ресурса. Заблудившимся пользователям предлагают попробовать ещё раз ввести адрес или перейти в нужный раздел.
Контакты, поиск, меню — и всё это на 404 странице Domenart Studio
E-co
«Эко Пауэр», дистрибьютор производителя источников питания, демонстрирует короткое замыкание как символ ошибки. Посетителям предлагают перейти на главную.
Ошибка 404 «Эко Пауэр» выглядит как страница входа
Дом со всем
Компания «Дом со всем», занимающаяся бурением скважин, разместила на странице 404 свои контакты и перечень услуг. Со страницы можно перейти в любой раздел сайта или заказать обратный звонок. С таким наполнением посетителю не нужно искать дополнительную информацию где-то ещё.
Компания «Дом со всем» предлагает заказать обратный звонок
Kualo
Страница 404 на веб-хостинге Kualo может заставить пользователя забыть, зачем он сюда пришёл. Увлекательная игра притягивает внимание. В конце игры посетителю предлагают посмотреть сайт хостинга.
На странице Kualo можно просто поиграть и заработать скидки
Рано или поздно с ошибкой 404 сталкивается большинство сайтов. При регулярной проверке можно своевременно исправить неработающие ссылки, чтобы в ответ пользователи получали код 200 OK. Но для крупного ресурса лучше настроить оригинальную страницу, которая будет отображаться при появлении ошибки Not Found и подскажет посетителям, что делать дальше.
Главные мысли
Обычно при создании сайта администратор практически не уделяет внимания изменению системной страницы «Ошибки 404», но если ее правильно оформить, вы можете сохранить ваших посетителей у вас на сайте.
Сегодня мы предоставим вам решение, как изменить страницу ошибки 404 на свою и предоставим подборку готовых примеров данной страницы.
Как изменить страницу ошибки 404 на свою ?
1. Откройте файловый менеджер вашего сайта, обычно доступен по адресу: ваш-сайт/panel/?a=fm.
2. Извлеките папку с файлами 404.htm и 404.jpg / 404.png.
3. Далее в корень сайта без перехода в другие папки загрузить файл с названием 404.htm, если к странице имеются дополнительные файл js или файл изображения, загрузить так же в корень.
Примеры готовых страниц 404
Чтобы вы долго не искали и не создавали сами страницу ошибки, мы подготовили для вас подборку с 10 готовых примеров. Вы сможете их загрузить на компьютер, распаковать и загрузить готовые файлы себе в файловый менеджер.
Скачать
Скачать
Скачать
Скачать
Скачать
Скачать
Скачать
Скачать
Скачать
Скачать
Мы верим, что вам эта подборка пригодится и вы будете использовать готовые примеры страниц ошибки 404.
Примечание! Важно не переименовывать другой файл в файловом менеджере на 404.htm если у вас такой файл уже был на фтп, при переименовании будет сообщать, что такой файл уже есть и переименовать нельзя. Нужно именно загрузить выбрав файл на компьютере, тогда системный файл удалится и загрузится ваш.
- Почему возникает ошибка 404
- Как ошибка влияет на SEO-показатели сайта и что делать
- Настройка редиректа .htaccess на страницу с ошибкой 404
- Проверка редиректа 404
Читайте нашу статью, если хотите узнать, как настроить редирект 404-й ошибки через .htaccess.
Если сервер не может найти страницу, на которую хочет перейти посетитель, то в окне браузера у пользователя отобразится ошибка 404. Давайте разберемся, как ошибка влияет на поведение пользователей и SEО-показатели сайта, а также как и зачем делать редирект этой ошибки.
Redirect error 404 SMF
Почему возникает ошибка 404
Ошибка 404 (File not found) возникает в тех случаях, когда сервер не может найти запрашиваемую пользователем страницу. От этого не застрахован ни один сайт. Чаще всего ошибка возникает по следующим причинам:
- сайта или страницы больше не существует,
- сайт перенесли на новый адрес, но не настроили на него переадресацию со старой страницы,
- структура сайта изменилась и URL-адреса страниц стали неактуальными,
- пользователь ввел некорректный адрес страницы, например, 2domains.ru/asdfjkl:
Вне зависимости от причины ошибки срабатывает такой механизм: браузер пользователя запрашивает информацию у сервера, сервер не находит нужной страницы и возвращает ответ о том, что она не найдена. В результате у пользователя в браузере отображается “Not Found (404)”.
Как ошибка влияет на SEO-показатели сайта и что делать
В большинстве случаев наличие ошибок напрямую или косвенно может повлиять на SEO-показатели сайта. Рассмотрим эти показатели и как их можно улучшить.
Посещаемость
В том, что на сайте время от времени встречаются 404-е ошибки, нет ничего криминального. Описку в адресе хоть раз, но делал каждый пользователь интернета. Принимать меры стоит в том случае, если “error 404” встречается на сайте слишком часто. Если пользователи будут регулярно замечать проблемы, они почувствуют дискомфорт и могут перейти к конкуренту.
Даже если ресурс занимает топовые позиции, негативный опыт отталкивает потенциальных клиентов и влияет на снижение посещений в будущем. Поэтому важно следить, чтобы на сайте не было битых ссылок и несуществующих страниц. В этом помогут специальные онлайн-сервисы от Яндекс и Гугл. Если они найдут проблемы, приведите сайт в порядок: замените некорректные ссылки, настройте 301-й редирект со старых адресов на новые и внесите нужные настройки.
Лояльность
Вид и дизайн страницы с ошибкой также сильно влияют на репутацию сайта. Здорово, если страница будет красивой или шуточной — это вызовет позитивный отклик и повысит лояльность пользователей. Вот несколько примеров таких страниц:
Страница с ошибкой на сайте pikabu.ru
Страница с ошибкой на сайте www.idesign.com.mt
Помимо позитивного посыла, страничка также должна быть полезной и исчерпывающей. Хорошо, если вы добавите ссылку на главную страницу ресурса или поисковую строку по сайту. Не лишней будет и инструкция: объясните пользователю, почему он видит ошибку, что ему стоит сделать дальше и по какому каналу связаться с поддержкой. Примеры:
Страница с ошибкой на сайте helpscout.com
Страница с ошибкой на сайте flippingbook.com
Страница с ошибкой на сайте kayako.com
В популярных CMS (например WordPress, Joomla и Drupal) есть готовые страницы 404. Однако они могут контрастировать с общим дизайном сайта или быть не слишком информативными, что в очередной раз оттолкнет пользователя. Идеальный вариант — создать страничку с ошибкой конкретно под ваш сайт. Вы можете заказать её у разработчика или сделать самостоятельно, если имеете опыт в вёрстке и веб-дизайне.
Продвижение
Иногда при загрузке несуществующей страницы вместо реального кода 404 браузер получает в ответ от сервера код 200 (success). Такие случаи называют ложной ошибкой 404. Проблема в том, что из-за кода 200 Яндекс и Google считают, что страница есть и её нужно проиндексировать. Подробнее читайте в справке Google.
Индексация удаленных страниц негативно сказывается на SEO-продвижении и затрудняет видимость основного контента сайта. Если на вашем ресурсе есть несуществующие страницы, проверьте их реальный код с помощью онлайн-сервиса от Google. Если сервис покажет код 200, настройте редирект на страницы с ошибкой 404 для всех таких страниц.
Настройка редиректа .htaccess на страницу с ошибкой 404
Если у вас ещё нет готовой свёрстанной страницы 404, создайте её удобным вам способом:
- найдите бесплатные шаблоны страниц, выберите один из них и скачайте. Затем добавьте файл шаблона в корневой каталог сайта;
- создайте страницу самостоятельно с помощью HTML и CSS. Назовите файл страницы “404.html” и добавьте его в корневой каталог сайта;
- настройте один из плагинов (All 404 Redirect to Homepage & Broken images Redirection, 404 Page by SeedProd или 404 to 301), если у вас WordPress. Обратите внимание: в этом случае настраивать редирект .htaccess не нужно.
Как настраивается редирект:
1. В корневом каталоге сайта откройте конфигурационный файл .htaccess и добавьте в него следующую строку:
ErrorDocument 404 https://site.ru/404.htmlВместо site.ru укажите домен вашего сайта. Затем сохраните изменения.
Обратите внимание: не стоит настраивать редирект с 404 на главную страницу сайта — это может негативно сказаться с точки зрения SEO. Кроме того, такой редирект введёт посетителей в замешательство — им будет непонятно, почему вместо желаемого контента открывается стартовая страница.
2. Закройте служебную страницу 404 от индексации для лучшей SEО-оптимизации ресурса. Для этого в корневом каталоге откройте файл robots.txt, добавьте команду ниже и сохраните изменения:
Disallow: /404.htmlГотово, вы настроили редирект с помощью .htaccess.
Проверка редиректа 404
Проверить, всё ли верно настроено в .htaccess, вы можете с помощью Яндекс.Вебмастер или Google Search Console.
1. Перейдите в Яндекс.Вебмастер. Если вы ещё не зарегистрированы, укажите домен вашего сайта и добавьте файл в корневую папку сайта, чтобы пройти проверку валидации.
2. Откройте раздел Инструменты — Проверка ответа сервера:
3. Укажите адрес страницы ошибки и кликните Проверить. Если в коде статуса HTTP отображается 404 Not Found, значит всё настроено верно:
1. Перейдите в Google Search Console. Если вы ещё не зарегистрированы, введите ваш домен и добавьте TXT-запись (загрузите файл в корневую папку сайта), чтобы пройти валидацию.
2. В меню справа откройте раздел Покрытие. В информации о страницах ошибок вы должны увидеть аналогичный результат:
Рассмотрим, как настроить шаблон ошибки 404 в WordPress, чтобы создать полезную страницу, которая поможет пользователям сориентироваться на вашем сайте и улучшить поведенческие факторы.
Что такое ошибка 404 и почему важно правильно настроить страницу?
Ошибка 404 возникает, когда посетитель пытается получить доступ к странице, которая не существует. Многие склонны игнорировать эту страницу при использовании шаблонов WordPress и не задумываются о ее существовании. Тем не менее, если вы потратите время на создание удобной страницы 404, это поможет задержать пользователя на вашем сайте.
Интернет-адрес, ведущий на страницу с ошибкой 404, может оказаться просто неправильно набранным URL либо возникнуть со временем, если вы удалили проиндексированную страницу и забыли об этом. При выдаче кода 404 WordPress настроен на автоматический поиск файла 404.php. Базовый шаблон с этой ошибкой включен в некоторые темы WordPress. Если же этого файла нет, то будет показано системное сообщение, которое не несет полезной для пользователя информации.
Как создать страницу 404 ошибки, если ее нет в шаблоне — настройка
Не все темы WordPress имеют собственный файл шаблона ошибки 404. Если разработчик темы предусмотрел это, такой файл будет называться 404.php. WordPress автоматически использует эту страницу, когда возникает ошибка 404. Если в вашей теме нет этого файла, его можно создать самостоятельно.
- Первое, что нужно сделать, это сформировать настраиваемый шаблон, например, редактируя файл 404.php, скопированный из другой темы. Если вы редактируете свою тему напрямую, настоятельно рекомендуется сделать резервную копию темы WordPress.
- Файл ошибки 404 расположен по адресу: /wp-content/themes/имя-темы/404.php
- Страница ошибки примет стиль активной темы, поскольку она вызывает шапку
- И подвал текущей темы.
- Понадобится только отредактировать заголовок и сообщение на странице в соответствии с вашими конкретными потребностями.
- Для этого откройте файл шаблона ошибки 404 в редакторе кода и измените текст сообщения на свое усмотрение.
- Добавьте в шаблон строку поиска, если ее там нет. Затем сохраните файл и загрузите его в каталог темы установки WordPress.
Поскольку все темы различаются, нет никакой гарантии, что простое копирование файла шаблона 404.php будет работать. Чтобы сервер нашел страницу 404, добавьте следующую строку в файл .htaccess:
ErrorDocument 404/index.php?error=404
Файл index.php расположен в корневой папке вашего сайта. Если WordPress находится в подкаталоге с именем «wordpress», код, добавляемый в файл .htaccess, должен быть:
ErrorDocument 404/wordpress/index.php?error=404
Что разместить на wordpress странице 404
Когда пользователь обнаруживает вместо искомой страницы сообщение об ошибке 404, разочарование может заставить его покинуть ваш сайт преждевременно. Задача веб-мастера помочь найти посетителю информацию, которую он искал, и тем самым снизить процент отказа и улучшить поведенческие факторы на сайте.
Рекомендуется указать пользователю правильное направление действий, которое заставит его задержаться на сайте. Это можно сделать несколькими способами:
- предоставить информацию о других разделах вашего интернет-ресурса, которые можно посмотреть;
- дать посетителю возможность связаться с вами по указанным контактным данным;
- добавить ссылки на популярные сообщения, последние комментарии, архивы;
- разместить строку поиска, чтобы посетитель сам нашел нужную информацию на сайте.
Чтобы сделать страницу уникальной, вы можете снабдить ее фоновым изображением в стиле оформления сайта. Допустимо также использовать html-теги и css-стили, чтобы придать шаблону индивидуальность.
Как создать в вордпресс 404 страницу при помощи плагина
Создать собственную страницу 404, как и любую другую страницу в WordPress можно при помощи плагина 404page (https://wordpress.org/plugins/404page/). Важной особенностью этого плагина является то, что он не создает перенаправление, а формирует правильный ответ сервера с кодом 404. Он сообщает поисковым системам, что страница не существует и должна быть удалена из индексирования, тогда как перенаправление приведет к HTTP-коду 301 или 302 и URL-адрес останется в индексе поиска.
Установите плагин 404page из меню админки «Плагин -> Добавить новый» и активируйте его.
Создайте страницу 404 как обычную страницу WordPress из меню «Страницы -> Добавить новую». Внесите в нее всю необходимую информацию, которую вы хотите показать посетителю, и нажмите кнопку «Опубликовать». Плагин 404page также добавляет CSS-класс error404 в тег <body>, который можно использовать для задания дополнительных стилей на странице.
После активирования плагина в меню «Внешний вид» (1) появился раздел «404 Error Page» (2), в котором можно настроить отображение страницы ошибки.
Выберите созданную страницу 404 из списка страниц сайта (3). Убедитесь, что отмечен флажок (4), чтобы сервер отдавал код 404 при доступе к этой странице. Если вы используете кэширование, плагин выдаст предупреждение – страница из кэша будет отдавать код 200, поэтому ее нужно исключить из кэширования.
При возникновении проблем или конфликта с другими плагинами 404page может быть запущен в режиме совместимости. Нажмите кнопку «Сохранить изменения» (5).
Чтобы включить обработку ошибок 404 в WordPress, нужно установить структуру ссылок в меню «Настройки -> Постоянные ссылки» на любой пункт, кроме «По умолчанию». В противном случае ошибка 404 обрабатывается сервером, а не движком WordPress.
iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.
Мы предлагаем:
- Виртуальные серверы с NVMe SSD дисками от 299 руб/мес
- Безлимитный хостинг на SSD дисках от 142 руб/мес
- Выделенные серверы в наличии и под заказ
- Регистрацию доменов в более 350 зонах
Опубликовано:
10 апреля 2015
Обновлено:
11 апреля 2019
73 406
Сайты развиваются: создаются новые разделы, меняется структура, удаляются страницы или переделываются их адреса. Часто за всеми этими процессами уследить очень сложно даже опытному веб-мастеру. Чем старше сайт – тем больше вероятность того, что каждый день он получают процент пользователей, попадающих на страницы, которых больше не существует. Как это отследить? Как оповестить робота и клиента, что таких страниц больше нет? Что показывать пользователю на странице 404? Отвечаю!
404 NOT FOUND – что означает?
Определение: “404 ошибка сервера (not found) — самая распространенная ошибка при пользовании Интернетом, основная причина — ошибка в написании адреса Web-страницы. Сервер понял запрос, но не нашёл соответствующего ресурса по указанному URI.”
Для чего нужна 404 страница?
1. Поисковому роботу необходимо сообщить, что такой страницы не существует, для этого используется 404 код ответа сервера. Это очень важно, чтобы не плодились дубли и не размывать релевантность страниц в индексе поисковых систем.
Проверить ответ это очень просто, наберите несуществующий адрес страницы тут – http://bertal.ru/.
2. Пользователю необходимо сообщить, что запрашиваемой страницы больше (или вообще) не существует, и предоставить возможность работать с сайтом дальше.
Как настроить ответ сервера?
404 ошибка сервера через htaccess
Если Ваш сервер или CMS не настроены атоматически, то придётся это сделать Вам самим – добавьте в htaccess строчку:
1 |
ErrorDocument 404 http://www.site.ru/404.php |
Теперь, когда пользователь введёт неверный адрес, то он будет направлен на этот адрес. Страница может располагаться где угодно, но мы для примера поместили ее в корне сайта: /404.php.
404 ошибка сервера в PHP
Велосипеда изобретать не надо – существует специальная функция header, которая успешно поможет Вам это сделать.
1 |
header(«HTTP/1.0 404 Not Found»); |
Как должна выглядеть страница 404?
- В дизайне сайта (а не страница по умолчанию вашего хостинга)
- Содержать информацию о том, что произошла ошибка
- Иметь форму поиска по сайту
- Иметь небольшую карту сайта с основными разделами.
Креативные 404 страницы – вред или польза?
Смешное оформление 404 страницы – это красиво и оригинально, но не стоит слишком сильно увлекаться. Не стоит забывать, чтобы пользователю в первую очередь необходимо решить какие-то задачи на вашем сайте, а не зависать на 404 странице, Вы должны максимально упростить и помочь ему в достижении его целей.
Как отследить, сколько таких пользователей попадают на страницу 404?
Яндекс.Метрика
Для этого удобно использовать “Параметры визитов”.
В код счётчика необходимо добавить строчку: params:window.yaParams||{ }});
Таким образом, должно получиться как-то так:
1 2 3 4 5 6 7 8 |
w.yaCounterХХХХХХХХ = new Ya.Metrika({id:ХХХХХХХХ, webvisor:true, clickmap:true, trackLinks:true, accurateTrackBounce:true, trackHash:true, ut:"noindex", params:window.yaParams||{ }}); |
На самой же странице 404 в любом месте необходимо разместить следующий JS-код:
1 2 3 |
var url = document.location.pathname + document.location.search var url_referrer = document.referrer; var yaParams = {error404: {page: url, from: url_referrer}}; |
Где url – текущий адрес страницы 404, а url_referrer – адрес, с которого на него попали. Таким образом, мы в Яндекс.Метрике сможем отлеживать не только все 404 страницы, но и адреса, по которым на неё перешли.
Отчёт в Метрике необходимо смотреть тут: все отчеты -> содержание -> параметры визитов.
Подробнее о параметрах визита в Яндекс.Метрике: http://help.yandex.ru/metrika/content/visit-params.xml
Google.Analytics
Для отслеживания ошибок используем “события”. Добавляем JS-код в тело страницы:
1 2 3 4 5 6 7 8 9 |
jQuery(document).ready(function() { var url = document.location.pathname + document.location.search var url_referrer = document.referrer; ga('send', {'hitType': 'event', 'eventCategory': 'page-404', 'eventAction': url, 'eventLabel': url_referrer }); }); |
Где hitType – тип события, eventCategory – категория, eventAction – адрес ошибки, url_referrer – откуда на 404 страницу попали.
Отчёт в Гугл.Аналитикс: Поведение -> События -> Обзор.
Подробнее о настройке событий в Аналитикс: https://support.google.com/analytics/answer/1033068?hl=ru
Как использовать полученные данные?
Если ошибки 404 внутри сайта – исправьте все ссылки на правильные или уберите вовсе. Если эти ссылки с внешних ресурсов? и Вам никак не повлиять на них, то поставьте 301 редирект на максимально релевантные страницы. Любите своих клиентов и не заставляйте их думать или что-то искать на Вашем сайте.
Ошибка 404 — это стандартный код ответа HTTP сайта: страница не может быть найдена. Как правило, такую ошибку пользователи видят, когда переходят по ссылке, которая ведет на уже несуществующую страницу.
Чаще всего причиной такой ошибки становятся:
- неработающая (битая) ссылка;
- некорректное изменение адреса страницы;
- удаление запрашиваемой страницы;
- ошибка при написании URL в адресной строке.
Появление большого количества ошибок 404 может быть вызвано вирусной атакой (например, размещением дорвеев на сайте).
Полностью исключить возникновение ошибки 404 невозможно, она может возникнуть на любом сайте — где-то поменяли адрес, какой-то раздел или страницу удалили, а прежние ссылки осталась. Например, такая ситуация может возникнуть при удалении карточек товаров в интернет-магазинах.
Лучший способ сделать так, чтобы посетители не попадали на страницу 404 — регулярно проверять наличие на сайте «битых» (то есть неработающих) ссылок. Это касается как внутренней перелинковки, так и внешних ссылок на другие ресурсы.
Почему необходимо настроить код ответа 404?
Само по себе наличие на сайте ошибки 404 не составляет проблемы. Но чтобы присутствие таких страниц не привело к ухудшению ранжирования ресурса, они должны быть правильно настроены — давать код ответа сервера 404 (Not Found). Именно такой ответ сообщает поисковому роботу, что данной страницы не существует, и предотвращает ее индексирование. Это позволяет избежать появления дублей и снижения качества сайта.
Если вместо кода 404 будет даваться ответ 200 (OK), в индекс попадет множество пустых страниц. Они создадут дубли, которые будут сканироваться поисковым роботом вместо реально существующих страниц с качественным контентом.
Кроме того, если несуществующие страницы не дают код ответа 404, недобросовестные конкуренты могут просто отправить их в поисковый индекс (например, разместив ссылки на такие страницы). Также создаются новые URL-адреса для несуществующих страниц конкурирующего сайта, чтобы увеличить их количество в поиске. В результате краулер (поисковый робот) успевает просканировать только несуществующие страницы и понижает сайт в выдаче как некачественный.
Таким образом, важна правильная настройка и оформление страницы 404 — это является необходимым условием корректной работы и успешного продвижения любого веб-ресурса.
Для чего нужна страница под ошибку 404?
С технической точки зрения, это обычная страница сайта, которая выдается при отсутствии запрашиваемого документа. Она должна сообщить пользователю, что документ по такому адресу отсутствует, и предоставить возможность дальнейшей работы с сайтом. Иначе посетители могут уйти с web-ресурса, что приведет к потере веб трафика и ухудшению поведенческих факторов.
Как должна быть оформлена страница с ошибкой 404?
Стандартная страница 404 обычно неинформативна и никак не связана с конкретным сайтом.
Иногда, попав на такую страницу, пользователь может даже не понять, что произошло. Поэтому владельцам сайтов рекомендуется создавать собственную страницу 404. В первую очередь, страница должна быть удобной и полезной для пользователя Посетитель должен понять, что страница не существует и иметь возможность перейти на другие разделы сайта.
К оформлению страницы 404 есть целый ряд требований со стороны поисковых систем. Яндекс и Google неоднократно давали рекомендации по этому вопросу.
- Рекомендации по созданию страницы 404 от Google
- Рекомендации по созданию страницы 404 от Яндекс
На основе данных рекомендаций можно выделить следующие светы:
- Пользователям должно быть понятно, что страница, которую они запрашивают, недоступна — внешне она должна отличаться от других страниц сайта.
- Однако дизайн Not Found страницы должен быть выполнен в таком же стиле, что и у всего сайта. Это поможет пользователю понять, что он оказался на искомом ресурсе.
- Хорошо, если на странице будут размещены ссылки на основные разделы и Главную страницу сайта – в этом случае пользователь сможет легко продолжить работу с ресурсом.
- Будет актуально разместить на такой странице строку поиска, чтобы посетитель мог сразу найти интересующую его информацию.
- Предоставьте возможность сообщить о возникшей проблеме. Это не только покажет заботу о пользователях, но и позволит дополнительно отслеживать и устранять ошибки.
- Своевременно удаляйте из индекса поисковых систем несуществующие страницы (используя Яндекс Вебмастер и Google Search Console).
- При замене товара аналогичным, стоит сделать переадресацию на него, чтобы поисковая система не считала эту страницу дублем.
Правильно оформленная страница ошибки 404 выглядит следующим образом:
Как создать страницу для ошибки 404?
Как уже говорилось, с технической точки зрения, это обычная страница сайта, и создается она средствами HTML. Также ее можно создать с помощью текстового редактора во всех популярных CMS:
После создания страницы, необходимо прописать правило в файле .htaccess, который находится в корневой системе сайта. .htaccess — это особый файл, в котором можно указывать дополнительные правила и параметры, касающиеся работы сайта.
Чтобы пользователям при попадании на несуществующий ресурс указывалась страница с 404-ой ошибкой, нужно прописать следующую команду:
ErrorDocument 404 http://www.site.ru/404.html
где http://www.site.ru/404.html — ссылка на готовый шаблон страницы под ошибку 404
Соблюдайте приведенные выше правила, и наличие ошибки 404 не ухудшит позиций вашего сайта, а напротив – может стать его преимуществом.
Интересные и полезные страницы ошибки 404 будут привлекать внимание пользователей и улучшать поведенческие факторы вашего ресурса.
Ошибки веб-сервера, например, 404 «Документ не найден» — являются частью протокола HTTP — кодами статуса ответов. Ошибками считаются коды статусов вида 4xx и 5xx (то есть начинающиеся на 4 или 5).
По умолчанию сообщения об ошибках веб-сервера Apache показываются на английском языке и они довольно однообразны. Вы можете настроить вывод различных сообщений об ошибках, сделать эти сообщения интегрированными в дизайн вашего сайта, собирать расширенную статистику о ситуации, привёдшей к ошибке, а также перенаправлять пользователя на другую страницу или даже на другой сайт при возникновении определённых ошибок.
Not Found в Apache
Начнём с практического примера самой популярной ошибки Not Found — не найдено (запрошенная страница или документ отсутствуют). Чтобы получить это сообщение, достаточно набрать любой несуществующий адрес на сервере:
Not Found The requested URL /test.php was not found on this server.
Предположим, мы хотим поменять сообщение «Not Found» на любое другое. Это можно сделать изменив настройки веб-сервера в главном конфигурационном файле, либо с помощью .htaccess (смотрите подробности о его включении и возможностях в статье «Файл .htaccess в Apache»).
В качестве примера добавим в файл .htaccess следующую строку:
ErrorDocument 404 "Something went wrong... Please contact admin, email: <a href="admin@gmail.com">admin@gmail.com</a>"
В результате получим:
Сообщение должно быть заключено в двойные кавычки. Структура директивы следующая:
ErrorDocument КОД "СООБЩЕНИЕ"
Пример настроенного сообщения при запрете доступа:
ErrorDocument 403 "By default, Mutillidae only allows access from localhost (127.*.*.*). Edit the .htaccess file to change this behavior (not recommended on a public network)."
Поскольку сообщение будет отправляться в кодировке iso-8859-1, то его нужно писать латинскими буквами. Это ограничение можно обойти, если, например, в качестве страницы ошибки показывать заготовленный файл. О том, как это сделать, будет рассказано далее, где возможности директивы ErrorDocument будут рассмотрены более детально.
Директива ErrorDocument
Настраиваемые ответы на ошибки могут быть заданы для любого кода статуса HTTP считающегося ошибкой, то есть это статусы вида 4xx или 5xx.
Дополнительно при возникновении одной из этих ошибок предоставляется набор переменных, на основе которых можно более обширно настроить показываемую страницу ошибки. Можно использовать cgi программу как обработчики ошибок или другие динамические обработчики (PHP, mod_perl и так далее), которые могут использовать эти переменные.
Настройка своих сообщений об ошибках веб сервера
Как уже было сказано, настройка страниц ошибок выполняется с использованием директивы ErrorDocument, которая может использоваться в глобально контексте, контексте виртуального хоста или на уровне директории. Её можно использовать в файле .htaccess, если AllowOverride установлена на FileInfo (или более широкие возможности).
В ответ на возникновение проблемы или ошибки Apache httpd можно настроить выполнять одно из четырёх действий:
- вывести простое жёстко прописанное сообщение
- вывести настроенное сообщение
- внутренне перенаправить на локальный URL путь для обработки проблемы/ошибки
- перенаправить на внешний URL для обработки проблемы ошибки
По умолчанию используется первый вариант, а для настройки опций со 2 по 4 используется директива ErrorDocument, за который следует код ответа HTTP и затем URL или сообщение. Apache httpd иногда будет предоставлять дополнительную информацию в зависимости от проблемы/ошибки.
Начиная с версии 2.4.13 может использоваться синтаксис выражений внутри директивы для создания динамических строк и URL.
URL могут начинаться со слэша (/) для локальный веб-путей (относительных DocumentRoot) или быть полным URL, который клиент сможет понять. Альтернативно можно написать сообщение, которое будет показано браузером. Помните, принятие решение, чем является параметр: URL, путём или сообщением, выполняется перед обработкой выражения.
Примеры:
# Показ статичного сообщения об ошибке:
ErrorDocument 500 "Sorry, our script crashed. Oh dear"
ErrorDocument 403 "Sorry, can't allow you access today"
ErrorDocument 403 Forbidden!
# Передача управления динамическому обработчику:
ErrorDocument 500 /cgi-bin/crash-recover
ErrorDocument 404 /errors/bad_urls.php
ErrorDocument 500 http://example.com/cgi-bin/server-error.cgi
# Показ статичной страницы об ошибке (будет сделан внутренний редирект, то есть
# пользователь увидит другую страницу, но адрес в веб-браузере не поменяется):
ErrorDocument 500 http://error.example.com/server_error.html
ErrorDocument 404 /errors/not_found.html
ErrorDocument 401 /subscription/how_to_subscribe.html
ErrorDocument 401 /subscription_info.html
# Передача управления динамическому обработчику, а также передача переменной
ErrorDocument 403 /errors/forbidden.py?referrer=%{escape:%{HTTP_REFERER}}
Синтаксис директивы ErrorDocument следующий:
ErrorDocument <3-цифровой-код> <действие>
где в качестве <действия> могут быть:
- Локальный URL для перенаправления (если действие начинается с «/«).
- Внешний URL для перенаправления (если действие является правильным URL).
- Текст для отображения (если не подходит ничего из вышеперечисленного). Текст должен быть обёрнут в двойные кавычки («) если он состоит из более чем одного слова.
При перенаправлении к локальному URL устанавливаются дополнительные переменные окружения, на основе которых можно более детально настроить ответ. Они не отправляются на внешние URL.
Доступные переменные окружения
Перенаправление на другой URL может быть полезным особенно если передаётся некоторая информация, которая может использоваться для более ясного объяснения или журналирования условия ошибки.
Для достижения этого, когда отправляется редирект ошибки, устанавливаются дополнительные переменные окружения, которые генерируются из заголовков, предоставленных исходным запросом, их имя получается из добавления к оригинальному имени заголовкапрефикса ‘REDIRECT_‘. Это позволяет документу для обработки ошибки получить контекст оригинального запроса.
Например, вы можете получить, в дополнении к более обычным переменным окружения, следующие:
REDIRECT_HTTP_ACCEPT=*/*, image/gif, image/jpeg, image/png REDIRECT_HTTP_USER_AGENT=Mozilla/5.0 Fedora/3.5.8-1.fc12 Firefox/3.5.8 REDIRECT_PATH=.:/bin:/usr/local/bin:/sbin REDIRECT_QUERY_STRING= REDIRECT_REMOTE_ADDR=121.345.78.123 REDIRECT_REMOTE_HOST=client.example.com REDIRECT_SERVER_NAME=www.example.edu REDIRECT_SERVER_PORT=80 REDIRECT_SERVER_SOFTWARE=Apache/2.2.15 REDIRECT_URL=/cgi-bin/buggy.pl
Чтобы посмотреть на эти переменные, вы можете в файл .htaccess добавить строку:
ErrorDocument 404 /er.php
В файл er.php скопируйте:
<?php print_r($_SERVER);
И вызовите на сервере ошибку 404:
Переменные окружения REDIRECT_ создаются из переменных окружения, которые существовали перед редиректом. Они переименовываются с префиксом REDIRECT_, то есть HTTP_USER_AGENT становится REDIRECT_HTTP_USER_AGENT.
REDIRECT_URL, REDIRECT_STATUS, и REDIRECT_QUERY_STRING гарантировано будут установлены, а другие заголовки будут установлены только если они существовали до условий возникновения ошибки.
Ни одна из них не будут установлены если целью ErrorDocument является внешний редирект (всё что угодно, начинающееся со схем вроде http:, даже если она отсылает на тот же хост что и сервер).
Кстати, обычные переменные окружения можно использовать прямо в директиве ErrorDocument, пример вывода пользователю, вызвавшему ошибку 404, небольшой истории:
Для этого в файл .htaccess нужно добавить строку:
ErrorDocument 404 "You requested <b>%{REQUEST_URI}</b> on the <b>%{HTTP_HOST}</b> host using the <b>%{REQUEST_METHOD}</b> method and the <b>%{REQUEST_SCHEME}</b> scheme, but you got the 404 error.<br>So I collected some information about you: your IP address is <b>%{REMOTE_ADDR}</b>, and your User Agent is <b>%{HTTP_USER_AGENT}</b>."
Как можно убедиться, такие динамические сообщения показываются даже без внешнего обработчика. Правда, если хотя бы одна из используемых переменных окружения не определена, то это вызовет ошибку сервера 500.
Дополнительно можно использовать специальное значение default, чтобы указать Apache httpd простое жёстко прописанное сообщение. Хотя это не требуется в обычных обстоятельствах, слово default может восстановить то значение, которое используется в Apache httpd по умолчанию для простого жёстко прописанного сообщения, в противном случае, это сообщение будет получено от существующей директивы ErrorDocument.
ErrorDocument 404 /cgi-bin/bad_urls.pl <Directory "/web/docs"> ErrorDocument 404 default </Directory>
Помните, что когда устанавливаете ErrorDocument, который указывает на удалённый URL (любая строка, перед которой стоит протокол http или что-то подобное), то Apache HTTP отправит перенаправление клиенту, говоря ему, где найти этот документ, даже если документ в конечном счёте находится на этом же самом сервере. Это имеет несколько последствий, самым важным из которых является то, что клиент не получит оригинальный код статуса ошибки, но вместо этого получит код статуса редиректа. Это, в свою очередь, может сбить веб роботов и других клиентов, которые на основании кода статуса пытаются определить, является ли URL действительным. Дополнительно, если вы используете удалённый URL в ErrorDocument 401, клиент не будет знать о запросе пароля у пользователя, поскольку он не получит код статуса 401. Следоавтельно, если вы используете директиву ErrorDocument 401, то вы должны отправлять на локальный документ.
Microsoft Internet Explorer (MSIE) по умолчанию игнорирует сообщения об ошибках сгенерированные сервером, когда они «слишком маленькие» и подставляет свои собственные «дружественные» сообщения об ошибках. Порог размер варьирует от типа ошибки, но в общем если вы делаете вашу страницу ошибки больше чем 512 байт, тогда MSIE покажет сгенерированную сервером ошибку не маскируя её.
Настройка ответов об ошибках
Если вы укажете свой ErrorDocument на какие-то динамические обработчики, такие как документ на стороне сервера, сценарий CGI или другой обработчик, вы можете использовать доступные переменные среды для настройки этого ответа.
Если ErrorDocument указывает локальное перенаправление на сценарий CGI, сценарий должен включить в свой вывод поле заголовка «Status:», чтобы обеспечить получение на клиенте код статуса ошибки. Например, сценарий Perl ErrorDocument может включать следующее:
...
print "Content-type: text/htmln";
printf "Status: %s Condition Interceptedn", $ENV{"REDIRECT_STATUS"};
...
Если скрипт предназначен для обработки определённого состояния ошибки, например 404 Not Found, он может вместо этого использовать конкретный код и текст ошибки.
Обратите внимание, что если ответ содержит заголовок Location: (для того, чтобы выполнить перенаправление на стороне клиента), сценарий должен выдать соответствующий заголовок Status: (например, 302 Найдено). В противном случае заголовок Location: может не иметь никакого эффекта.
Многоязычные документы с ошибками
С вашей установкой Apache HTTP Server поставляется папка пользовательских документов об ошибках, переведённых на 16 различных языков. В каталоге конфигурации conf/extra также есть файл конфигурации, который можно включить, чтобы задействовать эту функцию.
В файле конфигурации вашего сервера вы увидите строку, такую как:
# Multi-language error messages #Include conf/extra/httpd-multilang-errordoc.conf
Снятие комментария с этих строк включит эту функцию и предоставит согласованные с языком сообщения об ошибках на основе языкового предпочтения, установленного в браузере клиента.
Кроме того, эти документы содержат различные переменные REDIRECT_, так что конечный пользователь может предоставить дополнительную информацию о том, что произошло и что они могут сделать сейчас.
Эти документы могут быть настроены в любой степени, чтобы вы предоставили пользователям более полезную информацию о вашем сайте и о том, что они могут там ожидать.
Для использования этой функции должны быть включены mod_include и mod_negotiation.
Заключение
Хотя большинство сообщений об ошибках могут быть переопределены, существуют определённые обстоятельства, когда внутренние сообщения используются независимо от настройки ErrorDocument. В частности, если обнаружен некорректный запрос, обычная обработка запроса будет немедленно остановлена, и будет возвращено внутреннее сообщение об ошибке. Это необходимо для защиты от проблем безопасности, вызванных неправильными запросами.
Если вы используете mod_proxy, вы можете включить ProxyErrorOverride, чтобы вы могли предоставлять пользовательские сообщения об ошибках от имени ваших серверов Origin. Если вы не включите ProxyErrorOverride, Apache httpd не будет генерировать пользовательские документы об ошибках для проксируемого (передаваемого в качестве посредника) содержимого.
Связанные статьи:
- Файл .htaccess в Apache (84.1%)
- Как защитить папку Apache паролем в Windows (84.1%)
- Решение проблемы «AH00369: Failed to open the Windows service manager, perhaps you forgot to log in as Adminstrator?» (68.2%)
- Ошибка «You’re speaking plain HTTP to an SSL-enabled server port» (РЕШЕНО) (68.2%)
- Ошибки при настройке и установке Apache, PHP, MySQL/MariaDB, phpMyAdmin (68.2%)
- Как сбросить пароль root MySQL или MariaDB в Windows (RANDOM — 50%)
Если на вашем сайте возникают ошибки, то обычно посетители видят такие страницы:
Или такие:
В этой статье мы расскажем, как сделать так, чтобы при ошибках посетители сайта видели необычные страницы ошибок. Для этого потребуется, чтобы на хостинге была включена поддержка правил из файла .htaccess. На многих хостингах такая поддержка есть.
Страница ошибок — обычная страница написанная на языке разметки HTML. Мы предполагаем, что у вас уже есть готовая страница.
В качестве примера мы будем использовать такую страницу:
Скачать пример страницы ошибки 500.
Загрузим файл 500.html из архива на хостинг. Файл нужно разместить в каталоге с сайтом, на том же уровне, что и файлы index.php или index.html.
В том же каталоге, куда вы загрузили файл 500.html найдите файл .htaccess. Если его еще нет, то создайте его. Добавьте в начало файла следующие строки:
ErrorDocument 500 /500.html
Как сделать это на хостинге NetAngels
— откройте [панель управления](https://panel.netangels.ru/hosting/#/)
— кликните по нужному сайту
— откройте вкладку «Файлы»
— выберите «Открыть файловый менеджер».
— перейдите в каталог `www`
— найдите файл `.htaccess`, правым кликом из контекстного меню выберите «правка».
— добавьте в начало файла строки выше
— сохраните файл
Чтобы проверить, что страница доступна, откройте в браузере ссылку
mysite.ru/500.html
Замените mysite.ru на имя вашего сайта. Теперь при появлении на сайте ошибки 500 будет отображаться страница, которую вы видите по ссылке.
Приведенная страница будет работать только для ошибок Apache, но не для ошибок PHP. Если вы хотите использовать те же самые страницы ошибок для PHP, то требуется обрабатывать их через PHP. Например:
<?php
if( http_response_code() == 500 )
{
header("Location: https://mysite.ru/500.html" );
}
http_response_code(500);
?>
Аналогичным образом можно сделать страницы для других популярных ошибок — 403 (Доступ запрещен) и 404 (Страница не найдена).
Готово!
|
0 / 0 / 0 Регистрация: 02.01.2018 Сообщений: 8 |
|
|
1 |
|
Можно ли исправить ошибки на чужом уже созданом сайте04.01.2018, 19:57. Показов 1426. Ответов 13
Хочу помочь человеку помочь исправить ошибки на сайте но проблема в том что сайт то его и доступа у меня к нему нет. Даже если я скопирую код и перенесу на свой комп то на его сайте все равно останутся ошибки.Как бы мне не пришлось свой сервер создавать. Что делать не знаю. Посоветуйте что делать в такой ситуации.
0 |
|
3824 / 2674 / 1521 Регистрация: 12.07.2015 Сообщений: 6,674 Записей в блоге: 4 |
|
|
04.01.2018, 20:26 |
2 |
|
А владелец сайта упирается и не хочет вашей помощи? Получите доступ у владельца и исправляйте ошибки. Пока у вас его(доступа) нет, ничего вы не сделаете на чужом сайте.
0 |
|
Qwerty_Wasd |
|
04.01.2018, 23:50
|
|
Не по теме:
А владелец сайта упирается и не хочет вашей помощи? хотел посмеяться, но подавился чаем :D:rofl:
0 |
|
0 / 0 / 0 Регистрация: 02.01.2018 Сообщений: 8 |
|
|
05.01.2018, 22:24 [ТС] |
4 |
|
Как сделать так чтобы код после обновление страницы сохранялся после изменений. Удалить допустим Title и чтобы после обновления страницы он больше не вернулся или изменить шрифт.И вот ещё один нюанс,изменения происходят на готовой странице в Гугле или Опере через параметр «Код элемента»
0 |
|
3824 / 2674 / 1521 Регистрация: 12.07.2015 Сообщений: 6,674 Записей в блоге: 4 |
|
|
05.01.2018, 22:47 |
5 |
|
Зачем вам это нужно? Изменять под себя стили страниц сторонних сайтов? Посмотрите в сторону stylish или tampermonkey.
0 |
|
0 / 0 / 0 Регистрация: 02.01.2018 Сообщений: 8 |
|
|
05.01.2018, 22:54 [ТС] |
6 |
|
Сайт не мой. Попросили ошибки исправить на сайте, на нем много ненужных тайтлов тормозящих сайт и серьёзная проблема с Дескрипцией.
0 |
|
3824 / 2674 / 1521 Регистрация: 12.07.2015 Сообщений: 6,674 Записей в блоге: 4 |
|
|
05.01.2018, 23:21 |
7 |
|
Пока вам не предоставят доступ к изменениям на сайте, ничего вы сделать не сможете. Все изменения, который вы производите в инструментах разработчика, видны только вам. Если вам этого достаточно, тогда, я уже выше писал — используйте расширения для браузеров — stylish или(и) tampermonkey, при помощи которых вы будете изменятьудалятьдобавлять элементы страницы, конкретно для вас. Если бы была возможность изменять чужие сайты без доступов, мы сейчас видели совсем другой интернет.
1 |
|
26 / 36 / 15 Регистрация: 15.01.2017 Сообщений: 311 |
|
|
06.01.2018, 13:54 |
8 |
|
А, смысл — с, пуста той — говорить…?
0 |
|
Freeze_Breeze |
|
06.01.2018, 14:05
|
|
Не по теме: Джакс, ну для начала можете начать с запугивания владельца сайта, то есть анонимные звонки и смс по ночам, закидать его почту спамом. Через средства разработчика наделать пакостей у него на странице, а после отправить ему скриншот с проделанной вами работой. После можете взяться за его соцсети… Вариантов много.
0 |
|
767 / 323 / 157 Регистрация: 26.05.2016 Сообщений: 2,127 |
|
|
06.01.2018, 17:23 |
10 |
|
Джакс, ну для начала можете начать с запугивания владельца сайта, то есть анонимные звонки и смс по ночам, закидать его почту спамом. Через средства разработчика наделать пакостей у него на странице, а после отправить ему скриншот с проделанной вами работой. После можете взяться за его соцсети… Вариантов много.
0 |
|
0 / 0 / 0 Регистрация: 02.01.2018 Сообщений: 8 |
|
|
07.01.2018, 01:57 [ТС] |
11 |
|
Я таким не занимаюсь. Я лишь хотел исправить ошибки на чужом сайте, ну и возможности я знаю тоже, можно уничтожить сайт но мне это не нужно.Я лишь пытаюсь понять одну вещь,мне дали ссылку на сайт и говорят исправь ошибки но потом оказалось что доступа у меня нет и ничего исправить я не могу соответственно как человек честный я не могу оставив ошибки отправить такой сайт на Вордпресс. Задачи по исправлению ошибок не решены и сайт не переведен.Владелец сайта кстате доступ так и не дал, хорошо если ещё отзыв ещё не оставит. Потом хрен что докажешь, да и анкета будет уже не нужна.Главное правило в действии «Что бы не случилось клиент всегда прав»
0 |
|
Тутошний я 2142 / 1198 / 224 Регистрация: 03.11.2009 Сообщений: 4,394 Записей в блоге: 2 |
|
|
07.01.2018, 02:53 |
12 |
|
Я лишь хотел исправить ошибки на чужом сайте, бесплатно?
0 |
|
0 / 0 / 0 Регистрация: 02.01.2018 Сообщений: 8 |
|
|
07.01.2018, 03:03 [ТС] |
13 |
|
Та да. Сказал ему что бесплатно сделаю. Без обмана без прикола. Реально хотел сделать бесплатно,только видно что-то пошло не так.
0 |
|
Тутошний я 2142 / 1198 / 224 Регистрация: 03.11.2009 Сообщений: 4,394 Записей в блоге: 2 |
|
|
07.01.2018, 03:10 |
14 |
|
ему же только html исправить? Добавлено через 2 минуты
0 |
