404 html: Как сделать 404 страницу
Как создать страницу ошибки 404?
..или страница которой нет!
Прежде чем создавать страницу ошибки 404 давайте сначала разберёмся что это вообще за ошибка такая..
Ошибка 404 или Not Found — не найдено.. это стандартный код ответа HTTP о том, что страницы, к которой обращается пользователь, нет на сервере.. попросту она не существует.
Возникать данная ошибка может в ряде случаев:
Ссылка, по которой пришёл пользователь, неверна.
Пользователь неправильно указал путь в адресной строке к одной из страниц Вашего сайта.
Ранее существовавшая страница Вами уже удалена или переименована, однако всё ещё существует в индексе поисковых систем или закладках пользователей.
Что увидит пользователь в результате этой ошибки?
В лучшем случае страницу с рекламой Вашего хостера и кратким объяснением что мол Вы «не туда попали».. в худшем это будет просто надпись: 404 Not Found — The requested URL /page.html was not found on this server — собственно «Запрашиваемый URL отсутствует на этом сервере».
Теперь представьте, что сделает пользователь когда увидит эту картину? Правильно!! закроет эту страницу и пойдёт искать интересующую его информацию в другом месте!! — в результате чего Вы потеряете целевого посетителя!
В этом уроке мы займёмся тем что создадим свою собственную пользовательскую страницу ошибки 404 — Которая в отличии от стандартных страниц ошибки будет иметь ряд несомненных преимуществ:
Данная страница будет содержать элементы дизайна Вашего сайта — тем самым даст понять посетителю что, несмотря на то что он попал не совсем туда куда хотел он всё таки попал именно на Ваш сайт!
Пользовательская страница 404, в отличие от стандартных, не будет «тупиковой», а на ней будут располагаться ссылки на основные страницы сайта.. — Что позволит посетителю двигаться дальше и тем самым удержит его на Вашем сайте.
Ну и в конце концов на такой странице можно дать вразумительные объяснения того по каким причинам пользователь оказался на ней.. предложить ему выход из сложившейся ситуации.. помочь найти на Вашем сайте интересующую его информацию.
Как видите сплошные плюсы..
Создаётся страница ошибки 404 точно так же как и любая другая страница на Вашем сайте.. никаких нюансов в коде странице нет..
Ну например создадим файл с именем 404.html
<html>
<head>
<title>Ошибка 404</title>
</head>
<body>
<img src=»graphics/404.gif» alt=»Ошибка 404″>
<p>К сожалению, запрашиваемая Вами страница не найдена..</p>
<p>Почему?</p>
<ol>
<li>Ссылка, по которой Вы пришли, неверна.
<li>Вы неправильно указали путь или название страницы.
<li>Страница была удалёна со времени Вашего последнего посещения.
</ol>
<p>Для продолжения работы с сайтом Вы можете воспользоваться формой поиска по сайту:</p>
<form>
<input type=»text» size=»30″>
<input type=»submit» value=»Поиск»>
</form>
<p>..или перейти на:</p>
<ul>
<li><a href=»#»>Главную страницу сайта.</a>
<li><a href=»#»>Карту сайта</a>
</ul>
</body>
</html>
На самом деле это просто страничка «скелет» конечно же Вам следует создать свою собственную, полноценную страницу ошибки 404.
Создали? а вот теперь поговорим о нюансах..
Для того что бы в случае возникновения ошибки с кодом 404 посетитель переходил на только что созданную нами страницу, необходимо создать системный файл .htaccess который будет содержать в себе директиву: ErrorDocument 404 — это директива указывает серверу о том куда следует перенаправлять пользователя в случае возникновения ошибки 404.
Что это за файл такой спросите Вы?
Файл .htaccess (я не опечатался, пишется с точкой в начале имени и не использует никакого расширения) – дает возможность конфигурировать работу сервера в отдельных его директориях..
На данный файл может быть возложен ряд специфических задач.. например: устанавливать права доступа к файлам в папке, менять названия индексных файлов, глобально перенаправлять посетителей на другой сайт, запретить доступ к сайту с определённого ip адреса… и еще много всяких иногда очень полезных вещей может делать этот чудо файл.. в том числе может самостоятельно обрабатывать ошибки сервера — что нам собственно и нужно!
Однако углубляться во все подробности и тонкости мы не будем, а поговорим лишь о том, что нас интересует на данный момент.
Итак, создаём файл под названием .htaccess который содержит в себе одну единственную строчку (если таковой файл уже имеется с какими ни будь другими инструкциями серверу, то просто дописываем в него эту строчку):
ErrorDocument 404 http://www.site.ru/404.html
И заливаем его на сервер в корневую папку сайта.
Ну только естественно сначала поменяйте в файле .htaccess ссылку http://www.site.ru/404.html на адрес Вашей собственной страницы которая должна будет открываться при возникновении ошибки 404.
Вот собственно и всё! теперь если Вы всё сделали правильно, при возникновении ошибки 404 будет загружаться Ваша «ошибочная» страница.
Сейчас огорчу тех кто располагает свой сайт на том или ином бесплатном хостинге.. Большинство бесплатных хостеров не дают доступа к файлу .htaccess так что создать страницу 404 на бесплатном хостинге вряд ли удастся.
P.S.Таким же способом с помощью файла .htaccess Вы можете обрабатывать и другие ошибки сервера:
- 401 ошибка(ErrorDocument 401 http://www.site.ru/page.html)- Требуется авторизация.
- 403 ошибка(ErrorDocument 403 http://www.site.ru/page.html)- Пользователь не прошел аутентификацию, доступ запрещен.
- 500 ошибка(ErrorDocument 500 http://www.site.ru/page.html)- Внутренняя ошибка сервера.
Если что-то непонятно или Вы в чем-то сомневаетесь, то за дополнительными разъяснениями обращайтесь на форум.
Советы по созданию своей ошибки 404
«Ошибка 404 или Not Found (не найдено) – стандартный код ответа HTTP о том, что клиент был в состоянии общаться с сервером, но сервер не может найти данные согласно запросу» – определение из Википедии.
404 ошибка — самая часто встречаемая на просторах интернета. А что же означают эти до боли знакомые всем цифры? Первая цифра 4 указывает на ошибку со стороны клиента, например, плохое соединение или неверно введенный адрес в строку поиска. Другие два числа обозначают конкретную категорию ошибок, которая включает такие статусы, как Conflict, Precondition Failed, Bad Request и другие статусы четвертого класса. Возникновение данной ошибки имеет несколько причин:
- плохое соединение;
- ссылка, ведущая на адрес, устарела или была удалена;
- страницу перенесли на новый адрес;
- опечатка при вводе адреса сайта.
Даже если сайт небольшой и все «битые» ссылки тщательно отслеживаются, никто не застрахован от человеческого фактора, неверно введенного адреса или устаревшей и неактуальной ссылки. На крупных сайтах с большим количеством страниц тяжелее отслеживать устаревшие ссылки, и появляется необходимость в своей странице с информацией об ошибке 404.
Стандартную страницу с этой ошибкой знают все, выглядит она достаточно устрашающе:
К сожалению, не все посетители знают, из-за чего происходит эта ошибка и первая мысль при появлении этого окна будет: а что мне делать дальше? Я все сломал? Уйду отсюда подобру-поздорову. Даже опытного пользователя это окно может смутить или отпугнуть.
Как удержать посетителя?
Чтобы ошибка не испугала посетителя, объясните ему, что ничего страшного не произошло и нужно лишь перейти в другой раздел сайта. Тактично направьте пользователя к выходу из этого злополучного «тупика».
Существует несколько способов вернуть доверие:
-
Добавить ссылки на существующие разделы сайта. Не заставляйте его снова писать вручную адрес сайта, обновлять страницу, искать опечатки. Достаточно даже одной кнопочки «Вернуться на главную». Продублировать популярные ссылки разделов вашего сайта было бы вообще замечательно.
-
Объясните, что произошло. Не обязательно подробно расписывать о происхождении ошибки, составлять длиннющие инструкции. Достаточно обойтись одной или несколькими фразами. Слово «ОШИБКА» совсем необязательное, зачастую лишь больше вгоняет в ступор. Если сайт носит развлекательный характер, можно юморнуть и покреативить. Заставьте улыбнуться гостя, тогда он охотнее вернется на главную страницу. Но обойдемся без юмора ниже пояса и обидных шуточек, давайте уважать наших пользователей.
-
Не лишним будет добавление строки поиска по сайту, это еще больше упростит действия посетителя. Введя в строку желаемый запрос, он быстро очутится в том разделе сайта, в который должен был попасть до появления ошибки.
-
Обязательно добавление фирменного стиля или общих элементов внешнего облика сайта. Слишком сильное различие дизайна ошибки и сайта в целом настораживают. Это наводит пользователя на мысль: а не перешел ли я по какой-то нехорошей ссылке? А не покинул ли я нужный сайт. Наличие логотипа или названия компании обязательны.
-
Можно внести креатива в страницу интересной тематической анимацией, динамичные иллюстрации всегда приковывают внимание. А ошибка 404 должна вызывать интерес и желание остаться на сайте с вопросом, что еще интересного есть на этом сайте?
-
Если недавно вы переносили или удаляли достаточно большое количество страниц и точно уверены в том, что многие посетители, перейдя на ваш сайт, не найдут нужной информации, можете вставить поисковую строку системы Гугл, Яндекс. Пользователи вам скажут спасибо за то, что вы сэкономили их время, а это плюсик в карму. 😉
Как у нас
Наша страница с ошибкой 404 выглядит так:
Полностью весь внешний вид оставили в том же стиле, что и сам сайт. Не трогали верхнее меню и подвал, чтобы никого не шокировать резкими переходами. Для удобства вставили ссылки на самые популярные услуги (для клиентов) и основные разделы блога (для просто интересующихся). Обязательно добавили ссылку на главную страницу 1PS и призыв к действию «Напишите нам», чтобы уж точно никто не затерялся. Но! Учтя все технические вопросы, мы забыли про креатив. Уже работаем над этим. В скором будущем и мы обзаведемся привлекательной и забавной страничкой.
В заключении хочу сказать: страницы с ошибками бывают разными, идей для креатива множество, главное — знать меру. Бытует мнение, что на серьезных сайтах с официальным посылом не может быть своей ошибки 404, лучше обойтись стандартной. Развеем миф примерами.
Несколько бесплатных и адаптивных HTML страниц с 404 ошибкой
Страница с 404 ошибкой это тоже один из самых важных элементов дизайна, который должен быть тоже правильно и логично построен. Например, я считаю, что данная страница должна только задержать пользователя на сайте, а не отпугивать его. И по этому я сегодня представляю подборки из простых и красивых страниц с 404 ошибкой в HTML формате и с адаптивным дизайном. Эти страницы конечно же совсем бесплатны.
Так же рекомендую к просмотру следующее:
Адаптивная страница 404 с размыты и тёмным фоном
Демо Ι Скачать
Светлая страница 404 ошибки с адаптивным дизайном — Ohh
Демо Ι Скачать
Бесплатная и адаптивная страница с ошибкой с персонажем
Демо Ι Скачать
Адаптивная 404 страница для сайта — Poses
Демо Ι Скачать
Голубая и стильная страница с ошибкой 404 в HTML
Демо Ι Скачать
404 адаптивная HTML страница с геометрическим фоном
Демо Ι Скачать
Тёмно — фиолетовая страница 404 в HTML
Демо Ι Скачать
Белая и минималистическая страница 404
Демо Ι Скачать
Деревянная страница с 404 ошибкой в HTML
Демо Ι Скачать
Минималистическая и серая страница с ошибкой в HTML
Демо Ι Скачать
Не плохая и адаптивная страница с ошибкой с разноцветными цифрами
Демо Ι Скачать
Страница с ошибкой 404 с голубым фоном и жёлтыми цифрами
Демо Ι Скачать
Не плохая и простая HTML страница 404 с адаптивным дизайном
Демо Ι Скачать
Как настроить страницу 404 и правильный ответ сервера (http-код страницы): shalenaolena — LiveJournal
Страница 404 призвана сообщать пользователю, что заданный им url (адрес страницы) не существует.
Такие неправильные урлы еще можно назвать «битыми ссылками».
Многие сайты делают свои страницы 404 для удобства своих пользователей. Часто это красивые и интересные страницы, которые вызывают у пользователя улыбку вместо разочарования от того, что адрес страницы неправильный.
При создании страницы 404 есть важная техническая составляющая, которая сильно влияет на ранжирование сайтов в поисковых системах, если все не настроено правильно.
Если вы озадачились созданием страницы 404, то вам нужно учитывать три момента:
1) Переадресация со всех неправильно введенных url на страницу 404 в .htaccess.
2) Правильный ответ сервера после переадресации (http-код страницы должен быть 404, а не 200).
3) Закрытие страницы 404 от индексации в robots.txt
Сразу отмечу, что все вышеизложенное написано для самописных сайтов, преимущественно на php. Для wordpress существуют плагины по настройке того же самого. Но в этой статье мы рассмотрим, как все выглядит в реальности. %)
Переадресация (редирект) неправильных url на страницу 404
Первое, что вы делаете – создаете саму страницу 404, чтобы было куда людей посылать %).
Перенаправление url настраивается в файле .htaccess
Просто вписываете строчку:
ErrorDocument 404 http://mysite.com/404.php
Где «mysite.com» – ваш домен, а http://mysite.com/404.php — путь к реальной странице. Если ваш сайт на html, то строка будет выглядеть как:
ErrorDocument 404 http://mysite.com/404.html
Проверка очень проста. После заливки на хостинг файла .htaccess с вышеуказанной строкой, делаете проверку, вводя заведомо не существующий урл (битая ссылка), например: http://mysite.com/$%$%
Если переадресация на созданную вами страницу произошла, значит все работает.
Итак, полностью файл .htaccess, где настроена ТОЛЬКО переадресация на 404 будет выглядеть так:
____________________________
RewriteEngine on
ErrorDocument 404 http://mysite.com/404.html
____________________________
Правильный ответ сервера (http-код страницы)
Очень важно, чтобы при перенаправлении был правильный ответ сервера, а именно – 404 Not Found.
Тут следует объяснить отдельно.
Любому url при запросе назначается статус (http-код страницы).
• Для всех существующих страниц, это: HTTP/1.1 200 OK
• Для страниц перенаправленных: HTTP/1.1 302 Found
• Если страницы не существует, это должен быть HTTP/1.1 404 Not Found
То есть, какой бы урл не был введен, ему присваивается статус, определенный код ответа сервера.
Проверить ответ сервера можно на такой ресурсе как bertal.ru или SEARCH CONCOLE GOOGLE – Сканирование/Посмотреть как GOOGLE бот.
Когда у вас не было перенаправления через .htaccess на страницу 404, то на любой несуществующий урл, введенный пользователем, а также на битые ссылки был ответ «HTTP/1.1 404 Not Found»
Итак, после краткой теоритической части, вернемся к нашим баранам настройкам.
После того, как вы настроили перенаправление на свою авторскую страницу 404 через .htaccess, как описано выше, то вводя битую ссылку (неверный url, который заведомо не существует), типа http://mysite.com/$%$%, ответ сервера будет:
— сначала HTTP/1.1 302 Found (перенаправление),
— а затем HTTP/1.1 200 OK (страница существует).
Проверьте через bertal.ru.
Чем это грозит? Это будет означать, что гугл в свою базу данных (индекс) может внести все битые ссылки, как существующие страницы с содержанием страницы 404. По сути — дубли страниц. А это невероятно вредно для поисковой оптимизации (SEO).
В этом случае нужно сделать две вещи:
1) Настроить правильный ответ сервера на странице 404.
2) Закрыть от индексирования страницу 404. Это делается через файл robots.txt
Настраиваем ответ сервера HTTP/1.1 404 Not Found для несуществующих страниц
Ответ сервера настраивается благодаря функции php в самом начале страницы:
Пишите ее вначале файла 404.
В результате мы должны получить ответ на битую ссылку:
Закрыть страницу 404 от индексирования
Закрыть страницу от индексирования можно в файле rodots.txt. Будьте внимательны с этим инструментом, ведь через этот файл ваш сайт, по сути, общается с поисковыми роботами!
Полный текст файла rodots.txt, где ТОЛЬКО закрыта индексация 404 страницы, выглядит так:
____________________________
User-agent: *
Disallow:
Disallow: /404.php
____________________________
Замечания по коду: «/404.php» означает путь к странице. Если на вашем сайте страница 404.php (или 404.html соответственно) находится в какой-то папке, то путь будет выглядеть:
/holder/404.php
где «holder» — название папки.
Вот, собственно и все по странице 404. Проверьте работу страницы, перенаправления битых ссылок, и ответы серверов.
Повторюсь: Все вышеизложенное для самописных сайтов. Если вы используете wordpress, то можете поискать приличный плагин для настройки ошибки 404.
Читать также:
Быстро создать свой сайт на WordPress
Сколько стоит создать сайт
Как залить сайт на хостинг
Зарегистрировать торговую марку самостоятельно
Самое ценное на сайте
Сайт бесплатно – это миф!
Продвижение сайта
Резервная копия сайта (бэкап)
ЧТО ЭТО И КАК ИСПРАВИТЬ
Когда я открываю какую-то страницу из поиска и вижу «404 Not Found», то очень сильно раздражаюсь и негодую.
Ведь я потратила на это время, предвкушая, что вот-вот найду полезный и интересный контент, но….. Зайду ли я на этот сайт еще раз? В 99% — нет. Так поступает большинство пользователей. Но не будем впадать в панику и пессимизм.
Что же это за ошибка, откуда она берется и как это исправить — поговорим в этой статье.
Почему пишет страница не найдена?
И на этот вопрос есть несколько ответов.
- Во-первых, пользователь неверно ввел адрес в строку браузера: забыл символ, букву, цифру итд. Сервер запрос получил, но вот найти такую страницу не смог.
- Во-вторых, сбои с правильным отображением могут происходить из-за нарушений сеансов связи.
- В-третьих, ошибка not found может появиться в случае некорректного функционирования самого сервера, который выдает такой месседж даже при нормально работающем сайте. Такое встречается крайне редко и связано с вирусными атаками.
- В-четвертых, код ошибки 404 означает, что на сайте есть физически несуществующая страница.
Раскладываем на слагаемые
Мало кто знает о том, что каждая цифра в 404 имеет свою символику. Первая четверка повествует о том, что поисковый запрос занял очень много времени или сам пользователь допустил ошибку и неверно ввел url. Ноль говорит о синтаксической ошибке, а оставшаяся четверка указывает на то, что запрошенный источник не был найден.
Кстати, мы занимаемся доработками сайта!
Подробнее
В большинстве случаев это пугает пользователей, поэтому важно по максимуму сделать ее привлекательной, чтобы посетитель не ушел сразу, а продолжил свое путешествие по вашему сайту в поисках нужной информации. Но многие разработчики не уделяют должного внимания этой ошибке и поэтому теряют пользователей.
Что такое идеальная страница 404 Not Found?
Большинство страниц имеет однотипное и безликое оформление ошибки. Но привлекательная картинка или текст могут существенно сгладить негативное впечатление и стать своеобразным извинением перед пользователем за досадную ошибку. Если подойти к этому вопросу серьезно, то страница с ошибкой может решать такие задачи как:
- привлекать внимание посетителей
- объяснять причину ошибку
- давать инструкцию для исправления
Почему бы не прибегнуть к юмору и креативу? Посмотрите удачные примеры оформления страниц с 404 ошибкой:
Любое препятствие или ошибку можно превратить в возможность. Именно в возможность выделиться среди конкурентов.
Ошибка 404 для этого подходит как нельзя лучше. Укажите там контакты. Если это интернет — магазин, то устройте грандиозную распродажу.
А знаете ли вы, что в глобальной сети интернет ходит легенда о том, что самый первый сервер находился именно в комнате № 404 Европейской Ассоциации по ядерным исследованиям. Поверили?:)
Представляете, если обыграть так всю страницу в виде засекреченной лаборатории, в комнате с роковым номером, заваленной сложнейшим оборудованием работают и живут фанатики своего дела. Мигание разноцветных индикаторов отражается на их белых халатах. Они обмениваются фразами, непонятными непосвященным, общаются на языке цифр, как будто и сами превратились в детали своих удивительных машин. Поиграйте с анимацией, видео, гифками.
Согласитесь, что такие картинки могут зацепить внимание посетителей и продлить время их пребывания на сайте. Помимо забавной картинки можно разместить полезную информацию, касающуюся тематики вашего бизнеса или просто развлекательный контент.
Как удалить ошибку 404
Самый действенный способ исправить подобный опус — правильно ввести страницу в строку браузера и обновить ее при помощи клавиши F5, она работает одинаково во всех браузерах.
Второй способ — проверить уровень соединения с интернетом. Ошибка 404 может показываться, если отсутствует подключение.
Третий способ — ошибка также вылезает, когда пользователь сам неправильно ввел адрес ресурса. Для ее исправления достаточно внимательно проверить адрес и скорректировть его.
Четвертый способ — бывает так, что иногда нужно просто перейти на один уровень вверх в случае связанного ресурса.
Пятый способ — проверить, правда ли существует нужная страница, можно в поисковике или на мобильном гаджете. Для инициализации существуют и более продвинутые сервисы, например, WhoIs.
В нужную строку просто введите адрес и система сама выдаст всю информацию по объекту: подтверждение физического существования, провайдер, сайт итд.
Иногда случается и так, что пользователь не может ничего сделать — страница не обновляется и ошибка не исчезает. Причина кроется в том, что владелец сайта перенес информацию на новый ресурс, но не привязал старый адрес к новому. Если информация нужна срочно и вы уверены, что она там раньше была, можно отправить сообщение владельцу сайта по электронной почте и уточнить причину ошибки.
Рекомендации специалистам: как найти все 404 ссылки на сайте
Чтобы качественно проверить все страницы, лучше воспользоваться сразу несколькими специализированными сервисами: плагин Broken Link Checker для WordPress, инструменты Google Web Masters Tool и аналогичные сервисы в Яндексе.
Есть еще специальный файл htaccess, который помогает настроить редиректы, права доступа для разных админов, авторизацию и позволяет настраивать собственные общие страницы ошибок, в том числе 404. Проверить ссылки можно и через специализированные сервисы, которыми пользоваться очень просто: достаточно ввести в строку поиска ссылку и система выдаст результат уже через пару минут.
Влияет ли ошибка на ранжирование в поисковиках?
Дело в том, что подобные ошибки сокращают время пребывание пользователей на сайте, а в 2018 году этот показатель стал учитываться поисковиками при ранжировании сайта. Яндекс и Гугл видят в этом угрозу снижения качества сайта и низкое соответствие запросам пользователей. И даже могут понизить сайт в результатах поиска.
404 ошибка — это не критично, но все-таки поможет повлиять на поведение пользователей. Уделите время на то, чтобы сделать эту страницу по максимуму полезной и интересной.
Делаем страницу 404-й ошибки разумной с помощью Google / Хабр
Вот я прошёлся по блогам и сайтам, которые висят у меня в подписках, и понял, что всё печально. Если намеренно вызвать страницу 404-й ошибки, то можно напороться на все возможные отмазки, пустую страницу, либо на страницу, которую генерит сервер. Ну или на крайний случай — sitemap. Часто любят выкладывать туда смешную картинку.
К примеру можно встретить такие страницы:
404 — Not Found
Извините, нет записей, удовлетворяющих вашим условиям.
Не найдено.
Извините, но вы ищите что-то чего здесь нет.
У некоторых крупных сайтов страница 404й ошибки разумна, она подсказывает, что мол человек мог ошибиться в написании адреса, ему предлагают альтернативные адреса, и/или просят сообщить администраторам, что обнаружена ошибка.
Писать подобный механизм для небольших сайтов или блогов stand-alole дорого, затратно по времени и, в общем, все забили на это. А почему? Ведь есть зачётная возможность сделать 404я ошибку разумной, с помощью Google.
Для начала посмотрите страницу 404й ошибки, которая поумнела на методе, о которой я вам расскажу чуть-чуть попозже.
http://absolvo.ru/contactf
Здорово же? Правда сразу немного огорчу — эта метода для блогов не совсем подходит, однако если ваш блог насквозь проиндексирован Google, а также добавлен в панель вебмастера Google — то работа с ней станет несколько позитивней и удобней.
Итак, всё очень просто.
<p>
<script type=«text/javascript»>var GOOG_FIXURL_LANG = ‘ru’;var GOOG_FIXURL_SITE = ‘http://absolvo.ru/’;</script>
<script type=«text/javascript» src=«linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js»></script>
<ul><li>Перейти на главную <a href=»/»>страницу</a></li></ul>
</p>
Добавляет мозгов 404й странице JS скрипт, fixurl.js, вам необходимо будет указать язык (в данном случае ru), и url вашего сайта, в данном случае — absolvo.ru Ещё раз огорчу, для поисковика www.site.ru и site.ru спокойно могут показаться разными сайтами, но это, мне кажется, не смертельно.
Стили, которые вы спокойно можете использовать для своих целей (я к примеру скрыл панель поиска Google по моему блогу, она мне не нужна)
#goog-fixurl
#goog-wm
.content
.other-things
#goog-wm-sb
Через .content рулить списком (ul, li).
В коде, который я привёл чуть выше, есть дополнительный список, который не даст ударить нам лицом в грязь, если Google не даст альтернатив.
Я у себя поставил, и в общем, доволен. Это выглядит много опрятней, и правильней.
Стоит отметить, что если сайт большой и толстый, то этот скрипт может выдавать и несколько альтернатив.
25 HTML Забавные 404 страницы
Коллекция бесплатных HTML и CSS забавных 404 страниц . Обновление коллекции августа 2018 г. 7 новинок.
- Шаблоны страниц HTML 404
- 403 Запрещенных HTML-шаблонов
- HTML 408 страниц
- 500 HTML-шаблонов страниц с ошибками
Автор
- Диого Гомеш
О коде
Призрак Страница 404
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Wikyware Net
О коде
404 Ошибка страницы дым от тостера
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: jquery.js
Автор
- Адам Куинлан
О коде
Пикл-Рик нарезанный 404
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Маурисио Альенде
О коде
Чистый CSS 404 Ошибка Страница
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Мансур
О коде
Страница 404 — символ CSS
4040 страница с маленьким персонажем-монстром, полностью созданным с помощью CSS, плюс анимация слежения за мышью.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: jquery.js
Автор
- Винсент Данна
Сделано с
- HTML (Haml) / CSS (Sass) / JS
О коде
Жуткое кладбище 404
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: jquery.js
Сделано с
- HTML / CSS (SCSS) / JavaScript
О коде
Yeti 404 Стр.
Очень креативная страница HTML 404.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: TweenMax.js, MorphSVGPlugin.js
О коде
Страница ошибки пользователя
Классный эффект голограммы, созданный с использованием довольно популярного эффекта глюка CSS3 и трех слоев этого негодяя поверх другого, размещенных с небольшим смещением друг относительно друга, они также имеют разные цветовые оттенки, чтобы сделать его ярким.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: jquery.js
О коде
Страница ошибки 404
Простая анимированная страница ошибки 404.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
О коде
404 Стр.
Похоже, ты заблудился. Страница, которую вы ищете, недоступна!
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: bootstrap.css
Сделано с
- HTML / CSS (SCSS) / JavaScript
О коде
SVG Animation 404 Error Milk Carton
SVG-анимация моргания глаз и движений рта. Анимация рта: использование morphSVG между двумя путями # рот и # хмурый рот . Анимация моргания глаз: использование transformOrigin и scaleY круга для создания эффекта мигания.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: TweenMax.js, MorphSVGPlugin.js, DrawSVGPlugin.js
Автор
- Джули Парк
О коде
UI 404 Стр.
Ошибка 404 — страница-призрак! Анимированный призрак на чистом CSS с панелью поиска и кнопками, чтобы вернуться домой.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.css
О коде
Страница ошибки 404, режим пещерного человека — чистый CSS
Страница ошибки 404. Упражнение по анимации в CSS. Нет JS. Нет SVG.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Код Alex
О коде
Darknet 404 Page Концепция
Адаптивная концепция 404 страницы.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: jquery.js
Автор
- Сара АльСакер
О коде
404 Стр.
404 — страница не найдена.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Автор
- Паоло Дузион
О коде
404 Пейдж и долгая прогулка
404 страница с некоторыми CSS-анимациями для долгой прогулки…
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Челси Адамс
О коде
Пиво 404 Страница
Небольшой каракули с ошибкой 404 с SVG и анимацией clip-path , вдохновленный недавним клиентским проектом для пивоварни.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Автор
- Наконечники диафрагмы
О коде
404 Лягушка
Креативная страница HTML 404 с лягушкой.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: TweenMax.js, MorphSVGPlugin.js, jquery.js
Автор
- Vineeth.TR
О коде
404 Плачущий ребенок Страница
Страница ошибки 404 в чистом CSS3.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Крис Сэмюэлс
О коде
404 Стр.
Веселая 404 страница с красивой цветовой палитрой.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: TweenMax.js, MorphSVGPlugin.js
Автор
- Vineeth.TR
О коде
Страница ошибки 404
Ошибка страницы в чистом CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Арне Турпын
О коде
Робо 404 Стр.
Шучу.Но похоже, Робо, ваш личный робот, не может найти нужную страницу.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: bootstrap.css
Автор
- Патрик Стилхарт
О коде
Игра Space Invaders (404)
Игра Космические захватчики на 404 странице.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: bootstrap.css
Автор
- Стефан Делюс
О коде
SVG Анимация 404 стр.
SVG Анимация для создания ошибки страница 404 . Воспользуйтесь библиотекой SnapSVG.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: оснастка.svg.js
О коде
HTML 404 Страница
Еще одна забавная 404 страница в HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
.
28 Бесплатный шаблон страницы ошибки HTML 404
Бесплатные и премиальные шаблоны веб-сайтов с ошибками 404 html полезны для страниц, не найденных на веб-сайте. почему 404 страница? Это страница, которая сообщает вашим посетителям, когда они переходят на конкретную страницу, что ее больше не существует! Эта высококачественная ошибка страницы 404 может быть вашей, когда захотите. Главная особенность этих страниц заключается в том, что они не похожи на традиционные страницы ошибок, с сообщением «страница не найдена» — бледный, неинтересный и скучный узор.
Создание веб-приложения — непростая задача, и сегодня это халява, чтобы помочь разработчикам и веб-дизайнерам, которым нужен образец страницы HTML 404 для своего приложения. Он содержит четкое сообщение об ошибке 404, и через несколько секунд пользователь узнает, что он потерян и страница не найдена. Я надеюсь, что этот дизайн страницы 404 сэкономит ваше время, и вы хотели бы добавить его в свой проект.
Неработающие ссылки являются обычным явлением в Интернете, и их невозможно избежать, поэтому наличие хорошей страницы с ошибкой 404, возможно, не менее важно, чем хорошее содержание веб-сайта.Используйте бесплатные шаблоны для страницы ошибки 404, чтобы разместить наши элегантные настраиваемые страницы вместо страницы 404 по умолчанию и позволить посетителям случайно попасть на страницу ошибки, остаться на вашем веб-сайте и изучить его дальше.
Загрузите бесплатные шаблоны html5 с ошибкой 404 для своего веб-сайта. И удерживайте посетителей, даже если у вас неработающая ссылка или пользователь ищет что-то, чего уже нет.
Quatro
Quatro — это творческий пакет на 404 страницы. У него чистый и современный дизайн, который идеально подходит для вашего блога, портфолио и веб-сайтов агентств.Quatro доступен в трех вариантах: статический, слайд-шоу и фон с частицами, как и другие наши шаблоны веб-сайтов, он полностью реактивен и готов к репетициям, что означает, что он будет отличным, аккуратным и чистым на любом устройстве, от мобильного до офиса.
больше информации / скачать демо
Бесплатная страница с ошибкой 404 Шаблон адаптивного веб-сайта
demo подробнее / скачать
Ohh — Бесплатный шаблон веб-сайта с ошибкой 404
demo подробнее / скачать
Бесплатная страница события 404 не найдена Шаблон веб-сайта
demo подробнее / скачать
Позы — Бесплатная страница 404 не найдена Веб-шаблон
demo подробнее / скачать
Синий узор 404 Страница не найдена Шаблон
демо больше информации / скачать
Топливо 404 страница не найдена веб-шаблон
Free Fuel 404 pagenНе найден шаблон для сайтов компаний, сайтов портфолио, личных сайтов.Если URL-адрес недоступен на сервере, этот шаблон будет отображаться автоматически.
демо больше информации / скачать
Шаблон веб-сайта Woody 404 Page Not Found
demo подробнее / скачать
К сожалению, страница 404 не найдена Шаблон веб-сайта
demo подробнее / скачать
Ошибка 404 Шаблон мобильного сайта
demo подробнее / скачать
Deadlink 404 Страница не найдена веб-шаблон
demo подробнее / скачать
Green Glossy — Бесплатный веб-шаблон 404 страница не найдена
demo подробнее / скачать
Шаблон страницы с бесплатной ошибкой 404 07
больше информации / скачать
Шаблон страницы с бесплатной ошибкой 404 08
подробнее / скачать
Шаблон страницы ошибки 404 Free Fresh
подробнее / скачать
Огромные страницы ошибок 404 Шаблон
больше информации / скачать демо
Скоро появится и 404 специальных страницы для творчества
больше информации / скачать демо
Креатив 404 страницы
демо больше информации / скачать
Galaxy404 — Адаптивный 404 шаблон
demo подробнее / скачать
Chemico — адаптивный анимированный шаблон ошибки 404
Chemico — это чистый, анимированный, отзывчивый, готовый к работе с сетчаткой глаза и хорошо отформатированный шаблон ошибки 404.
demo подробнее / скачать
Отсутствует — шаблон адаптивной страницы 404
Отсутствует — страница 404 — это шаблон страницы, который можно использовать для неработающих ссылок на вашем веб-сайте. Это хороший способ дать вашим пользователям указания, когда они наткнутся на какие-либо отсутствующие страницы / неработающие ссылки.
demo подробнее / скачать
Wordsearch — Адаптивный пакет ошибок 404
demo подробнее / скачать
AngryPanda — Адаптивный 404 и шаблон обслуживания
AngryPanda — это чистая, отзывчивая и красивая страница 404 и обслуживания, подходящая для любого веб-сайта.
demo подробнее / скачать
Lost — Адаптивный шаблон ошибки 404
Премиум, стильный и отзывчивый шаблон ошибки 404 с потрясающей фоновой анимацией. Это можно использовать для компаний, у которых страница с ошибкой или страница не найдена в Интернете с их бизнесом или любым другим сайтом.
demo подробнее / скачать
Wizm 404 — Адаптивный шаблон ошибки для вас
Wizm 404 — Адаптивный шаблон ошибок для вас. Может использоваться компаниями, частными лицами и профессионалами.С полноэкранным фоном.
demo подробнее / скачать
Creatica — Тема ошибки 404
Страница ошибок
Creatica — это чистая и современная тема страницы ошибок, созданная с помощью HTML5 и CSS3.
demo подробнее / скачать
Нет сигнала 404 Ошибка Страница
«Нет сигнала» — это уникальная страница ошибок, которая вызывает чувство ностальгии. Он направлен на то, чтобы пользователи не разочаровывались при обнаружении ошибки на веб-сайте, и это хорошая отправная точка для перехода на другие страницы благодаря быстрому меню и тематическому полю поиска.
demo подробнее / скачать
Cerberus — Премиум, ручная работа 404 HTML-шаблон
demo подробнее / скачать
.