Страница 404. Как улучшить страницу ошибки на своём блоге | Заметки вебмастера






Как улучшить страницу ошибки 404 на блоге

страница 404Всем здравствуйте!

Давно не писал статей, уважаемые посетители, так как был занят более важным делом: оптимизацией блога.

Немного отредактировал посты и сделал дополнительную внутреннюю перелинковку страниц.

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

Что такое страница 404?

Страница 404 это страница на вашем блоге, на которую попадет посетитель в том случае, если:

  • Ссылка страницы была прописана в строке браузера с ошибкой
  • Ссылка просто не рабочая (битая ссылка)
  • Страницы с таким адресом на Вашем блоге не существует.

Надеюсь, Вы поняли само определение страницы 404.

Зачем нужна на Вашем блоге страница  404?

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

Однако, это произойдёт только в том случае, если она создана в шаблоне Вашего блога.

В большинстве случаев в темах блогов или сайтов включен стандартный ответ при ошибке 404. В основном он имеет вот такой вид:

страница 404

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

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

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

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

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

На моем блоге страница 404 до усовершенствования отображалась вот так:

страница ошибки 404

Согласитесь, моя страница 404 отображается намного лучше, чем стандартная. Однако, она далеко не предел совершенства.

Поэтому я захотел ее отредактировать. Мне хотелось создать более информативную страницу для своего посетителя.

Как создать страницу 404

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

страница 404

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

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

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

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

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

Вы можете предоставить другую ссылку. Например, на самые интересные и популярные записи своего блога.

Также я предложил посетителю воспользоваться поиском по моему блогу. С его помощью он сможет найти нужную информацию.

Эта опция заметно облегчит ему сам процесс поиска. Добавьте ее обязательно!

Ну а теперь я хотел бы рассказать Вам в деталях о том, как  это осуществить.

Страница 404.  Как её отредактировать?

страница 404На самом деле это сделать не сложно, если Вы немного разбираетесь в кодах и html программировании. Однако, хочу Вас успокоить.

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

Чтобы приступить к редактированию файла ошибки 404, Вам нужно будет найти и открыть файл шаблон ошибки 404 или 404.php.

Зайдите в свою панель администрирования WordPress и перейдите по вкладкам Внешний вид—>Редактор—>Шаблон ошибки 404.

Имеется подобный файл у Вас? Если он отсутствует, значит просто не предусмотрен темой Вашего блога.

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

Перед тем как начать редактирование этого файла, скопируйте его на свой компьютер с помощью любого Фтп — клиента. Если не знаете, как это осуществить, прочитайте мою предыдущую статью про то, как сделать резервную копию файлов блога.

Можете сделать проще. Просто откройте этот файл и скопируйте весь код в программу Notepad++. Если что-то пойдёт не так, Вы всегда сможете вернуть прежний код на своё место.

Итак, продолжим. Надеюсь, Вы уже перешли по вкладкам в файл шаблон ошибки 404.

Ну а теперь посмотрите, какие дополнения я внёс в свой файл ошибки 404:

страница 404

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

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

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

Вместе с улучшением страницы 404 я предлагаю вам немного поработать над дизайном и разместить у себя на веб-ресурсе красивую электронную подпись. Это отличный и уникальный элемент дизайна!

Вот и всё. Надеюсь, был Вам полезен. До встречи в моих новых статьях. Пока.

Успехов Вам и Удачи
С Уважением,


Книга о заработке в интернете:
Книга о заработке в интернете

