Когда мы вводим на сайте неверный адрес или щелкаем по «мертвой» ссылке, он должен выдать стандартный код ответа HTTP – Not Found или «Ошибка 404». Отсюда хочется побыстрее уйти – и хорошо, если на главную сайта, а не обратно в поиск.
Хорошо оформленная с точки зрения дизайна и юзабилити страница 404 поможет пользователю понять, что делать дальше. Посмотрите, как эту задачу решили самые креативные компании.
eBay
«Человечная» надпись и такая же картина делают так, что не хочется убегать обратно в поиск
Гарантированно приведем клиентов
на ваш новый лендинг
Подробнее
Aviasales
Aviasales, по традиции, чуть поиграли словами – страницы нет, билеты есть
Blizzard
404-я у Blizzard анимированная: посмотрите, как симпатично выглядит
Coca-Cola
Coca-Cola тоже сыграла словами: «Здесь больше нет Coca-Cola» уместно смотрится рядом с пустыми бутылочками
Convert Monster
Content Monster меняет призыв и картинку каждый раз при обновлении страницы
Amazon
А у Amazon кликабельная собака – она отправляет нас на страницу «Собаки Amazon»
«Тупичок Гоблина»
Дизайн на сайте Дмитрия Юрьевича не обновляется годами (и смотрится по-своему стильно). Графическое оформление 404-й в стиле игр конца 90-х смотрится тут органично
«Лабиринт»
Еще одна ожидаемая игра слов: страница «Лабиринта» потерялась в лабиринте
OZON
OZON вернулся к минимализму
Что интересно – старая страница была немного креативнее (и как будто заимствовала идею eBay):
А это старая 404 страница на сайте OZON
Сотмаркет
Тот же тренд на минимализм – у «Сотмаркета»: только навигация, только хардкор
А вот как выглядела эта страница раньше:
Интереснее по задумке, но уже не так трендово (да, 404 тоже стоит обновлять в духе времени)
Студия Артемия Лебедева
Кстати, тайтл у страницы иронично спрашивает: «Потерялись?»
Банк «Тинькофф»
«Тинькофф» перешел от минимализма к ультраминимализму – смотрите следующее фото: это старая страница 404
Когда страницу освежали в плане дизайна, отсюда в числе прочих изменений ушел смайлик
«Яндекс»
Коротко и понятно – и тоже с навигацией
Университет «Синергия»
У «Синергии» как будто отсылка к фильму «Гравитация»
Студия Дениса Каплунова
Стильно и минималистично
LEGO
Выражение лица человечка демонстрирует панику. А вот надпись говорит, что все прекрасно
«Кинопоиск»
На «Кинопоиске» тоже есть элемент анимации
PlayboyRussia
404 страница PlayboyRussia
«Единый визовый центр»
Нетривиальный ход – для дочитавших подарок
Pikabu
Заморочились и отрисовали – узнаваемо и на века
Pixar
Более удачный образ, чем Печаль из мультика «Головоломка» для страницы 404 трудно представить
Какой не должна быть страница 404
- Мгновенный переход на главную страницу: в этом случае человек не поймет, что он ввел неверный адрес или перешел по неработающей ссылке, и может повторить неверный ввод.
- Внешний вид страницы
- с нечитаемыми символами:
- со стандартной и малоинформативной надписью:
- дзен-вариант страницы 404 (такой, например, у Школы-студии МХАТ):
Если вы решили сделать сайт, пусть у него будет первоклассной и страница с кодом ответа 404. Пользователи и поисковые системы будут вам благодарны.
Все течет, все изменяется…
Материалы на ваших сайтах постоянно обновляются. Возможно, вы даже со временем проводите небольшую чистку и удаляете какие-то страницы… Так как в них уже исчезла необходимость.
А ссылки на них со сторонних источников могли остаться. Переходят по ним новые посетители и видят перед собой пустой экран с фразой “404 Not found”.
Другая ситуация – каким-то чудом произошли изменения в самом «урле», скажем, вы решили переименовать раздел или же перенести одну статью в другую рубрику.
Посетитель снова видит перед собой «404 Not Found».
Как правило, это по умолчанию совсем невзрачная страница, которая только отталкивает.
Специалисты по созданию и оптимизации сайта уже давно сошлись во мнении, что не стоит эту страницу оставлять без внимания. Нужно ее сделать яркой, запоминающейся, чтобы посетитель захотел перейти на другие страницы сайта, а не дать деру восвояси.
Открывать Америку вам никто не собирается. Просто все четко и системно, чтобы вы могли удобно этим пользоваться:
- Размещение логотипа и имени сайта, компании, проекта – это дает возможность посетителю понимать, что сайт существует. Достаточно лишь кликнуть по лого, и он уже на главной странице.
- Наличие сообщения, которое четко говорит посетителю, что произошло и (желательно) что делать ему дальше.
- Заметная кнопка, переводящая посетителя на главную страницу сайта.
- Допускается наличие контактных данных владельца сайта, чтобы при желании с ним сразу связаться.
- Иконки социальных сетей – раз уж человек пришел к вам в гости, не лишним будет его пригласить в круг читателей и последователей вашего ресурса в социальных сетях.
Нужен ли вообще текст на странице «Ошибка 404»?
Конечно, нужен!
Иначе вы потеряете посетителя. И возникает вопрос – нужен текст-то для чего?
Скажу так: на этой страницы у текста есть 3 последовательные функции:
- Сообщить, что произошло.
- Указать причины происшедшего.
- Подсказать, что делать дальше.
Это стандартный «букет», без креативных ноток. Встречаются еще и другие проявления текстовых сообщений различного рода. Но обо всем по порядку.
Сообщите, что произошло.
Если вы думаете, что каждый посетитель вашего сайта знает, что такое «Ошибка 404» – вынужден вас огорчить, не все пользователи сети одинаково продвинуты.
Всегда найдутся те, которые не поймут, что означает надпись «Ошибка 404» – они запросто могут исчезнуть в любом направлении, только не в сторону главной (или внутренних) страниц вашего сайта.
Среди формулировок сообщения о произошедшем событии, можно использовать абсолютно разные варианты (учитывая специфику ресурса и характеристики аудитории):
- «Извините! Страница, которую Вы ищете, не может быть найдена».
- «Упс… Мы не можем найти то, что Вы ищете».
- «Простите, но у нас возникли проблемы с поиском страницы, которую Вы запрашиваете».
- «Добро пожаловать на страницу 404! Вы находитесь здесь, потому что ввели адрес страницы, которая уже не существует или была перемещена по другому адресу».
- «Так уж получилось, что из множества страниц нашего сайта Вы оказались как раз на той, которая уже не существует…».
- «404… Увы, но эта страница где-то затерялась в галактике Интернета».
- «Дружище, извини, но мы не смогли найти эту страницу…».
- «Ищете что-то интересное на нашем сайте? К сожалению, страница, которую Вы запрашиваете, не существует…».
Укажите причины происшедшего.
Очень часто на странице «Ошибка 404» этот текстовый блок вообще отсутствует
Авторы, порой, вообще ограничиваются «пустым текстом» в стиле: «Ошибка 404. Страницы не существует или он была удалена».
А дальше думайте, как хотите, если вообще хотите думать.
Наше мнение простое: как автор сайта вы просто обязаны все разъяснить своим посетителям, если ими дорожите, конечно.
Вот несколько примеров формулировок указания возможных причин ошибки 404:
- «… Возможно, запрашиваемая Вами страница была перенесена или удалена. Также возможно, Вы допустили небольшую опечатку при вводе адреса – такое случается даже с нами, поэтому еще раз внимательно проверьте».
- «… Скорее всего, это случилось по одной из следующих причин: страница переехала, страницы больше нет или Вам просто нравится изучать 404 страницы».
Подскажите, что нужно делать.
Во-первых, не паниковать…
Во-вторых, всегда можно переадресовать человека на главную страницу сайта (или любую внутреннюю – если в этом есть необходимость).
В-третьих, вы можете использовать в дизайне форму поиска информации на сайте. Человек, не зная, что делать, вводит в поисковую строку запрос по сайту.
Звучит это примерно так:
- «… Чтобы найти интересующую Вас информацию – воспользуйтесь этой формой поиска».
- «… Переходите на главную страницу – там Вы также сможете найти много полезной информации».
- «… Пожалуйста, воспользуйтесь навигацией или формой поиска, чтобы найти интересующую Вас информацию».
Выделяем главное.
Конечно, хочется из всего этого ассорти выделить наиболее ключевые моменты.
Текст на странице «Ошибка 404» – это не набор фраз, а полноценный текст, преследующий определенную задачу. А именно – стимулировать посетителя перейти в другие разделы сайта, а не его покинуть.
Поэтому…
Со своей стороны, позвольте поделиться личным мнением и рекомендациями:
- Избегайте фразы «Ошибка 404», замените ее на более мягкий вариант – «Страница 404», просто слово «ошибка» способно спугнуть посетителя.
- Аналогично – убирайте с дизайна любые предупреждающие знаки («стоп», «внимание») – это также способно спугнуть посетителя.
- Если у вас бизнес-ресурс и ориентированный на клиентов, рекомендуем придерживаться четкого, строго и понятного стиля изложения.
- Если блог и развлекательный портал – можно отходить от «официальностей», подключая юмор и оригинальность – главное, чтобы ваша идея ориентировалась на формат восприятия информации читателей.
- Не нужно ограничиваться сообщением о том, что произошло, обязательно подскажите посетителю, что ему делать дальше.
А если наглядно, вот вам простой пример для сайта компании – строго, четко и понятно:
Здравствуйте!
Добро пожаловать на «страницу 404» нашего сайта.
К сожалению, введенный Вами адрес недоступен. Этому может быть несколько объяснений:
Страница удалена (из-за утраты актуальности информации)
Страница перенесена в другое место
Возможно, при вводе адреса была пропущена какая-то буква (на самом деле, у нас самих так часто получается)
Тем не менее, предлагаем Вам найти нужную информацию с помощью этой простой формы:
ФОРМА
Или же приглашаем Вас посетить другие разделы нашего сайта:
Главная Услуги О компании Примеры работ Отзывы Блог
Если у Вас возникли какие-то вопросы – свяжитесь с нами по тел. ______ или же напишите на e-mail ___________.
Как видите – это простая, строгая, четкая текстовая часть страницы, которая смягчает эффект разочарования при посещении несуществующей страницы.
И не лишним будет в верхней части указать логотип компании, ее позиционирование и даже миссию – тогда вы еще клиенту сообщите, что он точно по адресу (если забыл или не знает название компании), просто слегка ошибся при вводе.
Если у вас блог – можете добавить ссылки на последние или самые популярные публикации.
Пока мы готовили этот материал – решили со временем разработать и собственную страницу. Тактика «сапожник без сапог» возникает тогда, когда много делаешь для клиентов, и нет времени на себя.
Хорошо это или плохо – на самом деле, не важно. Это просто факт.
Дополнительная информация
Источник: Студия Дениса Каплунова.
Автор: Денис Каплунов.
Книги Дениса Каплунова
Рекомендуем изучить книги Дениса Каплунова:
- Эффективное коммерческое предложение — Исчерпывающее руководство.
- Бизнес-копирайтинг — Как писать серьезные тексты для серьезных людей.
- Контент, маркетинг и рок-н-ролл — Книга-муза для покорения клиентов в интернете.
- Копирайтинг массового поражения — Аудиокнига.
- Копирайтинг массового поражения — После покупки Вы сможете скачать книгу в любом из 13 форматов или читать онлайн.
Ошибка 404, либо Error 404 Not Found — ошибка, которая появляется, если браузеру не удалось обнаружить на сервере указанный URL.
Сообщение об ошибке 404
Что означает ответ 404
Error 404 Not Found отображается по-разному: «HTTP 404 не найден», «Ошибка 404 Not Found», «404 Страница не найдена». Смысл надписи всегда остаётся тем же: страница отсутствует либо просто не работает. Not Found в переводе означает «не найдено».
Ошибка 404 — классический код ответа по протоколу HTTP. Он свидетельствует, что связь с сервером установлена, но данных по заданному запросу на сервере нет.
Однако если просто ввести в поисковую строку произвольный набор символов, то браузер не покажет ошибку 404 Not Found — появится сообщение, что установить соединение с конкретным сервером невозможно.
Разберёмся в техническом формировании ответа Error 404 Not Found.
Техническая сторона вопроса. При связи по HTTP браузер запрашивает указанный URL и ждёт цифрового ответа. То есть любой запрос пользователя направляется на сервер размещения искомого сайта. Когда браузеру удаётся связаться с сервером, он получает кодированный ответ. Если запрос корректный и страница найдена, отправляется ответ с кодом 200 OK, что соответствует благополучной загрузке. При отсутствии страницы отправляется ответ об ошибке.
Что значит код «404». В ответе 404 первая четвёрка указывает на то, что запрос был чрезмерно длительным или в самом адресе была ошибка. Ноль предполагает синтаксическую неточность. Завершающая цифра кода отображает конкретную причину ошибки — «4» означает отсутствие данной ссылки.
Какие ещё ошибки бывают. Ошибку 404 не нужно путать с другими ответами, которые указывают на невозможность связи с сервером. Например, ошибка 403 сообщает, что доступ к URL ограничен, а ответ «Сервер не найден» свидетельствует, что браузер не смог обнаружить место размещения сайта.
Google на 404 странице сообщает о возможных причинах ошибки
Причины ошибки
Причины, по которым HTTP возвращает ответ 404 Not Found:
- Неверный адрес. К примеру, при ручном наборе пользователь допустил опечатку в адресе либо ссылка ведёт на несуществующую страницу. При этом домен должен быть написан верно. Если пользователь ошибется в названии домена, страница вообще не загрузится (без показа ошибки).
- Битая ссылка. Это нерабочий URL, который никуда не ведёт. Данный вариант иногда возникает при внутренней перелинковке. К примеру, раньше страница существовала, а потом её удалили и забыли убрать ссылку.
- Удалённая страница. Когда пользователь попытается перейти на удалённую с сервера страницу, он также увидит ошибку 404. Ссылка для перехода может сохраниться в браузерных закладках или на сторонних ресурсах.
- Неправильный редирект на страницу с изменённым адресом. Допустим, в процессе редизайна URL изменили, но оставили без внимания связанные ссылки.
- Неполадки на сервере. Это самый редкий вариант.
В большинстве ситуаций ошибка 404 отображается, когда не удаётся обнаружить нужную страницу на доступном сервере.
Причины отсутствия страницы на сайте бывают разными
Возможные последствия для сайта
Нужно ли считать 404 ошибку опасной для сайтов? Кажется, что нет ничего плохого в том, что пользователь не смог открыть одну веб-страницу. Однако если такая ситуация будет повторяться регулярно, это чревато оттоком аудитории. Одни пользователи решат, что сайт вовсе не существует. Другие подумают, что лучше не заходить на сайт, который работает с ошибками. Третьи будут игнорировать ресурс, на котором не смогли получить обещанную информацию.
Поисковые системы относятся к Not Found более лояльно. Например, Google отмечает, что 404 страницы не влияют на рейтинг. Но если при индексации роботы будут находить все больше ошибочных страниц, вряд ли это приведёт к более высокому ранжированию.
Если вы хотите улучшить взаимодействие с посетителями, важно найти и исправить все ошибки 404 на сайте.
Как выявить ошибку
На небольшом ресурсе легко проверить работоспособность ссылок вручную. Но если на сайте сотни и тысячи страниц, без дополнительного софта не обойтись. Есть немало сервисов и программ, позволяющих находить битые ссылки. Рассмотрим некоторые из них.
Search Console Google
Консоль поиска Google позволяет находить страницы с ошибкой 404 за несколько кликов:
- Войдите в учётную запись Google и перейдите в Search Console.
- Откройте раздел «Ошибки сканирования» → «Диагностика».
- Кликните на «Not Found».
Чтобы получить список страниц с ошибками, подтвердите права на ресурс — добавьте проверочную запись TXT в записи DNS регистратора домена. Такая запись не повлияет на работу сайта. Подробнее о процедуре подтверждения, читайте в справке Google.
Для использования Search Console Google нужно подтвердить свои права на сайт
Яндекс Вебмастер
Сервис для вебмастеров от Яндекса поможет быстро найти все ошибки 404:
- Откройте Вебмастер после авторизации в Яндекс-аккаунте.
- Выберите «Индексирование» → «Доступные для поиска страницы» → «Исключённые страницы».
- В выданном списке выберите фильтр «Ошибка HTTP: 404».
Чтобы использовать Яндекс.Вебмастер, также нужно подтвердить право владения сайтом — добавить метатег в HTML-код главной страницы.
Для входа в Вебмастер авторизуйтесь в Яндексе
Screaming Frog
Для начала загрузите и установите программу на компьютер. После запуска добавьте URL проверяемого сайта и начните поиск проблем. Неработающие ссылки можно искать даже в бесплатной версии.
Инструмент SEO-паук в Screaming Frog помогает найти технические неисправности сайта
SiteAnalyzer
Эта бесплатная десктопная программа позволяет обнаружить технические погрешности на сайте. SiteAnalyzer быстро отыщет нерабочие и несуществующие ссылки.
SiteAnalyzer бесплатно найдёт неработающие URL
Как исправить ошибку Not Found
Выбор конкретного решения зависит от причины ошибки:
- Ссылка ведёт в никуда из-за неверного URL. Для решения проблемы замените ошибочную ссылку на правильный адрес, чтобы сервер отдавал код 200 OK.
- Битая ссылка. Подобная ситуация не редкость при внутренней перелинковке страниц. К примеру, ссылка есть, а саму страницу давно удалили. Решений два: удалить ссылку или заменить её на другую.
Удалять и менять ссылки вручную удобно только на небольших сайтах. Исправление ошибок на крупных порталах лучше автоматизировать. Например, с помощью специальных плагинов для внутренней перелинковки (Terms Description, Dagon Design Sitemap Generator) и для автоматического формирования адресов страниц (Cyr-To-Lat).
Чтобы ошибки 404 появлялись как можно реже, достаточно соблюдать простые рекомендации:
- Не присваивайте сложные адреса основным разделам сайта. Это снизит число ошибок, связанных с опечатками в URL.
- Не меняйте адреса страниц слишком часто. Это неудобно для пользователей и вводит в заблуждение поисковых роботов.
- Размещайте сайт на надёжном сервере. Это предотвратит ошибки, возникающие из-за неработоспособности сервера.
Мы разобрались, как найти и исправить ошибки Not Found внутри сайта. Но неработающая ссылка может быть расположена и на стороннем ресурсе. Допустим, когда-то на другом сайте разместили рекламную публикацию со ссылкой на определённую страницу. Спустя какое-то время страницу удалили. В этом случае появится ошибка 404. Устранить её можно, связавшись с администрацией ссылающегося сайта. Если же удалить/исправить ссылку нельзя, постарайтесь использовать ошибку с выгодой.
Как сделать страницу 404 полезной
Грамотно оформленная страница с ошибкой Error 404 Not Found — действенный инструмент конвертации посетителей. Ограничений по использованию страницы с ошибкой 404 нет. При этом практически все CMS позволяют настраивать дизайн этой страницы.
Что публиковать на странице 404:
- меню с кликабельными ссылками;
- ссылку на главную страницу;
- анонс последних публикаций;
- контакты для обратной связи.
При оформлении страницы-ошибки желательно опираться на рекомендации поисковиков:
- Яндекс настоятельно рекомендует, чтобы страница контрастировала с основным содержанием сайта — иные цвета, другие графические приёмы либо их отсутствие. Необходимо чётко и понятно объяснить пользователю, что запрошенной страницы не существует и предложить другое решение.
- Google советует придерживаться единого стиля оформления. Но также рекомендует понятно рассказать об ошибке и предложить полезные материалы.
Главное — по возможности отказаться от стандартной страницы 404. Подумайте, как привлечь внимание пользователя. Расскажите ему об отсутствии искомой страницы и предложите взамен что-то полезное или интересное.
Примеры оформления страниц 404
Designzillas
Мультяшная страница креативной студии привлекает внимание и её хочется досмотреть до конца. Если прокрутить страницу, можно увидеть, как из яйца вылупится дракон. При этом на странице есть ссылки на все основные разделы сайта.
Меню на сайте Designzillas есть и на 404 странице
Domenart Studio
Веб-студия «Домен АРТ» использует красочную страницу 404, оформленную в единой стилистике ресурса. Заблудившимся пользователям предлагают попробовать ещё раз ввести адрес или перейти в нужный раздел.
Контакты, поиск, меню — и всё это на 404 странице Domenart Studio
E-co
«Эко Пауэр», дистрибьютор производителя источников питания, демонстрирует короткое замыкание как символ ошибки. Посетителям предлагают перейти на главную.
Ошибка 404 «Эко Пауэр» выглядит как страница входа
Дом со всем
Компания «Дом со всем», занимающаяся бурением скважин, разместила на странице 404 свои контакты и перечень услуг. Со страницы можно перейти в любой раздел сайта или заказать обратный звонок. С таким наполнением посетителю не нужно искать дополнительную информацию где-то ещё.
Компания «Дом со всем» предлагает заказать обратный звонок
Kualo
Страница 404 на веб-хостинге Kualo может заставить пользователя забыть, зачем он сюда пришёл. Увлекательная игра притягивает внимание. В конце игры посетителю предлагают посмотреть сайт хостинга.
На странице Kualo можно просто поиграть и заработать скидки
Рано или поздно с ошибкой 404 сталкивается большинство сайтов. При регулярной проверке можно своевременно исправить неработающие ссылки, чтобы в ответ пользователи получали код 200 OK. Но для крупного ресурса лучше настроить оригинальную страницу, которая будет отображаться при появлении ошибки Not Found и подскажет посетителям, что делать дальше.
Главные мысли
- Что такое ошибка 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
Статья будет полезна предпринимателям, для которых сайт компании — не просто визитка, а продающий инструмент, требующий постоянного развития.
Если у вас не лендинг, а крупный сайт со множеством страниц и разделов, то рано или поздно ваши посетители столкнутся с битыми ссылками и ошибкой 404. К этому следует подготовиться.
Грамотно оформленная с точки зрения дизайна и содержания страница 404 способна удержать посетителей на сайте, снизить показатель отказов и повысить конверсию трафика в продажи.
После анализа сотни веб-сайтов разной направленности на предмет наличия проработанной, интересной и нестандартной страницы 404 были выявлены 27 достойных примеров, которые представлены ниже. Также в конце этого материала вы найдёте несколько рекомендаций по теме.
Идеальной формулы для страницы 404, конечно, не существует. Здесь всё индивидуально и зависит от конкретного бизнеса.
В целом страница 404 должна решать следующие задачи:
-
Объяснять посетителю, что произошло.
- Указывать причины, по которым пользователь попал на эту страницу.
- Подсказывать, что делать дальше.
Общие рекомендации по теме
- При разработке или редизайне страницы 404 проявляйте творчество и креатив, отталкиваясь от сферы бизнеса. Здесь можно разместить ограниченные по времени купоны на скидку, форму подписки на выгодные акции, тематическую иллюстрацию, строку поиска по сайту, интерактивные элементы, генератор случайных советов и так далее.
- Обязательно проверьте, чтобы страница ошибки 404 на вашем сайте была правильно настроена, а сервер возвращал код статуса HTTP 404 Not Found. Иначе в результатах выдачи поисковых систем могут начать появляться ссылки на несуществующие страницы вашего сайта, что негативно повлияет на SEO.
- Регулярно проверяйте ссылки, размещённые на сайте, на предмет актуальности. Заменяйте или удаляйте битые ссылки при обнаружении.
На этом всё. Надеемся, что приведённые выше примеры вдохновят вас на создание своих собственных оригинальных решений, которые будут способствовать улучшению сайта и бизнеса в целом.
404 ошибка является одной из самых частых на просторах интернета. Эта ошибка возникает тогда, когда пользователь ввел некорректный адрес сайта, либо перешел по ссылке, которой уже не существует.
А что же означают эти до боли знакомые всем цифры? Первая цифра 4 указывает на ошибку со стороны клиента, например, плохое соединение или неверно введенный адрес в строку поиска. Другие два числа обозначают конкретную категорию ошибок, которая включает такие статусы, как Conflict, Precondition Failed, Bad Request и другие статусы четвертого класса. Возникновение данной ошибки имеет несколько причин:
- плохое соединение;
- ссылка, ведущая на адрес, устарела или была удалена;
- страницу перенесли на новый адрес;
- опечатка при вводе адреса сайта.
Многие не придают большого значения 404 странице. А зря! Ведь данная страница играет немаловажную роль в конверсии сайта и может выполнять несколько функций одновременно, если добавить туда нужные элементы. Хорошая структура 404 страницы удерживает пользователя на сайте, не дает потерять потенциального клиента.
Как удержать клиента: советы по созданию страницы с 404 ошибкой
Чтобы ошибка не испугала посетителя, объясните ему, что ничего страшного не произошло и нужно лишь перейти в другой раздел сайта. Тактично направьте пользователя к выходу из этого злополучного «тупика».
Существует несколько способов вернуть доверие:
- Добавить ссылки на существующие разделы сайта. Не заставляйте его снова писать вручную адрес сайта, обновлять страницу, искать опечатки. Достаточно даже одной кнопочки «Вернуться на главную». Продублировать популярные ссылки разделов вашего сайта было бы вообще замечательно.
- Объясните, что произошло. Не обязательно подробно расписывать о происхождении ошибки, составлять длиннющие инструкции. Достаточно обойтись одной или несколькими фразами. Слово «ОШИБКА» совсем необязательное, зачастую лишь больше вгоняет в ступор. Если сайт носит развлекательный характер, можно юморнуть и покреативить. Заставьте улыбнуться гостя, тогда он охотнее вернется на главную страницу. Но обойдемся без юмора ниже пояса и обидных шуточек, давайте уважать наших пользователей.
- Не лишним будет добавление строки поиска по сайту, это еще больше упростит действия посетителя. Введя в строку желаемый запрос, он быстро очутится в том разделе сайта, в который должен был попасть до появления ошибки.
- Не забывайте про фирменный стиль и общие элементы внешнего облика сайта. Слишком сильное различие дизайна ошибки и сайта в целом настораживают. Это наводит пользователя на мысль: а не перешел ли я по какой-то нехорошей ссылке? А не покинул ли я нужный сайт. Наличие логотипа или названия компании обязательны.
- Внесите креатив в страницу с помощью интересной тематической анимации — динамичные иллюстрации всегда приковывают внимание. А ошибка 404 должна вызывать интерес и желание остаться на сайте с вопросом, что еще интересного есть на этом сайте?
- Если недавно вы переносили или удаляли достаточно большое количество страниц и точно уверены в том, что многие посетители, перейдя на ваш сайт, не найдут нужной информации, вставьте поисковую строку системы Google или Яндекс. Пользователи вам скажут спасибо за то, что вы сэкономили их время, а это плюсик в карму.
Это общие рекомендации, но можно ими не ограничиваться. Если у вас хорошая фантазия и чувство юмора, то из скучной страницы можно сотворить настоящий шедевр. Все зависит от вашей креативности 
404 ошибка: как эта страница выглядит на нашем сайте
Полностью весь внешний вид оставили в том же стиле, что и сам сайт. Не трогали верхнее меню и подвал, чтобы никого не шокировать резкими переходами. Для удобства вставили ссылки на самые популярные услуги (для клиентов) и основные разделы блога (для просто интересующихся). Обязательно добавили ссылку на главную страницу 1PS и призыв к действию «Напишите нам», чтобы уж точно никто не затерялся. Но! Учтя все технические вопросы, мы забыли про креатив. Уже работаем над этим. В скором будущем и мы обзаведемся привлекательной и забавной страничкой.
Страницы с ошибками бывают разными, идей для креатива множество, главное — знать меру. Бытует мнение, что на серьезных сайтах с официальным посылом не может быть своей ошибки 404, лучше обойтись стандартной. Развеем этот миф! Мы подобрали для вас 50 примеров различных 404 страниц и дали свой комментарий к каждой. Вдохновляйтесь!
50 примеров крутых страниц с 404 ошибкой
-
Freepik
Страница находится за пределами Вселенной. Очень много примеров 404-ой можно найти именно в космической тематике. Может быть, потому что все потерявшиеся страницы находятся там?
-
Giphy
Ой! Здесь ничего нет. Яркая надпись в стиле GIF привлекает внимание и дает подсказку перейти на главную.
-
Mailchimp
Лошадка потеряла эту страницу. Но не расстраивайтесь! Кликните на нее и сыграйте в игру. Ведь все мы с вами в душе дети.
-
Font Awesome
«Знаешь, о чем я постоянно думаю? Где мой сэндвич?» Хорошая идея удержать внимание за счет популярных мемов.
-
Playstation
Если вдруг подсказка не поможет, робот Астро всегда найдет для вас путь домой. Персонаж на странице выступает в роли помощника.
-
IKEA
Похищение пришельцами! Выполненная с юмором тематическая анимация заставляет улыбаться.
-
LEGO
Конструкторный человечек немного напуган, но дает понять, что все в порядке. На данном примере изображен узнаваемый продукт бренда.
-
Coursera
Анимация в стиле супрематизма. Различные фигуры складываются в «404». Смотрится необычно, но в то же время понятно.
-
Marvel
Что-то не так! Я есть Грут. И я помогу вам не заблудиться в темноте — перейдите на главную.
-
Kinsta
Не нашли то, что так долго искали? Иллюстрация с затерянной гробницей выглядит таинственно. Вам решать, открывать ее или нет. Может, все-таки вернемся на главную?
-
Coca-Cola
Здесь больше нет Coca-Cola… Пустые бутылки из-под напитка явно никого не устраивают. Нужно срочно перейти на другую страницу.
-
Onesharedhouse
Пустая таблица без каких-либо данных показывает, что ничего нет. В конце четко написано: 404.
-
Bubka
Трехглазый монстрик с главной страницы пытается вас загипнотизировать. Если становится страшно — лучше вернитесь на главную.
-
F1 News
Лаконичная 404 страница от новостного портала. Вместо цифры «0» используется колесо боллида.
-
Blizzard
Бедный мурлок заблудился. Но ничего страшного! Спасательный отряд уже на подходе. Главное — зовите громче: «Мргрмлмлрлрглмрргл!»
-
Android
Хорошее применение типографики для 404 страницы. Текст четко дает понять, что произошло.
-
Bluleadz
Милая страница с котиком никого не оставит равнодушным. Так и хочется ему помочь. Строка поиска Google поможет отыскать решение.
-
Subsign
Не волнуйтесь, съешьте пончик и вернитесь назад. Выглядит очень аппетитно, даже не хочется уходить.
-
Chanceupon
Потерялись во Вселенной? Теперь можно с легкостью вернуться домой одним нажатием кнопки.
-
Github
Таинственный Осьмикот в накидке сообщает, что эта не та страница, которую вы ищете. Строка поиска снизу поможет найти нужную информацию.
-
Flywheel
Приятная анимация в линейном стиле не дает оторвать взгляда. Но эта не та страница, что вам нужна, так что вернитесь домой.
-
Amazon
Любителям собак посвящается: приветливый пес смотрит на вас со страницы. Вы можете вернуться на главную, а можете познакомиться с ним.
-
Логомашина
Пример использования части брендинга на странице. Грустный смайлик сообщает об ошибке.
-
9gag
Еще один пример использование мемов для страницы. Ничего не нашлось — скачайте приложение и ищите там. Отличное решение для целевого действия.
-
Dribbble
Страница исчезла. Но вы можете найти проекты в нужном для вас цвете прямо здесь. Двигайте ползунок снизу и кликайте на нужное изображение.
-
Canva
Вроде ничего необычного… но игра слов в надписи добавляет нотку юмора.
-
Dropbox
Неплохая задумка дорисовки изображения к цветному элементу. Не удалось найти страницу — позитивный взгляд на ситуацию никогда не даст расстроиться.
-
Hugoware
Ой-ой! Осторожно! Смотрите не покиньте этот мир, как все элементы на странице. Скорее кликайте на логотип и переходите на главную.
-
Netflix
Хороший вариант для 404 страницы — использовать тематическое изображение. Все просто и понятно. Кадр из сериала подскажет, что вы потерялись.
-
Lekhoa
Кто-то следит за вами. Попытайтесь не попадаться на глаза — возвращайтесь домой.
-
Фокс Pizza
Лисичка так расстроена: она уронила свою пиццу. =( Но можно перейти в каталог и заказать еще одну.
-
SYDO
Прекрасное оформление в виде игры. Протестируйте себя на точность — разбейте все элементы на странице, чтобы от ошибки не осталось и следа.
-
Рив Гош
Минимализм с нотками юмора. Не стоит так переживать и падать вверх ногами. Лучше перейдите к покупкам.
-
Nextpage
Космические захватчики уничтожили эту страницу! Отомстите им! Как долго вы сможете продержаться под огнем?
-
Brand Crowd
Оригинальная иллюстрация, отображающая деятельность компании — дизайнер рисует «404». Вам необходимо проверить URL-адрес.
-
Dogstudio
Прекрасная задумка 404 страницы. GIF-анимация меняется каждый раз при перезагрузке.
-
Издательство «МИФ»
Наверное, слонам не стоит вставать на самокат. Нужно выбирать что-то покрепче. Или же просто почитать — выбрать книгу по душе, перейдя по ссылкам к разделам.
-
Unsplash
Хм, страница, которую вы искали, больше не существует. Анимация показывает, что происходит что-то опасное.
-
Purple Bunny
Упс! Вы попали не в ту кроличью нору. Кролик обеспокоен и просит вас вернуться на домашнюю страницу.
-
Virtual Building
Применение glitch-эффекта для цифр и помехи на фоне разбитых очков виртуальной реальности подразумевают нежелательную поломку.
-
NVIDIA
Искусственный интеллект бессилен в таких случаях. Воспользуйтесь ссылками на странице, чтобы найти то, что искали.
-
Superrb
Доска для серфинга балансирует не на волнах, а на цветовом круге. Креативное решение для дизайн-студии.
-
Spotify
К сожалению, музыка остановилась. Пластинка с 404 ошибкой перестала крутиться. Лучше вернуться назад, чтобы снова насладится любимой мелодией.
-
Worrydream
404 страница в минималистическом стиле. Ой, это же не страница…
-
Jackrabbit
Посмотрите на этих прекрасных прыгающих кроликов! Все персонажи уникальны по-своему. На такую анимацию можно смотреть бесконечно. А если не бесконечно — перепрыгивайте на главную.
-
Figma
Почувствуйте себя немного дизайнером. Придумайте, что можно сделать с данным изображением — растяните курсором точки на цифрах. Кстати, это изображение можно полностью превратить в черный прямоугольник. Сможете?
-
Mayflower
Сколько бы вы ни копали, здесь вы точно ничего не найдете. Остановитесь и возвращайтесь назад.
-
Игромания
Тематическая страница с Марио от игрового портала содержит ссылки на разделы сайта. Страница не найдена. Возможно, она в другом замке, как и принцесса.
-
YO-YO
Очень красочная анимация для 404 страницы. Такой дизайн всегда поднимает настроение и выделяется среди остальных. Кликайте дальше.
-
ASOS
На подиуме для фотосессий никого нет так же, как и запрашиваемой страницы. Вернитесь обратно либо получите помощь по ссылкам.
Заключение
Как мы видим из примеров, страница 404 должна нести в себе определенную идею. Это прежде всего ошибка, а ошибки никто не любит. Но, чтобы не расстраивать пользователя, нужно дать ему подсказку, что делать дальше. Чем лучше вы проработаете свою четырестачетвертую, тем больше вероятность, что посетитель не покинет сайт. Главное не отступать от тематики и стиля вашего сайта, тогда все будет смотреться понятно и гармонично.
Если вам понадобится помощь в разработке 404 страницы, обращайтесь к нам. Мы с радостью возьмемся за разработку дизайна с учетом всех ваших пожеланий.
В этой статье мы расскажем, почему стоит делать уникальную страницу 404 для сайта и как правильно её оформлять. Покажем удачные и неудачные примеры оформления таких страниц.
В конце статьи вас ждет бесплатный чек-лист и шаблон технического задания на дизайн страницы с 404-ой ошибкой.
Зачем оформлять страницу 404 Not Found?
Существует 2 основные причины появления 404-ой ошибки:
- неправильно введён адрес ссылки;
- страница была удалена.
Пытаясь попасть на несуществующую страницу, пользователь видит ошибку 404 Not Found. Стандартная страница с 404-ой ошибкой никак не связана с вашим сайтом. Именно поэтому большинство пользователей стараются как можно скорее закрыть ее.
Вот так оставлять нельзя:
Рисунок 1. Стандартная страница 404 Not Found
Правильно оформленная страница поможет удержать на сайте заблудившихся посетителей и тем самым улучшить показатели.
Приведем пример количества посещений страницы с 404-ой ошибкой на сайтах, с которыми мы работаем.
Сайт 1:
- 1 143 477 просмотров сайта за год;
- 42 114 просмотров страницы 404 за год (или 3,85%).
Приведем для сравнения такие цифры: у самого популярного раздела каталога 218 011 просмотров за год (19%), что всего в 5 раз превышает количество просмотров 404-ой страницы. А у раздела, который находится на 6 месте по количеству просмотров за год, эта цифра составляет 14 935 просмотров (или 1,3%), что в 3 раза меньше, чем у страницы 404.
Сайт 2:
- 64 625 просмотров сайта за год;
- 547 просмотров страницы 404 за год (или 0,84%).
Из 11 разделов на сайте целых 4 раздела имеют меньше просмотров, чем страница 404.
Только представьте, какое большое количество посетителей сайта попадает на страницу 404-ой ошибки, и в ваших силах удержать и заинтересовать их.
При желании вы можете проверить свой сайт на количество посещений страницы с 404-ой ошибкой через Яндекс.Метрику. Как это сделать, подробно описано в инструкции от Яндекса.
Как оформить страницу ошибки
Существует 5 вариантов:
1. Оставить стандартную страницу ошибки браузера. Но ведь мир и так довольно жесток 🙁
Рисунок 2. Мем
2. Сделать страницу креативной и интересной:
Gif 1. Страница 404 с анимацией с сайта https://rabota.gk-rte.ru/404
На странице 404-ой ошибки посетитель видит анимацию с отсчетом времени до столкновения. В итоге столкновение, конечно, не происходит, но пользователь может задержаться на странице из интереса, чтобы увидеть, чем все закончится. Это, в свою очередь, улучшает поведенческие факторы — увеличивается время на сайте и уменьшается показатель отказов.
3. Сделать страницу полезной для посетителя, помочь ему найти нужную информацию:
Рисунок 3. Страница 404 с полезным контентом с сайта https://drarthurkhristenko.ru/404
Попадая на несуществующую страницу на сайте пластического хирурга, посетитель видит основные услуги, которые оказывает доктор.
4. Совместить предыдущие 2 варианта:
Рисунок 4. Страница 404 с полезным контентом и креативом с сайта https://www.coca-cola.ru/404
Отличный пример совмещения креатива и полезной для посетителя информации на сайте Coca-cola.
Наша рекомендация: используйте именно такой вариант при оформлении страницы с 404-ой ошибкой.
5. Использовать промокод на скидку:
Рисунок 5. Страница 404 с промокодом с сайта https://www.planeta-sport.ru/404/
Хороший пример совмещения креатива и промокода на скидку в спортивном интернет-магазине. Это красивое “извинение” за то, что страницы не существует. В итоге вместо досады или раздражения у пользователя появится дополнительный стимул сделать у вас покупку.
Рисунок 6. Мем
Шапка и футер — оставляем?
Если пользователь знаком с вашим сайтом, то попав на страницу 404, внешне отличающуюся от самого сайта, он решит, что попал не по адресу, и уйдёт. Или перейдёт на главную, а резкая разница в цвете и общем оформлении доставит ему неприятные эмоции. Оба варианта — так себе.
Наша рекомендация: оставить шапку и футер при оформлении страницы с 404-ой ошибкой. Тем более так рекомендует Google:
“Страница 404 должна быть выполнена в том же стиле (включая элементы навигации), что и основной сайт.” — Google.
Создаем блок с ошибкой 404
Это этап креатива. Подумайте над интересным оформлением. Можно взять за основу сферу вашего бизнеса: какие услуги вы оказываете, что продаете.
Рисунок 7. Пример 404-ой страницы на сайте https://kolesa.kz/404/
Сайт по продаже автомобилей использует оригинальную фразу “Докатились” и тут же предлагает посмотреть объявления. Из минусов здесь можно отметить тёмный фон, так как на основном сайте он светлый.
Рисунок 8. Пример 404-ой страницы на сайте https://www.pixar.com/404
* Перевод: “Не плачь. Это всего лишь 404 ошибка. То, что ты ищешь, могло переместиться в долгосрочную память.”
Рисунок 9. Пример 404-ой страницы на сайте https://www.lego.com/ru-ru/404
Рисунок 10. Пример 404-ой страницы на сайте https://www.f1news.ru/404/
Если не получается придумать интересный дизайн, опираясь на деятельность вашего сайта, то рекомендуем использовать минимализм (да простят нас дизайнеры), как на примерах ниже.
Рисунок 11. Пример 404-ой страницы на сайте https://www.tinkoff.ru/404/
Рисунок 12. Пример 404-ой страницы на сайте https://www.aviasales.ru/404
Рисунок 13. Пример 404-ой страницы на сайте https://www.kinopoisk.ru/404/
Определившись с идеей оформления, не забывайте, что дизайн страницы с 404-ой ошибкой должен быть выполнен в общей стилистике самого сайта.
И не стоит делать этот блок слишком большим, выходя за пределы первого экрана. Вряд ли посетитель этой страницы захочет прокручивать экран вниз.
Текст для страницы с ошибкой 404
Пользователю должно быть понятно, что запрашиваемая страница недоступна. Наша задача — помочь ему быстро сориентироваться. На этом этапе составьте сообщение, которое не вызовет отторжения.
Примеры:
- Извините, такой страницы у нас нет. Мы поможем найти нужную информацию.
- Извините, такой страницы у нас нет. Но есть много другой полезной информации.
Элементы навигации
Google рекомендует разместить на странице 404-ой ошибки ссылки на самые популярные статьи или записи блога, а также на главную страницу.
Если ваш сайт предоставляет услуги или продаёт товары, то добавьте ссылку на каталог и основные услуги/товары.
Рисунок 14. Пример 404-ой страницы на сайте https://www.mann-ivanov-ferber.ru/404/
Если на вашем сайте есть блог, то добавьте ссылку на сам блог и на самые популярные статьи.
Рисунок 15. Пример 404-ой страницы на сайте https://www.nytimes.com/404
Например, The New York Times добавил на страницу 404-ой ошибки самые популярные статьи, которыми чаще всего делятся их читатели.
Возможность сообщить о неработающей ссылке
Дайте посетителю возможность пожаловаться на неработающую ссылку. Вы можете не отвечать на эти сообщения, но сделайте такой функционал.
Опишите в техническом задании для программистов, как должна работать эта кнопка. Добавьте ссылку на сайт, где есть та функция, которую вы хотите повторить.
Если это будет всплывающая форма заявки, то опишите дизайнеру, как она должна выглядеть.
Рисунок 16. Пример отработки кнопки “Сообщить о нерабочей ссылке” со страницы https://enjoyme.ru/404/
Основные рекомендации
Резюмируем основные рекомендации из данной статьи:
- Оформите страницу 404 в том же стиле, что и весь сайт. Это касается элементов навигации, шрифта, цвета.
- Подготовьте понятный и короткий текст, который не вызовет отторжения у пользователя. Ему должно быть ясно, что запрашиваемая страница недоступна.
- Добавьте креатив в оформление, чтобы удержать посетителя на сайте.
- Добавьте ссылки на главную страницу, основные категории и услуги, а также на самые популярные статьи или записи блога.
- Вся информация должна помещаться на первом экране. Нет смысла добавлять больше: вряд ли посетитель страницы 404 будет скроллить вниз.
- Дайте пользователю возможность сообщать о неработающих ссылках, даже если не собираетесь проверять эти сообщения.
Блок-схема
Как только вы определитесь с оформлением, нужно нарисовать блок-схему.
И не забудьте подробно описать в техническом задании, как должен выглядеть каждый элемент.
Если вы никогда не составляли блок-схемы или хотите получить больше информации об их составлении, то рекомендуем прочитать нашу статью “Как сделать ТЗ на дизайн сайта бесплатно самому: подробная инструкция”.
Рисунок 17. Пример составленной блок-схемы для 404 страницы Ant-team.ru
Итоги и бонусы
Страница 404 должна выполнять 2 действия: удерживать посетителя на сайте и давать ему самую популярную и полезную информацию, благодаря которой он будет дальше путешествовать по сайту и создавать трафик.
И чтобы процесс создания страницы с 404-ой ошибкой не принес вам лишней головной боли, предлагаем воспользоваться нашим чек-листом и шаблоном технического задания, где подробно описан каждый шаг (читайте красный текст):
- Чек-лист на дизайн для страницы 404
- Шаблон ТЗ на дизайн для страницы 404
А чтобы было ещё понятнее, можете воспользоваться примером заполнения шаблона ТЗ и нарисованной блок-схемой:
- Пример ТЗ на дизайн для страницы 404 Ant-Team
- Блок-схема 404 Ant-Team
Это настоящее техническое задание, которое мы заполняли для нашей страницы 404-ой ошибки.
Автор статьи: Кирилл Агафонов (Ant-team.ru)
P.s. Подписывайтесь на наш телеграм-канал t.me/seoantteam, чтобы первыми узнавать о выходе новых материалов.
При написании статьи использованы источники:
- https://developers.google.com/search/docs/advanced/crawling/soft-404-errors?hl=ru&visit_id=637885645086554669-667034082&rd=1#93641
- https://yandex.ru/support/metrica/stand-out/informative-page-404.html#informative-page-404
В статье рассказывается:
- Как появился код ошибки 404
- Что означает ошибка 404
- Как ошибка 404 влияет на индексирование сайта
- Как найти ошибку 404
- Как найти ошибку 404 с помощью GTM (Google Tag Manager)
- Как работать в WordPress с ошибкой 404
- Как настроить ошибку 404 на других движках
- Скучная ошибка 404: что делать, чтобы исправить ситуацию
- 5 советов, как сделать ошибку 404 полезной
- Как учесть поведенческие факторы при настройке отображения ошибки 404
- Примеры оригинального, креативного оформления страниц с ошибкой 404
Если пользователь попадет к вам на сайт и увидит надпись «ошибка 404» с сообщением «страница не найдена», то, скорее всего, сразу же уйдет. Однако посетителя нужно удержать, убедить перейти на другие страницы ресурса. Особенно это важно для недавно созданных сайтов, для которых ценен каждый посетитель. Что значит «ошибка 404», почему она возникает, как уменьшить число потерянных пользователей, и как лучше оформить страницу с этой ошибкой 404, чтобы она не превратилась в тупик для гостей сайта? Об этом читайте в нашем материале.
До всемирного распространения веб-паутины она не была глобальной. Протоколы, используемые в ней сегодня, разработали в 80-х и 90-х гг. в CERN. Тим Бернерс-Ли, изобретатель протокола HTTP, самого известного из них, создал его на основе файлового протокола FTP. Также Бернерс-Ли придумал и разработал URI, URL, HTML и, конечно, WWW в целом. Эти аббревиатуры знакомы любому интернет-пользователю.
В версии HTTP 0.9, вышедшей в 1992 году, содержались коды состояния из трех цифр. Первая означала вид сообщения: 1 было информационным, 2 — успех, 3 — перенаправление, 4 говорило о клиентской ошибке, 5 — об ошибке сервера. Вторая цифра обозначала подгруппу сообщений, третья — конкретное сообщение в данной группе.
Коды типа 200 («хорошо») и 304 («не изменилось») мы никогда не видим, поскольку браузеры отображают не эти значения, а контент на страницах. А вот ошибка 404 «сервер не найден» знакома всем. Ее видел, пожалуй, любой пользователь, когда неправильно вводил адрес страницы в браузерную строку или, кликая по ссылке, переходил на страницу, которой нет.
С ошибкой 404 связан один миф. Согласно ему, в офисе СERN на четвертом этаже находилась комната 404 с центральным сервером. Там работало несколько сотрудников компании, в обязанности которых входила ручная обработка запросов. Если в запросе была ошибка, всплывало сообщение: «Room 404: file not found». Этот миф стал неотъемлемой частью интернет-фольклора. Она часто используется в сленге, по поводу нее шутят веб-дизайнеры.
По словам Тима Бернерса-Ли, изобретателя HTTP, никакой комнаты на четвертом этаже в офисе не было. В CERN нумерация комнат иная: первая цифра означает номер здания, две другие — номер комнаты. Но в здании № 4 нет комнаты 04. Отсчет там стартует с 410 и идет по нарастающей. «Не интересуйтесь, почему именно так», — говорит Бернерс-Ли.
Что означает ошибка 404
Итак, при переходе выдается ошибка 404: «страница не найдена». Как исправить ситуацию? Чтобы лучше понять этот вопрос и разобраться со служебными файлами на сайте, нужно изучить тему гипертекстового представления страниц при помощи языка HTML (HyperText Markup Language — «язык гипертекстовой разметки») и HTTP-протокол, через который осуществляется доступ. Несмотря на то, что придется разбираться в языке программирования, форма его представления элементарна, а потому понятна любому человеку.
Интернет появился в тот момент, когда английский инженер Тимоти Джон Бернерс-Ли придумал представлять текстовые страницы в сети в формате гипертекста и описал принцип доступа к ним по прикладному протоколу HTTP. Общая идея предполагает, что юзер со своего устройства, в частности с браузера, делает сетевой запрос на конкретный ресурс. В это время открывается сессия на сервере, куда он старается попасть. В качестве ответа возвращается HTML-страница.
Конечно, сегодня используются более сложные алгоритмы доступа и «подкачки» страниц больших размеров. Но общая схема не меняется. Чтобы оказаться на определенном сайте, у пользователя должно быть доменное имя и IP-адрес. Только при условии выполнения этих правил и пребывания ресурса в рабочем состоянии «error 404 not found» будет возвращаться на отсутствующий документ.
Иначе говоря, ошибка 404 на сайте — это код состояния http, свидетельствующий о том, что связаться с сервером удалось, но нужная страница на нем отсутствует. Такое случается, если ресурс, на который вы желаете зайти, не функционирует или к нему больше нет доступа.
Ссылки, ведущие в никуда, называют «мертвыми» или «сломанными». Код состояния HTTP 404 нередко называют «ошибка 404», «HTTP 404» или «код 404».
Чаще всего такое сообщение появляется в связи с тем, что содержимое ресурса удалили или переместили на новый URL-адрес. Но появление «404: Page Not Found» можно объяснить и иначе:
-
URL-адрес сайта или его содержимое переместили или полностью удалили (не откорректировав внутренние ссылки).
-
URL-адрес с самого начала был написан с ошибками (при разработке или реконструкции сайта), обозначен неверно или введен в браузерную строку поиска неправильно.
-
Сервер, связанный с веб-сайтом, временно не отвечает, или соединение прервано.
-
Преобразовать запрашиваемое доменное имя в IP-адрес сайта при помощи DNS-сервера (системы доменных имен) не представляется возможным.
-
Введенного доменного имени больше нет.
Неактивные ссылки могут находиться в интернет-пространстве довольно долго, поскольку операторы не успевают следить за перемещением, удалением сайтов и их контента. Поэтому многие удаленные или перемещенные на другие URL-адреса ресурсы, как и ранее, видны в поисковой выдаче, но попасть на них больше нельзя (по крайней мере, невозможно пройти по введенному URL-адресу).
Критики считают, что сообщение «ошибка 404» идет вразрез с правилами этикета, поскольку не каждый юзер сразу понимает, что это не он ее допустил. В этом есть рациональное зерно, поскольку существует 68 http-сообщений и большинство из них можно трактовать однозначно.
Итак, перед юзером возникла 404 ошибка. Проверить он, в первую очередь, хочет адресную строку, делая повторный запрос. Если ситуация не меняется, значит, нужно попробовать через какое-то время снова. Если URL-адрес корректный, лучше проверить страницу позднее. Не исключено, что неполадки вызваны сильной загрузкой сайта или работой сервера.
Если же вы знаете содержимое страницы, то используйте поиск и попытайтесь найти ее по другому адресу. Если все получилось, значит, администратор не добавил перенаправление 301 на новый адрес.
Иными словами, страницы, которые видны в Интернете, не генерируются вашим ПК. Чаще всего это страницы сервера, с которыми вы стараетесь связаться. Множество сайтов разрабатывают свои страницы 404 по собственному дизайну и предназначают их для размещения разных данных, например контактной информации, а также для перенаправления на целевую страницу.
Как ошибка 404 влияет на индексирование сайта
Некоторые считают, что от ошибок 404 ухудшаются позиции сайта в поисковой выдаче или его индексирование. Как правило, это мнение ошибочно.
Что происходит со страницей, когда ее находит робот? Он удаляет ее из индекса (если она там есть; если нет, то просто не сканирует). Это вполне логично, так как там отсутствует информация и страница не несет никакой пользы.
Следует помнить и о «мягких» ошибках. SOFT 404 не является официальным ответом сервера. Скорее, это ярлык, который поисковики вешают на страницы после обхода.
Почему поисковые системы решили, что с этими страницами что-то не так, в чем проблема?
-
На них мало контента, или он вовсе отсутствует (по мнению Google, страница может быть 404, по мнению «Яндекса», — некачественной).
-
Редирект настроен на страницу, не отвечающую пользовательским запросам.
-
Несуществующая страница выдает ответ сервера не 404 или 410.
Нередко при диагностике страниц сайта можно выявить 404, закрытую от индексации в файле robots.txt. В этом случае все ссылки на мертвые страницы (и URL с ошибками) перенаправляются при помощи 302 редиректа на специально созданную страницу.
302 редирект сообщает поисковикам, что страница временно располагается по другому адресу. Поэтому в индексе такие страницы сохраняются. То есть из-за роботов вы теряете время, поскольку они снова и снова обходят страницы. Кроме того, вы заставляете их чувствовать свою некомпетентность, поскольку они ведут юзеров к нерелевантным страницам.
Итак, страница удалена. Что дальше? Настраивать 404 ответ сервера или 301 редирект?
В каждом случае все индивидуально. Способ, эффективный для интернет-магазина, для портала услуг или другой торговой площадки, может не дать результатов.
Необходимо настроить 404 ответ сервера, если в силу каких-либо обстоятельств страница полностью удалена с ресурса.
301 редирект более уместен, чем 404, если:
-
поменялся адрес страницы (допустим, изменилась структура);
-
страница релевантна пользовательскому запросу;
-
возможно перенаправление к другой странице с подобным содержанием (одной темы или с карточки продукции на каталог);
-
есть внешние ссылки на страницу.
Кейс: VT-metall
Узнай как мы снизили стоимость привлечения заявки в 13 раз для металлообрабатывающей компании в Москве
Узнать как
301 перенаправление на основную страницу — не лучшее решение и для юзеров (они не поймут, что к чему), и для SEO (к примеру, Googlebot расценит их как SOFT 404).
Как найти ошибку 404
Когда, обходя сайт, поисковые роботы сообщают об обнаружении 10–20 ошибок, это одна ситуация. А если ежедневно этот показатель растет, исчисляясь сотнями тысяч? Срочно вмешиваться и решать проблему нужно, если число 404 ошибок превысило 10 % от общего числа страниц на сайте.
Почему несуществующих страниц может быть так много? Причин немало. Но, как правило, такие ситуации происходят из-за ошибок в коде (допустим, эти страницы могут формироваться при помощи скрипта и стилей, если стили находятся в коде шаблона, а не в самостоятельном файле).
Еще одна причина обхода мертвых страниц роботами — результаты вирусной атаки (к примеру, размещение дорвеев на сайте). Даже после предупреждения атаки и удаления дора роботы какое-то время стараются обходить созданные страницы. Из-за этого может возникнуть множество 404 ошибок.
Различные сервисы без особых трудностей позволяют контролировать переходы по таким ссылкам.
Для отслеживания переходов юзеров на 404 страницу применяют инструменты:
-
«Яндекс.Метрика»
С помощью «Параметров визитов» в «Яндекс.Метрике» вы можете отслеживать переходы юзеров по ссылкам. Необходимо лишь поместить в код счетчика строчку «params:window.yaParams||{ }});».
В любое место непосредственно 404 страницы следует вписать такой JS-код:
<script>
var url = document.location.pathname + document.location.search
var url_referrer = document.referrer;
var yaParams = {error404: {page: url, from: url_referrer}};
</script>
где url является текущим адресом 404 страницы, а url_referrer — адресом, с которого пришли. Код позволяет отслеживать как мертвые ссылки, так и страницы, на которых они вписаны.
-
Google Analytics
Для отслеживания переходов на 404 страницу нужно вписать такой код:
<script>
ga(‘send’, ‘pageview’, ‘404.html?page=’+ document.location.pathname + document.location.search +’&from=’ + document.referrer);
</script>
где document.location.pathname + document.location.search – URL страницы, которая отсутствует на сайте; document.referrer – URL страницы, с которой юзер перешел на 404 страницу.
-
«Яндекс.Вебмастер» и Google Search Console
Узнать о 404 ошибках, на которые натыкаются поисковые роботы, позволяют инструменты для веб-мастеров.
-
«Яндекс.Вебмастер»
Чтобы просмотреть страницы, зайдите в раздел «Индексирование» — «Страницы в поиске» — «Исключенные страницы». Для выделения страниц с нужной ошибкой используют фильтр по статусу «ошибка HTTP: 404».
-
Google Search Console
Для выявления ошибок используют «Сканирование» — «Ошибки сканирования» — «Ошибка 404».
-
-
Инструменты для сканирования сайта на наличие битых ссылок
Приведенные ниже сервисы помогают изучить интернет-ресурс и выявить на нем неактивные ссылки:
-
Screaming Frog SEO Spider Tool
После анализа всего сайта во вкладке «Response Code» появляются страницы с 4хх и 5хх ошибками и документы с размещенными там ссылками. Единственный недостаток сервиса — платное использование.
Но есть и бесплатные инструменты для проверки мертвых ссылок:
-
Netpeak Spider,
-
Xenu’s Link Sleuth,
-
Siteliner,
-
WildShark SEO Spider,
-
Webbee SEO Spider Tool.
Для проверки ответа сервера страниц из карты сайта используют Map Broker XML Sitemap Validator.
-
Как найти ошибку 404 с помощью GTM (Google Tag Manager)
Перед тем как настроить отслеживание 404 ошибок, нужно удостовериться, что на ресурсе корректно установлен контейнер GTM и через него встроен Google Analytics.
Шаг 1. Создайте переменную
Здесь необходимо действовать по следующему алгоритму:
-
Перейти по ссылке «Переменные» на панели навигации.
-
В разделе «Пользовательские переменные» нажать на кнопку «Создать».
-
Придумать, как будет называться переменная.
-
Выберите вид переменной — «Собственный код JavaScript».
-
Вставьте такой JavaScript-код:
В примере переменная называется Http Request. Если придумаете другое название, измените наименование и в коде следующей переменной.
function getReq(){
var req = false;
if (window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch (e) {
req = false;
}
} else if (window.ActiveXObject){
try {
req = new ActiveXObject(‘Microsoft.XMLHTTP’);
} catch (e) {
req = false;
}
}
if (!req){}
return req;
}
Шаг 2. Создайте еще одну переменную
Вторая переменная будет обращаться к первой и отдавать код ответа сервера.
Для этого следует действовать так же, как и при создании первой переменной. Но название должно быть другим (в примере вторую переменную назвали «Код ответа сервера»). Вставляется такой JavaScript-код:
function() {
var req = {{Http Request}};
try {
req.open(‘GET’, ‘{{Page URL}}’, false);
req.send(»);
} catch (e) {
success = false;
error_msg = «Error: » + e;
}
return req.status;
}
Шаг 3. Создайте триггер с такими параметрами:
-
Тип триггера: «Просмотр страницы».
-
Условия активации: «Некоторые просмотры страниц».
-
Условие, при котором должен активироваться триггер: в коде ответа сервера содержится 404.
Создайте тег с такими параметрами:
-
Тип тега: «Universal Analytics».
-
Тип отслеживания: Событие.
-
Категория: в нашем случае «error 404».
-
Действие: необходимо выбрать значение {{Page URL}}, чтобы увидеть, на какой странице сработало событие.
-
Триггер активации: триггер, созданный на предыдущем этапе.
Тип тега: «Universal Analytics».
Тип отслеживания: Событие.
Категория: в нашем случае «error 404».
Действие: необходимо выбрать значение {{Page URL}}, чтобы увидеть, на какой странице сработало событие.
Триггер активации: триггер, созданный на предыдущем этапе.
Шаг 5. Проверьте и опубликуйте тег
Открыв режим предварительного просмотра, перейдите на несуществующую страницу на сайте. Если при нажатии кнопки контейнер в консоли отобразится под строчкой «Tags Fired On This Page», значит, тег установлен правильно.
После того как вы увидите, что тег настроен без ошибок, настройте отслеживание цели в Google Analytics.
Для этого нужно создать и настроить новую цель в Google Analytics. Сведения, которые вы указывали, настраивая тег в GTM, повторите и при настройке цели в Google Analytics.
Шаг 6. Проверьте, все ли вы сделали правильно
Можете считать, что цель достигнута, если удастся перейти на несуществующую страницу на сайте. Перейдите по ней и посмотрите событие в Google Analytics. Для этого необходимо перейти в «Отчеты» — «В режиме реального времени» — «События».
По такой схеме нам удалось настроить отслеживание 404 ошибок, не вмешавшись в исходный код страниц.
Как работать в WordPress с ошибкой 404
Как правило, ошибка браузера 404 появляется в случае перемещения или удаления страницы на интернет-ресурсе. Если мы говорим о WordPress, то некоторые баги приводят к тому, что постоянные ссылки ведут на 404 страницу.
Постоянные ссылки — это URL-адреса, которые генерируются для указания существующих записей, категорий и списков по тегам. Другие юзеры могут пользоваться этими ссылками, чтобы указывать на ваши записи в своих в текстовых материалах. Если ссылка связана с отдельной записью, считается, что такой URL-адрес постоянный, а не динамический (меняющийся).
Ссылки в WordPress бывают трех видов. Это ссылки по умолчанию Default, mod_rewrite и PATHINFO. Форматирование ссылок первого вида производится в соответствии с настройками актуальной WordPress и действуют во всех серверных средах. Этот формат выглядит так: http://X.com/?p=N rel=»nofollow», где N – порядковое число. Изящным его нельзя назвать, зато он прекрасно справляется со своей задачей.
Ссылки mod_rewrite выглядят так: http://X.com/yyyy/mm/dd/post-name/ rel=»nofollow». Это постоянные ссылки, которым необходим модуль mod_rewrite на Apache и которые не работают на других серверах.
Вид постоянных ссылок PATHINFO следующий: http://X.com/index.php/yyyy/mm/dd/postname/ rel=»nofollow». Они работают на всех типах серверов, кроме Apache.
При переходе к постоянным ссылкам на сайте могут возникать проблемы. Так, если на сервере есть модуль Frontpage Extensions, то такие ссылки неактивны до внесения необходимых коррективов. Если в модуле нет потребности, лучше отключить его. До тех пор, пока вы этого не сделаете, любые настройки в панели управления WordPress вызовут повреждение данного модуля, поскольку он взаимодействует с файлом htaccess.
Есть проблема, связанная с обрезкой ссылок по длине. Из-за этого возникают 404 ошибки. И случается это не потому, что в ссылке содержатся неправильные значения, вопреки распространенному мнению.
С этой проблемой можно справиться, если добавить в файл .htaccess строку:
1RewriteRule ^post/([0-9]+)?/?([0-9]+)?/?$ /index.php?p=& page= [QSA]
Также можно сформировать URL-адреса, заключив их в угловые скобки. В этом случае большая часть почтовых и иных программ, с которыми возникают сложности, не станут обрезать протяженные URL-адреса.
Еще один важный момент: если вы не пользуетесь сервером Apache xampp, то и постоянные ссылки не будут работать вплоть до внесения необходимых исправлений и настроек.
Каждый раз, когда WordPress выявляет, что не удается найти страницу, ядро движка проверяет два файла: 404.php и index.php. Если становится ясно, что у активной темы — шаблон 404.php, то сайт его отображает. Если страницу 404.php найти не удается, движок направляет на index.php и выполняет инструкции в конце цикла, которые сообщают ему о порядке действий в случае, если контент страницы не удается обнаружить.
В большей части тем для WordPress есть шаблон 404.php. Вы можете взглянуть на шаблон своей темы, пройдя по адресу wp-content/themes/active-theme. Если предстоит работать со страницей 404 на WordPress, то начать следует с 404.php.
Как правило, на странице 404, поставляемой с вашей темой, указано нечто обобщенное. Также предусмотрена возможность применить поиск, чтобы найти необходимую страницу по заголовку или другие подобные страницы. Можете добавить ссылки на карту и другие страницы сайта, если нужно.
Как настроить ошибку 404 на других движках
По мнению многих администраторов, страница 404 по умолчанию выглядит непрезентабельно, а потому не может вызвать интерес к интернет-площадке. Администраторы считают, что нужно персонализировать эту страницу. Обычно есть возможность настроить страницу так, чтобы она была интересной, сообщала пользователю, где именно произошли сбои, какая возникла проблема, выдавала в качестве альтернативы ссылки на другие страницы, например домашнюю страницу, карту сайта и поиск.
Создание пользовательской страницы для 404 ошибки — задача простая. Самый легкий способ удержать юзеров — направить их на домашнюю страницу или карту сайта. Для этого в файл .thaccess помещают строку:
1ErrorDocument
404
/sitemap.html
Это перенаправит страницу 404 на карту сайта. Если у вас другой адрес, обозначьте свой.
Целевая страница, которую вы планируете отобразить, должна находиться на сервере. В противном случае перенаправление превратится в бесконечный процесс.
Укажите полный путь к странице относительно корневого каталога учетной записи (символ / в самом начале имени файла или каталога указывает положение относительно корневой папки).
Для создания персональной страницы для 404 ошибки нужно открыть новую страницу в используемом редакторе, например MS FrontPage или DreamWeaver. На этой странице может быть размещено абсолютно все, к примеру картинки, ссылки и пр.
Далее нужно сохранить файл с запоминающимся названием, допустим 404errors.html, а потом создать каталог прямо в папке public_html, задать имя error и разместить в нем файлы.
Затем добавить в .htaccess эту строчку:
1ErrorDocument 404
/error/404errors.html
Отныне всякий раз, когда сайт будет генерировать 404 ошибку, юзеры будут видеть пользовательскую страницу и переходить через нее на полезные ссылки, использовать поиск и т. д.
Скучная ошибка 404: что делать, чтобы исправить ситуацию
Итак, мы поняли, ошибка 404 — что это. Как исправить ее? Нередко на многих ресурсах страница 404 выглядит очень просто, по всем параметрам напоминая стандартный шаблон. Конечно, если сайт деловой или же является «лицом» серьезной компании, в строгости и лаконичности нет ничего плохого.
Но для мультимедийных площадок, близких к развлекательным, это не годится. Страницу 404 нужно оформлять с юмором, креативно. Это удержит внимание посетителя — следовательно, он дольше останется на ресурсе и сформирует о нем положительное впечатление.
Хороший вариант — разместить на странице с 404 ошибкой какую-нибудь ценную информацию. Не нужно указывать примитивное «error 404 not found».
Можно сослаться на другие информационные источники со схожей тематикой или предложить пользователю альтернативы. Если не хотите делать рекламу сторонним сайтам, ссылайтесь на другие страницы своей же площадки.
Очень важно указать данные главной страницы ресурса вместе с ее координатами.
Еще хороший вариант — рассказать пользователям, как убрать ошибку 404. Это может вызвать у них интерес и заставить их задержаться на сайте.
Пользуйтесь полем для поиска как инструментом привлечения пользователей. Использование такой схемы позволит проще работать с сайтом, и он станет еще более функциональным и информативным для посетителей.
То есть человек, зашедший на страницу с 404 ошибкой, сможет ввести в строке поиска желаемый ключевой запрос и не покинет ваш сайт.
Следующий этап оформления страницы 404 — добавление функции отправки отчета об ошибке. Это полезно как для гостя сайта, которого волнуют причины сбоя, так и для владельца —ему будет легче понять, какие технические проблемы возникают на ресурсе.
Вот как должна выглядеть 404 страница:
| НЕТ | ДА |
|
Она не должна отдавать код сервера «200 ОК» и, соответственно, индексироваться, создавая тем самым бесчисленное количество дублей |
Код ответа сервера должен быть «404 Not Found». Проверка 404 ошибки может быть выполнена здесь [redbot.org]. |
|
Графики и отвлекающих элементов дизайна не должно быть очень много. Это отвлекает пользователя, и он не сразу понимает, что искомых данных здесь нет. Пример такого оформления приведен после таблицы |
На странице с 404 ошибкой нужно поместить логотип, фирменную цветовую гамму, чтобы гость сразу понял: он попал на нужный ему ресурс |
|
Не стоит показывать Google AdSense, что использовать правила данной контекстной рекламы запрещается |
В идеале должна быть проставлена ссылка на главную страницу, важные разделы на сайте, поиск по ресурсу. Также желательно наличие красиво оформленных блоков с информацией об акциях, а также разделов, где содержатся рекомендации, популярные статьи, форма обратной связи по типу: «Вы можете обратиться к системному администратору сайта и описать проблему». Можно попытаться объяснить, что это за сбой и как исправить ошибку 404 not found. Спасти положение с помощью необычного веселого элемента и оказаться в списке собирателей эффектных 404 |
Вот как, например, не должна выглядеть 404 страница:
5 советов, как сделать ошибку 404 полезной
Как лучше оформить страницу 404? Поставьте себя на место пользователя. Итак, он ищет определенные сведения и оказывается на странице, где видит: «ошибка 404». Скорее всего, он кликнет по кнопке «Назад» и уйдет с ресурса, сочтя его нефункционирующим.
Даже если вы указали ссылку «Вернуться на главную», вряд ли это спасет положение. Пользователь должен кликнуть по ней, оказаться на главной странице, а потом еще искать данные. Это сложно. Как поступить? Как не дать юзеру уйти из-за 404 ошибки?
-
Будьте вежливы
Нужно поприветствовать посетителя. Сказать, что случилось, объяснить, почему не удается найти страницу, предложить помощь. Не зацикливайтесь на технических вопросах.
-
Правильный дизайн
Оформлять 404 страницу нужно в соответствии с общей стилистикой шаблона. Должен быть такой же логотип, рубрики, меню. Непременно используйте фотоконтент. На некоторых сайтах можно встретить веселые тематические изображения, заставляющие людей задерживаться на несколько секунд и вызывающие у них улыбку. А это уже хорошо. Кто-то и вовсе размещает видеоролики. Но помните, что это должно быть к месту.
-
Польза для посетителей
Даже если пользователь оказался на странице, где выдается ошибка сервера 404, у него все равно должна быть возможность дальше пользоваться вашим сайтом. Не делайте 404 страницу чисто информационной. Разместите на ней поисковую строку, ссылку на основную страницу, карту сайта, сформируйте перечень популярных материалов. Также многие ресурсы размещают у себя кнопку «Сообщить о битой ссылке».
-
Предложите альтернативу
Нередко на сайтах выводятся аналогичные или рекомендуемые записи. А интернет-магазины предлагают подобную продукцию, акции, скидки и т. п.
-
Настройте SEO
Лучше, если на сайте вообще не будут размещены внутренние ссылки на 404 страницы. Чтобы отслеживать мертвые ссылки, пользуются разными сервисами, например Google Search Console, где с ними можно ознакомиться во вкладке «Ошибки сканирования», или «Яндекс.Вебмастером» (раздел «Исключенные страницы»).
Как учесть поведенческие факторы при настройке отображения ошибки 404
Что делаете лично вы, когда, заходя на сайт за нужной информацией, видите белый экран с «404 Error. Page Not Found»? Как и другие пользователи, покидаете ресурс и уходите на другой.
Конечно, чем больше страниц на сайте выдают 404 ошибку, чем чаще перед пользователями всплывает эта информация, тем меньше посещений. Поисковые системы работают по особому алгоритму, где поведенческие факторы играют очень важную роль и влияют на ранжирование.
Чтобы поведенческие факторы не ухудшались, нужно стимулировать пользователей оставаться на сайте. Для этого важно правильно создавать 404 страницу, используя креативные идеи.
Для удержания пользователя на сайте следует задуматься над разработкой своей 404 страницы, которая отображалась бы в случае ошибки.
Нередко веб-мастера вовсе игнорируют ее. В итоге гости видят следующее:
Страница должна решать такие задачи:
-
привлекать внимание посетителей;
-
объяснять им, в чем дело;
-
показывать варианты устранения проблемы.
В отношении своей страницы 404 поисковики советуют следующее:
«Яндекс»:
-
внешний вид страницы должен отличаться от других страниц на сайте;
-
при создании страницы пользуйтесь другой цветовой гаммой и не применяйте графику.
Google:
-
стиль страницы (в том числе, навигация) должен быть таким же, как на основном сайте;
-
на странице нужно размещать ссылки на самые популярные материалы или разделы комментариев;
-
предоставьте посетителям возможность сообщать о мертвых ссылках.
Общие рекомендации:
-
в странице не должно быть ссылки на главную страницу;
-
вежливо и четко объясните пользователю, что к желаемой странице нет доступа.
Скачайте полезный документ:
Чек-лист: Как добиваться своих целей в переговорах с клиентами
Все приведенные нами советы, как устранить ошибку 404, — не безоговорочные правила. Все зависит от тематики и ЦА ресурса. К примеру, для интернет-магазина лучше добавить строку поиска, для сайта услуг — контактную информацию. Представители старшей возрастной категории вряд ли обрадуются при виде такой страницы. Но для сайта, целевая аудитория которого состоит из молодых девушек и парней — поклонников компьютерных игр, она будет уместна.
Если ответ сервера настроен правильно, а страница с ошибкой 404 разработана грамотно, у ресурса не будет проблем даже при большом количестве страниц с 404 ошибкой. Не старайтесь обмануть поисковики и юзеров через настройку редиректов, отсылающих к нерелевантным страницам. Пользуясь удобным для себя методом, вы всегда сможете отслеживать мертвые ссылки и понимать, как их устранять.
Примеры оригинального, креативного оформления страниц с ошибкой 404
Статья опубликована: 09.01.2019
Облако тегов
Понравилась статья? Поделитесь: