Ошибка 404 картинка на весь экран

Изображений 6,08k

Коллекция 1

storyset

storyset

storyset

storyset

storyset

elizazdra

freepik

storyset

pikisuperstar

pikisuperstar

freepik

storyset

freepik

storyset

pikisuperstar

pikisuperstar

jcomp

mazharul1

faysalrean

storyset

jievani

freepik

mamewmy

storyset

freepik

rs89

catalyststuff

faysalrean

lesnawati

storyset

jcomp

macrovector

iwat1929

storyset

freepik

elizazdra

storyset

storyset

freepik

storyset

jcomp

Mition Julia

upklyak

storyset

vectorplusb

freepik

ayoub_bani

pikisuperstar

pikisuperstar

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

Ошибка 404: что это значит?

Иногда при переходе по ссылке вместо страницы сайта на экране появляется надпись: «Страница не найдена. 404 not found. Ошибка 404». Это значит, что такой веб-страницы нет или у неё поменялся адрес.

Почему возникает ошибка 404:

• в URL ссылки была допущена ошибка;
• был изменён URL-адрес страницы;
• сайт временно не работал или вообще не существовал;
• неправильно сработал сервер;
• веб-страницу удалили.

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

Почему нужна отдельная страница для 404 ошибки

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

Грамотно настроенная страница 404 поможет:

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

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

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

Чтобы добавить страницу на сайт:

1. Перенесите шаблон страницы ошибки 404 в корневую папку сайта.
2. Откройте файл .htaccess и пропишите код: ErrorDocument 404 http://АДРЕС_САЙТА/404.html
3. Впишите код в любую свободную строку, залейте на хостинг и проверьте: совершите ошибку в какой-нибудь ссылке, например, удалите букву. Вместо стандартного шаблона 404 должен отобразиться новый вариант. Если нет — проверьте правильность кода, возможно, была допущена ошибка.

Некоторые CMS автоматизируют процесс создания страницы об ошибке: например, в WordPress это можно сделать с помощью плагина 404page. Плагин может кастомизировать страницу на разных темах. Для его установки нужна версия WordPress от 4.0.

Как оптимизировать страницу 404 ошибки

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

Советы по созданию страницы 404:

1. Будьте доброжелательны. Расскажите посетителю, что страница удалена или произошла ошибка, помогите вернуться на основные страницы сайта.
2. Предложите посетителю проверить точность адреса или дайте ссылки на разделы, которые были недавно перемещены.
3. Дайте ссылки на продукт или статьи, релевантные поиску. Для этого нужно знать, на какую страницу пользователь пытался перейти. Это можно сделать, когда в URL указан раздел или категория.
4. Сделайте страницу полезной: дайте возможность скачать книгу или перейти на статьи в блоге, которые рассказывают о ценности продукта.
5. Не ограничивайтесь забавной картинкой. Добавьте ссылку на главную страницу сайта, блог, каталог или афишу событий компании.
6. Предложите посетить страницу с акциями, спецпредложениями.
7. Разместите строку поиска, чтобы посетитель сайта мог найти то, что он искал. Например, модель телефона в интернет-магазине или статью на новостном портале.
8. Покажите посетителю квиз или мини-игру. Это отличный способ свести негативное впечатление пользователя к минимуму.
9. Выдержите единое оформление, чтобы страница 404 не отличалась от остальных страниц сайта.

Рассказали, как квиз-маркетинг помогает пользователям совершить покупку.

Примеры отличных 404 страниц для сайта

Пусть подборка классных примеров вдохновит вас на создание собственного креативного шаблона страницы 404.

У McDonalds на странице 404 есть навигация по сайту и даже форма для подписки на рассылку:

На странице 404 блога Roistat пользователю предлагается вернуться на главную страницу блога, перейти в нужный раздел или воспользоваться кнопкой обратного звонка:

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

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

Ещё одна страница известного интернет-магазина Lamoda. Кроме навигации и строки поиска, пользователям предлагают популярные товары:

Тинькофф предлагает простую страницу, на которой сообщается об ошибке и даются ссылки на основные услуги банка:

Страница об ошибке у ресторана KFC очень лаконичная страница. Пользователю предлагают всего 2 кнопки с простым CTA — «Заказать еду» и «Найти ресторан»:

Как избегать ошибок на сайте

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

Рассказали, как SEO-аудит помогает оптимизировать работу сайта.

Упростить проверку сайта поможет услуга SEO-аудита от Roistat. Аналитики проверят страницы сайта, найдут ошибки и создадут список рекомендаций по их исправлению. На весь оплаченный период оптимизации сайта за вами будет закреплён веб-аналитик, который сможет ответить на все вопросы по работе с сайтом.

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

