Ошибка 404. Что нужно знать?

20.02.2012

Ошибка 404

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

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

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

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

Откуда берутся ссылки на такую страницу?

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

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


Почему ошибка 404 это плохо?


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

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

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


Как найти битые ссылки?

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

Для выявления битых ссылок у себя на блоге я использую плагин «Broken Link Checker«, который замечательно с этим справляется. Он выдает список всех неправильных ссылок, которые ведут на несуществующие страницы и вы сами выбираете, что с ними делать.

Также необходимо настроить сервис статистики, который вы используете, на отслеживание переходов по битым ссылкам. Это позволит выяснить, откуда идут переходы и попробовать на это повлиять. Обычно, такую проблему решают с помощью 301 редиректа в htaccess. Принцип такой — смотрим, на какую страницу идут переходы, выбираем новую страницу, которая будет релевантна, ставим на нее 301 редирект со старой. Постепенно ПС «переклеят» ссылки.


404 not found — как удержать посетителя?

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

  • Юмор. Да, случилась неприятная ситуация, посетитель растерян — заставьте его немного улыбнуться и он охотнее перейдет на главную вашего сайта или куда вы там его решили направить. Только не переусердствуйте. Анекдоты травить не нужно, цените время посетителя и не переоценивайте свое чувство юмора.
  • Ссылки. Это обязательно. Не заставляйте его что-то набирать руками для перехода на главную. Дайте человеку кнопку или ссылку.
  • Немного текста. Расскажите, что произошло, как ему надо действовать. Возьмите инициативу в свои руки. Не надо устраивать ликбез по стандартным кодам ошибок HTTP, текста должно быть немного.
  • Оригинальность. Ваша страница 404 не должна быть похожа на другие 100500 тыщ подобных страниц в Сети.
  • Логотип. У вашего проекта есть логотип? Вот и отлично, найдите ему мест на странице. Человеку станет ясно, что он попал куда нужно, только дверью ошибся.

Страница 404 — применяем магию CSS3

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

Скажу сразу — пример основан на CSS3 анимации, которая корректно работает только в Хроме/Сафари и Firefox. Остальные браузеры не видят анимации, но блоки отображают нормально.

<meta http-equiv="Content-Type" content="text/html" />404 - Страница не найдена	<link href="404.css" rel="stylesheet" media="screen" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Ubuntu:300&subset=cyrillic,latin" rel="stylesheet" type="text/css" /></pre>
<div id="wrapper">
<div id="main">
<div id="header">
<img class="icon" alt="Warning, 404" src="images/404_icon.png" /></div>
<div id="content">
<h2>Ошибка 404</h2>
<strong>Страница не найдена</strong>. Такое иногда случается.
Самые вероятные причины - устаревшая ссылка
или страница была удалена автором.
Перейдите на <a href="http://gering111.com/">главную страницу</a> и попробуйте
начать оттуда.</div>
<div id="footer">
<ul>
<li><a href="http://gering111.com/">Главная</a></li>
<li><a href="http://gering111.com/predlogenie/">Контакты</a></li>
<li><a href="http://gering111.com/karta-sayta/">Карта сайта</a></li>
</ul>
</div>
</div>
</div>
<pre>

Как видите, ничего сложного. Я подключаю шрифт из репозиториев Гугла(что это?) и больше ничего особенного. Теперь перейдем к CSS, все скрывается там:

body{
background:#dfdfdf url(images/404_bg.jpg) repeat;
font-family:'Ubuntu', sans-serif;overflow: hidden}
/*описываем анимацию*/
@-webkit-keyframes anim{
0% {-webkit-transform: scale3d(0.1, 0.1, 1);opacity: 0;}
45% {-webkit-transform: scale3d(1.07, 1.07, 1);opacity: 1;}
70% { -webkit-transform: scale3d(0.95, 0.95, 1) }
100% { -webkit-transform: scale3d(1, 1, 1)}}
@-moz-keyframes anim{
0% {-moz-transform: scale(0.1, 0.1);opacity: 0;}
45% {-moz-transform: scale(1.07, 1.07);opacity: 1;}
70% { -moz-transform: scale(0.95, 0.95) }
100% { -moz-transform: scale(1, 1) }}
#main {position: relative;padding-top: 8%;
-webkit-animation-name: anim;/*применяем анимацию к блоку*/
-moz-animation-name: anim;
-webkit-animation-duration: .8s;/*длительность анимации*/
-moz-animation-duration: 800ms;}

Я разбил анимацию на 4 этапа, которые описываются стилями по отдельности. Это видно из кода, 0 — 45 — 70 — 100, для каждого установлена трансформация и прозрачность.

  • 1 этап анимации — 10% размера блока и полная прозрачность.
  • 2 этап — 107% размера и полная непрозрачность
  • 3 этап — 95% размера
  • 4 этап — нормальное состояние, 100% размер и полная непрозрачность.
После описания анимации, нужно назначить ее для блока, к которому она будет применяться и установить длительность. В коде я отметил это комментариями.

И остальная часть CSS, в которой уже нет ничего необычного.

