Как улучшить страницу ошибки 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 я предлагаю вам немного поработать над дизайном и разместить у себя на веб-ресурсе красивую электронную подпись. Это отличный и уникальный элемент дизайна!
Вот и всё. Надеюсь, был Вам полезен. До встречи в моих новых статьях. Пока.
Успехов Вам и Удачи С Уважением,
Комментариев к статье: 69
Нажимая кнопку "ОТПРАВИТЬ" комментарий, Вы принимаете пользовательское соглашение и подтверждаете, что ознакомлены и согласны с политикой конфиденциальности этого сайта.
Я улучшил так:
1. Уведомление о том, что страница не найдена.
2. Меню сайта.
3. карта сайта по датам и по категориям.
4. Ссылка «Назад».
Правда не помню, на каком из своих сайтов это реализовал.
Точнее кнопку «назад» и меню (не в шапке). Остальное есть включено по умолчанию в Maxsite CMS.
Ответить
Интересная структура получилась
Хотелось бы посмотреть её в действии
Ответить
Что-то удалил файл. Видимо когда возился с шаблоном. Так что как найду реализацию, поставлю на блог и напишу статью.
Ответить
Будем ждать
Ответить
Зачем меню сайта в 404 страницу вписывать. Никто читать не станет меню.
Ответить
Не перегружено получилось содержанием?
Ответить
Чем перегружено? Картинкой для привлечения внимания посетителя? Она байты весит.
Ответить
Как это, оказывается, просто все делается. У меня такой страницы нет. У Вас она очень привлекательная! Соберусь с духом — тоже обязательно сделаю.
Ответить
Спасибо! Я старался
Ответить
Я все никак не улучшу свою страницу, а надо бы, хотя бы ссылку на карту блога туда вставить, да и вообще сделать ее симпатичной
Ответить
Всему своё время
Ответить
Зато у Евгении сайт очень хороший и быстро грузится. Она выше многих блогеров на голову.
Ответить
Статья полезна для любого новичка, да и для опытного я думаю что лишним не будет. Сергей, вот если бы ты ещё заготовку кода дал, было совсем классно. У меня сделана 404, но возможно что-то и заменю
Ответить
Не вопрос, Евгений. Вот мой первоначальный файл ошибки 404, который шёл вместе с шаблоном:
Файл ошибки 404
Ответить
Сергей спасибо за подробный мануал, отлично все объяснил. Жаль, что я уже сделал свою страницу, только не могу вставить в код, чтобы работали категории и последние публикации. Если бы ты мог помочь, было бы прекрасно.
Ответить
Пожалуйста, Геннадий! Вы хотите вывести на этой странице категории и публикации?
Или как у меня поставить ссылку на страницу «Все статьи»?
Ответить
Сергей я Гена, вывести хочу последние публикации и категории, статьи это и в карте блога есть, а вот она как раз и установлена. Вот посмотри: страница 404 как она тебе?
Ответить
Только выводить публикации на странице 404 зачем?
Ссылка на карту сайта у тебя уже присутствует.
Выровняй по центру текст, поставь ссылку на главную, поле для поиска по ширине укороти и шрифт ссылки «карта сайта» уменьши.
И всё будет ок
Ответить
Сергей, я это пробовал сделать, на центр не проблема, а вот меньше текст и главную ну ни как. Я сейчас скину тебе на мыло файл с кодом, посмотришь.
Ответить
Ок, Геннадий, давай посмотрю
Ответить
Уже!
Ответить
Геннадий, отправил вам на почту исправленный код
Ответить
У меня она изначально темой была предусмотрена, но смотрится как то скучно, а руки до сих пор не дошли ее сделать) Спасибки за напоминания)
Ответить
Всегда пожалуйста, Аня
Ответить
Сергей, уточните мне — чайнику, как добавить картинку для страницы 404? В медиафайлы или нужно на хостинг закидывать через ФТП?
Ответить
Да нет, Юлия, можно обойтись и без ФТП. Воспользуйтесь в админпанеле медиафайлами.
Кстати, когда Вы загружаете через медиафайлы, то картинки появляются у Вас на хостинге в папке с изображениями
Ответить
Понятно! Это немного проще, когда без ФТП. А то для меня целая трагедия работать через него. И, вообше, жутко боюсь коды редактировать. Несколько раз блог с катушек съезжал..
Ответить
А Вы сделайте резервную копию файлов и редактируйте.
Зачем бояться?
Ответить
Для Юля, это тяжело. Серега, а почему бы не объяснить, что картинку просто через админку так не засветишь в сети, чтобы её кто-то увидел? Её сначала надо закинуть в библиотеку медиа-файлов сохранить в черновике, а лишь потом она сможет появиться нете, иначе не получиться. Или я чего-то не правильно понял?
Ответить
Геннадий, можно засветить картинку и без этих премудростей.
Просто прописать соответствующие директивы в robots.txt:
User-agent: Googlebot-Image
Allow: /wp-content/uploads/
User-agent: YandexImages
Allow: /wp-content/uploads/
Ответить
А какая функция у этих строк в Роботсе?
Ответить
Cергей, у меня так роботс и прописан, но картинку без публикации или сохранить в библиотеке, почему-то не выдает.
Ответить
Отличная и полезная статья. Ведь этот шаг обязателен с начала создания блога.
Ответить
Спасибо за высокую оценку моей деятельности, Денис
Ответить
Я как раз работаю над ней.
Ответить
Юлия, эти строки разрешают индексацию папки с вашими изображениями на хостинге для роботов Яндекса и Гугла
Ответить
Спасибо! Разъяснили. Подыскиваю подходящее изображение. Хочу в ближайшее время повозиться и сделать тоже новую 404.
Ответить
Всегда пожалуйста
Желаю удачи, Юлия, в создании странички 404
Ответить
Да, создав такую страницу и правильно ее оформив мы не потеряем посетителя. Может конкурс замутить на лучшую страницу 404? Помню у кого то он уже проходил….
Ответить
Да, классная идея, Денис
Ответить
И мне идея нравится. Я свою уже поменяла. Еще немножко осталось со стилями поиграться. Заходите ко мне в гости. Оцените…
Ответить
Интересная статья, вот только код надо было текстом писать, что бы можно было скопировать! В конце игрулька порадовала!)))
Ответить
Кстати тег center не валиден, да и устарел он ужо давно.
Ответить
Да, валидностью нужно заниматься, подправлять ошибки, да и статью написать про результаты
Денис, а ты каким тегом пользуешься для отцентровки текста?
Ответить
Я не пользуюсь тегами для отценровки, для этого есть CSS
Ответить
Попробую изменить отцентровку. Про валидность не знала. Исправлюсь!
Ответить
Юлия, обращайтесь если что не получится.
Ответить
Хорошо. Спасибо
Ответить
Давно пора мне страницей 404 заняться. Если судить по другим блогам, то нравится больше всего, если предлагают какую-то информацию, но только не поднадоевшую форму подписки.
Ответить
Интересная страничка, но как то Вы написали все сложно. Хотя это сделать легко. Я тоже сразу делал в файле functions.php , а потом мне посоветовали. Открыть файл 404, удалить все содержимое, а на это место прописать новый код. Для этого надо просто сделать в админке красивую запись, потом перейти в режим ТЕКСТ и скопированный код поставить куда надо. Моя страница выглядит так: telets.com.zp.ua/uii
Ответить
Классная страница, Андрей. Кина не будет))
Ответить
Страница ошибки 404 с котиком мне понравилась. Задержал внимание секунд на пять. Можно на этой странице посетителям предложить решить лёгкую задачку.
Ответить
Да. неплохо. Надо что-нибудь придумать
Ответить
Вообще четкая идея. Если посетители еще и на странице ошибки будут задерживаться, тогда точно попрет!
Ответить
Лучше не доводить ситуацию до страницы 404. За это Адсенс банит.
Ответить
Да сейчас все строго.Все банится блокируется.
Короче нужен глаз да глаз.
Ответить
Я когда-то сделал 404-ю страницу, но смотрю на нее сейчас и не могу понять, толи плакать хочется, толи смеяться. Нужно будет отредактировать, хотя руки сейчас на ковыряния вообще не стоят, хочется уже поскорее новым шаблоном обзавестись и пропасть в его настройках месяца на два
Ответить
Да, Виталий, я думаю не имеет смысла ковыряться в старом шаблоне. Установите новый и тогда приступите к работе
Ответить
На новом шаблоне опять может не встать дизайн странички, допиливать руками придётся.
Ответить
Когда делал 404 страницу — был один нюанс — изображение в формате jpeg не подгружалось , бился с размерами, в итоге в png загрузил и встало нормально. Хотя в последующем, анализируя поведенческие факторы отказался от изображения совсем.
Ответить
Иван, получилось так, что изображение не понадобилось? Мне кажется с ним веселее смотрится страница 404
Ответить
У Ивана файл jpeg не подгружался, получилось в png. Надо было jpeg в jpg перевести.
Ответить
Отправляюсь колдовать…очень волнуюсь, но надеюсь, что всё получится
Ответить
Картинку привлекательную подобрали как у Александра с симпатичной женщиной и задержка юзера на 10 секунд обеспечена.
Ответить
Сергей Большущее тебе спасибо за статью и понятную инструкцию все сделал не спеша и вот какая у меня страничка получилась=)))) workdoma.ru/404
Ответить
Отлично, Александр! Рад был тебе помочь!
Ответить
Александр, мне понравилась страница. Я на попу женщины, стоящую в воде, секунд пять смотрел
Ответить
Ответить
При создании 404 важен код ответа сервера, в статье ни слова об этом.
Ответить