• 

  ошибка 404 в стадии строительства знак 3d значок сайт баннер концепция

• 

  ошибка треугольника 404 глюк границы дизайна

• 

  ошибка 404 страница не найдена веб сайт

• 

  Ошибка 404 Страница Не Найдена

• 

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

• 

  ошибка 404 в стадии строительства знак 3d значок сайт баннер концепция

• 

  плоская ошибка 404 страницы веб сайта

• 

  треугольник ошибка 404 глюк границы прозрачный дизайн

• 

  Ошибка 404 Страница Не Найдена

• 

  неон ошибки 404

• 

  Мультяшный рисованной компьютерной ошибки 404 иллюстрации

• 

  Интернет отключен ошибка 404 страница не найдена

• 

  Веб страница Возврат 404 Ошибка ошибки кода ошибки 404

• 

  ошибка 404 не найден неоновый эффект

• 

  ошибка 404 не найден эффект сбоя

• 

  ошибка 404 не найден эффект сбоя

• 

  Рисованной бизнес компьютер ошибка 404 иллюстрации

• 

  страница не найдена или ошибка 404 веб сайта

• 

  ошибка 404 эффект сбоя

• 

  ошибка веб страницы 404 иллюстрации 404 иллюстрации для веб приложений и приложений

• 

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

• 

  глюк цвет фона наложения rgb ошибка

• 

  ошибка 404 глюк границы вектор прозрачный дизайн

• 

  ошибка 404 не найден эффект сбоя

• 

  Ошибка белого цвета ошибка 404 стр

• 

  ошибка 404 png

• 

  ошибка 404 устранение неполадок вектор

• 

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

• 

  Бизнес веб ошибка 404 концепции иллюстрации

• 

  Мода прохладный стиль ошибка ошибки 404

• 

  круг ошибка 404 глюк границы вектор прозрачный дизайн

• 

  Ошибка ошибки потери данных программы 404

• 

  Мультфильм рисованной ошибка 404 компьютерная иллюстрация

• 

  Ошибка 404 сбоя Интернета на веб странице

• 

  Ошибка отключения веб отключения 404

• 

  Веб информация потерянная ошибка ошибки 404

• 

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

• 

  Мультяшный рисованной компьютер ошибка 404 увеличительное стекло иллюстрации

• 

  Ошибка ошибки изображения по умолчанию по умолчанию 404

• 

  Ошибка неисправности сети 404

• 

  Творческая веб страница отсутствует ошибка неисправностей 404

• 

  Космическая планета астронавт ошибка 404

• 

  Ошибка страницы имеет ошибку неисправности 404

• 

  ошибка 404 глюк границы png

• 

  Синий красный burr черная ошибка ошибки 404

• 

  ошибка 404 с элементом вектора границы сбоя круга

• 

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

• 

  Ошибка неисправности визуальной деформации 404

• 

  граница круга глюк с ошибкой 404 векторная иллюстрация

• 

  ошибка 404 глюк границы дизайна

CSS3, SVG
31.03.2022

Cписок с некоторыми из лучших анимированных страниц 404

54 креативных страниц с ошибкой 404 с классной анимацией!

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

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

Примеры можно использовать в качестве шаблона или в качестве примера для вашего собственного сайта, и давайте будем честными… страницы 404 — лучшие! 🤣 Вы можете найти больше информации о собственном использовании на сайте Codepen.

И так рассмотрим все собранные мной примеры анимированых 404 страниц:

1. Mars 404 Error Page

2. Dripping paint 404 page | Анимация SVG

3. CSS 404 page

4. 404 animation

5. 404 — new

6. 404 — animation

7. Error Page

8. Ark 404 animation

9. 404 Animation

10. 404 Animation

11. Neon 404 — CSS only(Static)

12. 404 svg animated концепция страницы для интернет-магазина

13. Darkmode animation | 404

14. 404 error page

15. Text Wave Animation (404 not found)

16. GSAP: SVG Animation 404 Error Milk Carton)

17. Error 404 Page With Astronaut

18. MJ 404 in Pure CSS

19. 404 error page, Caveman mode — pure CSS

20. Space 404 (pure CSS)

21. StevenGFX Robot 404 Error

22. Weight a Minute — Error 404

23. 404 Page

24. 404 Page

25. Css only 404 Crying Baby

26. 404 Frog

27. Yeti 404 Page

28. 404 Error Example #2

29. 404 Page

30. CSS Train 404 Page

31. Error Page

32. 404 — SVG Animation

33. 404 Page SVG animation

