«Страница не найдена», «Упс…Такой страницы нет», «Страница, которую вы ищете, не найдена» – все это ошибка 404, которая возникает, когда ресурс, который мы хотим открыть, по каким-то причинам более не доступен.
Вы наверняка не хотели бы, чтобы посетители вашего сайта часто видели страницу 404. Особенно в ситуации, когда они только знакомятся с вашим брендом.
Мы не в силах предотвратить попадание на страницу 404, но мы можем сделать так, чтобы эта страница создавала хорошее впечатление о нашем бизнесе.
Даже лучше. Страница с ошибкой 404 могла бы заставить пользователей улыбнуться и почувствовать, что они оказались в правильном месте.
Как это возможно? Ответ читайте в нашей статье.
Страница с ошибкой 404 – что это?
Страница 404 – это страница, которую видят пользователи, когда их веб-запрос генерирует ошибку 404 – код HTTP-статуса, указывающий, что страница, которую мы пытаемся открыть, не существует.
Чаще всего такая страница появляется, когда URL-адрес напечатали с ошибкой или нажали на битую ссылку, которая ведет к несуществующей странице. Еще одна причина – владелец сайта решил удалить страницу или переместил ее в другое место, но забыл настроить переадресацию.
Как сделать страницу 404 – основные правила
- Дизайн страницы должен соответствовать оформлению сайта. Страница с ошибкой 404 не должна выделяться на фоне остальных страниц.
- Сделайте страницу удобной в навигации. Добавьте ссылки на главную страницу и основные разделы сайта.
- Следует поработать над формулировкой текста. По понятным причинам здесь не может быть много текстовой информации – это не продуктовая страница и не статья блога. Абсолютный минимум – объяснить, что это за страница, почему пользователь попал на нее и что делать, чтобы выйти оттуда.
- Добавьте прямую ссылку для контакта с командой техподдержки – предоставьте пользователю возможность сообщить об ошибке. Так вы покажете, что голос и мнение аудитории для вас очень важны.
Страница 404 – это такая же полноценная страница сайта, как и остальные, и ее созданию следует уделить не меньше внимания, чем другим. Почему?
Потому что это препятствие, о которое «спотыкается» лид, и если страница не оптимизирована, то она становится источником утечки трафика. Пользователь просто закрывает сайт и уходит на другие ресурсы. Ваша задача – всеми силами удержать его и направить на другие полезные страницы.
Зачем оптимизировать страницу 404?
- Шаблонная страница с ошибкой 404 понижает уровень доверия клиента к компании. Он может подумать, что сайт не работает, и выберет другой ресурс.
- Утечка трафика из-за некачественной страницы 404 является сигналом для поисковых систем и намеком в пользу того, что ваш ресурс не имеет ценности для аудитории.
Многие страницы 404 банально информируют о том, что запрашиваемый контент не существует. Но некоторые компании подходят с юмором к их созданию и делают их веселыми и запоминающимися.
Итак, давайте взглянем на список примеров. Мы собрали коллекцию интересных страниц 404 и сопроводили их комментариями от знакомых маркетологов, к которым мы обратились за помощью.
А вы знали? В бесплатном конструкторе сайтов GetResponse вы можете создать не только страницу 404, но и целый сайт! Вместе с интуитивным редактором вы получаете коллекцию готовых шаблонов, а мастер настройки с искусственным интеллектом может собрать весь сайт всего в несколько нажатий. Чтобы узнать больше об этом инструменте и начать дизайн страницы 404 уже сегодня, посмотрите эту видеоинструкцию.
1. Ultimate Guitar
Фоновый видеоряд страницы 404 идеально подходит под тематику сайта.
На сайте собрана коллекция нот и нотных тетрадей. Пополняется она за счет музыкальных экспертов и случайных пользователей. Каждому загруженному экземпляру можно поставить оценку: так вы узнаете, какие нотные тетради особенно ценные и качественные.
Есть премиальные расширения, благодаря которым вы получаете доступ к экспертному контенту, включая видеоинструкции и пошаговые справочники, а также официальные сборники нот. По таким источникам вы можете самостоятельно разобрать любую песню в буквальном смысле “по нотам”.
Визуализация страницы 404 каждый раз меняется: парень с гитарой совершает прыжок, чтобы показаться круче, но в конечном итоге смешно падает, или, например, еще один гитарист пытается впечатлить публику, раскручивая гитару вокруг головы, в результате чего она улетает со сцены (и ломается).
Хабиб Курди, старший копирайтер в GetResponse
Главные выводы:
- Вовлеченность поддерживается даже без особого текста. Споткнувшийся гитарист или гитарист, потерявший гитару, находят отклик в душе музыкантов, передают вайб, который перекликается с содержанием сайта.
- Чудаковатые видео говорят посетителям “эй, нет ничего страшного в том, что вы попали на несуществующую страницу”.
- Что насчет текста? Да, он предельно прост и по существу. “Упс” – это стандартное восклицание, которое означает досаду от неудачи. Чуть ниже ссылка на главную страницу (простота навигации), а также ссылка “сообщить о проблеме”. Наконец, 2 cta-кнопки, которые дублируют ссылки выше, но делают их более удобными для клика.
2. Wizarding World
Обычно страницы 404 выбиваются из общей тональности сайта. Страница 404 Wizarding World является исключением.
Вы видите кадр, где Гарри Поттер впервые использует каминную сеть для трансгрессии. В этот раз он вместо Косого переулка оказался внутри мрачной лавки волшебника “Горбин и Бэркес” на малоизвестной улочке.
Изображение полно загадок, которые под силу разгадать истинным фанатам Гарри Поттера. Похожие ребусы можно найти на страницах сайта Wizarding World.
Чуть ниже вопрос-обращение “Бедный, ты заблудился?” Это в духе миссис Уизли: она часто задается похожими вопросами, когда встревожена чем-то. Здесь мы видим ее в центре фотографии в кругу семьи.
Все эти приемы создают эффект погружения, и страница 404 не выделяется из общей атмосферы сайта. Создается впечатление, что пользователь попал сюда не случайно.
Чуть ниже размещена кнопка с призывом “Вернуться в Wizarding World” (“Вернуться в мир волшебства”), что дает двусмысленность: вернуться на основной сайт или вернуться в мир волшебства?
Никола Роза, владелец бизнеса Nikola Roza – SEO for the Poor and Determined
Главные выводы:
- Вплетайте страницу 404 в дизайн и тональность сайта.
- Оформляйте ее в соответствии с элементами вашего брендинга.
- Навигация должна быть понятной, желательно разместить кнопку, нажав на которую вы без труда покинете страницу.
3. Wendy’s
Вместо того чтобы придумывать стандартную скучную страницу 404, владельцы международной сети ресторанов быстрого питания Wendy’s решили по максимуму проявить здесь индивидуальность бренда. Текст находится под дождем из фирменных бургеров Wendy’s.
На странице у вас 3 опции: открыть меню Wendy’s, просмотреть доступные вакансии или поиграть в милую игру, стилизованную под Wendy’s, в процессе которой, признаемся, у нас разыгрался аппетит и захотелось отведать наггетсов и картошки фри.
Это далеко не скучная страница 404 – вы ее точно запомните. Она олицетворяет образ компании Wendy’s, которая любит веселье и бургеры.
Ада Дужиньска, эксперт по контент-маркетингу в GetResponse
Главные выводы:
- Постарайтесь персонализировать страницу 404, добавив индивидуальности бренда.
- Появление страницы 404 – это не самое приятное событие, но вам под силу добавить позитива.
4. Omelet
Это креативное агентство занимается маркетинговыми проектами, и ее проект по созданию собственной страницы 404 оказался очень удачным.
Страница загружается анимацией разбивающегося яйца. Кричаще-красный цвет сообщения привлекает внимание, а игра слов (eggstinct => extinct – “не существует”) делает отсылку к теме яйца (egg – “яйцо”) – обратите внимание на название агентства – Omelet (омлет).
Это слово активно используется в кампаниях контент-маркетинга, где услуги Omelet скромно описываются как eggstinctly brilliant. Сайт Omelet заявляет: “Иногда вам приходится вскрыть (crack open – аналогия с “разбить яйцо”) плохую идею, зажарить ее и подать на блюде с толикой сарказма”.
Omelet – это креативное агентство, которое отличается от других. Они берут обычную идею и переворачивают ее с ног на голову, создавая искрометные кампании, заставляющие людей думать (и смеяться).
Рональд Самсон, аналитик-исследователь в CreditDonkey
Главные выводы:
- Подгоняйте страницу под оформление и атмосферу сайта.
- Добавьте немножко юмора.
5. Canva
Canva – это платформа для творчества и графического дизайна. Их страница 404 очень простая и одновременно интригующая. Вы можете вернуться на главную страницу или остаться и решить головоломку. Во время игры вы в очередной раз понимаете, почему Canva так популярна – вы получаете доступ к ярким шаблонам и красивым элементам дизайна.
Эта страница ставит своей целью не конверсию, а развлечение посетителя. Простая структура страницы избавляет от вопроса “как отсюда выбраться” – вы без труда можете вернуться на главную страницу и продолжить работу.
Вещи, которые нам не очень понравились: скучный текст и отсутствие ссылок на основные разделы сайта. Еще, судя по картинкам, такое впечатление, что эта страница давно не обновлялась.
Ада Дужиньска, эксперт по контент-маркетингу в GetResponse
Главные выводы:
- Простота – залог успеха. Но не забывайте про навигацию.
- Не бойтесь показать здесь свои самые лучшие стороны (например, дизайн в Canva).
- Регулярно обновляйте страницу 404.
6. Slack
Slack – это платформа для деловой коммуникации, которая хорошо понимает ценность баланса между работой и личной жизнью. Страница 404 прекрасно отражает эту философию. Текст выглядит успокаивающе и направляет в Справочный центр.
Присутствуют также элементы навигации. Но отдельно хочется отметить идиллический анимированный пейзаж. Открывается живописная сцена: летают бабочки, кругом цветы и радуга.
Более того – она интерактивна. Вы можете прокручивать пейзаж слева направо и гладить цыпленка и поросенка, которых встречаете по пути. Это одна из самых успокаивающих страниц 404.
Ада Дужиньска, эксперт по контент-маркетингу в GetResponse
Главные выводы:
- Настройте четкую навигацию.
- По возможности предложите помощь и направьте в центр поддержки.
- Битые ссылки и несуществующие страницы раздражают. Старайтесь сгладить негативные эмоции пользователя, используя вежливые формулировки.
7. Airtable
В мире, помешанном на скроллинге, нижняя часть сайта становится самым ценным активом.
Мне нравится, что Airtable не стали изобретать велосипед и выбрали навигацию, знакомую посетителям сайта. Они предлагают связаться со службой поддержки, а это очень важно для “потеряшек”. Этот прием устраняет неприятный осадок от попадания на несуществующую страницу.
Том Баррагри, менеджер по продуктовому маркетингу в GetResponse
Главные выводы:
- Не забывайте про навигацию в футере сайта.
- Добавляйте четкие CTA-кнопки.
- Совет: можно делать персонализированные предложения на основе посещенных ранее страниц.
8. Ueno
Кто еще мог придумать изобразить бегущий хот-дог, чтобы вызвать у вас удивление и смех? Только Ueno.
Этот хот-дог, в свою очередь, напоминает нам, что техподдержка, скорее всего, так и не получила сообщение с просьбой исправить ошибку на странице. Спасибо за хорошее настроение, Ueno!
Брукс Конкл, владелец BrooksConkle
Главные выводы:
- Несуществующая страница расстраивает, поэтому ваша задача – исправить это.
- Смех продлевает жизнь – добавьте юмора.
9. Figma
Figma – платформа для графического дизайна и создания прототипов – креативно подошла к дизайну своей страницы 404. На первый взгляд, это стандартная страница с ошибкой 404.
Но если приглядеться, то можно заметить, что цифры 404 можно редактировать. Вы можете бесконечно долго менять их очертание и форму. Даже если вы попали сюда по ошибке, не зная ничего о компании, вы можете наглядно посмотреть, что из себя представляет ее инструмент, играясь с цифрами.
Здесь есть также полоска навигации вверху, откуда вы можете попасть в любой раздел сайта. Черная CTA-кнопка “зарегистрироваться” выделяется на белом лаконичном фоне. Это один из наших любимых примеров того, как познакомить посетителя с фирменным инструментом.
Ада Дужиньска, эксперт по контент-маркетингу в GetResponse
Главные выводы:
- Представьте, что страница 404 – это первое знакомство клиента с вашим брендом. Это отличная возможность подойти с креативом и наглядно представить свои продукты или услуги.
10. GetResponse
Мы считаем, что это отличный пример качественной страницы 404.
Тон высказывания и внешний вид полностью соответствуют философии бренда. Это проявляется в цветовой схеме, желтом подчеркивании, шрифтах и формулировках текста.
Хотя это страница ошибки, мы хотели, чтобы пользователь покидал ее с улыбкой на лице. Поэтому придумали эту карикатурную картинку, объясняющую, что что-то пошло не так.
Также мы хотели, чтобы пользователи знали, что им делать дальше. Есть ссылка на главную страница и подсказка проверить URL-адрес на предмет опечаток.
В нижней части страницы мы добавили дополнительные разделы, которые делают взаимодействие с этой страницей приятнее (и потенциально увеличивают конверсии). Мы разместили ссылки на лучшие статьи, ссылку на страницу с описанием инструментов платформы, а также на страницу регистрации.
Как еще можно оптимизировать эту страницу? Добавить строку поиска рядом со ссылкой на главную страницу. И хотя эта страница – не самый лучший вариант для повышения конверсий или подписок, мы надеемся, что она делает все, чтобы поднять настроение посетителей.
Михал Лешчиньски, глава отдела контент-маркетинга и партнерств в GetResponse
Главные выводы:
- Если меняете элементы брендинга, меняйте и страницу 404, чтобы она соответствовала нововведениям.
- Привнесите юмор в создание страницы.
- Анализируйте, насколько странице 404 удается повышать конверсии и поднимать настроение аудитории.
11. Lego
Иногда продукта, который вы ищете, больше нет. Конечно, это грустно. И если большинство компаний принимают этот факт и извиняются.
Lego идут другим путем: они убеждают, что переживать не стоит, жизнь по-прежнему прекрасна. Ниже четкий призыв к действию “Приступить к покупкам”.
Ирек Климчак, старший менеджер проектов в отделе контент-маркетинга GetResponse
Главные выводы:
- Проявляйте эмпатию.
- Помогите посетителю сохранить спокойствие.
- Предложите четкое решение.
12. Bouncer
Эту страницу 404 точно не назовешь обычной. После попадания туда мы сразу понимаем, что оказались не в том месте. Горилла – талисман Bouncer – предстает в интимной обстановке, а текст лишь подтверждает наши догадки.
Здесь два призыва к действию:
1) вернуться на главную страницу
2) стать опекуном гориллы при посредничестве Всемирного фонда дикой природы.
Второй призыв визуально более заметный и указывает на приоритеты компании (шутка!).
Чуть ниже ссылки на свежие посты блога на случай, если мы хотим узнать больше о доставляемости писем.
Эта страница соответствует общей тональности сайта.
Радек Качиньски, директор Bouncer.
Главные выводы:
- Добавляйте четкие призывы к действию.
- Мыслите нестандартно, например, предлагайте поддержку для благородной цели.
- Используйте символ компании, чтобы «очеловечить» страницу.
- Создавайте страницу 404 в соответствии с философией компании.
- Добавляйте в нижней части страницы ссылки на полезный контент (например, на посты блога).
13. NASA
У NASA очень красивая профессионально выполненная страница 404. Текст «Космический объект, который вы искали, исчез за горизонтом событий» и фоновое изображение загадочной галактики очень подходят космическому агентству.
Здесь нет уловок, вы можете продолжить просматривать сайт NASA, нажав на ссылки в строке навигации. Никто не пытается заставить вас задержаться на этой странице, однако у создателей получилось привлечь внимание.
Ада Дужиньска, эксперт по контент-маркетингу в GetResponse.
Главные выводы:
- Если есть возможность адаптировать текст и дизайн страницы под специфику вашего бизнеса, обязательно воспользуйтесь ею. Благодаря единообразию темы вы поддерживаете вовлеченность аудитории и повышаете свой авторитет.
Время создать страницу 404
Как вы успели заметить, несуществующие страницы – это далеко не редкое явление. Многие маркетологи научились извлекать из них пользу для бизнеса.
Одни пытаются изменить негативное восприятие этой страницы на положительное – оставляя забавное сообщение или добавляя интерактив.
Другие пытаются протянуть руку помощи – добавляют полезные ссылки, кнопку перехода на главную страницу или строку поиска – чтобы пользователь нашел контент, который ищет или который будет ему интересен.
А еще есть маркетологи, которые пытаются с помощью этой страницы повысить продажи и конверсию.
Примеры страниц в этой статье послужат вам источником вдохновения. У вас обязательно получатся чудесные и запоминающиеся страницы 404.
Если вы в самом начале пути и еще не обзавелись сайтом, советуем прочитать нашу статью.
Там мы пошагово объясняем, какие аспекты вам нужно учесть, если вы хотите иметь собственный сайт – это может быть сайт на базе WordPress, требующий продвинутых ручных настроек, или сайт на базе интуитивного блочного редактора вроде конструктора GetResponse.
Если вы еще не слышали об этом новом инструменте GetResponse, посмотрите краткую видеоинструкцию.