Изображения 63,23k
Коллекция 1
storyset
storyset
pikisuperstar
storyset
bamdewanto
user14764621
meepiangraphic
freepik
storyset
roserodionova
freepik
freepik
freepik
freepik
storyset
freepik
pikisuperstar
storyset
rs89
mitasukmaa28
valazarus
rs89
freepik
freepik
pro_vector
pikisuperstar
freepik
upklyak
freepik
freepik
storyset
storyset
user11898798
vectorpouch
storyset
freepik
freepik
pikisuperstar
gstudioimagen
pikisuperstar
dedybakri
freepik
freepik
pikisuperstar
freepik
nutcracker
storyset
storyset
pikisuperstar
Ошибка 404 на сайте говорит о том, что страница с контентом, которую хочет открыть пользователь, перенесена на другой адрес или удалена полностью.
Чаще всего пользователь, который нарвался на такую ошибку, закрывает страницу и идет искать решение своей проблемы на другом сайте. Для самой компании каждый ушедший пользователь — это потеря прибыли.
Разбираемся в статье, как отследить на сайте страницы с ошибкой и уменьшить процент отвала посетителей.
Содержание
Значение ошибки 404
5 причин возникновения ошибки 404
Вред от страницы с ошибкой 404
SEO сайта
E-commerce
Вред от настройки переадресации на работающую страницу
4 инструмента для выявления ошибки 404 с пошаговой инструкцией
1. Xenu’s Link Sleuth
2. Search Console Google
3. Screaming Frog
4. Яндекс.Вебмастер
Как исправить ошибку 404?
3 шага до понятной и полезной страницы с ошибкой 404
Шаг 1. Понятно объясните, что происходит
Шаг 2. Направьте пользователя в нужное компании русло
Шаг 3. Добавьте юмор, чтобы разрядить обстановку
Заключение
Ошибка 404, или Page not Found, означает, что запрашиваемой страницы не существует. Ошибка появляется в тот момент, когда сервер, на котором находится сайт, не может найти запрошенный пользователем файл.
Несмотря на то, что это одна из самых распространенных ошибок, сейчас она встречается реже, чем в «лохматые» 90-е или в начале 2000-х. На это есть причины:
- Большинство крупных сайтов прекрасно понимает, что такие страницы режут конверсию сайта и портят пользовательский опыт, и перенаправляют людей со страниц 404 в другое место.
- Компании делают кастомные страницы с ошибками, которые предназначены для того, чтобы человек не ушел с сайта.
Оба варианта мы более подробно разберем ниже.
5 причин возникновения ошибки 404
- Компания удалила страницу или переместила ее на другой адрес, но забыла настроить редирект — переадресацию на актуальный URL-адрес.
- Человек ввел в поисковик или скопировал неправильный URL-адрес, или адрес изначально был написан неправильно на этапе разработки.
- Сервер, на котором стоит сайт, не работает, или соединение разорвано.
- Запрошенное доменное имя не может быть преобразовано в IP-адрес DNS.
- Введенное доменное имя больше не существует.
Неработающие ссылки часто остаются на долгое время после удаления или перемещения страницы, так как их никто не ищет и не пытается устранить, хотя это и невыгодно компаниям.
Вред от страницы с ошибкой 404
Как мы писали выше, столкнувшись с ошибкой, человек, скорее всего, пожмет плечами, закроет сайт и больше никогда на него не придет. Ему будет все равно, что остальная часть сайта прекрасно функционирует — он сочтет, что компания «сломалась» полностью.
Основная причина этого — компания не позаботилась о том, чтобы ошибка 404 хоть о чем-то информировала пользователей.
Пустая белая страница с непонятными словами ничего не делает для того, чтобы задержать посетителей на сайте, а наоборот, вредит. Нет навигации, логотипа, фирменных цветов компании, юмора — вообще ничего, что указывало бы, что с самим сайтом все нормально и такое бывает.
В таком случае самое распространенное действие, которое предпринимает человек, — это закрыть вкладку и пойти искать дальше.
SEO сайта
В теории ошибка 404 способна повлиять и на рейтинг всего сайта, но для этого масса страниц с ошибкой должна стать критической и превысить хотя бы половину работающих страниц.
Если страниц с ошибкой не так уж много, поисковые системы просто не будут ее индексировать, но это никак не скажется на SEO.
E-commerce
Когда пользователь намерен что-то купить, он сделает это, несмотря на то, работает у вас страница или нет. Другое дело, что если ваша страница не функционирует, он пойдет к конкурентам, чьи сайты не подводят и не отпугивают. В этом случае вы рискуете упустить прибыль.
Ненайденная, хоть и милая страница на Amazon
Сценарий шаблонно прост:
- человек прямо сейчас хочет что-то купить и заходит на сайт интернет-магазина;
- находит в каталоге нужный товар;
- нажимает не него и видит страницу с ошибкой;
- делает вывод, что сайт глючный или товар закончился;
- уходит к конкурентам.
Ниже мы подробно расскажем, как оформить страницу 404 таким образом, чтобы сократить процент отвала посетителей.
Вред от настройки переадресации на работающую страницу
Битые ссылки желательно убрать, заменить на работающие адреса или настроить автоматическую переадресацию с неработающих страниц на страницы с похожим или аналогичным контентом на сайте.
Благодаря этому шанс, что человек задержится и все-таки совершит целевое действие, увеличится, соответственно, и конверсия сайта будет расти.
В интернете достаточно источников, которые предлагают настроить переадресацию на главную страницу сайта. На самом деле — это не самое лучшее решение.
Представьте ситуацию: у компании большой интернет-магазин электронной техники, с разными каталогами, фильтрами и прочим. Потенциального покупателя интересуют телевизоры. Он кликает на вкладку, попадает в каталог, дотошно фильтрует товары, чтобы среди сотен наименований найти нужную модель. Затем он ее наконец-таки находит, нажимает на нее и… попадает на главную страницу сайта. Приятного мало.
При этом ему ничего не объяснили, и он понятия не имеет, почему так произошло, и делает вывод, что это баг и сайт не работает. Такая ситуация может привести к тому, что человек сразу покинет сайт и пойдет к конкурентам — телевизор заказать-то надо.
Поэтому, если и перенаправлять человека, то только на релевантные запросам страницы. В общем, используйте редирект с умом, и прежде чем принимать решение о переадресации, проделайте путь пользователя и поймите, не спугнет ли ваша затея клиента.
4 инструмента для выявления ошибки 404 с пошаговой инструкцией
Чтобы пользователи не отваливались увидев ошибку, наличие таких страниц нужно регулярно мониторить, а помогут в этом простые инструменты.
1. Xenu’s Link Sleuth
Xenu — это бесплатная программа, которую нужно скачать и установить на компьютер. Она помогает найти битые ссылки на любом сайте, даже если он вам не принадлежит.
Скачать программу можно на этом, на первый взгляд сомнительном, сайте: hоme.snаfu.dе.
Все без проблем удалось установить, проверили. Единственным минусом может стать то, что программа полностью на английском языке.
После запуска программы откроется окно. В левом верхнем углу нажмите на File, а затем Check URL и вставьте ссылку на интересующий вас сайт.
В настройках можно проверить и выставить те галочки, которые вам нужны. В стандартном режиме галочки стоят автоматически, кроме последнего пункта. Больше всего нас интересуют первые три пункта:
- битые ссылки, сгруппированные по URL-адресу;
- битые ссылки, сгруппированные по страницам, где они расположены;
- внутренние битые ссылки.
После сканирования программа создаст html-страницу с отчетом и предложит с ним ознакомиться.
Есть второй вариант: посмотреть битые ссылки в самом инструменте. Для этого найдите вкладку Status → страницы со значением not found; нажимаем на правую кнопку мыши и в появившемся окне выбираем URL Properties.
Список ссылок будет представлен в поле pages linking to this one.
2. Search Console Google
Для того чтобы воспользоваться сервисом, сначала вам необходимо подтвердить права владения сайтом, и только потом получится начать сканирование.
Перейдите в раздел «Покрытие» (Coverage) и нажмите на «Ошибка» (Error). После этого вы сможете увидеть информацию о страницах с ошибками.
3. Screaming Frog
Программой может воспользоваться любой человек, а не только владелец сайта.
В отличие от предыдущего варианта эта программа способа бесплатно отсканировать 500 страниц, но дальше придется платить. Скачать ее можно без проблем с официального сайта scrеаmingfrоg.cо.uk.
Для того чтобы найти битые ссылки, нужно указать адрес сайта и начать сканирование. После того как сканер обойдет все 500 обещанных страниц, последовательно нажмите Response Codes → Al» → Client Error (4xx).
Далее выбираем URL и нажимаем Inlinks в левом нижнем углу. Появится список страниц, которые имеют ссылку на несуществующую страницу.
4. Яндекс.Вебмастер
Как и в предыдущем случае, чтобы пользоваться этим сервисом, необходимо подтвердить права на владение сайтом.
После этого выберите вкладку «Индексирование» → «Доступные для поиска страницы» → «Исключенные страницы». В появившемся списке выберите «Ошибка HTTP:404».
Как исправить ошибку 404?
Если вы загружаете сайт и видите Page not found, есть несколько способов все же получить желаемое:
- Сперва просто обновите страницу. Для этого нажмите кнопку «Обновить страницу» (Reload this page), а еще лучше нажмите CTRL + F5. Этот способ обновляет страницу, не заглядывая в кэш браузера.
- Удостоверьтесь, что в строке браузера написан правильный URL-адрес. Возможно, вы ошиблись, когда его вводили или копировали.
- Скопируйте URL-адрес и введите его в Яндекс или Google поиске. Попробуйте зайти на сайт, кликнув на первый сниппет в поиске.
- Можно попробовать очистить кэш либо зайти на сайт через режим Инкогнито (CTRL + SHIFT + N). Чтобы очистить кэш в Яндекс браузере, нажмите Настройки → Дополнительно → Очистить историю → Файлы, сохраненные в кэш.
- Чтобы очистить кэш в Google браузере, щелкните в открытом браузере правой кнопкой мыши → выберите «Просмотреть код» (Inspect) → щелкните правой кнопкой мыши на значок «Обновить страницу» → выберите «Очистка кэша и жесткая перезагрузка».
- Попробуйте зайти на главную страницу сайта. Для этого удалите все, что идет после домена верхнего уровня. Например, в адресе www.vеdоmоsti.ru/spеc/2022/02/03/… удалите все после ru.
- Если и на главной странице вы видите ошибку 404, то возможно, что заблокирован ваш IP-адрес. Тогда придется воспользоваться VPN.
- И, наконец, свяжитесь с техподдержкой сайта. Они смогут сориентировать вас, почему не работает страница, и будут вам благодарны за выявление ошибки на сайте.
3 шага до понятной и полезной страницы с ошибкой 404
Чтобы страница 404 не отпугивала людей, необходимо дать человеку понять, что все нормально, просто случилась небольшая проблема.
Одно из важных правил — страница с ошибкой не должна визуально отличаться от основного сайта компании.
Ошибка 404 от freepik.com: визуально сочетается со вселенной freepik
Давайте разберем, что еще можно сделать, чтобы получить пользу от страницы с ошибкой.
Шаг 1. Понятно объясните, что происходит
Стандартное техническое объяснение в виде Not Found ничего не говорит людям.
Лучшее всего использовать простые человеческие слова для объяснения проблемы, например: «Нам не удалось найти страницу» или «Похоже, такой страницы не существует».
Компания может сделать еще круче и объяснить подробнее, почему человек вообще увидел ошибку. Вот несколько примеров:
- Возможно, вы допустили ошибку, когда вводили или копировали адрес.
- Владелец сайта удалил или переместил эту страницу. Давайте вернемся на главную.
Шаг 2. Направьте пользователя в нужное компании русло
После того как мы дали пользователям понять, что произошло недоразумение, действуем дальше. Само по себе информирование людей об ошибке едва ли поможет задержать их на сайте, а вот призыв к действию сможет. Предложите посетителям перейти в другое место:
- На главную страницу сайта.
- На страницу с актуальным или релевантным запросу товаром или контентом.
- В панель поиска, где посетители смогут попробовать найти другую страницу сами.
- В мессенджеры техподдержки или отдела продаж, которые помогут клиенту найти товар или оформить заказ напрямую.
Занимательный факт: если не будет призыва к действию, не будет и никакого действия.
Компания может также добавить на эту страницу контакты техподдержки, чтобы при желании пользователь мог связаться с техэкспертами.
Шаг 3. Добавьте юмор, чтобы разрядить обстановку
Вместе с фирменным стилем, объяснением произошедшего и призывом к действию, добавьте немного юмора, который поможет разрядить обстановку и вызвать улыбку у людей.
Используйте сленг и шутки, которые будут понятны и близки вашей аудитории, и постарайтесь сделать так, чтобы пользователь смог узнать себя в этой шутке — так вы сможете сменить негатив на понимание.
Заключение
Компании делают очень многое в попытках привлечь и удержать людей на сайте. Не очень приятно и совсем не выгодно, если из-за ошибки пользователи отказываются от покупки.
Постарайтесь сделать страницу, которая понятно объяснит, что происходит. В таком случае вероятность того, что пользователь уйдет сразу, значительно сокращается.
Высоких вам конверсий!
09-02-2022
Imágenes 63,23k
Colecciones 2
storyset
storyset
pikisuperstar
storyset
rs89
bamdewanto
user14764621
freepik
nutcracker
storyset
dedybakri
roserodionova
freepik
freepik
mitasukmaa28
valazarus
freepik
storyset
freepik
pikisuperstar
rs89
storyset
freepik
pikisuperstar
freepik
upklyak
freepik
freepik
freepik
pro_vector
storyset
storyset
vectorpouch
storyset
freepik
freepik
user11898798
pikisuperstar
gstudioimagen
freepik
pikisuperstar
meepiangraphic
freepik
freepik
pikisuperstar
freepik
storyset
storyset
pikisuperstar
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.
Страница «Ошибка 404» появляется, когда человек ввёл неправильный адрес сайта или перешел по неработающей ссылке. Оставить 404 страницу пустой — это не преступление, но вашим клиентам будет приятнее видеть креативный подход к этой проблеме. А ваш бизнес только выиграет, если эта страница будет выполнять продающие или имиджевые функции. В этой статье мы рассмотрим примеры самых интересных 404 страниц в интернете.
Всё не так уж плохо
Неподготовленный пользователь, попав в 404-ый тупик, нередко считает, что лучшее решение — покинуть сайт и поискать нужную информацию в другом месте. Чтобы не терять трафик, подскажите пользователю, что нужно просто перейти в другой раздел. Есть несколько советов по созданию 404 страницы:
- Добавьте ссылки на главную и ключевые страницы сайта (например, каталог товаров, акции или самые популярные разделы).
- Проявите креатив. Он всегда привлекает внимание, повышает интерес к компании и как минимум задерживает заблудившихся пользователей на сайте. Чуть позже мы посмотрим, каким он бывает.
- Строка поиска по сайту. Наличие этой функции повысит вероятность того, что клиент продолжит свой путь по этому сайту, несмотря на ошибку 404.
- Оформляйте 404 страницу в стиле сайта и бренда. Используйте те же основные цвета и привычные для сайта элементы.
Примеры креативного оформления 404 страницы
404 Mailchimp
Лошадь отчаянно ищет нужную страницу, но ее нигде нет. На анимации креатив не заканчивается: если кликнуть по лошадке, то запустится игра по принципу «Змейки».
404 Dribbble
Этой страницы больше нет, но ресурс предлагает найти проекты в нужном цвете прямо здесь! Лучшего использования 404 и не придумаешь.
404 Точка.ru
Стыковка не состоялась, но это не повод расстраиваться. Просто перейдите на другую страницу сайта.
404 Figma
Сайт позволяет вдоволь поиздеваться на 404 ошибкой. Растяните её, как вашей душе угодно. Это решение стопроцентно понравится дизайнерам.
404 Coursera
Вариант для поклонников супрематизма. Анимация складывает фигуры в число 404.
404 Freepik
Страница находится за пределами Вселенной. Оставьте поиски астронавтам и посетите другие страницы сайта.
404 Font Awesome
Использование мемов — действующий и ультрамодный способ донести информацию до пользователей.
Итого
Самое главное в оформлении 404 страницы — проложить покупателю путь к продающим страницам сайта. Классный дизайн и креативная идея помогут вам сделать клиента лояльнее и смягчить его недовольство от попадания на страницу 404. Создавайте новые сайты и углубляйте свои знания вместе с UMI.CMS.