#header {margin:0 auto;width:400px}
.icon {
position:relative;
width:400px;
height:150px;
margin-bottom: 15px}
#content {
position:relative;
margin: 0 auto;
width:600px;
background:white;
border:solid 3px #f2f2f2;
-moz-box-shadow: 0 0 0 1px #bfbfbf;
-webkit-box-shadow: 0 0 0 1px #bfbfbf;
box-shadow: 0 0 0 1px #bfbfbf;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
text-align:center}
#content h2 {
background: url(images/404_s-divider.jpg) no-repeat;
background-position:bottom;
padding:0 0 20px 0;
font-size:30px;
color:#F3081D}
#content p {
position: relative;
font-size: 20px;
color: #8e8e8e;
line-height:150%;
letter-spacing: 1px}
#footer {
position: relative;
margin:0 auto;
text-align:center}
#footer ul{padding:0px}
#footer ul li {display: inline;margin: 0 10px}
#footer ul li a {
font-size: 16px;
color:#8e8e8e;
text-shadow: 0 1px #fff;
text-decoration: none}
#footer ul li a:hover {
color:#0061a5;
text-decoration:underline}

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


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

Удачного вам дня

follow us in feedly

, , ,

Комментариев: 41

  1. Лидия

    Добрый вечер.
    В моем блоге возникла некая проблема.
    На главной странице показывает половина страницы моего блога и так же Error 404 not found.
    Когда перехожу на другие странички, все нормально.
    Проблема только на главной странице.
    Мой блог : kardava.me
    Помогите пожалуйста.
    Доброго вам вечера.

    Ответить
  2. BUTAMUHbI4

    Доброго времени.
    А вот предположим, тема имеет свою страницу 404 (файл 404.php в папке с темой). Мне эта страница не нравится и я хочу её заменить на свою. НО! Я не хочу лезть в файлы темы (в данном случае в 404.php), т.к., сами понимаете, при последующих обновлениях темы надо будет проделывать определённые операции заново. Так вот, внимание, вопрос:
    «Как заменить страницу 404 ТЕМЫ(!) на свою, не ковыряя код темы?»
    Сразу уточню: фильтр на «the_content» с парсингом контента не помогает. Почему — не знаю.

    Ответить
  3. Галина Торосян

    Не открывается браузер Гугл-хром, появляется страница с надписью : Ошибка 404, страница не найдена. Хотелось бы узнать, почему. Выхожу из положения тем, что на панели закладок есть Гугл, Одноклассники и другие закладки. Мне гугл-хром очень нравился. Помогите, пожалуйста, советом. С уважением и благодарностью Г.Торосян

    Ответить
  4. Андрей

    Понятно все, статья написана на твердую пятерку. Зачет!

    Ответить
  5. Связной

    Вот тут интересное решение для страницы 404 — студия звукозаписи даёт случайный бонус: или скидку 10% на услуги, или бесплатный файл.

    http://dasound.net/404

    Ответить
  6. Сергей

    Добрый день, Иван!
    Подскажи, пожалуйста, что мне делать? Установил на сайт плагин для удаления /category/ в адресной строке. А потом заметил, что при добавлении Отзыва в карточке товара, страница выдаёт 404 ошибку! Хотя Отзыв и появляется после обновления страницы. У меня стоит Woocommerce. Вообще, как исправить эту ошибку?

    Ответить
    • GerinG

      Не совсем Иван, но отвечу, если вы не против
      С Woo не стоит использовать подобных плагинов. Он использует свою систему ЧПУ, которую можно настроить на странице «Постоянные ссылки»

      Ответить
  7. KrediT

    Спасибо интересная вещь нужно будет как нибудь воплотить на своем сайте!

    Ответить
  8. Елена Жильник

    А у меня Одноклассники не открываются, выскакивает эта самая 404 ошибка. Как быть?

    Ответить
  9. Elena

    Здравствуйте, Виктор! Спасибо за инфу! У меня проблема непонятная, может быть поможете разобраться… Я зашла в редактор темы в админке сайта и хотела поставить виджет комментариев , для этого надо было зайти в (header.php) , при нажатии на него меня перекинуло на страницу ошибки 404 и на ней почему-то отобразилась карта сайта. Что делать? Помогите, пожалуйста…

    Ответить
    • GerinG

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

      Ответить
  10. Александр

    Для сервера типа Apache должен быть файл у папки со страницами сайта и названием
    «.htaccess» и содержанием файла хотя бы:

    ErrorDocument 404 /?error=404

    Ответить
    • GerinG

      Не обязательно. WP замечательно отрабатывает эту ошибку и показывает страницу 404 шаблона

      Ответить
  11. Иван Евдокимов

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

    Геринг, а есть ещё возможность как-нибудь с Вами связаться? Ага, вот, вижу, контакты. С работы приду — напишу Вам, не против?

    Ответить
  12. GerinG

    Иван Евдокимов, ничего страшного, все так начинали. А проблема в том, что страница не загружает файлы 404_icon.png и 404.css. Проверьте пути к этим файлам, проблема с абсолютным / относительным указанием пути. Т.е. вы указываете путь относительно файла 404.php, а нужно бы указать в абсолютной форме

    Ответить
  13. Иван Евдокимов

    Текст в файле есть, а в итоге его нет, видимо, так… Файл 404.css остался практически таким же, каким он был в Ваших исходниках, но вот почему CSS не «доходит» при выводе страницы — вопрос.
    Честно сказать, я во всём этом новичок, только учусь, перемещаясь по различным форумам и блогам=)

    Ответить
  14. GerinG

    Иван Евдокимов — для начала, я не вижу, чтобы в файле 404.css, который подключен, было что-то написано. Может, проблема в этом?

    Ответить
  15. Иван Евдокимов

    Доброй ночи.
    У меня сайт на фреймворке от woothemes, и он иногда выносит мне мозг несовместимостью с важными плагинами. Но CSS… Это вообще что-то.
    Есть спецфайл с CSS — custom.css, куда юзер должен складировать свои изменения в CSS, ибо в основном файле они могут вызвать некорректные реакции, что уже бывало.
    В общем, добавил 404.css в нужную папочку, картинки скинул (поменял фон только), изменил код в родной 404 странице… Результат здесь — .
    Не подскажите, что можно сделать или может я что-то неправильно сделал? Не хочу заставлять Вас работать экстрасенсом, отвечу на все вопросы подробно, если они возникнут.

    Ответить
  16. Виктор Милашечкин

    Прошу прощения, комментарий почему то попал в спам, нашел его только сегодня. Открываться то он открывается, но при входе на мой домен с www происходит 301 редирект на домен без www. Собственно, это и есть защита от дублирования контента, если простыми словами. Подробнее про редиректы, в том числе и доменов, я писал тут 
    http://gering111.com/10-nastroek-htaccess/

    Ответить
  17. Эльвира

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

    Ответить
    • Виктор Милашечкин

      Самая первая причина — постоянно возрастающая нагрузка. Поэтому ненужная красота уходит. Ведь люди приходят за контентом, а не поглазеть

      Ответить
  18. Эльвира

    Виктор, привет! Статья, как всегда, на 5+!!!
    Но у меня проблема с просмотром ДЕМО — сплошные иероглифы. Кстати, не только в этом случае. Некоторые сайты также выглядят «сплошными иероглифами». Именно в заголовках, где шрифты Coofon. Не подскажешь, как избавиться от этого? Браузер — Google Chrom. Спасибо!

    Ответить
    • Виктор Милашечкин

      Попробуйте еще раз, прописал принудительно кодировку, у некоторых кривовато было, не все браузеры определяли нормально. 
      От подобных вещей замечательно помогает надавать по рукам вебмастеру )) А если серьёзно — менять кодировку в браузере на таких сайтах. Кстати, с Хромом у меня подобных проблем никогда не было.

      Ответить
      • Эльвира

        Спасибо за столь быстрый ответ, уважаемый Виктор! Отличная работа. Теперь ДЕМО страницы посмотрела. Попробую реализовать у себя. «Я ведь еще не волшебник, я только учусь»)))      
        А можно такой вопрос: еще недавно в индексе Яндекса были у меня 60 страниц и вдруг — осталась только 1 главная. Я думаю, из-за шаблона (обнаружила случайно несколько ссылок на какие-то секс веб-камеры (( Слава Богу, нашла этот авторский сайт (правда, сначала имя меня насторожило — Геринг, да еще 111… Но «искала тебя не напрасно я, в сердце надежду тая…»)))  Поставила шаблон Swagger, ссылок левых, конечно, нет))) За что отдельное спасибо! 
        Так вот, вопрос: Виктор, а не известны ли тебе способы выведения сайта из-под фильтра Яндекса? С Google пока проблем не было — страниц даже больше, чем надо в индексе (Кстати, это, возможно, тоже ни к чему). 
        Благодарю.   

        Ответить
        • Виктор Милашечкин

          К сожалению, не могу назвать себя великим спецом по SEO, поэтому просто посоветую сходить сюда —   http://cospi.ru/filtry-yandeksa/ Это сайт моего хорошего знакомого, который в этих делах разбирается больше. И статейка как раз про фильтры Яндекса.

          Ответить
  19. Иван Моисеев

    Действительно креативно! А как же поиск рекомендованый Гуглом по сайту на этой странице или ссылка на карту сайта или сама карта сайта?

    Ответить
    • Виктор Милашечкин

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

      Ответить
  20. Антон Симерня

    И еще комментарий по блогу — под комментарием отображается «n назад». n чего назад?) минут?

    Ответить
  21. Антон Симерня

    В демо указать бы кодировку явно, а то ФФ не понял

    Ответить
  22. akkad

    Отличная информативная статья =) Есть ещё одна программа XEnu’s Link — тоже для проверки битых ссылок, правда если блог большой — нагружает сервер. Я о ней у себя писал.
    А вообще в панелях вебмастера на Гугле и Яндексе есть вполне информативные сведения о 404 ошибках, и где на них ссылки стоят. Так что плагин можно отключить, чтобы не грузить блог) Вы недавно об этом писали, как плагины грузят сервер.

    Ответить
    • Виктор Милашечкин

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

      Ответить