Ошибка 404 html код
Главная и единственная причина – это не потерять посетителя. У каждого пользователя наверняка возникала такая ситуация, когда нажимая на ссылки на каком-нибудь сайте, браузер вместо запрашиваемой страницы показывал свою дефолтную страницу ошибки. Ошибка возникает в результате неправильно введенного запроса или запрашиваемая страница, была удалена самим веб-мастером. В таком случае все посетители ведут себя одинаково – закрывают страницу и уходят с вашего сайта.
Хватит воду лить! Давай конкретику!
Создаем два файла – 404.html и .htaccess (этот файл без имени, но с расширением htaccess), который автоматически перенаправляет посетителя на 404.html, в случае возникновения ошибки. Чтобы перенаправление работало, в этот файл надо прописать одну единственную строку:
ErrorDocument 404 https://www. site. ru/404.html
Когда оба файла будут готовы, залить их на сервер в корень домена.
Мы уже создали пустой файл 404.html и теперь будем наполнять HTML кодом саму 404 страницу, активно применяя HTML5 и CSS3. Я придумал свой способ, как сделать простую и красивую 404 страницу.
Первым делом нужно подобрать большую и качественную картинку или фотографию размером не менее 1200×750 пикселей. Существует много сайтов со свободной лицензией, откуда можно скачать очень качественные фотографии. Я бесплатно скачал с популярного сайта pixabay. com это забавное изображение.
Я хочу расположить картинку как фон на все окно браузера и в центре браузера написать – 404 страница не найдена и поставить ссылку на главную. Разберем подробнее самые важные моменты.
Эффект полупрозрачности RGBA
Выбранное изображение слишком яркое, надо его слегка затемнить, тогда текст будет более читаемый. Эффект полупрозрачного затемнения, можно получить используя RGBA, прописав в стилях блока следующую строчку кода:
background: rgba (0, 0, 0, 0.7);
Первые три буквы обозначают – красный, зеленый, синий и они равны нулю (то есть получаем черный цвет). А последняя буква «а» – представляет собой альфа-канал, отвечающий за полупрозрачность элемента. В нашем случае цифра 0.7 – говорит о 70% затемнения. Шкала от полной прозрачности до полной непрозрачности находиться между нулем и единицей (0. 1).
Позиционирование элементов
Для правильной верстки моего примера 404 страницы, без понимания как работает свойство position, будет трудно. Посмотрев на конечный результат 404 страницы, нам надо понять структуру HTML документа. Здесь мы видим три слоя, наложенных друг на друга. Нижний слой <body> – сама картинка, средний в теге <div> – полупрозрачный блок затемнения и верхний <div> – текст. Наша задача задать нужное позиционирование содержимого этих слоев.
У среднего слоя будет абсолютное позиционирование, поскольку положение элемента (блок затемнения) задается относительно краев браузера с нулевыми отступами.
Верхний текстовый слой позиционируем относительно элемента среднего слоя.
Код страницы 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 ></div>
<div >404</div>
<div >страница не найдена<br>
<a href=»#»> перейти на главную страницу..</a>
</div>
</body>
</html>
Если Вы планируете заниматься созданием сайтов на заказ, то разобраться во всех тонкостях верстки, используя HTML5 и CSS3, Вам поможет мой видеокурс.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (https://myrusakov. ru)!
Добавляйтесь ко мне в друзья ВКонтакте: https://vk. com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: https://vk. com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Что означает ошибка 404 на сайте и что с ней делать
Создайте письмо за 15 минут. Отправляйте до 1500 писем в месяц бесплатно.
Ошибка 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:
В большинстве ситуаций ошибка 404 отображается, когда не удаётся обнаружить нужную страницу на доступном сервере.
Причины отсутствия страницы на сайте бывают разными
Возможные последствия для сайта
Нужно ли считать 404 ошибку опасной для сайтов? Кажется, что нет ничего плохого в том, что пользователь не смог открыть одну веб-страницу. Однако если такая ситуация будет повторяться регулярно, это чревато оттоком аудитории. Одни пользователи решат, что сайт вовсе не существует. Другие подумают, что лучше не заходить на сайт, который работает с ошибками. Третьи будут игнорировать ресурс, на котором не смогли получить обещанную информацию.
Поисковые системы относятся к Not Found более лояльно. Например, Google отмечает, что 404 страницы не влияют на рейтинг. Но если при индексации роботы будут находить все больше ошибочных страниц, вряд ли это приведёт к более высокому ранжированию.
Если вы хотите улучшить взаимодействие с посетителями, важно найти и исправить все ошибки 404 на сайте.
Как выявить ошибку
На небольшом ресурсе легко проверить работоспособность ссылок вручную. Но если на сайте сотни и тысячи страниц, без дополнительного софта не обойтись. Есть немало сервисов и программ, позволяющих находить битые ссылки. Рассмотрим некоторые из них.
Search Console Google
Выбор конкретного решения зависит от причины ошибки:
Удалять и менять ссылки вручную удобно только на небольших сайтах. Исправление ошибок на крупных порталах лучше автоматизировать. Например, с помощью специальных плагинов для внутренней перелинковки (Terms Description, Dagon Design Sitemap Generator) и для автоматического формирования адресов страниц (Cyr-To-Lat).
Чтобы ошибки 404 появлялись как можно реже, достаточно соблюдать простые рекомендации:
Мы разобрались, как найти и исправить ошибки Not Found внутри сайта. Но неработающая ссылка может быть расположена и на стороннем ресурсе. Допустим, когда-то на другом сайте разместили рекламную публикацию со ссылкой на определённую страницу. Спустя какое-то время страницу удалили. В этом случае появится ошибка 404. Устранить её можно, связавшись с администрацией ссылающегося сайта. Если же удалить/исправить ссылку нельзя, постарайтесь использовать ошибку с выгодой.
Как сделать страницу 404 полезной
Грамотно оформленная страница с ошибкой Error 404 Not Found — действенный инструмент конвертации посетителей. Ограничений по использованию страницы с ошибкой 404 нет. При этом практически все CMS позволяют настраивать дизайн этой страницы.
Что публиковать на странице 404:
При оформлении страницы-ошибки желательно опираться на рекомендации поисковиков:
Главное — по возможности отказаться от стандартной страницы 404. Подумайте, как привлечь внимание пользователя. Расскажите ему об отсутствии искомой страницы и предложите взамен что-то полезное или интересное.
Примеры оформления страниц 404
Designzillas
Далеко не всегда сервер возвращает правильный ответ 404 Not Found (не найдено) на запросы несуществующих страниц, и еще реже страница ошибки 404 соответствует принципам юзабилити и дизайну сайта. Эти технические недостатки могут мешать поисковым роботам правильно индексировать сайт, а реальным пользователям — взаимодействовать с сайтом, что в совокупности негативно отражается на ранжировании.
Содержание
Что такое ошибка 404?
404 Not Found (не найдено) — это правильный код ответа сервера при запросах на несуществующие страницы.
У каждой цифры кода есть значение:
Почему возникает ошибка 404?
Пользователь может столкнуться с ошибкой по разным причинам:
Как ошибка 404 влияет для SEO?
Если при запросе несуществующей страницы сервер возвращает код 200 OK, то это сигнализирует поисковым системам о том, что страница существует. Такая техническая оплошность мешает корректно индексировать сайт и может негативно отразиться на его ранжировании.
Страницы 404 не должны индексироваться поисковыми системами. Убедитесь, что ваш веб-сервер отправляет код статуса HTTP 404
Справка Google
Одна из распространенных ошибок заключается в замене сообщения об ошибке 404 (страница не найдена) для несуществующих страниц на страницу-заглушку, которая возвращается с кодом ответа 200 (ОК). В этом случае поисковая система считает, что страница с некорректным адресом существует, и не удаляет ее из своей базы. Это приводит к более медленному индексированию полезных страниц на сайте.
Яндекс. Помощь
Как проверить код ответа сервера?
Проверить ответ сервера на запрос несуществующей страницы можно следующими способами:
Проверка ответа сервера в Яндекс. Вебмастере
Как обеспечить ответ 404 Not Found?
Если сайт функционирует на какой либо из популярных CMS, то проблем с ответами сервера быть не должно. Тем не менее следует убедиться, что сервер обрабатывает все запросы корректно. Если при запросах несуществующих страниц возвращается код 200 OK, либо другой, отличный от 404 Not Found, то нужно обратиться в техническую поддержку хостинг-провайдера (если вы не разбираетесь в серверных настройках).
Как исправить ошибки 404 на сайте?
Чтобы свести количество ошибок на сайте до минимума, следует найти и исправить (или удалить) внутренние битые ссылки.
Для этого можно воспользоваться бесплатными сервисами для веб-мастеров:
Яндекс. Вебмастер Ссылки → Внутренние ссылки → Запрещены к индексированию или не существуют
Что такое страница 404?
Страница 404 — это страница сайта, которую видят пользователи при запросах несуществующих документов, переходя по битым ссылкам или вводя неправильные URL в адресной строке.
Страница 404 показывается посетителю, когда тот пытается перейти по ссылке, которую сервер не может найти (например, она удалена или ее URL введен неправильно). Советуем вам разработать собственную страницу 404.
Стандартные серверные страницы для ошибок не имеют ничего общего с дизайном сайта, а также не соответствует принципам юзабилити:
Как сделать страницу 404?
Для каждого сайта рекомендуется создавать собственные страницы ошибок, которые не будут функционально и визуально отличаться от других страниц этого сайта.
В профессиональных шаблонах (темах) для популярных CMS уже предусмотрены свои страницы ошибок, но они почти всегда не соответствуют принципам юзабилити и рекомендациям поисковых систем. Чтобы привести их в соответствие хотя бы минимальным требованиям, достаточно иметь доступ к HTML-файлу для редактирования.
Также в зависимости от CMS существуют и другие способы сделать страницу ошибки, внешне и функционально соответствующую сайту:
Также если сайт функционирует на сервере Apache, то в корне сайта можно создать HTML-файл, который будет отображаться при запросах несуществующих страниц, а в файле .htaccess разместить следующий код:
Как оформить страницу 404?
Собственные, но неправильно оформленные страницы ошибок могут не содержать ссылок и визуально отличаться от функционирующих страниц сайта, что может мешать пользователю взаимодействовать с сайтом.
Примеры собственных страниц 404, которые созданы недостаточно качественно:
Стандартная страница 404 обычно неинформативна и никак не связана с вашим сайтом. А на собственной странице 404 вы можете разместить полезные ссылки и элементы дизайна своего сайта.
Увидев страницу с ошибкой, пользователь может решить, что ваш сайт не работает, и уйти. Чтобы этого избежать, необходимо правильно оформить и разместить на сайте специальную страницу, которая внешне будет отличаться от остальных страниц вашего сайта.
Следует позаботиться о том, чтобы страница с ошибкой была оформлена правильно и соответствовала принципам юзабилити.
Чтобы страница ошибки не становилась причиной плохих поведенческих факторов, на ней должны соблюдаться три главных правила:
Примеры страниц 404, соответствующие дизайну сайта и правилам юзабилити:
https://myrusakov. ru/html-404.html
https://www. unisender. com/ru/support/about/glossary/chto-oznachaet-oshibka-404-na-sajte-i-chto-s-nej-delat/
https://seoportal. net/baza/yuzabiliti/oshibka-404
