Error 404 (page not found) — корректная страница 404 ошибки в WordPress

Доброго здоровья всем читателям! Сегодня, продолжая тему оптимизации сайта, предложу вам инструкцию по созданию красивой и корректной страницы 404 вашей темы WordPress (обычно она имеет такой вид: error 404 — page not found).

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

Страница ошибки 404 - not found

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

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

Страница 404 блога WordPress до редактирования

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

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

Страница 404 блога WordPress после редактирования

Чтобы посмотреть, как выглядит любая вебстраничка error 404 — page not found (что означает ошибка 404 — страница не обнаружена) в браузере, добавьте в конце URL-адреса любой набор букв или цифр. Например, так:

//goldbusinessnet.com/fva

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

Как создать страницу ошибки 404 для блога WordPress

Теперь приступаем непосредственно к практике. В принципе, здесь ничего сложного нет. Прежде всего, загляните в раздел редактирования вашей темы «Внешний вид»→«Редактор» в админ панели. Там находятся файлы, определяющие внешний вид всех страничек блога WordPress (single.php, page.php, footer. php и т.д.).

Все необходимые действия будем производить с файлом 404.php (он должен называться приблизительно так). Можно редактировать его прямо в админке, однако гораздо более надежный вариант — использовать замечательный бесплатный HTML и PHP редактор notepad ++, основные преимущества которого заключаются в следующем:

  • Во-первых, в нем есть опция подсветки синтаксиса, это когда различные элементы кода окрашены в разные цветы, что создает дополнительные удобства при их изменении.
  • Во-вторых, есть возможность отменять сделанные изменения на множество шагов назад вплоть до первоначального варианта. Таким образом вы обезопасите себя от ошибок. Даже если наделаете косяков при редактировании и даже закроете себе доступ в админку Вордпресс, есть возможность, соединившись по протоколу FTP, привести нужный файл в первоначальный вид, нажав несколько раз на зеленую стрелочку в верхней панели инструментов notepad++ :

Функция отмены редактирования файла в панели инструментов notepad plus plus

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

Код файла 404.php по умолчанию

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

Изменение файла 404.php в HTML и PHP редакторе Notepad++

Вместо текста между закрывающим и открывающим тегами H2 «Error 404 — Not Found» я вставил «Простите, но, по всей видимости, такой страницы на нашем блоге не существует». Теги br определяют отступ на следующую строку. Таким образом, если содержание контента слишком уплотнено, можно использовать эти теги. Далее, я вставил изображение. О том, как использовать тег img для вставки html картинок я подробно рассказывал тут.

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

http://public_html/ваш_сайт/wp-content/uploads/2012/07/

В результате этих манипуляций я получил следующий код файла 404.php в админ панели WordPress:

Код 404.php в разделе редактирования админ панели WordPress после изменения

Теперь надо еще упомянуть ситуацию, когда у вас вдруг не оказалось файла 404.php. Тем не менее создание page not found просто необходимо. Дело в том, что при действующем ЧПУ и при наличии ошибки «Error 404 not found» Вордпресс выводит содержимое файла 404.php, а если его нет, то просто главную страницу. А это не есть хорошо, поскольку такая ситуация вводит посетителей в заблуждение. В этом случае можно создать 404.php.

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

<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="main-block">
<div id="content">
<h2>Простите, но, по всей видимости, такой страницы на нашем блоге не существует</h2>
<br>
<br>
<br>
<a href="http://ваш_сайт.ru/" target="_blank"><img class="aligncenter size-full" src="http://ваш_сайт.ru/wp-content/uploads/2012/картинка.jpg" width="xxx" height="yyy"></a>
<br>
<br>
<br>
<p> Просим извинения за причиненные неудобства. Однако Вы можете поискать требуемую информацию, воспользовавшись поиском, расположенным в в правом верхнем углу, <a target="_blank" href="http://ваш_сайт.ru/karta/">картой сайта</a>, либо списком рубрик, расположенным в левом сайдбаре. </p>
</div>
<?php get_footer(); ?>

Конечно, для эксклюзивности вставьте свой вариант текста, ну и ссылки будут другими. Не забудьте заменить ваш_сайт.ru на url своего ресурса, width (ширину) и height (высоту) значениями размера своего изображения. Ну и необходимо отредактировать полный путь до своего изображения в корневой папке. Конечно, вы можете вовсе не использовать изображение и придумать какой-то другой путь для создания странички 404. Для облегчения этой работы используйте великолепное расширение Firebug для Мазилы Фаерфокс (тут статья о том, как скачать бесплатно и настроить этот браузер), которое открывает путь к творчеству.

Используя этот плагин, можно буквально на лету редактировать любую страницу, совершенно не боясь допустить ошибку, поскольку он только показывает, как будет выглядеть документ в браузере, а окончательные изменения вносятся в файлы уже после этих изысканий. В дополнение скажу, что последние версии других популярных браузеров — Гугл Хром (скачать последнюю версию браузера, установить и настроить), Opera, IE9 — уже содержат встроенные опции, схожие с Firebug, однако последний я считаю пока самым функциональным.

Кстати, возможно Вам придется вносить определенные изменения и в стили CSS для придания надлежащего вида. Я покажу, что я изменил в коде при создании вебстраницы с 404 ошибкой. Дело в том, что высота страницы с контентом была слишком мала и изначально после окончания изменений ее элементы некорректно отображались в браузере. Поэтому я изменил  значения стилей, соответствующие контейнеру div id=“content”:

Редактирование кода CSS c помощью плагина Firebug в браузере Firefox

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

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

Поделиться с друзьями
Игорь Горнов

