Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Html 404 как сделать страницу


Как сделать страницу с ошибкой 404?

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

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

Автоматическое перенаправление пользователя на нужную страницу при возникновении ошибки происходит с помощью файла .htaccess (именно так, с точкой впереди и без расширения). Этот файл добавляется в корень сайта и должен содержать следующую строку.

Файл .htaccess

ErrorDocument 404 /err404.html

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

Учтите, что файл err404.html может быть вызван из любого места сайта, поэтому в нем следует использовать абсолютные ссылки (http://site.ru/images/error.png) или ссылки относительно корня сайта (/images/error.png).

Как сделать 404 страницу для сайта: алгоритм и примеры

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

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

Почему она появляется

Данная ошибка бывает у всех, даже если Вы мне скажете, что у Вас её нет. Она появляется, когда клиент пытается зайти на несуществующую страницу. Без дизайна она выглядит вот так:

Такое посетитель может увидеть, потому что:

  • Ссылающаяся сторона совершила ошибку при указывании информации на Вас;
  • Пользователь неправильно ввёл ссылку;
  • Страница (ссылка) была удалена;
  • Страница (ссылка) была изменена.

Ещё раз, если Ваш сайт состоит из 10+ страниц, то скорее всего у Вас уже есть эта ошибка и Вы о ней просто не знаете. И для поиска битых ссылок, как минимум, в рамках сайта можете воспользоваться бесплатной программой Xenu. Делает всё быстро и легко.

Чем грозит

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

  • Уходить с сайта;
  • Расстраиваться, что не нашли нужную информацию;
  • Понижать свой уровень доверия к Вам.

И всё это ведёт не просто к отсутствию дополнительных денег, а к убыткам и потерям. Что я могу представить только в плохом сне.

Как Сделать такую страницу

Если Вы задались вопросом как сделать страницу ошибки 404, то хочу Вас поздравить, она у Вас уже есть (кроме landing page).  Потому что страницы ошибок для сайтов по умолчанию предусмотрены при работе в любой CMS. Конечно, дизайн её на данный момент оставляет желать лучшего.

404 для сайта —  это такая же страница, как самая обычная другая страница Вашего сайта.

И чтобы понять, как создать правильную и уникальную 404 страницу с индивидуальным дизайном, Вам нужно зайти в корневую папку своего сайта, найти там файл .htaccess (если его нет, то создайте сами). И просто в любое место с новой строки вписать — ErrorDocument 404 http://ВАШ_САЙТ/404.php

Данная ссылка будет являться указанием пути к файлу, который будет показывать Ваш сайт при возникновении ошибки. Больше ничего не надо, всё очень просто! И если вдруг не хотите расширение .php, то можете сделать .html, в глобальном смысле разницы нет.

Цеплять и продавать

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

Просто и красиво

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

Ох, капитан, мы потерялись. (404. Это не то место, где ты должен быть) Идти домой

Хлоп! Я стесняюсь… Извините, Вы попали на «битую» страницу Свалить отсюда

Ссылки на основные разделы

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

Упс! Я стесняюсь… Мы не можем показать страницу, которую Вы ищите.

Попробуй ещё раз/поиск

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

Реклама продукта

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

Пример 1:
Пример 2:

Интерактив

Чтобы клиент чуть больше провёл на Вашем сайте, и чуть больше повзаимодействовал с ним, можно на данной странице создать “интерактив”, с которым он может что-то поделать, потаскать, покликать, посмотреть или даже поиграть.

Пример 1:
Пример 2:

Форма захвата

Раз к Вам попали, значит это судьба. Только вот она жёстко бьёт, и выражается это в том, что больше половины людей уходит с ошибки в закат. Поэтому чтобы его не терять, и чтобы он к вам ещё раз вернулся — нужно взять его контактные данные и добавить в свою e-mail рассылку. Главное создать настолько вкусное предложение, от которого сложно будет отказаться и подчеркнуть ярким дизайном.

Это наш вариант страницы, на который Вы можете легко попасть введя in-scale.ru/любыеслова. Самое интересное, что такого рода ошибок почти нет на просторах интернета. Поэтому рекомендую сделать акцент именно на этом, если ваш бизнес подразумевает e-mail маркетинг.

Коротко о главном

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

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

Нашли ошибку в тексте? Выделите нужный фрагмент и нажмите ctrl+enter

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

Давайте рассмотрим, для начала, что же это вообще за страница с ошибкой 404 (error 404 not found). Почему ее выдает и что она означает?Страница с ошибкой 404 не найдена (Error 404 Not Found), означает, что пользователь набрал адрес несуществующей страницы в адресной строке своего браузера, либо же перешел по нерабочей ссылке. Ссылка может быть нерабочей по нескольким причинам:

  1. Вебмастер допустил ошибку в URL при добавлении ее на свой сайт.
  2. Адрес страницы, на которую вела ссылка, изменился.
  3. Страница была удалена с сервера.

 Зачем нужна страница ошибки 404 не найдена

При попадании на страницу 404 (Not Found), пользователь с большой вероятностью, просто на просто, покинет ее, либо вернется на предыдущую страницу. Очень малая доля посетителей обрежет URL и вернется на один уровень вложенности вверх и попытается найти интересующий его документ. Скорее всего, он обратится к поисковой системе и найдет ответ там, уникальной информации, уже, по сути, нет, всегда найдется аналог, способный удовлетворить нужный запрос. И на Ваш сайт он уже вряд ли вернется. А владельцы сайтов, особенно молодых, не должны так разбрасываться трафиком, который на начальных этапах на вес золота. Поэтому нужно создать свою страницу ошибки 404 и придать ей тот стиль, оформление и функционал, который поможет найти ему информацию. Посетитель будет доволен, а вебмастер закроет брешь, которая поможет избавиться от утечки трафика.

Как сделать свою страницу ошибки 404

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

Если же файла нет, то необходимо его создать, воспользовавшись каким-либо текстовым редактором (Dreamweaver, Notepad++ и пр.). У файла не должно быть расширения.

Вот что там нужно прописать:

ErrorDocument 404 needsite.net/404.html

Имя страницы и расширение можно поменять на любое другое (Например: 404NotFound.php, error_404.html). Если страница расположена не в корневой директории, то необходимо прописать полный путь к ней.

Как редактировать страницу 404 в WordPress

Файл страницы ошибки 404 not found расположен в папке темы WordPress.

Путь к файлу: wp-content\themes\название темы\404.php

Тема, которая сейчас стоит на моем сайте, сделана с помощью Artisteer. К сожалению, темы, созданные с помощью этого софта получаются несколько тяжелые и сложные для редактирования.

Чтоб было понятнее, вот содержание моего файла 404.php:

За содержание контента страницы отвечает функция theme_404_content() в файле functions.php, которую и необходимо редактировать.

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

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

Редирект со страницы ошибки 404

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

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

Тут на помощь приходит редирект 301. Но, поможет он лишь в тех случаях, если страница по-прежнему существует, но по другому адресу. Ставить же редирект на главную страницу, либо же на любую другую, которую Вы посчитаете достойной, не стоит.

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

Оформление страницы ошибки 404

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

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

Так же должны присутствовать элементы навигации: меню, ссылки на главную страницу.

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

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

Владельцы некоторых сайтов пренебрегают функционалом и юзабилити в пользу красоты и креатива.

Получается довольно-таки симпатично, пусть и не практично:

  1. proteys.info/404/ - танцы гасторбайтеров.
  2. kinnet.ru/404.html  - бедный сервер.
  3. bluedaniel.com/dfdf
  4. derzko.ru/404/

Красивая страница 404, без наличия необходимой навигации, пусть и сможет удержать посетителя на какое-то время, но тем не менее, не даст возможности конвертировать его в покупателя. Решать Вам!

Создание и оформление 404 страницы для сайта: крутые примеры дизайна страницы 404

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Ошибка 404 или Not Found («не найдено») — код ответа сервера на несуществующую страницу на сайте.

Как это работает?

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

В нашем случае код ответа- 404. Ответ сервера выглядит следующим образом:

Причины 404 ошибки

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

  1. Перейдет по неправильной ссылке, которая содержит синтаксическую ошибку или просто опечатку.
  2. Попадет на страницу, которая в данный момент не существует. Это означает, что данные могли перенести или вовсе удалить. Также можно предположить, что данной страницы (а значит и ссылки) вообще не существовало.

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

Как сделать 404 страницу?

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

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

Как сделать страницу 404? Необходимо просто прописать в данный файл следующую инструкцию:

ErrorDocument 404 //semantica.in/404.php

Всё довольно просто!

Страница 404 для сайта: общие рекомендации

Во первых, 404 страница должна быть! Страница 404 ошибки безусловно должна присутствовать на каждом сайте.

В небольших проектах уменьшить вероятность возникновения 404 ошибки можно используя программу Xenu's Link. С её помощью вы можете отыскать все битые ссылки на сайте и выполнить следующие действия:

  • если ссылка страницы была изменена, необходимо изменить URL ссылки на новый;
  • если страницы уже не существует — просто удаляем ссылку.

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

Оформление 404 страницы

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

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

Текст для 404 страницы

  1. Скажите “Нет!” технической информации!
  2. Большинству пользователей знаком термин “404 ошибка”, но не стоит углубляться в причины её возникновения и давать дополнительные технические рекомендации. Донесите пользователю суть ошибки.
  3. Предоставьте полезный контент!

Необходимо дать полезную информацию в сложившейся ситуации и натолкнуть пользователя на действие которое поможет решить проблему.

Это можно реализовать разными методами:

  • разместить меню сайта. Не стоит забывать о ссылке на главную страницу сайта
  • разместить полезные ссылки- это может ссылки на популярный или новый контент.
  • Разместить строку поиска по сайту- для того чтобы пользователи нашли то что они искали.

В оформлении 404 страницы важно не переусердствовать — не стоит слишком нагружать ее контентом.

Дизайн страницы 404

Визуальное оформление 404 страницы не должно выбиваться из общего  дизайна.

Сделайте 404 страницу изюминкой сайта! Добавьте креативности страницы с ноткой юмора — это привлекает и удерживает посетителей.

В сети множество примеров того, что значит оригинальная и красивая страница 404. Я не поленился и нашел для вас несколько: 

Не стоит забывать!

1. Редирект на 404 страницу должен осуществляться без изменения URL страницы. 2. Следите за битыми ссылками на вашем сайте!

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

И напоследок вот вам пример того, как мы оформили страницу 404 для своего сайта:


Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!