Обновлено 07.09.22 для включения новой информации.
Вы потратили много времени, чтобы убедиться, что ваш веб-сайт удобен для пользователя, имеет описательную навигацию и организован таким образом, чтобы он имел смысл, но что, если кто-то сделает опечатку при вводе URL-адреса? Что делать, если другой веб-сайт ссылается на страницу, которой у вас больше нет? Что пользователь увидит на вашей странице с ошибкой 404?
Что такое страница 404?
Когда пользователи запрашивают страницу с несуществующего адреса, сервер должен возвращать код состояния HTTP 404. Поскольку коды состояния HTTP обычно невидимы для пользователей, серверы также будут отображать HTML-страницу с сообщением об ошибке.
Если это страница с ошибкой сервера по умолчанию, это будет уродливый, запутанный опыт, который наверняка оттолкнет пользователей:
Страницы ошибок сервера довольно грубы для просмотра, и, что еще хуже, они не помогают пользователям перейти на фактически предполагаемый веб-сайт. Их также очень сложно отследить с помощью веб-аналитики, поэтому мы обычно не знаем, доходят ли пользователи до нашего контента после их просмотра.
Что такое пользовательская страница 404?
Поскольку страницы ошибок сервера по умолчанию плохо воспринимаются пользователем, лучше всего создать собственную пользовательскую страницу ошибки 404, которая удобна для пользователя и объясняет, почему запрошенный контент недоступен. Пользовательские страницы 404 также должны помочь пользователям продолжить сеанс и найти подходящую замену.
Например, эта пользовательская страница ошибки 404 eFax лучше, чем страница сервера по умолчанию, потому что она объясняет ошибку и дает пользователям возможность вернуться в нужное русло.
Почему пользовательские страницы ошибок 404 ценны
Попадание на страницу 404 неудобно для ваших пользователей, но не все надежды потеряны. Хорошая пользовательская страница 404 может аккуратно сообщить новости и удержать их на сайте.
Улучшенный пользовательский опыт
Страницы ошибок по умолчанию, которые выглядят техническими, могут создать у пользователей впечатление, что что-то серьезное пошло не так, или сбить их с толку. В идеале, с пользовательской страницей ошибки 404, мы можем понизить оценку пользователя с «сломанного веб-сайта» до «незначительного неудобства», объяснив, что произошло.
Держите пользователей на своем сайте
Если пользователи зайдут в тупик на странице ошибки по умолчанию, они покинут сайт и будут искать что-то другое. Но с пользовательской страницей ошибки 404 вы можете указать пользователям четкий путь к новому месту назначения на вашем веб-сайте, удерживая их на своем сайте. Например, приведенный выше пример eFax предоставляет пользователям внутренний поиск по сайту и ссылки на общие страницы, которые могут вернуть их в воронку продаж.
Информация о том, как улучшить производительность веб-сайта
Страницы ошибок сервера по умолчанию, как правило, не содержат тегов отслеживания аналитики. Сколько пользователей видят один? Сколько выходов после приземления на одном? Мы никогда не узнаем, если не сможем провести аналитику. Возможность легко отслеживать аналитику ваших пользовательских страниц ошибок 404 может дать полезную информацию о производительности вашего сайта. Подробнее об этом ниже.
Как создать пользовательскую страницу ошибки 404
Создать ценную и удобную пользовательскую страницу 404 несложно. Следуя шагам, описанным в этом руководстве, вы можете создать страницу 404, которая поможет пользователям найти то, что они ищут, и дольше удерживать их на вашем сайте.
Шаг 1: Дизайн страницы
В начале процесса проектирования вам нужно решить, насколько забавной и креативной вы хотите сделать свою пользовательскую страницу 404. В некоторых организациях уже есть креативные или забавные элементы дизайна как часть их бренда, и страница 404 — отличный способ продемонстрировать это. В Canva есть отличный список вещей, которые вы можете сделать, чтобы ваша страница 404 креативна и интересна.
Однако не все страницы 404 должны быть креативными. Некоторые бренды более серьезны, и их страницы 404 могут просто привести пользователей туда, куда они хотят.
В любом случае, хорошая страница 404 должна иметь следующие функции:
- Четкое заявление о том, что запрошенная пользователем страница недоступна.
- Совет, который поможет вашим пользователям исправить возможную ошибку в URL
- Основные элементы навигации в верхнем и нижнем колонтитулах
- Ссылки на важные разделы сайта
- Панель поиска для внутренней функции поиска веб-сайта
По крайней мере, ваши страницы 404 должны сообщать пользователю о проблеме с его запросом. Для этого нам даже не нужно использовать термин «404». Людям, не занимающимся цифровым маркетингом, не нужно знать коды состояния ответа HTTP.
Шаг 2: Настройте сервер
В настоящее время большинство систем управления контентом имеют встроенную функцию для страниц с ошибкой 404, но не всегда. Если ваша инфраструктура не поддерживает их из коробки, вам потребуется, чтобы ваш разработчик настроил сервер для этого. Вот технические инструкции для распространенных веб-серверов, если вам нужно сделать это самостоятельно:
Если вам нужно настроить свой веб-сервер для отображения пользовательского содержимого страницы ошибок, простой способ создать HTML для страницы ошибки — это скопировать исходный код обычной страницы веб-сайта. Измените раздел основного контента, чтобы показать сообщение об ошибке, и ваша страница с ошибкой 404 будет хорошо соответствовать остальной части сайта.
Если ваш веб-сайт разработан как приложение с такими фреймворками, как ReactJS, Angular или Ruby on Rails, вам понадобится маршрутизирующая часть приложения. Эти подходы выглядят как создание универсальный маршрут, который отправляет пользователей на компонент страницы 404.
Проводя исследование для этого поста, я нашел эту новую идею для рекомендуя наиболее вероятное исправление несуществующего URL. Если ваша инфраструктура поддерживает такую функцию, обязательно добавьте ее на страницу с ошибкой.
Шаг 3. Проверьте свою конфигурацию
Как бы ни была настроена ваша инфраструктура, есть несколько рекомендаций, которые мы должны использовать для правильной страницы ошибки 404.
Подтвердите код ответа HTTP 404
Отображение сообщения об отсутствующем содержании и возврат кода состояния 200 (обычный ответ для работающей веб-страницы) запутает сканеры, и вы получить программные ошибки 404 в поисковых консолях. Поисковые системы будут рассматривать программные ошибки 404 как обычные и будут учитываться при ранжировании.
Проверьте, какой код состояния вы возвращаете с помощью сканера, например КричатьЛягушкаили Проверка кода состояния HTTP введя фиктивный URL-адрес, например «www.yourbrand.com/asdf».
Дайте странице ошибки описательный тег заголовка
Заголовки страниц видны на вкладках браузера и доступны пользователям, использующим вспомогательные технологии, такие как программы чтения с экрана. Мы хотим убедиться, что наше сообщение об ошибке доступно и понятно всем. Предоставление страницы с ошибкой уникальный и описательный тег заголовка также поможет нам с веб-аналитикой в будущем.
Поместите веб-аналитику на страницу ошибок
Мы хотим увидеть, как часто пользователи сталкиваются со страницей 404 и куда они переходят после перехода на нее, поэтому убедитесь, что на странице установлен тот же контейнер веб-аналитики или управления тегами, что и на остальной части сайта.
Шаг 4. Отслеживайте сеансы 404 в Google Analytics
Как это ни парадоксально, мы не хотим, чтобы пользователи попадали на наши страницы с ошибкой 404, но мы хотим отслеживать этот трафик, когда они это делают. Мы хотим знать, насколько хорошо наша страница ошибок восстанавливает сеанс пользователя и направляет его к полезному контенту.
Мы также хотим знать, какие URL-адреса не работают, чтобы мы могли исправить что-то, что изменилось на нашем веб-сайте, или перенаправить URL-адрес 404 на что-то релевантное. К счастью, если мы будем следовать передовым методам, легко увидеть, как обстоят дела у наших потерянных пользователей в Google Analytics.
Посмотрите, какие URL-адреса возвращают 404
Создайте сегмент, чтобы показывать только те страницы, которые используют тег заголовка вашей пользовательской страницы 404:
Затем перейдите в раздел «Поведение» > «Контент сайта» > «Все страницы», чтобы просмотреть отчет о просмотрах страниц с ошибкой 404:
Здесь мы видим, что пользователи все еще переходят к некоторым сообщениям, которые мы удалили в рамках проекта по очистке контента. Нам нужно будет создать для них перенаправления, чтобы решить проблему, но как работает наша страница 404 после того, как люди увидят ее?
Чтобы ответить на этот вопрос, нам нужно взглянуть на сводный отчет навигации для одной из этих страниц:
Только 26% пользователей покидают сайт, увидев сообщение об ошибке 404 на этой странице. Не здорово, не ужасно.
Посмотрите, какие страницы отправляют трафик
Если мы хотим увидеть, какие другие домены отправляют пользователей на наши страницы 404, мы можем добавить Full Referrer в качестве дополнительного параметра в отчет о просмотрах страниц:
Отчеты о неработающих обратных ссылках должны дать нам большую часть этих страниц с течением времени, но службы отчетов об обратных ссылках ограничены тем, насколько быстро они могут сканировать сеть. Если у нас есть срочная потребность узнать, какие другие страницы отправляют пользователей, которые рискуют покинуть наш сайт, этот отчет дает нам это.
Распространенные ошибки, которых следует избегать с пользовательскими страницами 404
Проводим технический SEO-аудит для многих сайтов в Portent, и вот некоторые из наиболее распространенных проблем, с которыми мы сталкиваемся при составлении рекомендаций для наших клиентов.
Не перенаправлять на URL-адрес страницы с ошибкой
Убедитесь, что ваш веб-сайт просто отображает содержимое страницы с ошибкой, а не перенаправляет пользователя на URL-адрес, например /404 или /error.html. Перенаправление не позволит пользователям изучить проблемный URL-адрес и не отправит полезную информацию в вашу веб-аналитику.
Не перенаправлять на главную страницу
Отправка всех пользователей на домашнюю страницу вместо того, чтобы показывать им ошибку, может показаться умным решением, но поисковые системы не оценят и будет рассматривать экземпляры как мягкие 404s. Перенаправление пользователей на домашнюю страницу для отдельных URL-адресов, когда домашняя страница является следующей наиболее релевантной страницей, совершенно нормально, но полное перенаправление на домашнюю страницу — нет.
Не используйте перенаправление тега Meta Refresh
Я видел, как некоторые веб-сайты используют метатег обновления, чтобы отправлять пользователей в другое место после того, как они находятся на странице с сообщением об ошибке в течение нескольких секунд. Не делай этого. Уход пользователя со страницы без его согласия обычно является плохой практикой. Я редко видел, чтобы кто-нибудь использовал этот тип перенаправления Что ж.
Примеры креативных пользовательских страниц 404
Вот несколько примеров пользовательских страниц 404, которые, как мне кажется, неплохо справляются со своей задачей, добавляя что-то дополнительное к негативному опыту. Рассматривайте их как небольшой файл для вдохновения ваших дизайнеров.
Дрибббл
Dribbble многое делает правильно с помощью этой пользовательской страницы с ошибкой 404. Он красочный, интерактивный, ясно указывает на недоступный контент и предоставляет панель поиска для внутреннего поиска. Ползунок изменяет цвет «404», меняя изображения, из которых состоят числа, чтобы они соответствовали цвету. Каждое из изображений ссылается на творческую работу пользователей, что является отличным способом вернуть пользователей к основному контенту веб-сайта.
энергетический ядерный реактор
Страницы 404 не должны быть слишком креативными, особенно если они не являются частью бренда. NPR представляет очень удобную страницу 404 с умным поворотом, чтобы вернуть пользователей к чтению их статей, связывая контент о потерянных людях, местах и вещах.
Tripadvisor
Страница 404 на сайте Tripadvisor — отличный пример творческого подхода при выполнении задачи. В них есть анимированный чемоданчик, чтобы заинтересовать пользователей, пока они читают сообщение об ошибке.
Арефс
В этом примере 404 я бы хотел, чтобы Ahrefs включил свою основную навигацию, но использовать призыв к действию (CTA), чтобы попробовать их программное обеспечение, которое включает в себя умную инверсию (что, если у вашего сайта такая же проблема?), Это довольно хорошо.
Link Rot реальна, и это нормально
Сеть не статична. Страницы постоянно создаются и удаляются, а ссылки между этими страницами рвутся и исчезают каждый день. Это явление называется «Ссылка Гнильд.», и это совершенно естественно.
Наши ссылки со временем разорвутся. Как SEO-специалисты, веб-менеджеры и добропорядочные граждане сети, мы должны убедиться, что пользователи могут беспрепятственно перемещаться по ссылкам. И первая линия защиты — это пользовательская страница 404.