Комментариев к статье: 69

  1. Денис Скрипник:

    Я улучшил так:
    1. Уведомление о том, что страница не найдена.
    2. Меню сайта.
    3. карта сайта по датам и по категориям.
    4. Ссылка «Назад».
    Правда не помню, на каком из своих сайтов это реализовал.
    Точнее кнопку «назад» и меню (не в шапке). Остальное есть включено по умолчанию в Maxsite CMS.

    Ответить

    • Сергей:

      Интересная структура получилась http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif Хотелось бы посмотреть её в действии

      Ответить

      • Денис Скрипник:

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

        Ответить

      • Alexandr:

        Зачем меню сайта в 404 страницу вписывать. Никто читать не станет меню.

        Ответить

    • Иван:

      Не перегружено получилось содержанием?

      Ответить

      • Alexandr:

        Чем перегружено? Картинкой для привлечения внимания посетителя? Она байты весит.

        Ответить

  2. Юлия:

    Как это, оказывается, просто все делается. У меня такой страницы нет. У Вас она очень привлекательная! Соберусь с духом — тоже обязательно сделаю. http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif

    Ответить

    • Сергей:

      Спасибо! Я старался http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

      Ответить

  3. Евгения Куварина:

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

    Ответить

    • Сергей:

      Всему своё время http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif

      Ответить

      • Alexandr:

        Зато у Евгении сайт очень хороший и быстро грузится. Она выше многих блогеров на голову.

        Ответить

  4. Евгений:

    Статья полезна для любого новичка, да и для опытного я думаю что лишним не будет. Сергей, вот если бы ты ещё заготовку кода дал, было совсем классно. У меня сделана 404, но возможно что-то и заменю http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

    Ответить

    • Сергей:

      Не вопрос, Евгений. Вот мой первоначальный файл ошибки 404, который шёл вместе с шаблоном:
      Файл ошибки 404

      Ответить

  5. Геннадий Ольховский:

    Сергей спасибо за подробный мануал, отлично все объяснил. Жаль, что я уже сделал свою страницу, только не могу вставить в код, чтобы работали категории и последние публикации. Если бы ты мог помочь, было бы прекрасно.http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gifhttp://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif

    Ответить

    • Сергей:

      Пожалуйста, Геннадий! Вы хотите вывести на этой странице категории и публикации?
      Или как у меня поставить ссылку на страницу «Все статьи»?

      Ответить

      • Геннадий Ольховский:

        Сергей я Гена, вывести хочу последние публикации и категории, статьи это и в карте блога есть, а вот она как раз и установлена. Вот посмотри: страница 404 как она тебе?

        Ответить

        • Сергей:

          Только выводить публикации на странице 404 зачем?
          Ссылка на карту сайта у тебя уже присутствует.
          Выровняй по центру текст, поставь ссылку на главную, поле для поиска по ширине укороти и шрифт ссылки «карта сайта» уменьши.
          И всё будет ок http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

          Ответить

          • Геннадий Ольховский:

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

            Ответить

  6. Сергей:

    Ок, Геннадий, давай посмотрю http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

    Ответить

  7. Геннадий Ольховский:
    • Сергей:

      Геннадий, отправил вам на почту исправленный код http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

      Ответить

  8. Аня:

    У меня она изначально темой была предусмотрена, но смотрится как то скучно, а руки до сих пор не дошли ее сделать) Спасибки за напоминания)http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

    Ответить

    • Сергей:

      Всегда пожалуйста, Аня http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif

      Ответить

  9. Юлия:

    Сергей, уточните мне — чайнику, как добавить картинку для страницы 404? В медиафайлы или нужно на хостинг закидывать через ФТП?

    Ответить

    • Сергей:

      Да нет, Юлия, можно обойтись и без ФТП. Воспользуйтесь в админпанеле медиафайлами.
      Кстати, когда Вы загружаете через медиафайлы, то картинки появляются у Вас на хостинге в папке с изображениями http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif

      Ответить

  10. Юлия:

    Понятно! Это немного проще, когда без ФТП. А то для меня целая трагедия работать через него. И, вообше, жутко боюсь коды редактировать. Несколько раз блог с катушек съезжал..

    Ответить

    • Сергей:

      А Вы сделайте резервную копию файлов и редактируйте.
      Зачем бояться? http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

      Ответить

      • Геннадий Ольховский:

        Для Юля, это тяжело. Серега, а почему бы не объяснить, что картинку просто через админку так не засветишь в сети, чтобы её кто-то увидел? Её сначала надо закинуть в библиотеку медиа-файлов сохранить в черновике, а лишь потом она сможет появиться нете, иначе не получиться. Или я чего-то не правильно понял? http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif

        Ответить

        • Сергей:

          Геннадий, можно засветить картинку и без этих премудростей.
          Просто прописать соответствующие директивы в robots.txt:

          User-agent: Googlebot-Image
          Allow: /wp-content/uploads/

          User-agent: YandexImages
          Allow: /wp-content/uploads/ http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif

          Ответить

          • Юлия:

            А какая функция у этих строк в Роботсе?

            Ответить

          • Геннадий Ольховский:

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

            Ответить

  11. Denis:

    Отличная и полезная статья. Ведь этот шаг обязателен с начала создания блога.

    Ответить

    • Сергей:

      Спасибо за высокую оценку моей деятельности, Денис http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

      Ответить

  12. Denis:

    Я как раз работаю над ней.

    Ответить

  13. Сергей:

    Юлия, эти строки разрешают индексацию папки с вашими изображениями на хостинге для роботов Яндекса и Гугла http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif

    Ответить

    • Юлия:

      Спасибо! Разъяснили. Подыскиваю подходящее изображение. Хочу в ближайшее время повозиться и сделать тоже новую 404.

      Ответить

      • Сергей:

        Всегда пожалуйста http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif
        Желаю удачи, Юлия, в создании странички 404

        Ответить

  14. Denis:

    Да, создав такую страницу и правильно ее оформив мы не потеряем посетителя. Может конкурс замутить на лучшую страницу 404? Помню у кого то он уже проходил….

    Ответить

    • Сергей:

      Да, классная идея, Денис http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

      Ответить

  15. Юлия:

    И мне идея нравится. Я свою уже поменяла. Еще немножко осталось со стилями поиграться. Заходите ко мне в гости. Оцените…http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif

    Ответить

  16. Дмитрий:

    Интересная статья, вот только код надо было текстом писать, что бы можно было скопировать! В конце игрулька порадовала!)))http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

    Ответить

  17. Denis:

    Кстати тег center не валиден, да и устарел он ужо давно.

    Ответить

    • Сергей:

      Да, валидностью нужно заниматься, подправлять ошибки, да и статью написать про результаты http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif
      Денис, а ты каким тегом пользуешься для отцентровки текста?

      Ответить

      • Denis:

        Я не пользуюсь тегами для отценровки, для этого есть CSS

        Ответить

  18. Юлия:

    Попробую изменить отцентровку. Про валидность не знала. Исправлюсь!http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif

    Ответить

    • Denis:

      Юлия, обращайтесь если что не получится.

      Ответить

  19. Нина:

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

    Ответить

  20. Андрей Косолапов:

    Интересная страничка, но как то Вы написали все сложно. Хотя это сделать легко. Я тоже сразу делал в файле functions.php , а потом мне посоветовали. Открыть файл 404, удалить все содержимое, а на это место прописать новый код. Для этого надо просто сделать в админке красивую запись, потом перейти в режим ТЕКСТ и скопированный код поставить куда надо. Моя страница выглядит так: telets.com.zp.ua/uii

    Ответить

    • Сергей Саранчин:

      Классная страница, Андрей. Кина не будет))

      Ответить

  21. Alexandr:

    Страница ошибки 404 с котиком мне понравилась. Задержал внимание секунд на пять. Можно на этой странице посетителям предложить решить лёгкую задачку.

    Ответить

    • Сергей Саранчин:

      Да. неплохо. Надо что-нибудь придумать :smile:

      Ответить

    • Виталий Охрименко:

      Вообще четкая идея. Если посетители еще и на странице ошибки будут задерживаться, тогда точно попрет!

      Ответить

  22. Alexandr:

    Лучше не доводить ситуацию до страницы 404. За это Адсенс банит.

    Ответить

    • Игорь:

      Да сейчас все строго.Все банится блокируется.
      Короче нужен глаз да глаз.

      Ответить

  23. Виталий Охрименко:

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

    Ответить

    • Сергей Саранчин:

      Да, Виталий, я думаю не имеет смысла ковыряться в старом шаблоне. Установите новый и тогда приступите к работе :smile:

      Ответить

      • Alexandr:

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

        Ответить

  24. Иван:

    Когда делал 404 страницу — был один нюанс — изображение в формате jpeg не подгружалось , бился с размерами, в итоге в png загрузил и встало нормально. Хотя в последующем, анализируя поведенческие факторы отказался от изображения совсем. :smile:

    Ответить

    • Сергей Саранчин:

      Иван, получилось так, что изображение не понадобилось? Мне кажется с ним веселее смотрится страница 404 :grin:

      Ответить

      • Alexandr:

        У Ивана файл jpeg не подгружался, получилось в png. Надо было jpeg в jpg перевести.

        Ответить

  25. Наталья:

    Отправляюсь колдовать…очень волнуюсь, но надеюсь, что всё получится

    Ответить

    • Alexandr:

      Картинку привлекательную подобрали как у Александра с симпатичной женщиной и задержка юзера на 10 секунд обеспечена.

      Ответить

  26. Александр:

    Сергей Большущее тебе спасибо за статью и понятную инструкцию все сделал не спеша и вот какая у меня страничка получилась=)))) workdoma.ru/404

    Ответить

    • Сергей Саранчин:

      Отлично, Александр! Рад был тебе помочь! :arrow:

      Ответить

    • Alexandr:

      Александр, мне понравилась страница. Я на попу женщины, стоящую в воде, секунд пять смотрел :smile:

      Ответить

      • Александр:

        :cry: Рад что понравилась, с начало попа женщины а потом уже сама страница=))) Так все и задумано!!!

        Ответить

  27. Alexandr:

    При создании 404 важен код ответа сервера, в статье ни слова об этом.

    Ответить


НАПИШИТЕ СВОЙ ПЕРВЫЙ КОММЕНТАРИЙ НА ЭТОМ БЛОГЕ И ПОЛУЧИТЕ ПОДАРКИ!

Нажимая кнопку "ОТПРАВИТЬ" комментарий, Вы принимаете пользовательское соглашение и подтверждаете, что ознакомлены и согласны с политикой конфиденциальности этого сайта.

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: