Главная Блог Хостовые и технические факторы Страница 404 ошибки: дизайн и техническая сторона
Хостовые и технические факторы
11 мин
1 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 5 5,00
3 040
1

Страница 404 ошибки: дизайн и техническая сторона

Елена Сенченкова

- Seo специалист в Beup

Как 404 ошибка влияет на SEO

Чем больше неверных адресов и битых ссылок, тем больше трафика на них теряется. 1-2 отказа в день — это терпимо, а вот 100-200 при 10 000 пользователей в месяц — мягко говоря, печально. Хорошо оформленная страница 404 ощутимо сократит потери.

Второй важный показатель — поведенческие факторы на выдаче. Когда из результатов поиска посетитель попадает на битую ссылку и возвращается на выдачу, система это запоминает. Для нее это сигнал, что на вашем сайте посетитель не смог удовлетворить свое намерение, а значит, сайт не полезен по данному запросу и его нужно ранжировать ниже. Так из-за небрежного отношения к техническим ошибкам можно потерять и трафик, и позиции, и доверие поисковой системы.

Иногда вместо страницы 404 вебмастера настраивают перенаправление в другой раздел. Тогда при переходе по некорректной ссылке посетитель попадает на главную сайта или куда-то еще. Это вроде бы удобно — но только на первый взгляд. Редирект запутывает пользователя — представьте, что люди ищут обзор товара, а попадают в каталог. Им сложно сориентироваться, перенаправление становится неэффективным — и ваш сайт упускает немало трафика.

Чем больше на сайте битых ссылок и несуществующих разделов, тем больше времени поисковый робот тратит на их сканирование. А значит, до действительно полезных страниц краулер может и не добраться. В результате они не попадут в индекс или будут очень низко ранжироваться. Чтобы исправить положение, нужно сделать три вещи:

  • 01.

    найти все несуществующие ссылки и удаленные разделы на сайте;

  • 02.

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

  • 03.

    разработать и настроить эффективный дизайн страницы 404.

Как и где найти внутренние и внешние ссылки на страницы 404

На крупных ресурсах лучше использовать парсеры — например, парсер SiteAnalyzer или Screaming Frog — и онлайн-сервисы, аналогичные Broken Link Checker. На небольших сайтах можно обойтись службами внутренней статистики.

  • В Google Search Console ошибки 404 отображаются в разделе «Сканирование» (подпункт «Ошибки сканирования»).

  • В Яндекс Вебмастере нужно открыть раздел «Индексирование» и перейти в подпункт «Страницы в поиске». Исключенные страницы будут на отдельной вкладке. Их нужно отфильтровать по статусу «Ошибка HTTP 404».

  • В Яндекс Метрике нужно перейти в стандартные отчеты, выбрать «Содержание», а затем — «Заголовки страниц». Далее ставим галочку в пункте «Адрес страницы» и вводим заголовок 404.

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

Технически страница 404 настраивается так:

  • В корневой каталог нужно загрузить файл 404.html. Там должна быть ваша страничка, которую вы скачали из шаблонов CMS или сделали своими силами.

  • Там же, в корневом каталоге сайта, есть конфигурационный файл .htaccess. Туда необходимо добавить строку кода с адресом:
    ErrorDocument 404 https://site.ru/404.html

  • Страница 404 должна быть закрыта от индексации. Для этого в robots.txt нужно прописать:
    Disallow: /404.html

  • Исключение — это WordPress. Там файл должен называться 404.php и располагаться в той же папке, что и шаблон сайта: /wp-content/themes/имя-темы/404.php. В редакторе WordPress можно самостоятельно создать страницу 404, установить и настроить с помощью специального плагина.

На странице ошибки 404 должен стоять счетчик Яндекс Метрики — как положено, в коде, по аналогии с обычными страницами сайта. Чтобы узнать, сколько было просмотров, в Метрике надо настроить цель — посещение страницы. Их количество будет выгружаться в отчет по цели. Чтобы отслеживать параметры визитов, в шаблон страницы 404 нужно добавить скрипт, рекомендованный Яндекс Метрикой. После этого можно анализировать основные данные: страницы-рефереры, количество визитов, глубина просмотра, время на сайте. Важен показатель отказов. Если он резко снизился после того, как вы добавили на страницу 404 текст и ссылки, значит, конкретно у вас это работает.

