16 конвертирующих страниц 404 для заблудившихся посетителей
Знали ли вы, что страница 404 способна повысить конверсию вашего сайта и прибыль компании? Приложив некоторые усилия, поработав над дизайном и оптимизацией, вы можете превратить потерявшихся посетителей в потенциальных клиентов.
В этом посте вы увидите 16 примеров конвертирующих страниц 404 и узнаете, почему они работают.
Содержание статьи
Что такое страница 404 и зачем она нужна
1. Lego: дружелюбная страница 404
2. Email Center UK: интерактивная страница 404
3. List25: лучшая страница 404
4. Brett Terpstra: простая страница 404
5. Steve Madden: страница 404 с товарами
6. 9gag: страница 404 с призывом к действию
7. Path: предельно простая страница 404
8. IMDB: забавная тематическая страница 404
9. Everipedia: текстовая страница 404
10. Heyzap: интерактивная страница 404
11. OptinMonster: страница 404 с лид-магнитом
12. Ozon: забавная и полезная страница 404
13.
14. Texterra: веселая страница 404
15. Лабиринт: страница 404 с указателями
16. LPgenerator: страница 404, где нет лидов
Бонус: намерение уйти
Что такое страница 404 и зачем она нужна
Каждый сайт подвержен изменениям: продукты и контент перемещаются или удаляются, меняется структура сайта. Когда посетитель кликает по ссылке на удаленную или перемещенную страницу, он видит страницу 404. Она открывается и тогда, когда пользователь опечатался в URL.
404: Сова не найденаЗапрошенная вами страница отбилась от стаи
Возможно, вы оказались здесь, потому что:
Страница перемещена
Страница больше не существует
Вам нравятся страницы 404
CTA: Вернуться на домашнюю страницу
А ваша страница 404 отражает ваш бренд? Если нет, вы точно теряете посетителей, которые закроют её, уйдут с вашего сайта и никогда не вернутся.
Вот это никому не понравится:
Потратив время на оптимизацию текста и дизайна страницы 404, вы можете уменьшить уровень отказов и повысить конверсию. Предлагаем вам 16 вдохновляющих примеров страницы 404.
1. Lego: дружелюбная страница 404
Страница не найденаИзвините, мы не нашли эту страницу! Может быть, ссылка устарела или страница удалена.
Почему это работает:
Страница 404 от Lego не только полностью соответствует бренду: она понятна и забавна. Никаких технических терминов или сообщения «Страница 404», понятного не всем. Все, что нужно знать посетителю, — что он не попал на желаемую страницу, и его мало волнуют причины, ему просто нужно решение проблемы.
Как это сделать:
Для начала переведите все технические термины на человеческий язык. Вместо текста страницы 404 по умолчанию пишите то, что поймет каждый:
-
Страница не найдена.
- Извините, мы не нашли страницу, которая вам нужна.
- Упс! Что-то пошло не так.
- О господи, ссылка не работает!
2. Email Center UK: интерактивная страница 404
404 — страница не найдена.Кто-то из разработчиков должен за это поплатиться! Выберите, кого уволить.
Вы настроены великодушно? Пусть все сохранят работу. Вернуться на домашнюю страницу.
Почему это работает:
Email Center UK используют страницу 404 из 2-х частей, снимающую «вину» с посетителя и дающую ему забавный способ справиться с раздражением.
Как это сделать:
Не обвиняйте посетителя в ошибке, а вместо этого извинитесь. Объясняя, что пошло не так, не будьте категоричны. Употребите слова и фразы вроде «может быть» или «наверное»: такие формулировки не заставляют пользователя чувствовать себя виновником ошибки.
Вы можете повторить за Email Center UK и позволить посетителю «уволить» одного из разработчиков:
Люк, ты уволен!Бедный Люк.
Люк не то что бы мстителен, но, может быть, теперь вам стоит сменить IP-адрес.
Вернуться на домашнюю страницу.
3. List25: лучшая страница 404
Вы могли оказаться здесь по целой куче причин, но вот 25 самых распространенных:
1. Вы думали, что страница существует… а это не так.
2. Страница существует, но вы опечатались в адресе.
3. Вы специально набрали неправильный адрес.
4. Сайт, с которого вы пришли, не так высокоразвит, как List25, и не поспевает за нашей продвинутой системой управления контентом.
Почему это работает:
Страница 404 замечательно соответствует бренду. Одна из лучших практик разработки UX — объяснить, что пошло не так, в сообщении об ошибке, и List25 предлагает целых 25 причин. Вверху списка есть панель поиска, чтобы людям не приходилось читать его весь, но, наверное, большинство все равно прочитает.
Как это сделать:
Вы не обязаны предъявлять длинный список возможных причин ошибки, но, так или иначе, стоит объяснить, что пошло не так. Вот список возможных причин ошибки 404:
- Опечатка в URL
- Ошибка при вставке URL
- Битая ссылка
- Контент перемещен
- Контент удален
Если вы хотите добавить какие-нибудь забавные причины, подходящие вашему бренду, сделайте это.
4. Brett Terpstra: простая страница 404
404 — страница не найденаСтраница, которую вы запросили, не найдена. Может быть, вы искали вот это:
А вы уже купили билеты на Macstock 2018?
Веб-экскурсии: 6 июня 2011 — 8 июня 2011
Также вы можете заглянуть в архив и поискать посты по названию и ключевым словам или использовать NerdQuery, чтобы быстро найти искомое.
Почему это работает:
Почему стандартная страница 404 так раздражает? Потому что это тупик: вам некуда дальше идти. Страница от Brett Terpstra предлагает список постов, где есть ключевые слова, связанные со ссылкой, по которой пытался пройти посетитель.
Как это сделать:
Вы можете воспользоваться Custom Search API, чтобы лучшие совпадения с вашего сайта появлялись на странице 404. Так проблема заблудившегося пользователя сразу решается.
5. Steve Madden: страница 404 с товарами
Ой. Неловко получилось.Похоже, эта страница взяла выходной, чтобы накупить себе новой обуви, и уже исчезла под горой туфель и сапогов. Это мы виноваты. Любим вас!
Популярные товары
Почему это работает:
Эта страница 404 предлагает заблудившимся посетителям варианты. Панель поиска — это отличное решение для любой страницы 404, а несколько разных способов получить помощь показывают посетителям, что вы о них заботитесь. Steve Madden также включили на страницу ссылки на популярные товары, отвлекая пользователей и не давая им раздражаться. Хитро и эффективно.
Как это сделать:
Текст и дизайн страницы 404 должны помогать потерявшимся посетителям. Приведенные ниже идеи могут подтолкнуть их к тому, чтобы задержаться на вашем сайте.
Что стоит разместить на странице 404:
- Навигационное меню
- Ссылку на главную страницу
- Ссылку на карту сайта
- Панель поиска
- Ссылки на популярные посты
- Ссылки на популярные товары
6. 9gag: страница 404 с призывом к действию
Здесь ничего нет.Найдите то, что вы ищите, с нашим приложением.
CTA: Скачать приложение
Почему это работает:
Задача страницы 404 от 9gag — убедить посетителя скачать приложение. А чтобы оживить ее, они добавили популярный мем из «Криминального чтива».
Как это сделать:
Главное — простота. Да, мы только что говорили о разных способах удержать посетителя на сайте, но не стоит перегружать его избытком вариантов.
7. Path: предельно простая страница 404
О нет! Страница не найдена.Связаться со службой поддержки.
Почему это работает:
Эта страница проста и ясна. Path не хотят битых ссылок на своем сайте и поэтому предлагают посетителям сообщить о проблемах в службу поддержки. Также на странице есть навигационный футер на случай, если посетитель предпочитает еще побродить по сайту: так власть возвращается к посетителю, и ситуация раздражает его гораздо меньше.
Как это сделать:
Цель здесь — дать посетителям возможность сообщить о проблеме. Это можно сделать разными способами, например просто разместить ссылку, как сделали Path, или использовать форму обратной связи.
8. IMDB: забавная тематическая страница 404
Где страница, Лебовски? Где она?Почему это работает:
Помните ужасную стандартную страницу 404 из начала статьи? На ней нет ничего знакомого, что успокоило бы посетителя. IMDB справляется с этим, размещая на странице 404 цитату из фильма. Брендинг тонок: никаких постеров или трейлеров, которые тянули бы внимание посетителя в разные стороны. Сайт предлагает только цитату, ссылку на главную страницу и на процитированный фильм.
Как это сделать:
Страница 404 должна соответствовать вашему бренду. Не дезориентируйте пользователей: покажите им, что они по-прежнему взаимодействуют со знакомым брендом.
Читайте также: 10 примеров творческого подхода к сообщению об «ошибке 404»9. Everipedia: текстовая страница 404
404 Не найденоСообщение «404» или «Не найдено» — это стандартный код ответа HTTP (HyperText Transfer Protocol — протокол передачи гипертекста) о том, что клиент смог связаться с сервером, но сервер не может найти запрошенные данные.
Хостинг обычно генерирует ответ «404 Не найдено», когда посетитель пытается пройти по битой или мертвой ссылке, и поэтому ошибка 404 — одна из самых узнаваемых во Всемирной паутине.
Обзор
При коммуникации по HTTP клиент требует ответа на свой запрос к серверу, например, веб-браузер запрашивает страницу и ожидает цифровой код ответа…
Почему это работает:
Everipedia предлагает читателям именно то, чего можно ожидать от онлайн-энциклопедии, и напоминает им, за что они любят этот сайт и почему постоянно на него возвращаются.
Как это работает:
Как сказал маркетолог Ренни Глисон (Renny Gleeson) сказал о странице 404: «Простая ошибка говорит о том, кем вы не являетесь. Или напоминает мне, за что я вас люблю». Напомните посетителям, за что они вас любят. Каково ваше уникальное торговое предложение? Что отличает вас от конкурентов?
10. Heyzap: интерактивная страница 404
Почему это работает:
Кто не любит играть в игры? Heyzap добавили на страницу 404 интерактивный элемент, который развлекает посетителей и удерживает их на сайте на какое-то время — и, может быть, раздражение, вызванное ошибкой, успеет пройти.
Как это сделать:
Вы не обязаны разрабатывать целую игру, но можете добавить на страницу интерактивный элемент. Так посетителям будет чем заняться на странице 404, а значит, они проведут на ней больше времени, и показатель отказов снизится. То и другое важно для вашей позиции в поисковой выдаче Google.
11. OptinMonster: страница 404 с лид-магнитом
Такой страницы не существует!Извините, страница, которую вы искали, не найдена.
Попробуйте поискать что-нибудь другое.
Или вернитесь на главную страницу, или свяжитесь с нами, если не нашли искомого.
Перехватите маркетинговый урок
Получить бесплатный кейс!
Как повысить трафик органического поиска
Как конвертировать уходящих посетителей и получать доход
Знаете ли вы, что более 70% посетителей, уходящих с вашего сайта, никогда не возвращаются? Узнайте, как OptinMonster решает эту проблему.
CTA: Скачать сейчас
Почему это работает:
Страница 404 содержит лид-магнит, причем предлагать курс о том, как конвертировать уходящих посетителей, именно на странице ошибки — это хороший ход. Так страница 404 тоже предоставит посетителям полезную информацию, и ни одна минута, проведенная на сайте, не будет потрачена впустую.
Как это сделать:
Предложите собственный лид-магнит на странице 404. Этот тип подписки способен повысить конверсию на 785%. И не забудьте создать лендинг, на который будет вести заветная ссылка.
12. Ozon: забавная и полезная страница 404
Почему это работает:
Как и любая хорошая страница 404, она согласуется со стилем бренда и подсказывает посетителю, что делать дальше — в данном случае ознакомиться с акциями, проходящими на сайте. Ненавязчивый юмор помогает справиться с раздражением оттого, что запрошенный контент не удалось найти.
Как это сделать:
Вместо не найденного контента предложите посетителю что-нибудь полезное — например, напомните о своих акциях, скидках и специальных предложениях.
13. Evernote: последовательная страница 404
Почему это работает:
Как и любая хорошая страница 404, этот пример проясняет ситуацию и предлагает варианты дальнейших действий. Симпатичная картинка выполнена в том же стиле, что и прочие иллюстрации на сайте Evernote: компания ведет себя последовательно
Как это сделать:
Создавая текст, изображения и прочий контент страницы 404, придерживайтесь того же стиля, что и на всех остальных страницах своего сайта.
14. Texterra: веселая страница 404
Почему это работает:
Эта страница вызывает улыбку и подсказывает, что делать дальше: вернуться на главную или воспользоваться поиском.
Как это сделать:
Стоит сделать страницу 404 забавной, чтобы она вызывала у посетителей не раздражение, а улыбку.
15. Лабиринт: страница 404 с указателями
Почему это работает:
Лабиринт сделал все возможное, чтобы не расстроить посетителя — и не дать ему уйти: тут и объяснение, что произошло, изложенное понятным языком, и панель поиска, и ссылка на текущие акции, и каталог популярных книг. Если стандартная страница 404 — это тупик, то страница от Лабиринта — это несколько расходящихся дорог с указателями.
Как это сделать:
Объясните посетителям, что произошла ошибка, и дайте им выбор, что делать дальше.
16. LPgenerator: страница 404, где нет лидов
Здесь лидов нет — но по ссылкам на блог, главную страницу и на создание лендинга они обязательно найдутся.
Бонус: намерение уйти
Технологии, отслеживающие намерение уйти, нечасто используются на страницах 404. Намерение уйти проявляется, когда посетитель готов покинуть страницу, и в этот момент появляется всплывающее окно. Так вы не потеряете те 70% посетителей, что покидают ваш сайт и никогда не возвращаются.
Вот пример такого всплывающего окна на странице 404. Оно помогает найти искомое — и творит чудеса для владельца сайта, потому что удерживает посетителя. Во всплывающем окне можно также предложить купон или скидку.
Не нашли искомого?Поиск
Вернуться на домашнюю страницу
Высоких вам конверсий!
По материалам: optinmonster. com.
19-07-2018
Копирайтинг для страницы «Ошибка 404» — Студия копирайтера Дениса Каплунова
- Что такое ошибка 404Функции страницы 404 ошибка
- Разъяснительная функцияПродающая функцияРазвлекательная функцияВажные моменты
Исправьте и настройте отслеживание 404 ошибкокПримеры страниц 404 в наших проектах
Вот так печально выглядит большинство страниц с 404 ошибкой, которым не уделили должного внимания
Сайт русский, а страница 404 на английском
Что такое ошибка 404
Это страница, которой по запрашиваемому адресу нет. Попасть на такую страницу можно либо нажав на ссылку, которая ведет на удаленный материал, либо сделав ошибку в URL.
Почти всегда страница с 404 ошибкой — это полупустой экран, непонятная надпись на английском языке «Error 404. Page cannot be found», корявая вёрстка текста и никакой информации, что делать дальше.
Всё потому, что её никто не продумал, а движок сайта использовал стандартную версию.
Варианта развития ситуации два:
- Целеустремленный пользователь догадается нажать кнопку «Назад» в браузере или перейти на Главную, если найдет соответствующую ссылку на странице.
- Менее опытный (а, может, ленивый) посетитель сайта, вероятнее всего, закроет вкладку решив, что сайт неисправен или взломан. Результат: минус один потенциальный клиент.
Функции страницы 404 ошибка
В первую очередь, рассматривать страницу 404 как еще одну важную страницу вашего сайта, которая, как минимум, должна позаботиться о пользователе, а в идеале — продать ему услугу не хуже обычных страниц.
Разъяснительная функция
Объясните посетителю, что произошло, в чём суть ошибки и что теперь делать. Как правило, это текст подобного содержания: «К сожалению, запрашиваемая страница не найдена. Возможно, вы перешли по ссылке, в которой была допущена ошибка, или ресурс был удален. Попробуйте перейти на главную страницу или каталог (список афиш, расписание поездов, популярные товары)». И обязательно сделайте ссылки на соответствующие страницы. Так человек не закроет страницу, потому что ему показали, куда перейти дальше.
Объяснение и подсказка для посетителя
Посетителю предлагается перейти на основной раздел сайта
Не только объяснение и подсказка, но и телефон для связи
Необычное оформление 404 страницы в сочетании с подсказками располагает пользователя к сайту
Продающая функция
Усложняем задание. Теперь пусть страница ещё и продаёт. Разместите на ней ссылки на продвигаемые категории или товары из вашего каталога, блок горячих предложений или просто свежих статей. Так ошибка превратится в витрину сайта. Предложите человеку задать вам вопрос или заказать обратный звонок. Вдруг он долго искал, а ошибка прервала этот процесс и теперь расстроен, но всё ещё нуждается в вашем товаре.
Сеть магазинов Lego предлагает популярные серии товаров
«Лабиринт» на 404 странице продает бестселлеры
«Аквалого» даёт возможность посмотреть хиты продаж
Развлекательная функция
Не забываем о чувстве юмора. 404 страница — это страница, на которой можно творить то, чего нельзя делать на основных. Развлеките пользователя, скрасьте его разочарование: шутите, размещайте интерактивные головоломки и забавные анимации.
Важные моменты
Title, тем не менее, лучше прописать без креатива: 404 — страница не найдена.
Любая удаленная страница на сайте или несуществующий URL должны отдавать код ответа сервера 404 (Not found) и использовать шаблон, заданный для 404 страницы.
Узнать, какой код ответа сервера отдает любая страница можно с помощью онлайн-сервиса bertal.ru или в Яндекс Вебмастере в разделе Инструменты — Проверка ответа сервера.
Исправьте и настройте отслеживание 404 ошибкок
А теперь о серьезном: часто страница 404 — это действительно ошибка на сайте и ваша недоработка. На крупных сайтах порой появляются «битые» ссылки, ведущие в никуда. От них нужно избавляться и не допускать их появления.
Отлавливать URL, отдающие 404 ошибку, можно с помощью отчетов в Яндекс Метрике, настроив цель на сбор 404 ошибок, и отчетов в Google Analytics, настроив отслеживание через Google Tag Manager. В Яндекс Вебмастере выявить 404 ошибки можно перейдя в раздел Индексирование — Статистика обхода и нажав в правом верхнем углу История обхода.
Расположение 404 ошибок в Яндекс Вебмастере
Далее в фильтре столбца Стало надо выбрать HTTP-код 404 (Not found) и нажать Применить.
Выборка страниц в Яндекс Вебмастерес кодом ответа 404 (Not found)
Полученный список можно выгрузить в формате CSV и XLS при помощи кнопок в правом нижнем углу.
В Google Search Console информация о 404 ошибках находится в разделе Сканирование — Ошибки сканирования — Не найдено. Выгрузить список страниц в формате CSV можно нажав на кнопку Загрузка.
Расположение 404 ошибок в Google Search Console
Хорошим тоном будет разместить призыв отправить отчёт об ошибке. Тогда, особенно если ошибка выдается часто, вы быстро узнаете о проблеме от самих пользователей, получив на почту URL страницы с 404 ошибкой и страницы, с которой человек перешел по «битой» ссылке.
Призыв сообщить о 404 ошибке
Еще один вариант предложения отправить отчет о 404 ошибке
Если вместо удаленной страницы на сайте есть другая похожая по смыслу и/или содержанию, то нужно на нее проставить 301 редирект, чтобы человек, обнаруживший ссылку на удаленную страницу в поиске или на стороннем сайте, попал сразу не на 404 страницу, а на информацию об услуге/товаре, который он искал.
Примеры страниц 404 в наших проектах
belcantofund.com
vertum.su
drenazh.su
chopshopsamara.ru
monahotel.ru
rielt-bg63.ru
Нужно эффективное SEO?
Обращайтесь, сделаем, как для себя
Все знают, как обидно вместо желаемой страницы получить ошибку 404. Многие разработчики наполняют Not Found страницу более полезной информацией, или, по крайней мере, пытаются повеселить несчастного заблудившегося пользователя, иногда удивляя своей креативностью.
Сегодня, ко дню вебмастера, мы подготовили подборку интересных четырестачетвертых страниц.
На этом сайте можно найти интерфейс Commodore 64.
Похоже, вам не стоило сюда заходить.
Попробуйте поймать кота 🙂
Студия дизайна делится забавными гифками про собак.
А эта страничка ушла в поход… и не вернулась.
Очень атмосферная интерактивная 404-ая страница.
Веб-страница ищет HTML своей жизни. Желательно без ошибок и вредных привычек.
Спасите несчастных леммингов!
Классический мем на сайте 9GAG.
Красивая иллюстрация броуновского движения от Hot Dot.
А этой страницы на сайте Mikandi нет, как и одежды у этой прекрасной леди.
Вам попалась страница 404? Решайте, кого уволить за такое свинство.
Синий экран смерти от Willismonds.
А эту страницу съели пациенты клиники. Очень сожалеем 🙁
Диаграмма Венна на сайте magnt.com.
Дыра в интернете на сайте CSS Tricks.
Поздравляем. Вы сломали наш сайт.
Некоторые сайты предлагают целую блок-схему действий для тех, кто попал на 404.
Здесь можно поиграть в пакмана.
Airbnb при переходе на сломанную ссылку порадует вас анимацией девочки с упавшим мороженным, а также предложит некоторые полезные ссылки.
Ниже представлен скриншот страницы 404 известного сокращателя ссылок. На нём изображена мутировавшая рыба-шар, вглядывающаяся в дно водоёма, у которой ещё и чайка над душой висит. Всё это представлено в виде анимации.
Популярный сайт обмена картинками imgur сделал страницу 404 в виде стены с картинами в академическом стиле, но только с животными, из которых готов к беседе с вами только жираф.
Всё минималистично и главное — ссылка на релевантный материал.
Сайт HatchedLondon решил сделать страницу 404 очень длинной, но до конца можно дойти всего за одну секунду. При этом страница хорошо вписывается и смотрится отлично.
Вот про экран с ошибкой от GitHub вы точно знаете, а как насчёт не менее известного Docker? Расстроенный кит смотрит на утонувший корабль, параллельно размышляя о ваших проектах.
Инструмент для проектировки интерфейсов отлично справился и с собственным. Можно поиграться с узлами на странице ошибки, но не более. Со шрифтами поиграть не получится.
Создатель блога с душой подошел к делу и сделал красивую и анимированную страницу 404, почти полностью написанную на CSS (картинки, конечно же, были в png). Он даже исходным кодом поделился. При входе на страницу меню разваливается и крутится в чёрной дыре, при этом оставаясь кликабельным.
Сайт, специализирующийся на продаже векторных иконок, не забыл и про себя, подобрав именно ту, которая гармонично сочетается с тематикой ресурса.
Интересная реализация ошибки 404 в блоге любителя иконок. Пользователь, вероятно, находится в машине, к нему приближается светящееся число 404 и в это же время пробегает ящерица по лобовому стеклу (вообще тут всё зависит от вашей фантазии).
Один из наиболее популярных сервисов общения между членами одной компании тоже вошёл в эту подборку. Ребята хорошо потрудились над созданием интересной и анимированной страницы ошибки 404 с небольшими элементами интерактивности (можно трогать кур и свинок). Также во время отсутствия активности на странице всё становится серым.
На странице 404 сайта Музея Сотворения Мира (там всё по Библии) отчётливо видно, что junior и senior не могут найти менеджера проекта. А вообще классно сделали: силуэт с отсутствующей стадией эволюции в центре отражает отношение создателей сайта к этой теории возникновения жизни. Кроме того, «that link is missing» можно перевести так: «связывающее звено отсутствует». Тут как в русском с фразой «я плачу» — либо платишь (за софт), либо плачешь (из-за багов).
Если вы думали, что новозеландцы не в восторге только от шуток про «Властелина Колец», то теперь вы знаете, что каждый раз, когда вы видите карту без Новой Зеландии, где-то в Шире плачет один хоббит. Собственно, на этом и решили акцентировать внимание новозеландцы на сайте правительства.
Самоиронией может похвастаться не только правительство Новой Зеландии. В Делавэре решили поиграть и с картой, и с названием. Хотя карта просто для красоты.
Мы тоже не исключение 🙂 Возможно, вы уже замечали, что мы, как и сайты выше, имеем собственную страницу 404.
Немало пользователей, столкнувшихся на сайте с ошибкой 404, могут покинуть сайт. Допускать этого нельзя. Владельцы как молодых, так и давно работающих веб-ресурсов должны заботиться об удержании любого посетителя. Поможет в этом грамотное оформление несуществующих страниц. В этом материале вы узнаете о том, что представляет собой ошибка 404, как ее обнаружить и оформить на пользу сайта.
Суть ошибки 404
С кодом 404 «Not Found» наверняка сталкивался каждый. Эта ошибка появляется, когда пользователь заходит на несуществующую страницу, либо неверно вводит ее адрес. Сам код свидетельствует о том, что связь с сервером установлена, но необходимая страница на нем отсутствует.
Ведущие в пустоту ссылки именуют «сломанными» или «битыми». Появление 404 ошибки может быть по следующим причинам:
- посетитель неправильно ввел адрес страницы;
- страница на сайте была перемещена или удалена. Так, URL страницы мог быть изменен, но «битая» ссылка сохранилась на сторонних ресурсах или в закладках браузера.
Даже одна «сломанная» ссылка может смутить пользователя (особенно, если это первичный посетитель), и первой его мыслью будет покинуть страницу. Владельцы сайтов обязаны позаботиться о том, чтобы этого не произошло. Ошибки 404 необходимо преобразовать на пользу веб-ресурса. Должны быть решены две основные задачи:
- формирование удобного дизайна, позволяющего удерживать посетителей;
- предоставление полезного контента, который поможет пользователю определиться с дальнейшими действиями.
Существуют различные способы найти и оформить страницы 404. Мы расскажем о самых популярных вариантах.
Способы обнаружения ошибки 404
При индексировании сайта поисковые роботы могут сообщить о наличии различных ошибок, которые веб-мастер может оперативно исправить. Достаточно просто обнаружить и проработать ошибки на небольших сайтах. Но как быть с крупными веб-ресурсами, где контент регулярно меняется и обновляется, и количество страниц 404 становится сложно контролировать? Решить проблему помогут различные сервисы.
Яндекс.Метрика
Отслеживать посещения страниц 404 можно используя «Параметры визитов» в Яндекс.Метрике. Для этого в код счетчика необходимо добавить код «params:windows.yaParams||{ }» в качестве последнего параметра:
Далее, на 404 странице в тег BODY до кода счетчика Яндекс.Метрики необходимо разместить следующий JS-скрипт:
url здесь — это адрес неработающей страницы, а url_referrer — откуда на него пришли.
После внесения данных изменений вы сможете в отчете «Параметры визитов» в Яндекс.Метрике посмотреть полную статистику по посещенным 404 страницам и информацию – с каких страниц на них попадают:
В графе «from» — будут собраны URL, с которых пользователи попали на страницы 404, а в графе «page» — адреса несуществующих страниц.
Google Analytics
Не стоит забывать и про Google Analytics. Для просмотра отчета по посещенным 404 страницам в GA необходимо в момент их полной загрузки отправить данные о посещении. Это можно сделать с помощью следующего кода:
document.referrer здесь – это URL предыдущей страницы, а document.location.pathname + document.location.search — адрес несуществующей), title – передаваемый в GA параметр, задающий название страницы (для последующей фильтрации в отчете).
document.addEventListener(‘DOMContentLoaded’, function(){}) — это аналог функции $(document).ready(function(){}) на jQuery. Если на вашем сайте вы используете JS-фреймворк jQuery – вы можете использовать данную функцию, если нет – используйте пример выше целиком.
Чтобы проверить отработку скрипта и увидеть, сколько пользователей посетили несуществующие страницы – зайдите в отчет «Поведение», «Контент сайта», «Все страницы» в Google Analytics. Фильтр настраивается по названию отсутствующей страницы (параметр title, переданный в GA):
Другие способы
Узнать о несуществующих страницах помогут также инструменты веб-мастеров – Яндекс.Вебмастер и Google Search Console. В Вебмастере нужно открыть: «Индексирование» — «Страницы в поиске» — «Исключенные страницы» и отфильтровать отчет по статусу «ошибка 404».
В Google Search Console это отчет «Покрытие» — «Исключено» — «Не найдено — 404»:
Влияет ли ошибка 404 на индексирование сайта?
Есть мнение, что обилие страниц 404 ухудшает позиции веб-ресурса в поисковой выдаче. Это не совсем так. Само по себе присутствие на сайте URL с 404 кодом ответа не принесет никакого вреда. Об этом даже свидетельствует справка Google:
Однако, существует ряд иных причин, по которым Вам стоит исправить ситуацию. Например, это сохранение ссылочного веса на сайте. Для этого необходимо настроить 301 редирект. Это может быть:
- редирект на новый адрес, если страница была перемещена;
- редирект на страницу раздела, если страница была полностью удалена.
Рекомендации по оформлению страниц с 404 ошибкой
Мы рекомендуем оформлять страницы 404. Они оказывают влияние на показатель отказов и рекламный бюджет. Например, человек, который перешел на сайт с рекламного объявления и увидел ошибку 404, просто покинет ресурс. В связи с этим страницы нужно грамотно оформлять. Стандартно 404 страница может выглядят так:
Смотрится не очень дружелюбно, из-за чего большинство пользователей попросту покидают веб-ресурс. Чтобы удержать их, необходимо соблюдать несколько простых правил в оформлении подобных страниц. SEO-специалистами был разработан перечень рекомендаций по оформлению 404 страницы. Вот некоторые из них:
- 1. Любезность с посетителями и объяснение ситуации. Человек оказался на «сломанной» странице не по своей вине. Необходимо обозначить свое сожаление и оказать ему помощь.
С этим отлично справляется сервис MailChimp. Надпись гласит: «Мы потеряли эту страницу. Мы посмотрели везде, но так и не смогли обнаружить то, что вы хотите. Давайте мы поищем для вас место получше».
- 2. Отсутствие необходимости в объяснении технических деталей. Сама «ошибка 404» уже понятна большинству посетителей. В связи с этим нет нужды доносить им какую-то сложную техническую информацию. Достаточно кратко обозначить суть сложившейся ситуации. Вот как это сделали на сайте компании «СТАЙЕР»:
- 3. Предложите проверить адрес ссылки. Если пользователи прописывали адрес самостоятельно, то вполне могли где-то сделать ошибку.
- 4. Дизайн страницы 404 в едином для сайта стиле. Очень важно, чтобы «поломанная» страница была выдержана в стиле дизайна бренда. Благодаря этому пользователи не будут введены в заблуждение. Напротив, они лояльно отнесутся к произошедшему, после чего продолжат взаимодействие с веб-ресурсом.
Отличный пример – сайт анимационной студии Pixar. На странице изображен герой мультфильма, известный поклонникам творчества студии. Надпись гласит: «Не плачь. Это всего лишь ошибка 404! То, что ты ищешь, могло попасть в долгосрочную память».
- 5. Отсутствие спама. Посетители должны четко понимать, что случилось. Несуществующую страницу не следует наполнять множеством ссылок или рекламных баннеров. Достаточно будет небольшого блока с объяснением ситуации, выдержанного в общей стилистике сайта. Многие интернет-магазины все еще ведут споры о том, стоит ли размещать популярные товары на страницу 404. Если сайт изначально хорошо структурирован, то карта товаров или блок рекомендаций может смотреться вполне органично. Например, как на сайте ЭЛЬДОРАДО.ру:
- 6. Юмор точно не будет лишним. На многих ресурсах именно 404 страница становится основной платформой для выражения дизайнерами своих юмористических и креативных идей. Подобный прием имеет целый ряд преимуществ. Так, пользователей не смутит отсутствие ожидаемого контента, а забавный или изобретательный блок поможет сориентироваться по дальнейшим действиям. Чем креативнее будет оформлена страница, тем больше пользователей получится удержать от закрытия вкладки. Вот несколько примеров креативного оформления ошибки:
На сайте компании по разработке игр Blizzard в шутку винят пользователя в том, что страница «поломалась». Свидетельствует об этом накрененный «хидер» навигации и разбитый экран:
На сервисе по созданию дизайнов Crello сообщают, что страницу украли голуби:
Мы на нашем сайте отправляем на поиск несуществующей страницы космокотодесант, который, стоит сказать, неплохо справляется со своей задачей!
- 7. Добавьте поисковую строку. Если сайт достаточно большой, то с помощью поиска посетители могут найти желаемое. Так они с еще меньшей вероятностью покинут сайт.
- 8. Страница 404 должна быть полезной. Зачастую креатива недостаточно. Заботиться нужно и о пользовательском удобстве. Оптимальный вариант – дать ссылки на совпадения по запросу. Также на странице можно разместить ссылки на актуальный или популярный контент.
Авиакомпания Emirates отлично справилась с этой задачей, разместив на странице 4 самые популярные кнопки: поиск рейсов, управление бронью, главную страницу и вход в аккаунт.
Мы на нашей 404 странице показываем ссылки на основные разделы сайта:
- 9. Разместите на странице форму отчета об ошибке. У пользователя должна быть возможность связаться с представителями сайта, если он того пожелает. Так владельцы смогут узнать о недочетах внутри веб-ресурса, а посетители оценят заботу и удобство.
Как не стоит оформлять страницу 404
В погоне за конверсией веб-мастера размещают на страницу с ошибкой множество рекламных блоков. Владельцам сайтов, которые следят за репутацией и лояльностью пользователей, так делать точно не стоит. Пользователи плохо реагируют, когда вместо информации, которую они искали, вы показываете им блок c рекламой или собственными акциями. Это не похоже на заботу о клиентах. Скорее, выглядит как откровенное использование.
Вместо рекламы стоит сделать простой навигатор по сайту. Так пользователям будет удобнее ориентироваться, какие действия выполнять далее.
Следующий момент – пустое содержание страницы. Цифры «404» и кнопки возврата на главную недостаточно, чтобы удержать пользователей. Содержание должно быть полезным.
Подытожим всё вышесказанное. Грамотно оформленная страница 404 должна быть:
- без лишней графики;
- содержать ссылку на главную страницу, либо показывать навигационное меню;
- иметь форму поиска;
- быть в одном стиле с веб-ресурсом;
- формировать у посетителя четкое понимание, что он попал на несуществующую страницу;
- содержать креативные элементы.
Используемые источники:
- https://liderpoiska.ru/blog/stranitsa-404-nie-oshibka-a-pomoshchnik/
- https://tproger.ru/devnull/best-404-notfound-pages/
- https://promo.altera-media.com/information/expert/404pages/
404 PNG, векторы, PSD и пнг для бесплатной загрузки
web 404 ошибка грустный смайлик компьютер
2500*2500
Солнце 404 стр
2000*2000
ошибка 404 не найден эффект сбоя
2000*2000
Симпатичная ручная роспись в стиле 2 5d веб страница 404 сцена с рекламными элементами
2000*2000
Ошибка 404 не найдена эффект сбоя веб страницы в Интернете
1200*1200
ошибка 404 не найден неоновый эффект
2000*2000
404 не найден или концепция плоской линии ошибки страницы
1200*1200
треугольник ошибка 404 глюк границы прозрачный дизайн
1200*1200
404 не нашли посадку шаблон страницы
5208*5208
Ошибка 404 или не найден значок кнопки на сером фоне
1200*1200
красочный неоновый глюк 404 текст
1200*1200
Элемент дизайна иллюстрации слова искусства 404
2000*2000
осьминог с 404 ошибки иллюстрации вектор на белом фоне
1200*1200
Мультяшный рисованной бизнес 404 компьютерная иллюстрация
1200*1200
404 строитель ремонт вектор
2000*2000
лошадь с ошибкой 404 иллюстрации вектор на белом фоне
1200*1200
веб страница 404 дизайн интерфейса веб дизайн интерфейс потерял мультфильм изображение
2000*2000
ошибок 404 страницы экрана браузера с плоским стиль концепции вектор иллюстрация
1200*1200
memphis style 2 5d веб страница 404 рекламных элементов сцены
2000*2000
веб страницы ошибок 404
2530*3093
Мультяшный рисованной ошибки компьютер 404 иллюстрации
1200*1200
Нарисованный рукой элемент дизайна характера сцены слова искусства 404
2000*2000
ошибка страницы 404
1200*268
прямоугольник ошибка 404 глюк границы вектор прозрачный дизайн
1200*1200
404 ошибка иллюстрации вектор на белом фоне
1200*1200
Отчет об ошибке стиля электронного тонального сигнала
1200*1200
Космическая космическая ракета 404 ошибка
1200*1200
2 5d сцена 404 материал страницы темы
2000*2000
ошибка треугольника 404 глюк границы дизайна
1200*1200
2 5d creative 3d stereo 404 art font
2000*2000
Рамка для обратного отсчета до 2021 года
1200*1200
404 ошибка интерфейса дизайн темы
2000*2000
игра поверх текста с эффектом сбоя с многоугольником
5000*5000
вектор иллюстрации ошибки 404 сыча на белой предпосылке
1200*1200
связи ошибка интернет интернет » потерял
5556*5556
Элементы дизайна рождественские конфеты
4167*4167
страница ошибки socket 404 для настольных и мобильных
1200*1200
Мультфильм мило без ссылки 404 ошибка декоративный элемент
2000*2000
Монументная долина в стиле 2 5d web page 404 Сцена Коммерческие элементы
2000*2000
Пожарная безопасность беречь слово искусство жизни
2000*2000
119 пожарной безопасности креативное слово искусства
2000*2000
Нарисованный рукой элемент дизайна характера сцены слова искусства 404
2000*2000
Рождественские конфеты мультфильма милые рисованной декоративные элементы
2000*2000
цветной неоновый диалог
1200*1200
tech border blue futuristic Геометрическая рамка с круглой рамкой
2000*2000
404
1200*1200
2 5d red urban carnival Потребление
2000*2000
страница не найдена ошибка 404 концепция с людьми пытающимися исправить ошибку на странице сайта рядом с большим символом 404 можно использовать для веб баннера инфографика целевая страница шаблон сайта плоский векторные иллюстрации
4375*4375
фиолетовый стерео 404 страница потеря космических творческих элементов
1200*1200
404 ошибка страница не найдена концепция иллюстрации плоский дизайн с людьми этот дизайн может быть использован для веб сайтов целевых страниц пользовательского интерфейса мобильных приложений плакаты баннер
1200*1200
ошибка страницы
500*500
ошибок 404 иллюстрациисовременные квартиры концепции веб дизайна веб сайтов и мобильных websitevector иллюстрация
2000*2000
Веб страница 404 ошибки дизайна текста интерфейса
2000*2000
Космическая планета астронавт 404 ошибка страницы
1200*1200
404 fault page default page spring
3000*3000
рисованной мультфильм почесывая голову показывая желтый робот с кодом ошибки 404
2000*2000
404 мультфильм милый хомяк страницы с ошибкой Интернет доступен для коммерческого использования
2000*2000
ошибка страницы 404
1200*1200
404 ошибка интерфейса искусство слова дизайн
2000*2000
Ошибка 404 Страница Не Найдена
1307*1200
404 ошибка интерфейса фигура ветра
2000*2000
Веб страница Возврат 404 Ошибка ошибки кода ошибки 404
1200*1200
ошибка страницы 404
1200*1200
Мультяшный рисованной компьютерной ошибки 404 иллюстрации
1200*1200
неон ошибки 404
1200*1200
Нарисованная рукой иллюстрация ошибки шаржа дела 404
1200*1200
глюк текстовый эффект 404
1200*1200
404 ошибка интерфейса сцены художественного слова
2000*2000
cool fault wind 404 страница отсутствует страница ошибки
1200*1200
страница не найдена ошибка 404 Концепция целевой страницы
1200*1200
ошибка веб страницы 404 иллюстрации 404 иллюстрации для веб приложений и приложений
1201*1201
ошибок 404
1200*1200
2 5dai веб страница отключить 404 страницы коммерческого элемента
2000*2000
страница не найдена 404 сообщение об ошибке
800*800
интерфейс по умолчанию стр 404 страница потери еще
2000*2000
25d стерео 404 страница отсутствует
1201*1201
Творческая веб страница отсутствует ошибка неисправностей 404
1200*1200
элемент потери страницы
1200*1200
ошибка 404 не найден эффект сбоя
2000*2000
синий циан 404 ошибка дизайн страницы
1200*1200
Мультяшный рисованной бизнес 404 ошибка иллюстрации
1200*1200
Ошибка неисправности сети 404
1200*1200
404 page error page 404 error page material download 404 page template
1024*1369
404 голубой стереоскопические страницы
1201*1201
404 cartoon primitive
1200*1200
Мультяшный рисованной 404 ошибка бизнес иллюстрация
1200*1200
Иллюстрация концепции страницы ошибки 404 в Интернете
1200*1200
Ошибка ошибки потери данных программы 404
1200*1200
ошибок 404 страницы экрана браузера значок компьютер с плоским стиле c
4000*4000
Ручной обращается бизнес компьютер 404 ошибка иллюстрации
1200*1200
Как создать страницу ошибки 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 на сайте ᐉ WEBMAESTRO
Появление страницы 404 означает, что сайт не смог найти запрошенную страницу, поскольку она не существует. Эта ошибка создает много проблем при оптимизации сайта. В этой статье мы хотим рассказать какими способами можно их находить и устранять.
Чем вредны страницы 404 для сайта?
Страницы с кодом ответа сервера 404 есть на любом сайте, чтобы на них попасть нужно ввести в адресную строку браузера несуществующий адрес страницы.
Если ошибка 404 возникает из-за удаления страницы или «битой» ссылке на сайте, это плохо сказывается на продвижении.
А все потому, что:
- Потерпают поведенческие факторы
Пользователям не нравятся сайты с неработающими страницами. Они быстро покидают такие сайты и редко возвращаются. - «Сливается» впустую краулинговый бюджет
Любой сайт имеет ограниченный краулинговый бюджет и поисковые роботы не могут проиндексировать много страниц сразу. И если при сканировании сайта возникает много 404 страниц – низкая вероятность того, что роботы доберутся до новых или обновленных страниц. - Утрачивается ссылочный вес
При удалении страницы все ссылки, которые ведут на нее или с нее уходят в никуда.
Ссылки ведущие на страницы 404 носят название «битые» и плохо влияют на раскрутку сайта. Таким образом, при удалении страниц, удаляйте или заменяйте ссылки ведущие на них.
Как появляются страницы 404?
Причин возникновения 404 ошибок несколько:
- Неправильное написание УРЛа.
- Удаление страницы.
- Страница переведена на новый адрес, а редирект не настроен.
В независимости от причины возникновения страниц 404 их обязательно нужно исправлять.
Как обнаружить страницы 404?
Существует много способов проверить сайт на наличие страниц 404, но мы рекомендуем использовать сразу все описанные ниже.
Поиск ошибок в Google Search Console
- Зайдите в панель для вебмастеров Google и перейдите на вкладку «Покрытие».
- Если кликните по вкладке «Ошибка» – Вам откроется список страниц с ошибкой 404.
Поиск ошибок в Google Analytics
Узнать сколько пользователей столкнулось с ошибкой на сайте можно в сводке по страницам.
- Нажмите на пункт меню Поведение/Контент сайта/Все страницы.
- Отсортируйте страницы по названию «Страница не найдена» или «404» в зависимости от того, как она называется на Вашем сайте.
- Нажмите «Название страницы» и с помощью кнопки «Еще» воспользуйтесь поиском по запросу «404» (или «Страница не найдена»):
- GA отфильтрует все страницы по заданному заголовку и покажет отчет по количеству сеансов, получивших код ответа 404:
- Нажмите по названию страницы и получите список УРЛов с ошибкой 404, который нужно будет проработать:
Анализ сайта программой ScreamingFrog
- Пропишите адрес сайта и нажмите кнопку «Start».
- После завершения процесса сканирования перейдите во вкладку «Response Codes» — там Вы увидите список всех страниц с кодом 404.
Поиск ошибок с помощью расширения Check My Links
- Установите в Google Chrome специальное расширение Check My Links.
- Введите в поисковую строку Google адрес сайта с оператором «site:»
и увидите все проиндексированные страницы Вашего сайта и коды их ответа:
Что делать со страницами 404?
Если Вы обнаружили страницы 404 – нужно немедленно от них избавляться.
Способы устранения ошибок 404:
- Замена неработающих ссылок на работающие.
- Удаление всех ссылок ведущих на страницы 404.
- Удаление страниц 404 из индекса поисковых систем.
О том, как удалить страницы из индекса Google узнаете в справке.
Примеры оригинального оформления страницы с 404 ошибкой:
Заключение
От страниц 404 полностью избавится невозможно, ведь их могут допускать и сами посетители сайта. Но нужно сделать все, чтобы уменьшить их негативное влияние. Также важно правильно оформить неработающую страницу:
- Написать почему посетитель здесь очутился и что ему дальше делать.
- Предложить посетить главную страницу сайта или самые популярные разделы.
- Добавить форму поиска по сайту.
- Дизайн страницы 404 должен соответствовать оформлению сайта.
- Можно оставить контактную информацию.
Проводите регулярный аудит сайта для быстрого обнаружения и устранения 404 страниц! Если нужна помощь – обращайтесь!
Собственные страницы ошибок — Документация Flask (русский перевод) 0.10.1
Flask поставляется с удобной функцией abort()
, которая
досрочно прерывает запрос с кодом ошибки HTTP. В комплекте с ней идёт
простая чёрно-белая страница ошибки с небольшим описанием, ничего особого.
В зависимости от кода ошибки, с разной степенью вероятности, пользователь может увидеть эту страницу.
Обычные коды ошибок
Чаще всего, даже если приложение работает правильно, пользователь может увидеть следующие коды ошибок:
404 Не найдено
Старое доброе сообщение «чувак, ты допустил ошибку при вводе URL». Встречается настолько часто, что даже новички в интернете знают, что означает 404: блин, тут нет того, что я искал. Неплохо поместить на этой странице что-то более полезное, хотя-бы ссылку на стартовую страницу.
- 403 Доступ запрещён
- Если на сайте есть какая-нибудь разновидность ограничения доступа, может понадобиться отправить код 403 при попытке доступа к ресурсам, доступ к которым запрещён. Позволяет не потерять пользователя, который попытался получить доступ к запрещённому ресурсу.
- 410 Удалено
- Вы знаете, что у «404 Не найдено» есть брат по имени «410 Удалено»? Мало кто делает так, что прежде существовавшие, но ныне удалённые ресурсы отвечают ошибкой 410 вместо 404. Если вы не удаляете документы из базы данных навсегда, а просто помечаете их как удалённые, можно сделать пользователю одолжение и воспользоваться кодом 410, а не отображать сообщение о том, что искомое было удалено навечно.
- 500 Внутренняя ошибка сервера
- Обычно происходит в случае ошибок в программе или при повышенной нагрузке на сервер. Ужасно хорошо было бы иметь на этот случай приятную страницу, потому что рано или поздно в приложении может случится сбой (см. также: Журналирование ошибок приложения).
Обработчики ошибок
Обработчик ошибок — это функция, похожая на функцию представления, только
она принимает возникающие ошибки. Большинство ошибок — это ошибки типа HTTPException
, но это могут быть и другие
ошибки, потому что в обработчик внутренних ошибок сервера попадают все
остальные не перехваченные экземпляры исключений.
Обработчик ошибок регистрируется при помощи декоратора errorhandler()
с кодом ошибки. Помните, что Flask не
устанавливает код ошибки за вас, поэтому удостоверьтесь, что возвращаете
в ответе код статуса HTTP.
Здесь приведён пример обработки исключения «404 Страница не найдена»:
from flask import render_template @app.errorhandler(404) def page_not_found(e): return render_template('404.html'), 404
Шаблон для этого примера может быть таким:
{% extends "layout.html" %} {% block title %}Page Not Found{% endblock %} {% block body %} <h2>Page Not Found</h2> <p>What you were looking for is just not there. <p><a href="{{ url_for('index') }}">go somewhere nice</a> {% endblock %}
Примечания переводчика
После прочтения перевода у вас может возникнуть недоумение — что за «чувак» и «клёво»? Я не стал бы добавлять в текст эти слова по собственной инициативе — я просто попытался в меру своих скудных способностей воспроизвести стиль оригинального текста. В оригинале этим словам соответствуют chap и nice.
Более подробный список кодов статуса HTTP можно увидеть здесь: Список кодов состояния HTTP.
Оригинал этой страницы
UX рекомендации по проектированию страниц ошибок — UXPUB
Страницы 404 и страницы техобслуживания. Используйте этот чеклист, прежде чем начать дизайн
Страница 404 – это нечто большее, чем вы думаете. Симпатичная иллюстрация может вызвать улыбку, но нам нужно убедиться, что мы действительно помогаем пользователю с проблемой, которую он испытывает в этот момент.
Читайте также: Курс по созданию дизайна страницы ошибки 404
Дизайн – это не только добавление пикселей и создание интерфейса. То, как построено предложение, какая информация сообщается и какие слова подобраны может иметь огромное значение для успеха задачи.
Каждая дизайн-ситуация должна учитывать основные вопросы кто, что, когда, почему и как + несколько других моментов.
- Кто вызвал проблему?
- Что случилось и почему это произошло?
- Когда это будет решено? (Это временно или постоянно?)
- Как я могу решить эту проблему? (Актуальные средства или получение помощи)
- Свяжите страницу с брендом вашей компании
- Добавить неожиданный восторг
Помните о местоимениях, которые вы используете. На кого вы ссылаетесь? Это была ошибка пользователя? Вина компании? Это также поможет вам определить, должны ли вы в качестве заголовка произносить такие слова, как «Извините» или «О-о-о!». Допустим, это страница обслуживания, тогда используйте «мы» так, как это вызвано компанией, а не пользователем.
2. Что случилось и почему это произошло?Что такое 404? Почему страницу нельзя найти? Одного кода ошибки недостаточно. Мы склонны волноваться из-за того, что не понимаем. Так что сообщите пользователю о том, что может быть причиной проблемы. Говорите просто и искренне.
3. Когда эта проблема будет решена?Страницы 404 – это постоянное состояние, а страница техобслуживания – временное. Поэтому информация, которую мы предложим, будет другой. Проинформируйте пользователя о том, когда страница будет восстановлена? Это было запланировано или неожиданно? Как я узнаю, когда она вернется онлайн? Иногда есть слишком много неизвестных, чтобы разместить эту информацию в печатном виде. Лучший способ информировать людей – связать их с вашими активными аккаунтами в социальных сетях.
4. Как я могу решить эту проблему?«Мы скоро вернемся. Проверьте… сайт или подписывайтесь на… , чтобы получать обновления»
Итак, теперь пользователи знают, что случилось и почему, но что они могут с этим поделать? Дайте им действия, которые можно совершить с помощью текста и активных ссылок. Укажите им выход или дайте что-то еще, чтобы удержать их.
«Убедитесь, что у вас правильная ссылка, или вы можете попробовать поискать что-то другое»
- Предложите новый контент
- Откройте строку поиска
- Дайте доступ к основной навигации
- Дайте ссылки на другие популярные страницы
- Дайте ссылку на главную страницу
IDEO – Предоставление пользователю действий и идей о том, куда еще пойти«Мы не смогли найти страницу, которую вы искали. Может быть, наши FAQ или Сообщество смогут помочь?»
Если пользователи полагаются на ваш сайт для получения важной и крайне важной информации, смягчите ошибку для чрезвычайных ситуаций. Так делают тур агенты, правительственные сайты и сайты сферы здравоохранения. Добавьте предварительную информацию о том, как получить информацию другим способом.
«Если вам нужна помощь со срочными вопросами, отправьте нам сообщение в… или позвоните по номеру…»
Вы также можете попросить клиента оставить фидбек.
Смягчение для чрезвычайных ситуаций – Airbnb 5035. Свяжите страницу с брендом вашей компании или ее продуктом«Если вы попали сюда с другого сайта, мы будем благодарны, если вы сообщите нам, с какого, тогда мы сможем это исправить и спасти других от попадания на эту страницу».
Это прекрасная возможность для взаимодействия с вашими пользователями. Используйте символы компании для укрепления бренда. Facebook использовал подобный символ в виде сломанного большого пальца, а сайт Etsy основан на ремесле, поэтому девушка на странице ошибки неправильно связала свой свитер, ой.
Конечно, это мило, но это также сообщает, о чем сайт, если вы зашли на него практически не имея контекста. т.е. перешли по неработающей ссылке с другого сайта.
Etsy – Ой, ее вязание 🙁6. Добавьте неожиданный восторгДобавление элемента веселья может превратить негативный опыт в восхитительный. Если вы хотите сделать дополнительное усилие, относитесь к нему, как к пасхальному яйцу. Пасхальное яйцо – это преднамеренная шутка, скрытое сообщение или секретная функция. Цифровое агентство Kickpush использует запутанную шутку с Джоном Траволтой.
TLDR? Краткие выводыКто вызвал проблему?
- Это была вина пользователя? Вина компании?
Что случилось и почему это произошло?
- Что такое 404? Почему страницу нельзя найти?
- Говорите просто и искренне
Когда это будет решено?
- Держите людей в курсе
Как я могу решить эту проблему?
- Укажите пользователям выход или сделайте что-то, чтобы их удержать
- Смягчение ошибки для чрезвычайных ситуаций
Свяжите страницу с брендом вашей компании
- Усильте бренд
- Сообщите, о чем сайт
- Взаимодействуйте со своими пользователями
Добавить неожиданный восторг
- Превратите негативный опыт в восхитительный.
Если считаете эту статью полезной, ставьте лайки! Если вы хотите пообщаться с автором, пишите ей в Twitter. Или вы можете подписаться на нее на Medium, чтобы получить больше статей о дизайне.
Как создать страницу 404 для SEO и удобства использования
Первоначально опубликовано в 2011 году. Обновлено в мае 2021 года.
404 страницы ошибок играют очень важную роль в поисковой оптимизации и удобстве использования веб-сайта. Вот ответы на наиболее часто задаваемые вопросы, которые мы получаем от клиентов о страницах 404 Not Found, о вещах, которые обычно идут не так (чтобы вы знали, как их исправить), а также советы о том, как правильно настраивать и отслеживать ошибки 404.
404 СТРАНИЦА НЕ НАЙДЕНА ОШИБКИ Часто задаваемые вопросы:
Что такое ошибка 404?
Ошибка 404 (HTTP 404), также называемая «кодом ответа заголовка» или «кодом состояния http», или просто «ошибками сканирования», является компьютерным эквивалентом слов «не найдена» или «страница не найдена».”
Пример 404 Стр.Вот определение« технического специалиста »:
« »Сервер не нашел ничего, соответствующего Request-URI. Не указывается, является ли состояние временным или постоянным. Код состояния 410 (Gone) СЛЕДУЕТ использовать, если сервер знает через некоторый внутренне настраиваемый механизм, что старый ресурс постоянно недоступен и не имеет адреса пересылки. Этот код состояния обычно используется, когда сервер не желает точно раскрывать, почему запрос был отклонен, или когда другой ответ не применим.»
— via w3.org
Другими (менее техническими) словами, этот код ответа по существу сообщает поисковым системам — и пользователям — что ресурс (или запрошенный URL), на который ссылаются, не существует или буквально не может найдено .
Это роботизированная версия пожимания плечами и пустого взгляда.
Существует много других типов ошибок ответа, и все URL-адреса возвращают те или иные коды ответов. Например, правильно функционирующая страница должна возвращать код состояния «200», что означает «Найдено.Другой серьезный тип ошибки называется «ошибкой сервера», он представлен кодами состояния HTTP 500-599. Различные типы ошибок помогают веб-мастерам диагностировать источник ошибок, чтобы исправить его надлежащим образом.
Ошибки 404, как правило, являются наиболее распространенным типом ошибок. С ними также часто неправильно обращаются люди из лучших побуждений — отсюда и цель написания этой статьи! Ошибки 404 HTTP иногда называют «ошибками клиента», где «клиент» обычно относится к веб-браузеру пользователя (Google Chrome, IE, Firefox и т. Д.))
Что такое Soft 404?
Программный 404 — это, по сути, страница, которая не возвращает код ответа 404, но Google (бот), тем не менее, считает, что на странице возникла ошибка.
Что такое 410 ошибок? 403 ошибки? А остальные 4 {xx} ошибки?
Ошибки с 400 по 499 — это различные типы клиентских ошибок. Вот некоторые другие распространенные ошибки 4xx:
- 400 (неверный запрос)
- 401 (неавторизованный)
- 403 (запрещенный) — эта ошибка обычно возникает, когда вы просматриваете сайт слишком быстро, а платформа / сервер (например.грамм. Shopify!) Откажет вам в доступе, чтобы снизить нагрузку на их веб-сервер.
- 410 (Исчезло) — каким бы ни был этот ресурс, теперь его нет — и это навсегда и намеренно.
- Найдите полный список всех 4 {xx} ошибок статуса.
В чем разница между 404 и программным 404?
Мы можем сделать это коротким и понятным — по сути, программный 404 не выдает код состояния заголовка 404; вместо этого он (возможно, неправильно) выдает код состояния 200 (Хорошо).
Правильная страница 404 правильно выдает код состояния HTTP 404 (Страница не найдена).
Пример отчета об ошибке 404 программного обеспеченияКак и когда возникают ошибки 404?
- Когда страницы были перемещены (например, отсутствующая страница, возможно, из-за того, что она была перемещена в другой раздел вашего веб-сайта) или удалены (например, несуществующая или удаленная страница была забыта и никогда не перенаправлялась)
- Когда веб-мастер, пользователь CMS или инженер-программист неправильно набирает URL-адрес на странице или в «шаблоне страницы» или допускает ошибку копирования и вставки (например.грамм. был связан неправильный URL)
- Когда на веб-страницах, в сообщениях в социальных сетях или в сообщениях электронной почты появляются неработающие или случайно обрезанные ссылки.
- Настоящие программные сообщения 404 возникают, когда страница выдает статус 200 (ОК), хотя должна выдал другую ошибку, потому что что-то пошло не так. Чаще всего веб-сайт должен был выдать ошибку 404, но этого не произошло. Обычно это признак того, что адреса 404 не работают должным образом. Иногда это работает в одних разделах вашего сайта, но не работает в других.
Насколько полезны страницы 404?
Ошибка 404 сообщает поисковым системам, посетителям веб-сайтов и веб-мастерам, что URL-адреса страниц повреждены или вообще не существовали.
Когда мы увидим, где возникают эти коды ошибок, мы сможем решить проблему для будущих посетителей веб-сайта (обычно с помощью перенаправления 301 на новое местоположение этого контента), тем самым сохраняя мощность страницы, которая когда-то существовала (. .. или неправильная ссылка на страницу, которой никогда не было.Это то, что мы называем «построением неработающих обратных ссылок».)
Если вы не выдадите код ответа 404, вы по сути не узнаете, что страница — и, следовательно, пользователь — столкнулись с ошибкой.
Итак, ДА . Страница 404 полезна. Вы не можете исправить то, о чем не знаете!
Ошибки 404 вредны для поисковой оптимизации (SEO)? Подходят ли ошибки 404 для SEO?
В Интернете есть несогласные с обсуждениями этого вопроса.Но ошибки случаются, и они легко прощаются в небольших масштабах.
- Слишком много ошибок ответа заголовка 404 — или ошибок 403, 500 или действительно любого другого типа ошибок 4 {xx} или 5 {xx} — через сайт может создать в целом высокую частоту ошибок по сравнению с показателем успеха.
- Это приводит к проблемам с доверием: если Google (или Bing и т. Д.) Видит слишком много ошибок vs.функциональные страницы, они не захотят отправлять пользователей на ваш сайт. Зачем им? Этот пользователь потеряется и рассердится, и у него будет плохой опыт. Это будет означать, что Google не справился со своей задачей — помочь пользователю быстро и легко найти ответ на свой вопрос.
- Если ваш веб-сайт активно ссылается на кучу нефункциональных страниц, это означает, что вы теряете «рейтинг страницы» (например, SEO-эффективность)… ни на что. Представьте себе сценарий, в котором ваш веб-сайт похож на кошелек с дырками в нем , из которого капают деньги.Нет, буэно!
- Тем не менее, ошибки 404 могут произойти и произойдут, несмотря ни на что. Правильно работающая страница 404 уведомит веб-мастера о том, что произошла ошибка и где она возникла. Затем мы можем исправить это с помощью перенаправления 301 (постоянного). Пользователю и поисковым системам больше никогда не придется сталкиваться с этой конкретной проблемой.
Ключевой момент: Некоторые команды считают ошибки 404 «плохими» и поэтому избегают этой неотъемлемой «плохости», просто решая не выдавать код состояния 404 на странице 404. Проблема в том, что ошибки, с которыми сталкиваются реальные пользователи, могут и будут возникать, несмотря ни на что. Давайте не будем «стрелять в мессенджера» — ошибки случаются, и коды ошибок помогают нам их идентифицировать! Выдача правильного кода состояния 404 означает, что вам будет легче найти проблемы , чтобы исправить их .
Итак … чтобы констатировать очевидное … не забывайте их исправлять! Слишком много выдающихся, нефиксированных 404 могут быть активно плохими или могут быть большими упущенными возможностями. К тому же это просто плохой пользовательский опыт.
Как должна работать страница 404? (Взаимодействие с пользователем имеет значение!)
- Шаг 1: Оставайтесь на том URL, который был вызван (например: https://www.thegray.company/i-made-this-up/) — например, НЕ перенаправляйте это на другую страницу, например /404.html. Ошибка должна загружаться в URL-адрес с ошибкой, чтобы мы могли увидеть ошибку — где она возникла — и, следовательно, исправить ее должным образом.
- Шаг 2: Сервер должен выдать 404 «ошибка статуса http».Используйте такой инструмент, как httpstatus.io, чтобы дважды проверить его работу.
- Шаг 3: Сообщение 404 — видимое посетителю веб-сайта на странице — должно четко объяснять, что произошло, и включать ресурсы, ссылки и, в идеале, возможность поиска на вашем сайте, чтобы найти то, что они искали. Подробнее о том, как сделать этот UX дружественным, ниже.
Каковы наиболее распространенные неправильные настройки для страниц 404? Каковы наиболее распространенные ошибки / ошибки установки 404?
- Перенаправление на страницу 404. Это всем больно. Пользователи теряются, поисковые системы думают, что все идет наперекосяк, когда это не так, а поскольку вы не знаете, когда это происходит, вы не можете это исправить.
- Автоматическое перенаправление на страницу, которую, как вы предполагаете, поисковые системы и пользователи хотят. Рискованное решение, которое может легко пойти не так (обычно из-за того, что они отправляются на нерелевантный контент — например, на вашу домашнюю страницу). Лучше не предполагать. Найдите проблему и устраните ее.
- Визуально обслуживает сообщение 404 на странице, но не доставляет соответствующий код ответа 404 http. Это вредит всем (по той же причине, что и пункт «перенаправление на страницу 404» выше).
- Обслуживание разных кодов состояния для разных пользовательских агентов. Например, вы отправляете Bingbot сообщение 404 (не найдено), а пользователям в браузере сообщение 200 (хорошо)? Иногда это происходит на разных устройствах, например есть 404 на мобильных устройствах (и для Googlebot-Mobile), но не на настольных браузерах.
- Регулярное отсутствие и устранение критических ошибок. Инженерные команды заняты — и им не нужно больше работы, поэтому они нередко отказываются выполнять ее.Особенно, когда они не до конца понимают ценность работы для бизнеса.
- SPA (одностраничные приложения) не могут создать правильный 404 «из коробки». Вот правильный способ это исправить.
Каковы последствия ошибок настройки 404 для SEO?
- Если на веб-сайте возникает слишком много ошибок 404, сам URL-адрес 404 может начать ранжировать (проблема, которая возникает, когда вы объединяете перенаправление на страницу 404 с URL-адресом, который не выдает правильный 404 HTTP-заголовок ответа).
- Страницы на веб-сайте, которые должны использовать по ссылке, не являются, что снижает общий потенциал ранжирования в поисковых системах. Это приводит к уменьшению трафика на веб-сайт в целом, и вам остается выяснить, что делать дальше, чтобы восстановить свой трафик.
- Пользователи видят страницу 404 вместо той страницы, которую они должны видеть, часто заставляя их уходить.
К сожалению, эти пользователи вряд ли вернутся:
- 404 страницы имеют высокий показатель отказов — i.е., процент посетителей, которые сначала заходят на эту страницу (часто через поисковую систему) и сразу же покидают сайт.
- 404 страницы имеют высокий коэффициент выхода — то есть процент посетителей, которые находят эту страницу, щелкнув ссылку где-нибудь на вашем веб-сайте, после чего они немедленно уходят.
Как сделать страницу 404 более удобной для пользователя? (Например, что такое оптимальные методы работы с 404-й страницей)?
Есть несколько вещей, которые вы можете сделать, чтобы улучшить страницу 404 вашего веб-сайта — и вероятность того, что посетители веб-сайта будут останавливаться и проверять остальную часть вашего сайта — в том числе:
- Объясните, на простом английском (или как угодно язык, на который ориентирован ваш сайт), что и произошло.Это для пользы пользователя…. потому что это важно!
- Включите ссылку на свою страницу контактов, чтобы пользователи могли попытаться решить проблему с вашей помощью.
- Включите упрощенную карту сайта в формате HTML (встроенную в тело страницы), чтобы пользователь мог найти свой собственный путь. Отслеживайте, что чаще всего ищут, и упростите поиск этих ресурсов.
- Подумайте о добавлении строки поиска в шаблон страницы 404, чтобы пользователь мог искать ресурс, если он еще не отображается в списке.
- Убедитесь, что заголовок шаблона 404 включает текст «404» или «Страница не найдена» — таким образом вы можете определить, какие страницы посещают посетители вашего сайта, и с какой частотой это происходит в Google Analytics (или в вашем аналитическом отслеживании инструмент выбора.)
- Удачи! Расширьте индивидуальность вашего бренда и установите связь со своей аудиторией. Примеры отличных реализаций этого можно найти здесь.
Как найти ошибку 404 на моем веб-сайте?
Есть несколько хороших способов сделать это. Я честно рекомендую делать их все, поскольку некоторые инструменты могут обнаруживать проблемы, которых не видят другие.
- Сканируйте ваш сайт. Существует множество действительно отличных поисковых роботов, из которых мне больше всего нравится Screaming Frog для небольших сайтов и DeepCrawl для очень крупных / корпоративных сайтов (оба часто работают во всех ситуациях, часто это зависит от личных предпочтений или соображений бюджета.Sitebulb — еще один фантастический инструмент.) Каждый из них расскажет вам, на какие ошибки кода состояния есть ссылки на вашем сайте.
- Проверьте отчет о покрытии Google Search Console (GSC — ранее известный как Google Webmaster Tools) в разделе «Исключенные»:
- Проверьте Google Analytics (GA) Найдите заголовки страниц, содержащие «не найдено» или «404» — это хороший список, который сообщает вам, сколько раз была открыта конкретная страница, и, следовательно, может лучше помочь вам расставьте приоритеты, какие ошибки нужно исправить в первую очередь.
- Проверьте файлы журнала . Это мой любимый способ проверить наличие ошибок 404 (и других проблем тоже!), Поскольку вы можете точно увидеть, кто — то есть какой бот — совершает какие ошибки, на каких конкретных страницах, как часто и общий «коэффициент ошибок» вашего сайта. .К сожалению, не каждый может получить доступ к файлам журнала, в зависимости от вашей платформы и хоста. Поговорите со своим ИТ-отделом и / или командой разработчиков, чтобы узнать, подходит ли вам этот вариант. Для этого вам понадобится инструмент анализа журналов; мой любимый — от Screaming Frog.
Как найти ошибку 404 на страницах, с которых они (предположительно) связаны?
Если у вас возникают проблемы с обнаружением ошибки 4 {xx} на странице, с которой она связана (например, из внутренних ссылок), вот некоторые вещи, которые вы можете проверить.Если вы не можете найти URL-адрес ни одним из этих методов, вероятно, проблема использовалась как , но была исправлена.
1) Периодически запускайте новый обход сайта, чтобы найти и исправить старые и новые ошибки.
Отчет Screaming Frog о типах ошибок 404- Сначала проверьте, исходит ли ссылка из inlink или редиректа . В отчете 404 Inlink Screaming Frog вы узнаете, что есть что; другие сканеры, такие как DeepCrawl и Sitebulb, могут предоставить вам аналогичные данные.
- Если ответ — «AHREF», его можно найти по прямой гиперссылке, и вы можете перейти к шагам, описанным ниже.
- Если ответ — «HTTP Redirect», источником ссылки является другой связанный URL, который затем перенаправляет на вашу неработающую страницу. Проверьте исходный URL-адрес в файле перенаправления (например, в Apache или файл Htaccess) или в центре администрирования / CMS вашего веб-сайта (например, в подключаемом модуле перенаправления WordPress). Обновите расположение перенаправления, чтобы оно больше не указывало на неработающую страницу.
2) Просмотреть исходный код по рассматриваемому URL-адресу и нажать Control + Find (C + F) для пути неработающих URL-адресов.
3) Просмотр обработанного исходного кода (сторонние плагины браузера, такие как этот плагин просмотра визуализированного исходного кода для Chrome) покажут вам исходный код ПОСЛЕ его визуализации браузером (например, после запуска Javascript и CSS). Опять же, C + F чтобы найти неработающий URL-путь.
4) Используйте Google Analytics и выполните поиск по запросу «404» или «Страница не найдена» в заголовке. После того, как вы сузили список URL-адресов, вызывающих нарушение, щелкните панель навигации, чтобы найти предыдущие страницы по этому пути.
5) Запустите URL-адрес с помощью инструмента Mobile-Friendly Tool из GSC. После запуска щелкните вкладку HTML и скопируйте + вставьте содержимое результатов в документ Word, текстовый редактор и т. Д. Снова нажмите C + F, чтобы найти неработающий URL-путь.
Pro Tip: Использование Mobile-Friendly Tool дает вам реальный код, отрисованный роботом Googlebot — ОТЛИЧНЫЙ ресурс для таких проблем QAing.Найдите HTML-код, обработанный роботом Googlebot, в Google Mobile Friendly Tool
Как мне найти 404 ошибки, которые не связаны на моем веб-сайте?
Ошибки 404 нередко возникают в URL-адресах… которые никогда не существовали на вашем сайте. Обычно это происходит по одной из следующих причин:
- Проблемы, связанные с неправильным сканированием роботом Googlebot JS, HTML или CSS. Найдите эти ошибки через GSC> в отчете «Исключенные». К счастью, по мере того, как Google улучшил свою способность эффективно сканировать JS, это происходит все реже и реже.
- Внешние ссылки на ваш сайт с неработающими путями (например, другой веб-сайт активно ссылается на нефункциональную страницу вашего веб-сайта). Вы можете обнаружить их с помощью сторонних инструментов.Мне больше всего нравится отчет о неработающих обратных ссылках в Ahrefs (платный инструмент SEO). Вы можете экспортировать эти данные в файл CVS, а затем сканировать каждый URL в режиме списка, чтобы увидеть, что сегодня активно 404.
Советы для профессионалов:
1) Иногда вы видите ошибку 404 в GSC без «источника», , и на которые вы не можете найти никаких ссылок — внутри или снаружи. В зависимости от громкости вы можете игнорировать их или просто перенаправить их в любом случае.
2) Веб-кеширование может быть препятствием для процесса контроля качества — Возможно, что конкретный URL-адрес в настоящее время не находится в состоянии 404, но был — или что это не так, но сейчас.Поэтому не забудьте очистить кеш своего веб-сайта, а также кеш браузера, если вы столкнетесь с какой-либо странностью.
3) Остерегайтесь создания «переходов перенаправления» (например, перенаправление со страницы A на страницу B, а затем на страницу C) или «циклов перенаправления» (например, перенаправление со страницы D на страницу E и затем обратно на страницу F, поэтому веб-посетитель не может получить доступ ни к одному из функциональных URL-адресов!) Большинство хороших поисковых роботов могут помочь вам идентифицировать их в действии.
4) Помните, что не каждая внешняя ссылка стоит перенаправления. Если неработающая ссылка пришла с сайта, рассылающего спам, или с действительно малоценного веб-сайта, возможно, вам лучше проигнорировать ее. Вы можете определить этот ответ для себя, опять же с помощью платных сторонних инструментов ИЛИ с помощью ручного визуального осмотра. Примеры способов быстрого определения качества: DR (рейтинг домена) и UR (показатели рейтинга URL) Ahref, DA (авторитет домена) Moz или оценка спама. Узнайте больше о проверке ошибок, чтобы определить, что вы исправляете.
Как исправить ошибки 404? Могу ли я предотвратить ошибку 404?
Существует множество способов исправить ошибку 404, в зависимости от настроек / платформы вашего сайта и возможностей / приоритетов вашей группы разработки программного обеспечения.Но самый простой ответ — это 301 редирект.
- Возможно, вы сможете реализовать это для себя в центре администрирования своего веб-сайта. Если да, то это самый простой способ сделать это! Просто выберите лучший новый URL-адрес, на который должна быть перенаправлена эта страница (в идеале, что-то очень релевантное).
- Иногда вам нужно обратиться к специалистам по программному обеспечению или ИТ-отделу. Они нередко отказываются от выполнения этой работы — полная остановка или из-за того, сколько их нужно реализовать (иногда их много).Они не всегда видят ценность, и они разбросаны, работая над другими бизнес-приоритетами. Это то, за что я рекомендую бороться в определенных пределах. Подробнее об этом ниже.
Можете ли вы их предотвратить? Нет. Они всего лишь реальность мира, и игнорирование их не поможет. Рассмотрим «технический долг» ошибки 404, который вам необходимо периодически обнаруживать / проверять / разрешать.
Хотите узнать больше о переадресации? Семруш может помочь!
Как исправить ошибки Soft 404?
Часть 1: Проверьте свой список «Soft 404» GSC, чтобы убедиться, что все обнаруженные проблемы действительно требуют устранения… потому что они не всегда.
Для этого экспортируйте URL-адреса ошибок Soft 404 из GSC и проверьте их: 1) вручную (визуально — они выглядят так, как будто у них есть контент?), 2) с помощью сканера для проверки кода состояния (для фактического кода состояния они проблема) и, возможно, 3) с помощью аудита JavaScript.
Один интересный пример использования Soft 404, который поделила замечательная Пейдж Форд: «Мы обнаружили несколько Soft 404 в действительных статьях Справочного центра и предположили, что Google не будет их индексировать, потому что в справочных статьях объясняются коды ошибок — где эти сообщения могут может быть неверно истолковано как сообщение 404.Мы сохранили коды ошибок (это не были 404 или 500), но удалили сообщение об ошибке, и Google в конечном итоге его проиндексировал ».
- Для элементов, которые были ошибками, и вы активно хотите, чтобы эти URL-адреса были проиндексированы — и вы считаете, что теперь они в порядке — отправьте их для индексирования через GSC.
- Для элементов, которые не являются приоритетными для индексации, вы можете игнорировать их. Это действительно зависит от того, сколько их — не позволяйте, чтобы их было так много, как вы Не вижу реальных проблем!
Часть 2: Поделитесь проверенным списком проблем с командой разработчиков программного обеспечения или исправьте их напрямую.В большинстве случаев это одно из следующих:
- Это недопустимая страница, к которой поисковые системы должны получать доступ или индексировать. В этом случае вы можете заблокировать страницу / путь к странице с помощью файла Robots.txt или с помощью инструмента «Удалить URL-адрес» в GSC, если вам нужно его деиндексировать.
- Это страница, которая должна была выдать ошибку 404, но не выдала. Вашей команде программного обеспечения нужно будет покопаться, чтобы понять, почему это происходит, и решить эту проблему. Как только он снова правильно выдаст ошибку 404, вы можете переходить к части 3.
- Возникла проблема со сканированием или рендерингом JavaScript, из-за которой пользователи видят видимый контент, но роботы поисковых систем не могут. . Чтобы устранить неполадки, если это происходит, вы можете использовать инструмент Inspect URL в GSC или инструменты рендеринга, такие как View Rendered Source, всплывающую подсказку Inspect Element вашего браузера или HTML-код, отображаемый с помощью Mobile-Friendly Tool.
Часть 3: Выполните шаги, описанные выше, чтобы исправить обычные ошибки 404.
Могу я просто позволить страницам продолжать 404? Google говорит, что все в порядке!
Да, они так говорят! К сожалению, Google иногда говорит вещи, которые, строго говоря, не точны. См .: Маркетологи считают, что большинство публичных заявлений Google являются ложными или вводящими в заблуждение. Вот несколько уточняющих моментов:
- Активные ссылки на 404 — это плохо — для всех. Потерянные пользователи и, следовательно, упущенная возможность получения дохода.
- Слишком большое количество сообщений 404 или других ошибок сайта может способствовать общему высокому уровню ошибок на вашем сайте, , что может вызвать чрезмерное недоверие Google к вашему сайту. Кроме того, вы действительно не хотите, чтобы робот Google тратил время на сканирование ваших 404-х вместо вашего функционального высококачественного контента, верно?
- URL-адрес ошибки может иметь значение SEO, которое вы не сможете / не получите, если не исправите их.
- Когда есть экономическое обоснование для , а не , перенаправляющего некоторые URL-адреса — рассмотрите возможность выпуска сообщения 410 «Gone» вместо этого. Варианты использования, чтобы не перенаправлять вещи: ваш сайт был взломан, и рассматриваемые URL-адреса были спамом / вредоносным ПО! Или вы приобрели домен у третьей стороны, и раньше там были страницы для другой компании — и вы не хотите, чтобы они ассоциировались с вашим новым бизнесом.) Робот Googlebot обычно распознает 410 гораздо быстрее, чем 404.
Проблема с 404, как мы ее видим, заключается в том, что робот Google, кажется, рассматривает их как «временные». Если есть активные ссылки на 404 страницы — либо на вашем сайте, либо в другом месте в Интернете — Google может и будет проверять их, чтобы увидеть, когда они будут исправлены. Они будут продолжать делать это в течение месяцев — а иногда и лет — после того, как URL-адреса перестанут работать (даже если вы их исправите), если вы их не исправите.
Вы можете проверить это самостоятельно, просмотрев файлы журнала и просмотрев количество / частоту посещений роботом Googlebot страниц с ошибкой 404.
Если / когда вам нужно «проверить», что перенаправляется, вот наш рекомендуемый процесс.
Как проверить и приоритезировать ошибки 404 и другие ошибки для исправления
Хотя мы обычно рекомендуем исправлять ошибки 404 и другие ошибки с помощью переадресации 301, бывают случаи, когда исправить их все невозможно или нецелесообразно — из-за технических ограничений, конкурирующие приоритеты бизнеса или внутренняя политика. (Иногда это просто не стоит сражаться!)
Вот как мы подходим к процессу «проверки ошибок и определения приоритетов»:
- Выявление страниц с ошибками, с которыми сталкиваются посетители веб-сайта. Используйте Google Analytics и / или файлы журнала для их идентификации. Расставьте приоритеты по частоте и, возможно, по исторически обусловленному доходу (например, перенаправляйте страницы, которые приносили вам много денег в прошлом!).
- Определите страницы ошибок, с которыми сталкиваются боты поисковых систем. Используйте файлы журнала для их выявления. их по частоте и продолжительности жизни (другими словами — робот Googlebot все еще работает через месяцы и годы после того, как он был выведен из эксплуатации? Если да, подумайте о его перенаправлении. Робот Googlebot периодически проверяет его по какой-то причине!) функциональные обратные ссылки на них.URL-адреса с большим количеством / улучшенными обратными ссылками более важны для перенаправления, поэтому вы можете извлечь выгоду из мощности этих существующих ссылок; это называется «построением неработающих обратных ссылок».
Вы также можете рассмотреть возможность использования GSC Prioritization Insights в отчете об ошибках — предположительно, они расположены в порядке приоритета.
Если URL-адреса, которые вы видите в GSC, не соответствуют ни одной из вышеперечисленных квалификаций, вы можете спокойно игнорировать их (и позволять им продолжать 404). В качестве альтернативы рассмотрите возможность использования кода состояния 410 (Gone) вместо 404.Google имеет тенденцию быстрее устранять ошибки 410 (например, деиндексируя их и прекращая сканирование).
Как мне проверить свою страницу 404, чтобы убедиться, что она работает должным образом?
Вот наш пошаговый процесс, чтобы убедиться, что ваша страница 404 работает должным образом:
1) Найдите URL-адрес 404 и проверьте его вручную.
- Это может быть так же просто, как вставить случайную строку букв после домена / домашней страницы и нажать Enter, например на https: // thegray.company / i-made-this-up
- ОБРАТИТЕ ВНИМАНИЕ, однако, что более крупные и более сложные сайты могут иметь различия в функциональности в разных разделах сайта — другими словами, страница 404 может работать в некоторых местах вашего сайта, но не в других.
- Если у вас небольшой сайт, не беспокойтесь об этом. Если у вас большой сайт, попробуйте эти шаги QA как минимум в каждом основном разделе сайта, например https://thegray.company / services / i-made-this-up И https://thegray.company / clients / i-made-this-up.На всякий случай внимательно отслеживайте GSC на предмет ошибок 404 и программных ошибок 404.
2) Убедитесь, что страница выдает правильный ответ 404. Рекомендую https://httpstatus.io/. Скопируйте + вставьте поддельный URL-адрес в поле и нажмите кнопку Проверить статус (вы можете проверить несколько URL-адресов одновременно, а также протестировать его с помощью разных пользовательских агентов):
Здесь вы вводите URL-адрес (или список URL-адресов) чтобы проверить их в httpstatus.io- Подтвердите, что он выдает код 404.(Промойте и повторите, если необходимо, для 404 в других разделах сайта)
- Не следует: перенаправлять (301 или 302) на 404 ИЛИ выдавать статус 200 (ОК).
3) Помимо этого, в первую очередь следует обратить внимание на удобство использования: если / когда пользователь попадает на страницу, успешно ли вы помогаете ему снова найти свой путь? Как ты можешь сделать это лучше? Узнайте больше об этом и лучших практиках для страниц 404. (Вы также можете узнать больше о контроле качества для SEO.)
Следует ли индексировать 404?
Определенно нет.Не индексируйте страницы с ошибками! Это все равно, что просить менее идеального пользовательского опыта!
(Этот вопрос был предоставлен Сарой Макдауэлл, которой необходимо было ответить на этот вопрос для своих клиентов. Сара является со-ведущей подкаста сообщества WTSEO — обязательно посмотрите его!)
Свяжитесь с нами, если вам нужна помощь в починке или улучшение функциональности страницы 404 на вашем веб-сайте — мы будем рады помочь!
30 креативных и умных страниц ошибок 404 | by Solodev
Большинство страниц с ошибками 404 — отстой, но страницы с ошибками компании доказывают, что в этом нет необходимости.
Уведомление об ошибке по-прежнему отображается на веб-странице, связанной с вашим брендом. Почему бы не воспользоваться возможностью и дальше продвигать свой бренд?
Мы нашли 30 уникальных страниц 404, которые выходят за рамки простого. Но прежде чем мы перейдем к списку, давайте сузим три элемента, которые отличают эти страницы от остальных. Эти три идеи можно применить даже к вашей собственной странице с ошибкой 404.
Кажется стандартной практикой для любого 404 вежливо сказать: «Извините, страница, которую вы ищете, недоступна.Попробуйте снова X, Y или Z ».
Хотя эта копия, безусловно, вежлива, она ожидаема и скучна. Скука не привлекает внимания.
Если у вашего бренда есть особый голос, выберите копию, которая продолжает этот голос. Например, если ваш бренд использует символы (как у Солодева), добавьте этот голос на страницу 404. Если ваш веб-сайт использует в основном неформальную копию, страница 404 с формальным тоном вызовет у них раздражение, а не добавит им общего впечатления.
Визуальные эффекты остаются у пользователей Интернета даже в неудобных ситуациях.Воспользуйтесь возможностью найти забавное изображение или визуальный элемент, который одновременно выражает ценность вашего бренда и добавляет больше к потенциально скучной странице.
Копия и изображение в середине белой страницы 404 — это эквивалент обслуживания клиентов, когда неискренний, без энтузиазма официант извиняется за задержку с вашей едой. В целом сообщение могло быть доставлено, но упаковка сообщения была тусклой. Отойдите от шаблонов традиционного дизайна и выберите неожиданные элементы на странице 404.Это может варьироваться от фактического макета самой страницы до геймификации страницы с ошибкой.
Эти 30 страниц ошибок выходят за рамки одной, двух или всех трех предыдущих категорий. Вот наш список, если вам нужно вдохновение:
Spotify использует простую анимацию со своим проигрывателем, добавляя как соответствующий визуальный элемент, так и уникальный элемент дизайна. Подобно звуку царапины записи, который указывает на то, что что-то не работает, анимированная запись перестает вращаться через несколько секунд. В тексте также упоминается подпись Канье Уэста «808 and Heartbreak», которая остается в тренде с некоторыми из самых громких музыкальных произведений.
Говоря об иконках, эта популярная игрушка имеет «культовую» страницу 404. Тон радостный, полезный и не разочаровывающий. Похоже, вы можете просто поговорить со своим дружелюбным сотрудником службы поддержки LEGO и решить свои проблемы! Он отлично вписывается в общую идею бренда и творческую маркетинговую стратегию компании. Традиционный веб-сайт LEGO также может похвастаться довольно забавной страницей с ошибкой 404.
Ой, ДашЭто, ты точно знаешь, как доставить удовольствие фандому «Властелин колец» .Эта страница 404 заставляет наши ботанические сердца улыбаться и смеяться над неудобствами. Он такой умный и подробный, что даже вершина горы (404) Doom достигает 404 по оси y. Он не воспринимает себя так серьезно, как Сообщество, и прекрасно сочетает текст с умным дизайном.
Конечно, в этом списке больше 404, связанных с фандомами! GitHub превращает одну из самых культовых фраз кино в умную страницу 404. А если вы понятия не имеете, кто такой Оби Ван Кеноби, или вы не фанат Star Wars ? Тогда «это не та веб-страница, которую вы ищете.”
Говоря о знаменитых строках, оставьте это в базе данных Интернет-фильмов (IMDb), чтобы получить одну из лучших возможных страниц 404. Это может быть простая настройка, но в ней есть цитата из фильма о том, что что-то теряется, пытается что-то найти или буквально говорит об Интернете. Мы не можем себе представить, сколько времени потребовалось, чтобы найти все эти варианты, но мы, безусловно, ценим творческий подход.
НАСА 404 — это именно то, что вы ожидаете от НАСА; это относительно беззаботно, если вы поклонник космического юмора, и это также очень хорошо сочетается с тоном и брендом организации.Это простое напоминание о том, что в галактике есть более серьезные проблемы, кроме потерянной веб-страницы.
Эта страница 404 от французского разработчика Ромена Брайзера — один из лучших примеров геймификации, которые мы когда-либо видели. Вот это да. Если вы задержитесь на странице слишком долго, вы рискуете принести в жертву 404 лемминга… если только вы не будете достаточно опытны, чтобы спасти их с помощью крошечных желтых парашютов.
Imgur не воспринимает себя слишком серьезно, учитывая, что это одна из постоянных столиц гиф и мемов в Интернете.Эта страница с ошибкой воспроизводит глупость Scooby Doo с блуждающими глазами животных на картинах, наблюдающих за вашим курсором. Это забавная простая анимация, которая добавляет на страницу что-то особенное.
Французская компания Videotron открыла еще одну универсальную истину: с единорогами никогда не ошибетесь. Иногда эксцентричный и нерелевантный текст срабатывает, если он помогает поднять настроение. Это один из таких случаев.
Образовательная и остроумная, эта страница 404 визуально соответствует тому, что вы ожидаете от NPR.Однако настоящий сюрприз — это если погрузиться в неожиданный юмор копии. Этот легкий шутливый тон относительно «серьезных» новостных агентств — это освежающее изменение темпа.
Конечно, 404 Amazon может быть визуально несколько прост, но Amazon делает то, что умеет лучше всего, и дает публике то, что они хотят. И они компенсируют неудобство попадания в 404-ю щенками. Действительно, очень милые щенки. Серьезно, если вы обновите 404, вы получите больше щенков. Все эти 404 щенка принадлежат сотрудникам Amazon и имеют дополнительные (и очаровательные) их дескрипторы.
Опять щенки. Это что-то, что заставляет нас улыбаться, когда страница 404 заставляет нас хмуриться. И так же, как пост щенков Amazon, Huffington Post дарит вам нового счастливого щенка с каждым обновлением.
Интернет-магазин винтажной одежды использует «винтажную» копию и поддерживает классическую и беззаботную атмосферу, отражающуюся во всем веб-сайте. Простой текстовый дизайн также побуждает читателей проверить рекомендованное платье или особый предмет дальше по странице.
Страница с ошибкой 404 австралийца не боится быть слегка политизированной.Новостное агентство умело реконструировало их ошибку 404, чтобы она звучала как цитата неуклюжего политика. Каждый раз, когда вы заходите на страницу, вам обещают новую смешную цитату.
Это одна из самых креативных групп в кино. Конечно, их страница 404 частично отражает это творчество. И имея множество персонажей на выбор, Pixar могла использовать любого персонажа, которого они хотели бы, чтобы стать лицом своего 404. Использование Sadness из Inside Out кажется идеальным сочетанием.
Umbro использует умный вид, чтобы сказать «что-то сломалось» не словами, а дизайном.
На блестящей странице ошибок Distilled используется текст и простой дизайн, чтобы рассмешить пользователей. Надменный тон письма — не то, что вы ожидаете, и именно это делает эту страницу такой эффективной. Кроме того, бонусные баллы за тонкое включение логотипа Distilled, выходящего из трубы.
Геймификация страниц 404 — это умный способ удержать людей на вашем веб-сайте. Куало не только предлагает версию Galaga (или Space Invaders, или Galaxian), но и дает скидочный код тем, кто достигает определенных пороговых значений.(И это одна из самых захватывающих и простых игр, с которыми мы сталкивались за очень долгое время.)
404 Ошибки похожи на неожиданных монстров для пользовательского опыта. MailChimp воспользовался этим чувством беспокойства со своей страницей 404, на которой изображено зомбированное воплощение их фирменного шимпанзе. Анимация катящегося тумана — приятный штрих.
Как и MailChimp, G2 Crowd включает в сообщение об ошибке фирменный знак компании. Это милый, простой и отличный способ неожиданно включить повествование и буквальный характер в ресурс веб-сайта.
Страница 404 афиши сохраняет культовый дизайн брошюр, сохраняя при этом весьма театральный тон, пронизывающий их брендинг.
Простая демонстрация того, как даже стоковые фотографии можно использовать для украшения страницы 404. Вместо того, чтобы иметь отдельное изображение позади или рядом с копией, изображение становится копией. Это доказывает, что внешний вид всего доступен — даже то, как ваши посетители видят числа.
Иногда вам кажется, что ваша просьба потерялась в водовороте 404, и это чувство именно то, что Хьюго Уэр воплотил в жизнь на этой странице.В анимации нет ничего сложного, но идея настолько проста, что заставляет посетителей хихикать, а также заставляет их сказать: «Эй, это круто».
Миньоны могут быть одними из самых «черных» персонажей последних фильмов, но они, безусловно, привлекают внимание. И не нужно много воображения, чтобы придумать историю о том, что несколько шуток миньонов в конечном итоге привели к ошибке 404.
Динозавры лишили вас шансов найти правильную веб-страницу. Это отличный визуальный ряд в сочетании с умной копией, которая отражает творческий потенциал всей франшизы.Это просто, срочно и вызывает желание уйти оттуда как можно быстрее.
Копия простая, но читается как обратная связь директора. И в некотором смысле это именно то, для чего предназначена страница 404 — направлять посетителей веб-сайта туда, где они должны быть.
Конечно, эта страница 404 выглядит забавно, если вы не один из четырех разработчиков, находящихся на «плаще» в этой британской компании. Нажав на каждое имя, вы получите более подробную информацию о разработчике и компании в целом.
Команда, создавшая чрезвычайно популярные игры Warcraft, демонстрирует впечатляющий дизайн и забавный контент, который переворачивает традиционную страницу ошибок с ног на голову. Вместо того, чтобы извиняться за проблему, группа Blizzard возложила вину на пользователя. И, учитывая, что ошибка 404 часто возникает в результате ошибки пользователя, это довольно умный вариант сценария.
Конечно у них отличная страница с ошибкой 404. Франшиза «Звездных войн» настолько детализирована и масштабна, что имеет смысл только построить империю веб-сайтов, столь же обширную, как и ее кинематографическая империя.Это отличное сочетание дизайна, изображений и текстов, которые объединяют все необходимое для создания фирменного тона и сообщений. Это определенно та страница 404, которую мы ищем.
Мы бы не стали критически смотреть на страницы 404 других компаний, не обращая этого взора на себя! Мы хотели немного развлечься с нашей страницей 404, включив в нее самого озорного члена команды Солодева — Code Monkey. Он не нарушит ваш код, но он может нести ответственность за другие нарушения … Для нас это интересный способ объединить тематический текст с визуальным элементом, который можно найти в другом месте на нашем сайте.
С какими еще замечательными страницами с ошибками 404 вы сталкивались? Оставляйте ссылки на избранное в комментариях!
Нужна помощь в отслеживании событий 404? У нас есть для этого учебник! Ознакомьтесь с нашей публикацией на , как использовать Google Analytics и Диспетчер тегов для их отслеживания и, в конечном итоге, какие уловки помогают уменьшить количество запусков ваших веб-посетителей с ошибками 404 (и горе).
Первоначально опубликовано на www.solodev.com .
40 Лучшие примеры страниц 404 — Plerdy
Каждая страница в Интернете имеет свой уникальный адрес, который ведет к ней. Если страница была удалена, перемещена или в ее URL-адресе есть ошибка, пользователи будут перенаправлены на страницу 404. Ошибка 404 означает, что серверу не удалось найти данные для запроса пользователя, поэтому сайт не может предоставить ответ.
Очень важно продумать и правильно настроить страницу 404, так как это может быть последнее, что пользователь увидит на вашем сайте. Есть несколько тактик, которые вы можете использовать для этого:
- Для интернет-магазинов дизайн страницы 404 должен быть вдохновлен их корпоративным стилем и включать предложение различных товаров.Таким образом, пользователи смогут легко вернуться на нужную страницу или проверить продукт, которого они еще не видели
- Также есть интересный вариант для любителей творческого подхода. Вы можете выбрать необычный стиль для страницы с ошибкой, основанный на шутке, провокации, мини-игре и т. Д.
- В других случаях просто используйте свой корпоративный стиль и позвольте пользователям продолжить просмотр вашего веб-ресурса со страницы ошибки.
Итак, мы закончили с теорией, и пора проверить 50 отличных дизайнов страницы 404.
Наш ТОП начинается с известной американской компании Blizzard Entertainment. Blizzard разрабатывает игры и разработала такие известные продукты, как World of Warcraft, StarCraft, Heroes of the Storm, Diablo, Overwatch. Их страница 404 выглядит как раздавленный экран, на котором отображается неработающий сайт.
Всемирно известный бренд спиртных напитков также разработал специальную страницу 404. Пользователь видит пустую дорогу и текст: «Похоже, ты заблудился, друг». Страница вдохновлена фирменным стилем.Вы можете легко вернуться на нужную страницу с помощью навигации.
Это отличный пример шутливого дизайна страницы 404, используемой на веб-сайте Tproger (проект, посвященный программированию и всему, что с этим связано). Помимо статуса ошибки, вы можете посмотреть забавное видео, которое обязательно поднимет вам настроение после неудачного поиска.
Это отличный пример того, как можно использовать корпоративный стиль для оформления страницы 404. Github взял свой логотип (octocat) и стилизовал его под «Звездные войны».
Geekbrains — известный российский портал об онлайн-обучении. Когда пользователи попадают на страницу 404, они могут посмотреть одно из 3 тематических видеороликов. Кроме того, они могут отправить сообщение об ошибке и вернуться на главную страницу.
При оформлении страницы с ошибкой компания Adidas решила придерживаться своего корпоративного стиля. Мы видим отличный пример минимализма в веб-дизайне, а также текст «Но никогда не переставай пробовать», который мотивирует нас быть настойчивыми.
Эта страница, вероятно, одна из самых известных страниц 404.Это принесло Emailcenter огромный трафик и сделало эту компанию по-настоящему популярной. Эта страница с ошибкой, оформленная в юмористическом стиле, предлагает вам уволить кого-нибудь из команды разработчиков, чтобы наказать его. Пользователь также может простить разработчиков и вернуться на сайт.
На сайте Marvel, известного американского издателя комиксов, вы можете увидеть отличный пример того, как может быть представлена ошибка 404. Есть несколько вариантов этой страницы, и каждый из них выполнен в стиле комиксов Marvel.Помимо привлекательного дизайна, Marvel также продумала удобную навигацию, чтобы продолжить работу с сайтом.
Crello — это сервис для онлайн-редактирования изображений с красивым и забавным дизайном страницы 404. Говорят, страницу украли голуби. Это, наверное, одно из самых творческих объяснений ошибки.
Для страницы 404 Sketch решил использовать свой фирменный стиль. Прекрасно показывает, как сохранить фирменный стиль и создать удобную навигацию.
Red Bull, известный производитель энергетических напитков, остается верным своему стилю. В случае возникновения ошибки пользователи попадают на страницу с впечатляющим видео и фрагментом текста с надписью «Ну, это неловко».
Итальянская дизайн-студия Cayenne разработала интересную версию страницы 404. Он создан как диалог между пользователем и модератором. Модератор предлагает несколько вариантов решения проблемы пользователя.
Служба поиска авиабилетов Aviasales решила оформить страницу 404 в своем фирменном стиле.Дополнительный крючок — это самолеты, движущиеся по странице, которые вы увидите через некоторое время.
Создавая страницу 404, LEGO, один из самых известных производителей игрушек в мире, также решил придерживаться своего корпоративного, немного шутливого, стиля.
При создании страницы 404 французская дизайн-студия Studiofables использовала свой обычный и уникальный подход. Он предлагает пользователям успокоиться, посмотреть видео о трех поросятах и посетить домашнюю страницу ресурса, когда они будут готовы.
Львовский ИТ-кластер также выбрал творческий подход. Когда действия пользователей приводят к ошибке, они видят исходную страницу 404 и кнопку возврата на главную страницу.
Для страницы 404 Pixar Animation Studios сохранила традиционный дизайн. В случае ошибки пользователи увидят персонажа Sadness, который просит их не плакать и объясняет, что это всего лишь ошибка 404
Киностудия 20th Century Fox действительно изо всех сил пыталась создать страницу 404.Пользователям случайным образом предлагается один из дизайнов с видео и уникальным фрагментом текста, относящимся к определенному фильму.
Украинская сеть кинотеатров «Планета Кино» не только придерживалась своего стиля, но и решила использовать известную фразу из Apollo 13. Кроме того, есть удобная кнопка для возврата на главную страницу.
Львовский бизнес-инкубатор Startup Depot первым в нашем списке использует мем с Винсентом Вегой (персонажем из «Криминального чтива») для дизайна 404 страниц.Эту сцену из фильма очень часто используют, чтобы показать, что что-то неясно, так что это действительно отличный выбор.
MentorMate решил использовать простой и проверенный подход — добавление кода ошибки к красивой картинке. В данном случае это чашка кофе и цифры, соответствующие цветовой гамме сайта.
Specialized продает велосипеды и сопутствующее оборудование, поэтому такой дизайн страницы 404 подходит ей как нельзя лучше.
Как мы уже упоминали, Startup Depot — не единственный сайт, который выбрал мем с Винсентом Вегой.Онлайн-платформа 9GAG также использовала эту сцену из фильма на своей странице с ошибкой. Учитывая, что на этом сайте много юмористического контента, такое решение просто идеально.
Orangecoat Web Design выбрал действительно отличительный вид для своей страницы 404. Когда пользователи попадают на страницу 404, они видят схему с пошаговыми ответами на большинство часто задаваемых вопросов.
Если вы попадете на страницу 404 креативного агентства Teehan + Lax, вы увидите несколько вариантов ошибки 404.У каждого из них разный фон и текст с надписью «Что-то пошло не так. Очень, очень, очень неправильно ».
Поклонникам творчества Говарда Филлипса Лавкрафта обязательно понравится страница 404 на Hakim.se. Это веб-сайт шведского дизайнера и разработчика Хакима Эль Хаттаба. Как только пользователи попадают на страницу с ошибкой, на них начинают смотреть десятки устрашающих глаз, и пользователям предлагают вернуться на главную страницу.
На портале CSS-tricks страница 404 создана в минималистичном тематическом дизайне.Когда пользователь попадает на эту страницу, он видит белый фон с отверстием, которое показывает код веб-страницы. Единственный недостаток такого дизайна — это то, что он не позволяет пользователям продолжать работу с сайтом.
The New Yorker — известный американский еженедельный журнал, издающийся с 1925 года. Его 404-я страница оформлена в корпоративном стиле и имеет удобную навигацию.
Dribbble — известное сообщество дизайнеров, у которого также есть отличная страница 404.В этом случае посетители видят стильный фоновый рисунок и сообщение о том, что искомого контента не существует.
Создавая страницу 404, команда Sumatosoft решила полагаться на свое воображение и чувство юмора. НЛО, крадущее корову… это лучший вариант для страницы 404, не так ли?
Команда службы электронного маркетинга Skipio создала действительно красивый дизайн для своей страницы 404. На нем изображен путник, который заблудился и не может найти то, что ищет.Тем не менее, говорят, что он может «осмотреться и обнаружить другие сокровища» этого инструмента.
Биотехнологическая компания CoolFarm нашла отличное решение для своей 404 страницы. Когда пользователи попадают на страницу с ошибкой, они могут играть в Space Invaders, абсолютно неувядающую и любимую классику. Это отличный способ удержать посетителей на сайте.
Страница 404 на сайте платформы Squarespace проста и элегантна. Вы видите затемненное фото командного центра, текст и большую кнопку для возврата на главную страницу.
Это отличный пример, который показывает, что не только крупные компании должны заботиться о дизайне своей страницы 404. Эта позиция в нашем ТОПе — портфолио разработчика Дастина Миллера. Страница соответствует стилю всего сайта и выглядит действительно привлекательно.
Этот сайт в нашем списке также решил порадовать своих пользователей оригинальной страницей 404. В случае неудачного запроса пользователя, он получает возможность поиграть в Pac-Man, оформленный в стиле сайта.
Agens также приложила усилия к креативному дизайну своей страницы 404. Посетители сайта увидят текст «Похоже, вы потерялись в космосе» и изображение космонавта на астероиде.
Вот хороший пример страницы 404, написанной Рэйчел Нэборс. Рэйчел Великая — это серия комиксов с уникальным дизайном, поэтому эта картина просто идеальна.
Дизайн официального сайта Fork CMS выполнен в морской тематике, поэтому очевидно, что компания решила придерживаться его стиля.На странице 404 пользователей встретит Нептун и надпись «Эта страница потерялась в море».
Сайт www.danielkarcher.com — одна из самых креативных позиций в нашем ТОПе. Хотя сам ресурс выполнен в довольно необычном стиле, идея его 404 страниц также свежа. На этой странице пользователи могут совершить быстрое путешествие в метро и проследить за действиями девушки-фотографа. Сама страница с ошибкой основана на Flash.
404-я страница инструмента прототипирования Figma была создана с интересным подходом и имеет отличную идею.Используя точки (как на скриншоте выше), вы можете изменить очертания «404». Такой стиль отлично подчеркивает задачу данной услуги.
Заключение
В этой статье у вас была возможность узнать о 40 отличных дизайнах страницы 404. Часть этого ТОПа строго придерживалась своего фирменного стиля и делала классические страницы ошибок. Остальные же, наоборот, не боялись рисковать, шутить и экспериментировать со своим стилем. Надеемся, эта статья была для вас полезной и интересной. Если вы все еще не создали 404-ю страницу, сделайте это как можно скорее.Вы можете выбирать различные дизайны в зависимости от типа вашего сайта, вашей аудитории и ваших личных предпочтений. А при необходимости всегда можно вдохновиться страницами в нашем ТОПе. Оставайтесь с нами! Впереди много интересного!
Как создать пользовательскую страницу 404 в WordPress
Несомненно, большинство пользователей Интернета отталкивает всем знакомое сообщение об ошибке 404 Page Not Found . Скорее всего, вас засыпали этим надоедливым сообщением хотя бы раз в этом месяце, когда вы нажимали на неработающую ссылку.
Ошибка 404 — это стандартный HTTP-ответ на запрос веб-страницы, который сервер не смог выполнить по разным причинам. По умолчанию сообщение об ошибке отображается в виде обычного текста на белом фоне. Если вы ненавидите это пошлое послание, вам не стоит заставлять посетителей вашего сайта тоже его видеть. Так почему бы не сделать его менее раздражающим с помощью специального сообщения?
В этом руководстве я проведу вас через этапы создания настраиваемого сообщения Страница не найдена , чтобы посетители вашего веб-сайта меньше раздражались, когда они нажимают пустое поле.Но сначала давайте лучше поймем, почему вы можете получить пустое место при попытке доступа к веб-странице.
Как и почему
Страница 404 не найдена Возникают ошибкиКогда вы щелкаете ссылку и получаете ошибку 404, это означает, что ваш запрос страницы на сервер был успешным, но конкретная страница, к которой вы пытались получить доступ, не была найдена сервером. Для этого есть много причин.
Например, если веб-страница, к которой была подключена ссылка, была удалена, отобразится ошибка 404.Типичный сценарий, который приводит к этому, — когда устаревшая страница, содержащая популярный контент, удаляется, но на ней было много ссылок, указывающих на нее с других веб-сайтов. Крупные новостные веб-сайты, скорее всего, являются виновниками этого, если администраторы сайтов не примут меры для предотвращения пропуска ссылок на страницы.
Ошибка страницы 404 также может возникнуть, если запрошенная страница была перемещена на новое доменное имя. Если проблема связана с сервером (сервер не работает или недоступен по какой-либо причине), вы можете получить ошибку DNS.Брандмауэры, фильтры содержимого и другие формы блокировки содержимого также могут вызывать неработающие ссылки.
Нижняя строка — неработающие ссылки — обычное дело в сети. Владельцы или администраторы веб-сайтов должны сделать это удобнее для пользователей. Помните, что пользователи Интернета обычно нетерпеливы при поиске информации на веб-сайте. Пользователь, не теряя времени, ищет другой веб-сайт, чтобы получить то, что он хочет, если все, что он нашел на вашем, было простой, раздражающей ошибкой 404.
Удобное для пользователя сообщение об ошибке
Как я уже упоминал, большинство веб-серверов настроено так, чтобы возвращать базовую страницу ошибки 404, которая отображает извинение – и краткое описание , почему вы не смогли получить доступ к запрошенной странице.В некоторых случаях вам также может быть представлена ссылка на электронную почту веб-мастера (если вам нужна дополнительная техническая поддержка) или ссылка на поисковую систему, чтобы продолжить поиск.
Хотя это сообщение об ошибке по умолчанию вежливое, оно довольно простое и обычно отталкивает большинство посетителей веб-сайтов. Вот почему серьезные веб-мастера настраивают это сообщение так, чтобы посетители, которые не попали в пробел, могли видеть более удобную (и менее раздражающую) страницу с ошибкой 404.
Все темы по умолчанию, которые поставляются с WordPress, имеют базовый шаблон страницы с ошибкой 404 с именем 404.php . Конечно, этот шаблон по умолчанию работает идеально, но, скорее всего, он не говорит то, что вы хотите сказать своим посетителям. К счастью, настроить сообщение в шаблоне очень просто. Просто откройте шаблон страницы в редакторе кода и измените текст сообщения на свой собственный. Сохраните изменения после.
Структура шаблона страницы ошибок по умолчанию, поставляемого с темой Twenty Thirteen, состоит из тегов для отображения верхнего, нижнего колонтитула и строки поиска. Вот как это выглядит в действии (просто введите поддельный адрес страницы в адресной строке браузера):
Если вы изучите код шаблона страницы 404, вы заметите заголовок страницы Not Found в теге заголовка
вместе с функцией
_e , которая фактически отображает результат на странице . Это то, что вам нужно отредактировать в первую очередь при настройке страницы 404. Затем вы можете продолжить и добавить более удобный текст в тегии
под ним. Обратите внимание, что вы можете изменить или не изменить заголовок Not Found , но, как правило, полезно добавить собственный заголовок, который не раздражает ваших посетителей, вместе с настраиваемым текстом в абзацах.
Вы также можете заметить, что заголовок появляется внутри огромного числа 404 на странице. Когда вы выполните проверку страницы с ошибкой с помощью Firebug, вы увидите, что огромный 404 вставлен псевдоэлементом (.error404 .page-title: до ). Итак, откройте шаблон 404.php и замените текст по умолчанию в тегах
,
и
на то, что вы хотите сообщить своим посетителям. Также отредактируйте вышеупомянутый псевдоэлемент по своему вкусу или удалите его (закомментируйте его в таблице стилей). Я поменял свой на этот:
Хотя здесь вы можете говорить все, что захотите, прямо здесь, но всегда лучше, чтобы это было коротко и мило. Кроме того, постарайтесь сказать или указать посетителю на то, что он, возможно, искал в первую очередь.И это почти все, что вам нужно сделать, чтобы сделать вашу страницу 404 более удобной для пользователей. Осмотрите страницу, а затем измените стили по своему усмотрению.
Кроме того, в зависимости от темы WordPress, которую вы используете, разработчик может включить поддержку пользовательских страниц 404. В нашей теме Total WordPress мы встроили настраиваемую опцию темы страницы 404, которая упрощает добавление настраиваемого перенаправления 404 или настраиваемого заголовка и содержимого страницы прямо из панели управления WordPress.
Скриншот кастомного редактора 404 страниц Всего
Модель
.htaccess Файл — это место, где происходит волшебствоПосле того, как ваш 404.php настроен, все, что остается WordPress, это отображать его, когда ситуация подходит — когда он не может найти конкретную страницу. Это процесс по умолчанию. Однако бывают случаи, когда веб-сервер может столкнуться с проблемами до того, как WordPress узнает о них, а это означает, что посетители могут не получить доступ к некоторым страницам. В этом случае вам необходимо убедиться, что веб-сервер может перенаправить их на вашу страницу 404.php, и именно здесь .входит файл htcaccess .
Файл .htcaccess находится в корневой папке вашей установки WordPress. В случае WordPress он создается автоматически, когда вы меняете структуру постоянных ссылок по умолчанию. Все, что вам нужно сделать, чтобы убедиться, что сервер найдет вашу пользовательскую страницу 404, — это добавить в файл одну строку, например:
ErrorDocument 404 /index.php?error=404
Как видите, этот URL-адрес начинается с корня (/), что означает, что для использования этого формата URL-адреса ваша установка WordPress должна находиться в корне вашего сервера.В противном случае, если WordPress установлен в подкаталоге, путь перенаправления должен быть:
ErrorDocument 404 /yourfolder/index.php?error=404
Таким образом, даже если вы измените свою тему, index.php всегда будет вызывать правильный файл 404 для вашей новой темы.
Заключение
Прочитав это краткое руководство, теперь вы можете, надеюсь, создать настраиваемую страницу 404 с настраиваемым удобным для пользователя сообщением. Вы также можете настроить файл .htcaccess , чтобы посетители вашего веб-сайта всегда перенаправлялись сервером на правильную страницу 404 в ситуациях, когда WordPress не может или когда вы меняете темы.
Если вы хотите привлечь лояльных посетителей, которые всегда будут возвращаться на ваш сайт, важно настроить страницу 404 с менее раздражающим сообщением. И, конечно же, попытка ограничить количество раз, когда посетитель даже попадает на страницу 404, тоже хорошая идея.
У вас есть какие-нибудь отличные идеи для пользовательского сообщения 404? Что вы сейчас используете на своей странице 404? Я хотел бы услышать ваши идеи в комментариях ниже!
4 секрета создания удивительной страницы 404 для вашего магазина Shopify (и 2 бренда, которые вас вдохновят)
Если вы когда-либо видели сообщение на веб-сайте, в котором говорится что-то вроде «ошибка: страница не найдена», значит, вы просмотрел 404 страницу.
Это то, с чем вы столкнетесь, когда страница на веб-сайте не существует. Возможно, вы ввели неправильный URL-адрес или ссылка перенаправила вас на адрес, который отличается от одного символа …
Это происходит с каждым сайтом. И это не конец света.
Но есть скрытая возможность, когда дело доходит до 404 страниц. И это то, чем не пользуются многие бренды электронной коммерции.
Только подумайте об этом на мгновение. Вы много работали, чтобы привлечь посетителей в свой магазин, возможно, даже заплатили много денег, чтобы это произошло.
Представьте, что клиент приходит с неработающей ссылкой или неправильным адресом. Да, они не на той странице — , но они все еще в вашем магазине! Можете ли вы сделать что-нибудь даже на странице 404, чтобы помочь покупателю получить отличные впечатления от вашего бренда?
Вообще-то можно! Вы можете создать страницу 404, которая будет привлекательной, функциональной и проактивной для продвижения посетителей по вашей воронке продаж. И если вы это сделаете, вы получите еще одно небольшое, но значительное преимущество перед конкурентами.
Чем занимается большинство сайтов DTC
Очевидно, что контент на странице 404 не является главным приоритетом для большинства брендов электронной коммерции. Тем не менее, это удивительно, когда вы начинаете ковыряться и обнаруживаете, что многие сайты делают только минимум. Вот почему мы исследовали несколько магазинов и обнаружили:
Многие магазины не делают ничего (если вообще что-либо), чтобы оживить свою страницу 404.
Allbirds — лишь один из примеров. Они включают обратную ссылку на свою домашнюю страницу, и это здорово.Но на этом все заканчивается. Здесь действительно не на что смотреть.
ОднакоChubbies поднимает все на ступеньку выше. На нем есть изображение модели, одетой в некоторые из их продуктов и несколько умных копий.
Затем есть кнопка с надписью «Получите право», которая фактически переводит вас на страницу коллекций, чтобы вы сразу видели продукты (вместо перехода на домашнюю страницу).
Haus, компания по производству напитков для взрослых, имеет несколько фирменных экземпляров для своей страницы 404.
Текст гласит: «Этот стакан наполовину пуст.Приносим свои глубочайшие извинения, но запрошенная вами страница либо была перемещена, либо не существует ». И у них также есть кнопка« Продолжить покупки », которая переводит вас на страницу их коллекций.
В общем, большинство брендов DTC либо ничего, либо почти ничего не имеют на своей странице 404. В общем, самое большее, что вы найдете, — это симпатичный фрагмент фирменной копии и кнопка, возвращающая на главную страницу или страницу коллекций. Верно, он выполняет свою работу, но на самом деле он не очень сильно улучшает качество обслуживания клиентов.
Итак, давайте поговорим о нескольких компаниях, которые сделали все возможное, когда дело дошло до их страницы 404.
Получайте наши лучшие материалы по интернет-маркетингу в свой почтовый ящик 2 раза в неделю
2 бренда, у которых есть убийца 404 страницы
1. Стрела Синди Джозеф
Эксперт по электронной торговле Эзра Файерстоун имеет отличную репутацию маркетолога, и его компания БУМ! Синди Джозеф доказывает, почему.
Даже страница 404 исключительна. Вот как это выглядит:
Он начинается со слов «Ой, ох! Эта страница отсутствует.Но раз уж ты здесь, не уходи с пустыми руками. Нажмите ниже, чтобы просмотреть пошаговое руководство по применению всех трех Boomsticks (за 10 минут или меньше) ».
Затем вы перейдете к очень ценному подробному руководству, особенно для новых посетителей.
У него не только прямая убедительная копия; он также имеет несколько ссылок на URL-адреса, такие как коллекции продуктов, блог компании и отзывы клиентов. У него даже есть вкладка для чата поддержки внизу страницы!
Это солидная страница 404 от опытного маркетолога.И насколько легко вам будет воссоздать свой бренд? Я догадываюсь довольно просто.
2. Шинестис
Страница 404 бренда одежды определенно выделяется из общей массы. Наверху обычный текст «404», но затем он говорит: «Каждый раз, когда кто-то находит эту страницу, наш айтишник получает порку … и он был ОЧЕНЬ непослушным».
Под этим текстом изображен мужчина в светоотражающих очках и кефаль … затем есть табло «ресниц», которое застряло на 69.Совершенно другой подход, но он привлекает ваше внимание, правда?
Помимо всех фирменных махинаций, Shinesty также включает кнопки, которые ссылаются на различные коллекции продуктов на их сайте, и панель поиска.
С точки зрения маркетинга, эта страница 404 действительно, действительно хорошо сделана. Правда, не нужно добавлять юмор на страницу 404 (хотя это может помочь). Но если ваша страница 404 действительно привлекает внимание посетителей, они могут решить щелкнуть по ней и посмотреть, что такое ваш бренд.
Как создать своего собственного убийцу 404 Страница
Не существует единственного правильного способа создать страницу 404, которая удерживает посетителей на вашем сайте. Но если вы только начинаете, вот 4 совета, которые должны помочь вам в вашем подходе:
1. Очевидно, вам нужно сообщить посетителю, что страница не найдена. Но не соглашайтесь на копию по умолчанию; убедитесь, что ваш текст является фирменным и интересным. В конце концов, ваша страница 404 — это еще одна точка соприкосновения, которая может продемонстрировать голос вашего бренда, и вам нужно относиться к этому так.
2. Дайте вашим посетителям визуальные подсказки. Например, визуально направьте их на другую часть сайта, например, на вашу домашнюю страницу или, возможно, на определенную коллекцию товаров.
3. Включите строку поиска. Это устранит множество трений, которые посетитель может почувствовать после того, как попал не на ту страницу.
4. Если на вашем сайте есть виджет живого чата (и, надеюсь, он у вас есть), обязательно включите его и здесь.
Вот и все: ничего сложного.Конечно, вы всегда можете добавить несколько дополнительных слоев после того, как покроете основы. Но вот в чем суть: ваша страница 404 может быть прекрасной возможностью для взаимодействия с вашими посетителями. Не тратьте его зря. Максимально используйте его потенциал, и вы увидите хорошие результаты — даже в случае сбоя трафика.
Как создать уникальную страницу с ошибкой 404 для вашего веб-сайта
Проблемы с доступом к веб-сайту могут привести к сбоям в работе пользователей, что ухудшит взаимодействие аудитории с вашим брендом.Чтобы свести к минимуму эти последствия, знание того, как создать настраиваемую страницу с ошибкой 404, поможет правильно сообщить о проблеме и удержать внимание людей , даже если есть проблема с загрузкой сайта.
Ошибка 404 может быть вызвана несколькими причинами. Многие из них несущественны, и простое обновление страницы может решить проблему. Однако эта ошибка не должна приводить к неправильному макету, который может отпугнуть пользователя.
Даже если мы говорим об ошибке, которая вредит опыту, можно создать дидактическую и восприимчивую среду для аудитории.Следовательно, создание удобной для пользователя страницы, объясняющей проблему, — это стратегия для сохранения вовлеченности.
В этом посте мы покажем, как создать лучшую страницу с ошибкой 404 в пошаговом руководстве. Среди советов мы поговорим о:
Продолжайте читать и проверьте это!
Пошаговое создание пользовательской страницы 404 Определите элементы своей страницыРуководство для начинающих по странице ошибки 404 должно учитывать основные элементы, чтобы правильно сообщить о проблеме .Прежде всего, необходимо учитывать, что недовольный пользователь наверняка найдется. Не все понимают, что может вызвать ошибку. Кроме того, это проблема, которая негативно влияет на навигацию.
Из-за этих проблем важно создать страницу с ошибкой 404, которая должна быть удобной, информативной и визуально более легкой.
Стандартные страницы, подобные той, что вы видите ниже, имеют непривлекательный дизайн и оказывают более значительное негативное воздействие, часто передавая идею о том, что происходит что-то серьезное.
Элементы, вставленные на страницу настраиваемой ошибки 404, помогут уменьшить последствия проблемы и избежать потери взаимодействия. Отметьте ниже, что важно в дизайне вашей страницы с ошибкой 404.
Дружеское или забавное сообщениеЭто зависит от тона голоса вашей компании. Некоторые бренды от природы забавны, и это часть стратегии по привлечению аудитории. В таком случае не стесняйтесь размещать забавное сообщение, в котором объясняется проблема на странице с ошибкой 404.
В большинстве случаев бренды предпочитают более нейтральный подход во время этих нестабильностей, поскольку это событие расстраивает пользователя. В тех случаях дружеское сообщение помогает свести к минимуму поломку опыта . В обоих случаях важно извиниться перед пользователем, быть честным и готовым исправить ошибку как можно скорее.
Отрывок, объясняющий проблемуКаким бы минималистичным ни был ваш дизайн, важно использовать место в макете, чтобы объяснить пользователю, что могло произойти.Это объяснение помогает создать большую близость, поскольку компания обеспокоена ситуацией, что демонстрирует уважение к пользователю, который заходит на ее сайт.
Один из лучших способов разработать это — это указать некоторые из возможных технических причин, которые могли вызвать эту ошибку на странице . Необязательно преувеличивать, избегая выставления на обозрение вашего бренда и создания негативного восприятия, демонстрируя некомпетентность.
Простые объясненияЧтобы избежать путаницы, предложите пользователю несколько советов, как поступить в этой ситуации. Часто обновления страницы достаточно для доступа к веб-сайту , поэтому вам следует это объяснить. В некоторых случаях, когда это бизнес, который предоставляет услуги, объясните аудитории, что она может обратиться в службу поддержки.
Не каждый пользователь, заходящий на ваш веб-сайт, знает, как бороться с ошибкой 404, которая может вызвать не очень положительные эмоции. Вот почему важно, чтобы ваша компания была доступна и предлагала несколько начальных инструкций , объясняя, что рассматриваемая проблема не является серьезной и будет решена в ближайшее время.
Ссылки по темеОчень важно помочь пользователю при возникновении ошибки. Может быть интересно предложить некоторые релевантные ссылки, которые помогут посетителям покидать страницу с ошибкой 404.
Укажите несколько основных ссылок на ваш веб-сайт, например:
- FAQ
- Поддержка
- Страницы категорий продуктов
- Контактная страница
Для каждой категории страниц важно изменить набор ссылок. Например, если мы говорим об электронной торговле спортивных товаров и ссылке, ведущей на обувь, на странице с ошибкой 404 должна отображаться ссылка на категорию «обувь».
Создайте свою страницуПри создании страницы с ошибкой 404 дизайн является первым важным вопросом. Насколько это сообщение об ошибке, макет должен соответствовать визуальному образу вашего бренда шаблонам . Сообщения об ошибках, предлагаемые браузерами, могут вызвать у пользователя еще худшее восприятие. В идеале предположите, что есть проблема, и поставьте свой бренд впереди нее.
Поэтому при разработке этой страницы подумайте об основных элементах, например о некоторых из упомянутых:
- Сообщение с объяснением ошибки
- Информация о возможных причинах
- Инструкции по устранению проблемы
- Контактная информация службы поддержки
- Изображения или логотип вашего бренда
- Панель поиска для перехода к другому контенту
Все, что нужно составить макет максимально просто; в конце концов, это момент, когда пользовательский опыт разочаровывает, даже если это не ваша вина. Ваш дизайн должен соответствовать тону голоса вашего бренда , но без учета того, что существует проблема.
Размещение панели поиска на этой странице важно для пользователей, чтобы попытаться найти нужный контент, даже если произошла ошибка. Часто проблема заключалась только в используемой ими ссылке доступа. Если они могут найти нужный контент или страницу через панель поиска, идеальный опыт быстро восстановится.
На странице также должны быть все основные элементы, такие как верхние и нижние колонтитулы.В большинстве случаев некоторые из этих ссылок доступны после первоначальной ошибки, что может утешить пользователей, поскольку они смогут перейти к тому, что искали.
Также помните, что вы можете создавать дизайн страниц с помощью плагинов. На платформах CMS для маркетинга, таких как WordPress, проще использовать инструменты, которые предлагают готовые шаблоны.
Выбрать и настроить серверВыбор и настройка сервера — это задачи, которые приводят к простой цели — гарантировать, что при возникновении ошибки 404 ваши пользователи будут перенаправлены на страницу, которую вы создаете .Без этого они будут отправлены на страницу по умолчанию, как мы показали здесь, и вся работа будет напрасной.
Первый шаг для этого — выбрать сервер, на котором будет размещена эта страница, что обычно делается в Apache. После этого нужно произвести простую настройку через файл .htaccess. Если на вашем сервере нет готового варианта, вы должны его создать.
Из этого файла вы можете установить пользовательские конфигурации, которые будут направлять пользовательский трафик на страницу с ошибкой 404. Файл .htaccess должен появиться в такой форме в каталоге, где был установлен WordPress:
Предположим, у вас возникли проблемы с поиском.htaccess, усовершенствованный поиск с использованием FTP, например FileZilla. Если вы его не нашли, вам нужно создать этот файл с помощью простого текстового редактора и просто назвать его .htacess.
Затем вы должны добавить «ErrorDocument 404 / 404.html» в ваш файл .htaccess, который даст имя вашей странице с ошибкой 404. Теперь он находится в каталоге вашего сайта WordPress, который необходим серверу, чтобы найти его и правильно перенаправить пользователя. Для завершения сохраните файл и загрузите его в корневой каталог сервера.
Проверьте свои настройкиТеперь, чтобы проверить, все ли работает, откройте браузер и введите адрес своего сайта, за которым следует «/», а затем любой идентификатор страницы, который не существует.Это вызовет ошибку 404, а затем вы можете проверить, работает ли перенаправление на созданную страницу.
Этот завершающий процесс вместе с тестом важен, потому что это подтверждение того, что страница действительно помечена как ошибка или несуществующая, а не только с использованием макета страницы с ошибкой 404 .
Google должен четко дать ответ, который должен быть 404, потому что он указывает на то, что адреса не существует. В противном случае поисковые системы могут ранжировать страницу.
Изучение того, как создать собственную страницу с ошибкой 404, важно для , чтобы избежать негативного восприятия вашего сайта пользователями . Нестабильность будет существовать всегда, но важно бороться с ней наилучшим образом, сообщая аудитории, которая обращается к ней, что проблема временная и будет решена. Не забывайте — процесс, показанный в этом контенте, направлен на сайты WordPress!
Вам нужны еще несколько советов, чтобы лучше понять, как управлять бизнес-блогами в WordPress? Ознакомьтесь с нашим руководством с дополнительными советами по освоению платформы CMS!
Как создать лучшие страницы 404 для ваших клиентов — Front End Development
Будь то невинная ошибка пользователя или неработающие ссылки на веб-сайте, посетители магазинов клиентов неизбежно будут время от времени попадать на страницы с ошибкой 404.Хотя просмотр страницы 404 может быть неожиданным действием, это не означает, что конечным результатом должен быть разочарованный посетитель.
Эти страницы также могут быть возможностью предоставить поддержку с помощью сообщения о бренде, а некоторые из лучших страниц с ошибками 404 сочетают юмор с хорошим UX, чтобы создать незабываемые впечатления.
Разработчики веб-сайтов должны помнить об этом при создании пользовательских тем для клиентов, и включение удобных, подходящих и хорошо продуманных страниц с ошибками 404 важно для сокращения усилий клиентов.Объединив функциональные функции, такие как четкие призывы к действию, окна поиска и навигация, с креативными и забавными изображениями, разработчики могут создавать персонализированные целевые страницы и превращать возможное негативное событие в позитивное.
В этом посте мы рассмотрим несколько примеров вдохновляющих страниц 404, а также то, как начать создавать собственные страницы 404 в Shopify, чтобы вы могли улучшить темы своего клиента и предоставить им персонализированные страницы.
Вам также могут понравиться: Microcopy: Почему крошечные слова имеют значение.
Лучшие практики для 404 страниц
Хорошая страница 404 должна указывать на произошедшую ошибку, обеспечивать четкую навигацию на более подходящую страницу и соответствовать бренду вашего клиента. Также может быть влияние на SEO, поскольку хорошо продуманная страница, загруженная полезными ссылками, снизит показатель отказов, а интересный или забавный контент может даже увеличить время, проведенное на этой странице.
Даже у службы поддержки Google есть очень полезные советы по работе со страницами 404.
«Если у вас есть доступ к вашему серверу, мы рекомендуем вам создать собственную страницу 404.Хорошая настраиваемая страница 404 поможет людям найти информацию, которую они ищут, а также предоставит другой полезный контент и побудит их к дальнейшему изучению вашего сайта ».
«Если у вас есть доступ к вашему серверу, мы рекомендуем вам создать собственную страницу 404. Хорошая настраиваемая страница 404 поможет людям найти информацию, которую они ищут, а также предоставит другой полезный контент и побудит их к дальнейшему изучению вашего сайта ».
Даже с фирменным пользовательским шаблоном 404 по-прежнему важно проверять сайт на наличие неработающих ссылок, чтобы свести к минимуму вероятность неправильного перенаправления клиентов.Такой простой инструмент, как Link Checker W3 или приложение Transportr, может позволить разработчикам быстро идентифицировать и исправлять любые события 404 в магазинах своих клиентов.
Уход от общих страниц 404 стал стандартной практикой, и это позволяет клиентам представить свой бренд в наилучшем свете, одновременно возвращая клиентов на основной сайт. Вот несколько примеров особенно хорошо продуманных страниц с ошибками 404, которые могут вдохновить вас на разработку уникальных страниц для ваших клиентов.
1.Github
Используя юмор и отсылки к поп-культуре, Github доставляет забавное сообщение, которое устраняет любую неловкость при переходе на эту страницу с ошибкой. Параметры навигации просты, чтобы избежать путаницы, с панелью поиска, ссылками на поддержку и страницей состояния.
Ударом, однако, является тонкий эффект параллакса, который заставляет изображение игриво реагировать с курсором пользователя. Эта анимация, которую легко упустить из виду, показывает, что дизайнеры GitHub очень хорошо понимают свою аудиторию, поскольку они знают, что это «пасхальное яйцо» будет восхищено сообществом разработчиков.
2. Codecademy
Школа программирования Codecademy использует образовательный подход к 404 страницам с умной ссылкой на дополнительную информацию об ошибках HTTP. Подробный нижний колонтитул также обеспечивает простой путь к содержимому сайта и ресурсам курса.
3. Бэккантри
Прекрасный пример страницы 404 в контексте электронной коммерции, бренд одежды для активного отдыха Backcountry имеет пышную целевую страницу с полноэкранным изображением и шуткой о бренде. Сообщение страницы приносит извинения и берет на себя ответственность, но в позитивном и оптимистичном ключе.
4. Dropbox
Знаменитый стиль иллюстрацийDropbox — центральный элемент этой простой страницы ошибок, где тщательно подобранные изображения снова играют ключевую роль в повышении узнаваемости бренда. Профессиональный тон дополняет эскиз, а минимальное количество ссылок дает пользователю возможность перейти в безопасное место.
5. Кейр Уитакер
У собственного офлайнового маркетолога и защитника разработчиковShopify Кейра Уитакера есть очень подробная страница ошибок, в которой описывается, что такое страница 404, как сюда мог попасть посетитель, и предлагается обучающее видео о том, как приготовить Негрони, любимый коктейль Кейра. .Множество ссылок, включая его блог и подкаст о веб-разработке, дополняют эту функциональную, но увлекательную страницу.
Настройки, которые вы можете сделать для Shopify 404 страницы
Если вы настраиваете тему для клиента, использование страницы Shopify 404 по умолчанию — это работоспособное решение, при условии, что вы работаете с одобренной темой из нашего магазина тем.
Тем не менее, стоит подумать о том, какую выгоду могут принести заказные страницы 404 вашим клиентам, поскольку продуманная и промаркированная страница с ошибкой 404 может открыть для ваших клиентов возможности для увеличения продаж.
Например, кнопка с призывом к действию может направлять клиентов к определенной коллекции, или окно поиска может позволять клиентам легко находить нужный им контент. Страница 404 — это также уникальный шанс для клиентов пообщаться со своей аудиторией, а добавление юмора подходящих изображений может повысить узнаваемость бренда. Как мы видели в приведенных выше примерах, забавная и информативная страница 404 может устранить возможную проблему и перенаправить посетителей на ценный контент.
Имея это в виду, вот несколько методов персонализации страниц 404 для ваших клиентов.
1. Загрузите альтернативный шаблон макета для 404 страниц
Очень часто страница 404 будет иметь отличный внешний вид по сравнению с другими страницами на сайте. Создание файла альтернативного макета для страниц 404 полезно, если вы хотите добиться этого уникального стиля целевой страницы. Например, вы можете удалить нижний колонтитул или создать меню другого типа.
По умолчанию файл макета theme.liquid
применяется к файлу шаблона 404.liquid
, но его можно легко изменить.Первым шагом будет создание копии файла theme.liquid
в папке макета вашей темы и переименование ее 404-layout.liquid
.
Теперь вы можете легко удалить элементы файла макета, которые вам не нужны, например верхний или нижний колонтитул, настроить h2 и настроить все, что захотите, например теги заголовков. Когда вы будете довольны этим альтернативным файлом макета, вы можете использовать теги логики Liquid, чтобы связать файл макета с файлом шаблона.
Чтобы выполнить рендеринг страницы 404 с использованием этого конкретного файла макета, нам нужно добавить тег Liquid {% layout "404-layout"%}
вверху 404.Liquid
файл шаблона. Так, например, ваш шаблон 404.liquid
может выглядеть так:
Теперь любые изменения, внесенные в файл 404-layout.liquid
, будут применены к странице 404. Посетите наш справочный центр, чтобы узнать больше о шаблонах 404.
2. Добавьте собственное фоновое изображение на 404 страницы
Один из наиболее эффективных методов идентификации бренда вашего клиента в Интернете — использование простой графики, а фоновое изображение стало стандартной функцией страницы 404.Чтобы добиться того эффекта полноэкранного изображения, который мы видели в Backcountry, мы можем использовать CSS для назначения фонового изображения, специфичного для нашей страницы 404.
Свойство background-image
позволяет размещать изображение под остальными элементами на странице. Вы даже можете использовать CSS для наложения нескольких изображений на фон, что может быть полезно при объединении логотипов с вашим фоном.
Первое, что вам нужно сделать, это загрузить желаемое изображение в Shopify в разделе «Настройки»> «Файлы», где будет сгенерирован уникальный URL-адрес, в котором хранится ваше изображение.
Затем вы должны перейти к таблице стилей темы и использовать класс открывающего контейнера или идентификатор страницы 404.liquid
в качестве селектора вместе со свойством CSS background-image
и URL-адресом в качестве значения. Это может выглядеть так:
Вам также может понравиться: Создайте привлекательный дизайн непрямоугольного заголовка.
3. Добавьте строку поиска на страницу
Панель поиска для быстрого выхода — одна из самых распространенных и эффективных функций на странице 404.Чтобы включить панель поиска на страницу 404 вашего клиента, вы можете создать HTML-форму с атрибутом действия
, установленным на / поиск
. В эту форму должен быть включен ввод текста типа с атрибутом имени
, установленным на q
. Простой пример этого показан ниже:
Чтобы установить, как это будет отображаться на вашей странице, вы можете настроить CSS, указав значения для полей, отступов и т. Д. Вот пример того, как указанная выше панель поиска отображается в моем тестовом магазине:
4.Добавьте раздел с призывом к действию.
Иногда клиент может захотеть направить клиента на определенную страницу или коллекцию, как только он попадает на страницу 404. Настраиваемая кнопка с призывом к действию — это идеальный способ направить покупателя на определенную страницу, поэтому добавление статического раздела, позволяющего это сделать, может дать клиентам возможность управлять своим магазином.
Сначала вам нужно создать новый пустой файл Liquid в папке разделов вашей темы с именем 404-call-to-action.liquid
.Затем добавьте этот код в файл:
Затем вам нужно будет включить этот новый раздел в файл шаблона 404.liquid
в том месте, где вы хотите разместить кнопку с призывом к действию. Вы захотите использовать тег темы Liquid {% section "404-call-to-action"%}
, чтобы включить этот раздел, и в моем случае мой файл шаблона 404.liquid
выглядит так:
Теперь, когда вы открываете настройщик тем и загружаете несуществующую страницу, вы увидите возможность изменить кнопку с призывом к действию.Эти изменения, которые вы вносите в настройщике тем, теперь будут применяться к любой странице с ошибкой 404.
Какая ошибка?
Это лишь некоторые из способов улучшить стандартную страницу ошибки 404 Shopify, и я рекомендую вам создавать свои страницы с учетом уникальных характеристик ваших клиентов.
Если мыслить нестандартно, вы можете создать для своих клиентов возможность превратить возможный проигрыш в выигрыш и даже стимулировать продажи с помощью страниц с ошибками 404. Ваши клиенты захотят, чтобы их бренд выделялся на каждом этапе пути к покупке, поэтому не следует упускать из виду страницы с ошибками.