34. 404 Error Page: Animated SVG GSAP

35. 404 Error page — Animated SVG

36. SVG Animation 404 page

37. 404

38. Animated Error page — #Project4

39. 404 Error Page

40. Fargo 404

41. 404 Error Page

42. 404 magnifying glass SVG animation CSS

43. Error 404 bulb SVG animation CSS smil

44. 404 animation CSS Javascript Mousemove

45. Tractor Pull 404 Error

46. Space 404

47. «Lost in Space» — 404 Error

48. «Lost in Space» — 404 Error

49. 404 Page Not Found

50. Challenge: 404 page

51. 404 — Glitched out

52. 404 No signal

53. Neon — 404 Page Not Found

54. Glitchy 404 Page

Надеюсь, вам понравилось! Пользуйтесь!

---

Статьи по теме

If you call up a page that does not (no longer) exist, you are redirected to 404 pages. But that’s not bad, because 404 pages can work wonders with a little creativity, so that visitors don’t leave your site.

404 pages (or Error Page) are so called because servers return the HTTP status code 404 in case of a non-existent or no longer existing page to show that the requested page does not (no longer) exist.

A creative way with funny animations, designs and fun images often a good way to keep visitors on the go – that is, to make them not leave your website. In this course it is also important to give users the possibility to go directly to another subpage on your website (be sure to check out my 404 page). Also responsive pages have to look good, of course.

The pens can be used as a template template or as examples for your own site, let yourself be inspired! And let’s be honest…404 jokes are the best! ?

The shown pens are licensed with MIT. You can find more information about your own use in the Codepen Blog.

#1 Responsive 404 Stranger things

Author: ARiyou Jahan;
Coded in: HTML, CSS (SCSS);

#2 No Vacancy 404

Author: Riley Shaw;
Coded in: Slim, Sass, CoffeScript;

#3 404 Kittens

Author: nclud team;
Coded in: HTML, CSS (SCSS), JS;

#4 – Glitched out

Author: ZonFire99;
Coded in: HTML, CSS, JS;

#5 Fargo 404

Author: Nathaniel Watson;
Coded in: Pug, CSS (SCSS), JS;

#6 404 No signal

Author: Adem ilter;
Coded in: HTML, CSS, JS;

#7 Glitchy 404 Page

Author: Kay Pooma;
Coded in: HTML, CSS;

#8 Bluescreen – 404 Page

Author: Angela Galliat;
Coded in: HTML, CSS;

#9 404 Space

Author: Keith;
Coded in: HTML, CSS (SCSS), JS;

#10 Error page – #Project 4

Author: Jake;
Coded in: HTML, CSS (SCSS), JS;

#11 404

Author: Metty;
Coded in: HTML, CSS, JS;

#12 Space 404

Author: Ethan;
Coded in: HTML, CSS (SCSS), JS;

#13 404 Error Page

Author: anhat.dev;
Coded in: HTML, CSS, JS;

#14 Daily UI #008 – 404 Page

Author: Rafaela Lucas;
Coded in: HTML, CSS (SCSS), JS;

#15 Lost in Space (ERRORS) (not responsive)

Author: Radu;
Coded in: HTML, CSS (SCSS);

#16 404 Page Not Found

Author: João Sousa;
Coded in: HTML, PostCSS;

#17 404 Error Page

Author: miranda;
Coded in: HTML, CSS;

#18 404 Error page

Author: Abolfazl Arab;
Coded in: HTML, CSS;

#19 404 Makes bear sad ??

Author: Jhey;
Coded in: Pug, Stylus, Babel;

#20 404-magnifying-glass-svg-animation-css

Author: Maelle Gomez;
Coded in: HTML, CSS;

#21 en 404 page

Author: Arman Azizpour;
Coded in: HTML, CSS;

#22 404 Venn Diagram

Author: Michael Richins;
Coded in: HTML, CSS (SCSS);

#23 Tractor Pull 404 Error

Author: Nick Soltis;
Coded in: HTML, CSS (SCSS);

#24 Neon – 404 Page Not Found

Author: Tibix;
Coded in: HTML, CSS;

#25 8-bit mario 404

Author: JFabre;
Coded in: HTML, CSS (SCSS), Babel;

Conclusion

As you can see, there are no limits to your creativity. Which one do you like best, or have you perhaps become creative yourself? Please let me know! And maybe your 404 page will appear here soon. 🙂

Not enough? Then this could be something for you!

• Cool CSS Buttons
• CSS Navigation Menus
• CSS Hamburger Menus
• Satisfying CSS Animations
• Inspiring loading animations

Note: All pens are published on codepen.io and not by me.