Варианты дефолтного оформления ошибки 404

Страницу 404 можно отрисовать самим или загрузить готовую версию. В самых популярных системах управления сайтом — WordPress, Joomla, Drupal — они уже есть шаблоны, но они обычно не содержат всей навигации (особенно в Joomla) и отрисованы не в дизайне сайта. В итоге такая страница, наоборот подталкивает уйти с сайта. 

Готовые шаблоны из CMS — это универсальные страницы без претензий на креатив и адаптивность. По сути, это техническое описание того, что произошло

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

Чтобы запомниться и заинтересовать, нужны кастомные страницы. С ярким оформлением и целенаправленным текстом. И, конечно, со ссылками. Если их не будет, мы не достигнем цели. Крайне малый процент пользователей перейдет на другие страницы самостоятельно — остальные просто покинут сайт. 

Рекомендации по оформлению страницы 404

Каким должен быть текст для страницы ошибки 404

Он должен отвечать на два вопроса:

  • что произошло;

  • какие есть альтернативы.

С первой частью все ясно и просто. Подготовьте короткое сообщение об ошибке — что означает 404 not found, действительно знают не все. Глубоко вдаваться в технические подробности не обязательно, лучше говорить в понятных посетителям выражениях. На крупных известных сайтах сообщение об ошибке иногда перефразируют в корпоративном стиле, шуточно или даже интригующе.

Пояснение от https://journal.tinkoff.ru. В медиа вполне уместен развернутый текст с долей неопределенности. Это тоже работа на результат

Чем шире аудитория, тем понятнее должен быть текст. Если в профессиональных сообществах уместны формулировки или картинки с подвохом, то на сайтах крупных компаний с миллионами клиентов идеален спокойный дружелюбный тон.

Пояснение от https://journal.tinkoff.ru. В медиа вполне уместен развернутый текст с долей неопределенности. Это тоже работа на результат

Показываем основные разделы сайта

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

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

Какие разделы на сайте вы считаете самыми интересными? А какие приносят прибыль владельцу сайта? Найдите точку пересечения в ответах на первый и второй вопрос — адрес этого раздела и стоит разместить на странице ошибки 404.

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

Иногда страница 404 ссылается не только на отдельные товары, но и на целые категории по интересам. К примеру, Яндекс Музыка предлагает выбрать из самых популярных музыкальных жанров.

Все ссылки кликабельны. Задачка на внимательность — найти, какого стиля здесь нет

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

3-4 адреса удобнее: их можно выделить так, что страница 404 будет выглядеть как мини-справочник со своей логикой и навигацией.

Дизайн 404 страницы у Яндекс 360: ничего лишнего, но при этом информативно и есть дифференциация по направлениям

Основные разделы сайта можно также показать с помощью сквозного меню. В этом случае непосредственно на странице ошибки 404 публикуют 1-2 ссылки.

На сайте Мосгорсуда на странице 404 выводится основное меню, и в профильные разделы проще перейти именно оттуда    

Добавляем строку поиска — и не только

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

После размещения поиска на странице 404 убедитесь, что интерфейс работает корректно

С точки зрения трафика выгоднее всего добавить к строке поиска 2-3 ссылки. Тогда у пользователя будет практически полноценное меню с хорошей навигацией. 

Строку поиска можно выделить цветом, контрастным к фону. Она будет визуально выделяться даже в окружении других элементов

Иногда для удержания посетителей на страницах 404 используются графические персонажи. Они делятся на две группы:

  • 01.

    подчеркивают фирменный стиль компании и ее специализацию,

  • 02.

    извиняются за ошибку и вовлекают в диалог.

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