Создатель и администратор сайта Goldbusinessnet.com. Участник нескольких успешных проектов и автор более 1000 статей о работе в интернете, создании сайтов, полезных программах и сервисах.

Работа в интернете
Добавить комментарий

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

  1. Ирина

    Здравствуйте, Игорь!

    Спасибо за Ваш ответ. Как я устала от 404 ошибки, приходят на почту постоянно. Открываю — некоторые страницы мои родные. а некоторые действительно показывают 404 ошибку. Вердпресс у меня действительно не последний, предлагает обновиться (а от этого они тоже могут появляться, да?). Установила плагин Broken Link Checker Потом зашла в Инструменты — Неправильные ссылки, там было написано:

    Неправильные (0) |
    Перенаправленные (16) |
    Dismissed (0) |
    Все (615)

    Что это значит — хорошо у меня все или плохо? Подскажите, пожалуйста!

    Ответить
    1. Игорь Горнов автор

      Конечно, нормально, Ирина, ни одной битой ссылки (Неправильные) не обнаружено. Кстати, плагин Broken Link Checker мне импонирует, я им давно пользуюсь, никаких косяков в его работе замечено не было.

      Ответить
      1. Ирина

        Спасибо, Игорь! Успокоили!

        Ответить
        1. Игорь Горнов автор

          Пожалуйста, Ирина. 🙂

          Ответить
  2. Ирина

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

    Ответить
    1. Игорь Горнов автор

      Здравствуйте, Ирина. А скажите, каждый раз возникают новые страницы 404 или одни и те же? И какова природа их возникновения? Причины возникновения внутренних битых ссылок масса, в том числе их может генерировать сам WordPress. Скажите, у вас последняя версия движка? Проверьте на обновление плагины, которые Вы используете. А об удалении страниц из индекса в панели вебмастера Google почитайте здесь. В панели вебмастера Яндекс тоже есть похожая опция (здесь).

      Ответить
  3. Ирина

    Здравствуйте!

    Подскажите, пожалуйста, почему у меня очень много ошибок 404? Я установила плагин 404 Notifier (он присылает мне в ящик сообщения об 404) и SEO Ultimate, который тоже каждый день мне указывает на 404. Страница об ошибке 404 у меня правильная, красивая.
    Но что я неправильно делаю, почему их так много?
    Я новичок! Спасибо заранее! Буду ждать ответа.

    Ответить
    1. Игорь Горнов автор

      Ирина, много — это сколько? Скажите мне, Вы часто удаляете уже опубликованные страницы или меняете их URL? Вот, например, написали статью, но что-то Вам не понравилось и полностью ее удалили. Однако, если она уже проиндексирована поисковиками, то старый адрес никуда не исчезнет и будет выдавать ошибку 404. Точно также, если Вы изменили URL проиндексированной вебстраницы, то в индексе останется еще и старый адрес, это тоже потенциальная страница 404. Все такие web-страницы можно заказать на удаление в панели Вебмастеров Яндекс и Гугл.

      Ответить
  4. Николай Гижицкий

    Да, да, да! Приятно попасть на приятную страницу ошибки, чем на сухой текст. 🙂

    Ответить
  5. Елена

    Значит все нормально? Спасибо, Игорь!

    Ответить
    1. Елена

      Игорь, а если сайт зарегистрирован в сервисе Tynt, (отслеживание копирования текста) и после этого, в конце адреса стала добавляться абракадабра из букв http://zhenskajslabost.ru/chto-prigotovit/pirog-kapustnyj#axzz2CqCcrw5s. Это может быть причиной ошибки 404? То есть поисковая система вообще не может индексировать адрес из-за этого?

      Ответить
      1. Игорь Горнов автор

        Елена, я не могу ничего Вам сказать по этому поводу, к сожалению, потому что не пользуюсь этим сервисом. Попробуйте зайти в панель Яндекса или Google и посмотрите, с каким адресом вообще проиндексированы Ваши статьи (есть ли последние знаки в url). Тогда можно делать выводы.

        Ответить
        1. Елена

          Спасибо, Игорь!

          Ответить
  6. Елена

    Игорь, подскажите, если при отправлении ссылки для яндекс-индексации появилось сообщение Для заданной страницы (или страницы, полученной после перенаправления) сервер возвращает код статуса http 404 (ожидался код 200)
    При том уже не первый день так. Что это может быть?

    Ответить
    1. Игорь Горнов автор

      Елена, ошибка 404 означает, что такой страницы не существует. Она была либо удалена, либо ее адрес(url) был изменен, однако она уже была проиндексирована, поэтому и возникает такое сообщение.

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

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

    ErrorDocument 404 /?error=404

    Ответить
  8. нерадивый бухгалтер

    Никак не дойдут руки, все собираюсь собираюсь.

    Ответить
    1. Игорь Горнов автор

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

      Ответить
  9. Людмила

    С Вордпрессом понятно в том плане, что в панели управления есть подсказки по URL. Но все-равно спасибо. А вот с блогспотом — караул!Короче еще завтра посижу, если что напишу в контакты.

    Ответить
    1. Игорь Горнов автор

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

      Ответить
  10. Людмила

    Нет, я ничего не удаляла. Ошибок оказывается у меня много на сайте. Сижу разбираюсь, читаю, но наверное, это сложно для меня.Когда программа выдает ошибки, она и показывает адрес страницы, которую нельзя найти. Я вставляю адрес в браузер, выдает 404…Надо же как — то эти ошибки исправлять. А как?

    Ответить
    1. Игорь Горнов автор

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

      Ответить
  11. Людмила

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

    Ответить
    1. Игорь Горнов автор

      Людмила, скажите, а Вы сами знаете url этой страницы? Может быть, Вы случайно удалили ее?

      Ответить