Бот-помощник на Госуслугах создавался с позиции максимальной пользы. Он отвечает на вопросы и предлагает варианты готовых решений. Сайт рассчитан на очень широкую аудиторию, поэтому Макс общается понятным языком, но строго нейтрально, без эмоционально окрашенной лексики

Как прорекламировать продукцию на странице 404

Маркетинговый подход к оформлению 404 выглядит так:

  • показать товар или услугу;
  • поставить ссылки на самые интересные профильные разделы сайта;
  • использовать в тексте призыв к действию. 
Здесь все предусмотрено: Объединенные кондитеры честно рассказали об ошибке, но при этом представили свою продукцию и дали ориентиры по навигации

Иногда индивидуальный дизайн на странице 404 заменяют сквозным элементом. В следующем примере это баннер. Теоретически это допустимо, но Яндекс Справка рекомендует лаконичное оформление: без баннеров, меню и контактов. 

Красивая картинка на сайте Хоз-Лэнд притягивает внимание, поэтому сообщение об ошибке не бросается в глаза. Но это работает выборочно: в частности, с аудиторией, склонной к эмоциональным решениям

Нетривиальный ход — кнопки и формы для сбора лидов на странице 404. Кроме формы заявки, в таких случаях нужна еще как минимум одна ссылка. Цель очевидна — нарастить конверсии и трафик.  

Если на странице ошибки 404 есть форма сбора контактов, нужно особенно тщательно собирать статистику, чтобы понять эффективность приема. А еще — заранее протестировать дизайн и текст на целевой аудитории, если вы хотите поместить на страницу что-то радикально креативное (пример — Студия Лены Лениной).

Когда хочется развлечь пользователя

Если вы планируете сделать страницу 404 яркой и креативной за счет нестандартных идей, соблюдайте три правила:

  • решение не должно приниматься единолично,
  • связь с фирменным стилем обязательна,
  • сложные многоступенчатые ассоциации проверяются заранее — на целевой аудитории и на сотрудниках, у которых логика преобладает над эмоциями. 
Игра в ассоциации — это здорово, но они должны быть приятными и понятными, с учетом культурного кода целевой аудитории (пример — сайт Горячая штучка)

Чтобы впечатлить посетителей, шокирующий визуал не обязателен. Достаточно хорошо знать свою аудиторию и управлять ее настроением. Хотя бы в отдельных случаях. Не уходя от своей тематики.

На сайте детского кафе можно было отрисовать веселых персонажей. Но есть и другой вариант: цитата из доброй книги. Основная целевая аудитория кафе АндерСон — это все-таки родители, и решение принимают они, поэтому владельцы кафе извиняются словами Винни-Пуха

Страница ошибки 404 должна быть узнаваемой. Самый простой способ это сделать — корпоративные цвета и символика компании. Тогда и графика, и текст будут обыгрывать полезную информацию.

Финам показывает, что за фасадом 404 not found скрывается огромный портал: от котировок до ответов на любые вопросы. Перед посетителем не тупик, а широкая развилка. Чтобы визуализировать это, в дизайне страницы используется основное оформление сайта.   

Итоги и бонусы

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

Кроме смыслового единства и технической части, нужно строго следить за отображением. При настройке страницу 404 нужно точно так же тестировать, как и остальные разделы сайта. Она должна корректно отображаться во всех браузерах.

Перелинковка должна помещаться на первом экране. Скроллить страницу 404 ради ссылки будут единицы

Выгружайте статистику по странице 404 ежемесячно. Анализируйте ее с точки зрения SEO. Если видите резкий рост отказов, проверяйте визуал или техническую часть. Возможно, одна из ссылок не работает или какой-то элемент перестал отображаться.

404 not found — это не закрытая дверь. Это промежуточный пункт на пути к тому, что ищет пользователь. Задача SEO-специалиста — сделать так, чтобы посетитель это нашел. Но для этого надо показать все возможности сайта и настроить на дальнейшую работу. А еще — дать понять, что вы дружелюбны и всегда рады помочь.

Содержание

Оценить статью

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Загрузка...
Комментарии (0)
Оставить комментарий