Как оформить страницу ошибки 404

ГлавнаяCRM и бизнес-процессыСтраница ошибки 404: как оформить, чтобы избежать оттока пользователей

CRM и бизнес-процессы

Дизайн

Содержание

• Ошибка 404: что это значит?
• Почему нужна отдельная страница для 404 ошибки
• Как создать страницу с уведомлением об ошибке 404
• Как оптимизировать страницу 404 ошибки
• Примеры отличных 404 страниц для сайта
• Как избегать ошибок на сайте

Расскажем, что такое ошибка 404, почему она возникает и как оформить под неё страницу, чтобы не терять посетителей сайта. Объясним, как найти ошибки на сайте и предотвратить их появление.

Подпишись на Telegram

Подписаться

Ошибка 404: что это значит?

Иногда при переходе по ссылке вместо страницы сайта на экране появляется надпись: «Страница не найдена. 404 not found. Ошибка 404». Это значит, что такой веб-страницы нет или у неё поменялся адрес.

Пример страницы 404 на сайте Lenta.ru

Почему возникает ошибка 404:

• в URL ссылки была допущена ошибка;
• был изменён URL-адрес страницы;
• сайт временно не работал или вообще не существовал;
• неправильно сработал сервер;
• веб-страницу удалили.

Иногда владельцы сайтов не догадываются о таких ошибках. Особенно сложно следить за корректностью ссылок на крупных порталах с тысячами страниц. Поэтому пользователи периодически сталкиваются с надписью «404 Page Not Found». Иногда страница 404 появляется из-за ошибки самого пользователя, если он вводит или корректирует URL-адрес вручную.

Почему нужна отдельная страница для 404 ошибки

При вводе URL в строке браузера вручную возможны неточности и опечатки. Пользователи так или иначе могут столкнуться с ошибкой 404 на любом сайте. Если не задать такую страницу, посетитель не поймёт, что произошло, почему по ссылке не открылась ожидаемая страница. Для страницы с ошибкой 404 нужно придумать интересное оформление, оптимизировать её, чтобы пользователи не покидали сайт.

Хотите освоить сквозную аналитику?

Посетите регулярный мастер-класс по аналитике от Roistat.

Подключиться

Грамотно настроенная страница 404 поможет:

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

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

Во многих CMS стандартная страница 404 создаётся автоматически для любых страниц, кроме одностраничных сайтов-визиток. Или можно создать дизайн этой страницы самостоятельно. Для создания страницы нужно продумать веб-дизайн и призыв к совершению целевого действия. Это может быть ссылка на каталог товаров или строка поиска, чтобы найти нужную страницу.

Чтобы добавить страницу на сайт:

1. Перенесите шаблон страницы ошибки 404 в корневую папку сайта.
2. Откройте файл .htaccess и пропишите код: ErrorDocument 404 http://АДРЕС_САЙТА/404.html
3. Впишите код в любую свободную строку, залейте на хостинг и проверьте: совершите ошибку в какой-нибудь ссылке, например, удалите букву. Вместо стандартного шаблона 404 должен отобразиться новый вариант. Если нет — проверьте правильность кода, возможно, была допущена ошибка.

Некоторые CMS автоматизируют процесс создания страницы об ошибке: например, в WordPress это можно сделать с помощью плагина 404page. Плагин может кастомизировать страницу на разных темах. Для его установки нужна версия WordPress от 4.0.

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

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

Советы по созданию страницы 404:

1. Будьте доброжелательны. Расскажите посетителю, что страница удалена или произошла ошибка, помогите вернуться на основные страницы сайта.
2. Предложите посетителю проверить точность адреса или дайте ссылки на разделы, которые были недавно перемещены.
3. Дайте ссылки на продукт или статьи, релевантные поиску. Для этого нужно знать, на какую страницу пользователь пытался перейти. Это можно сделать, когда в URL указан раздел или категория.
4. Сделайте страницу полезной: дайте возможность скачать книгу или перейти на статьи в блоге, которые рассказывают о ценности продукта.
5. Не ограничивайтесь забавной картинкой. Добавьте ссылку на главную страницу сайта, блог, каталог или афишу событий компании.
6. Предложите посетить страницу с акциями, спецпредложениями.
7. Разместите строку поиска, чтобы посетитель сайта мог найти то, что он искал. Например, модель телефона в интернет-магазине или статью на новостном портале.
8. Покажите посетителю квиз или мини-игру. Это отличный способ свести негативное впечатление пользователя к минимуму.
9. Выдержите единое оформление, чтобы страница 404 не отличалась от остальных страниц сайта.

Рассказали, как квиз-маркетинг помогает пользователям совершить покупку.

Примеры отличных 404 страниц для сайта

Пусть подборка классных примеров вдохновит вас на создание собственного креативного шаблона страницы 404.

У McDonalds на странице 404 есть навигация по сайту и даже форма для подписки на рассылку:

Пример страницы 404 на сайте McDonalds

На странице 404 блога Roistat пользователю предлагается вернуться на главную страницу блога, перейти в нужный раздел или воспользоваться кнопкой обратного звонка:

Пример страницы 404 в блоге Roistat

На странице 404 для основного сайта Roistat отсутствие страницы нивелируется подарком для пользователя. Дополнительно посетитель может прочитать кейсы работы с сервисом:

Пример страницы 404 на сайте Roistat

На сайте Спортмастера использована забавная тематическая картинка, есть ссылки на главную страницу, каталог товаров и поисковая строка:

Пример страницы 404 на сайте Спортмастер

Ещё одна страница известного интернет-магазина Lamoda. Кроме навигации и строки поиска, пользователям предлагают популярные товары:

Пример страницы 404 на сайте Lamoda

Тинькофф предлагает простую страницу, на которой сообщается об ошибке и даются ссылки на основные услуги банка:

Пример страницы 404 на сайте банка Тинькофф

Страница об ошибке у ресторана KFC очень лаконичная страница. Пользователю предлагают всего 2 кнопки с простым CTA — «Заказать еду» и «Найти ресторан»:

Пример страницы 404 на сайте KFC

Как избегать ошибок на сайте

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

Рассказали, как SEO-аудит помогает оптимизировать работу сайта.

Упростить проверку сайта поможет услуга SEO-аудита от Roistat. Аналитики проверят страницы сайта, найдут ошибки и создадут список рекомендаций по их исправлению. На весь оплаченный период оптимизации сайта за вами будет закреплён веб-аналитик, который сможет ответить на все вопросы по работе с сайтом.

Хотите освоить сквозную аналитику?

Посетите регулярный мастер-класс по аналитике от Roistat.

Подключиться

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

Почему любому сайту нужна страница 404

Приемы создания страницы и лучшие примеры от сайтов на Тильде и в вебе

Tilda Education

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

Содержание

Зачем нужна страница 404
Приемы создания страницы 404: о чем стоит помнить
Как правильно сделать страницу ошибки на Тильде
Примеры классных страниц 404 на Тильде

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

Обычно такая ошибка возникает, когда человек вводит некорректный адрес сайта или переходит по несуществующей ссылке (например, вы удалили старую ссылку, а в поисковой индексации она осталась, и человек перешел).

Страница 404 может возникнуть на любом сайте, потому что ее невозможно проконтролировать полностью.

Зачем нужна страница 404

Кажется, что можно и обойтись без собственного дизайна страницы ошибки — что в этом такого?

На самом деле страница 404 нужна всем, и вот почему:

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

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

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

ifttt.com

www.dtelepathy.com

www.cosowinerestaurant.com

oak.is

www.hannabi.com

www.panicstudio.tv

panike.pt

outlane.co

Создать дизайн страницы 404 — способ по-человечески поговорить с вашим пользователем и вернуть его на сайт.

Приемы создания страницы 404: о чем стоит помнить

Объяснить посетителю, что происходит.

Вы можете уменьшить беспокойство человека, попавшего на страницу 404, если расскажете, как это могло произойти. Можно перечислить причины (например, ссылка устарела и ее убрали с сайта, или допущена ошибка в адресной строке), а также сделать ссылку на главную сайта или возможность выйти в меню.

solarcomplekt.com

www.uxsofia.com

marvelapp.com

Развлечь и рассмешить.

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

hugeinc.com

Тональность сообщения на странице ошибки зависит от позиционирования вашего бренда, но немного юмора никогда не помешает.

worrydream.com

www.pixar.com

renk-magazin.de

off-box.com

bakkenbaeck.com

emojibook.club

Вернуть пользователя на сайт.

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

builtvisible.com

theoryandpractice.ru

finely.co

mag.fieldsroads.ru

Сохранять свой стиль.

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

dropbox.com

hula-hoop.fr

intercom.com

airbnb.ru

Предупредить ошибку.

Лучший способ сделать так, чтобы пользователь не попал на страницу 404 — постоянно проверять «битые ссылки» на сайте. Если раз в месяц проверять потерянные статьи, видео, картинки и так далее, ваши пользователи будут все меньше попадать на страницу 404.

У Google и Яндекс есть бесплатные сервисы для веб-мастеров, которые помогают найти неработающие ссылки.

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

Создайте новую страницу сайта на Тильде.

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

Опубликуйте.

Перейдите в «Настройки сайта > Еще > 404 страница». Выберите из списка страницу, которую вы создали и сохраните.

Важно:

• Не задавайте адрес /404 — будет появляться стандартная ошибка Тильды
• Чтобы 404 заработала, вам нужно переопубликовать все страницы сайта

Какую информацию разместить на странице 404?

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

Какие блоки я могу использовать для создания страницы 404?

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

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

Как должна выглядеть моя страница 404?

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

danwoodger.com

bons.me

swelldesigngroup.com

robinhood.com

www.dogstudio.co

Примеры классных страниц 404 на Тильде

controforma. school

basetemplates.com

www.arenaslab.com

thewonderdesigns.com

www.togdazine.ru

happyfication.space

lab-w.com

Текст: Варя Гурова
Иллюстрации, дизайн и верстка: Юлия Засс

Если материал вам понравился, расскажите о нем друзьям. Спасибо!

Читайте также:

Продвижение по методу AARRR

Что такое UX дизайн?

Как привлечь новых пользователей с подходом Jobs To Be Done

Закон о защите персональных данных — как избежать штрафов

Впечатление о сайте — что повышает доверие пользователя в веб-дизайне

Визуальная иерархия сайта: оформление и организация контента

Персональный сайт личного бренда: как использовать Тильду для развития личного бренда

Бизнес в инстаграм: как увеличить продажи с помощью сайта

Как повысить конверсию сайта — 12 психологических приемов

Уникальное торговое предложение для сайта — как составить продающий оффер

Аналитика сайта — как повысить конверсию сайта, используя веб-аналитику

SEO продвижение сайта на Тильде самостоятельно — пошаговая инструкция

37 примеров, которые вам нужно увидеть

Эпическая страница 404, скорее всего, не принесет вашему бизнесу никаких наград. Я понимаю.

Но это показывает, что вы заботитесь о своих клиентах.

Отличная страница 404 может быть отличным способом продемонстрировать индивидуальность вашего бренда.

Но стоит ли тратиться на красивую страницу 404?

Может быть.

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

Использование ссылок, умной графики и остроумного текста может заставить их забыть, что вы (возможно) напутали, и вернуть их в нужное русло.

В свете важности страниц 404 ниже приводится список из 37 лучших примеров страниц 404, которые вы можете найти в Интернете.

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

Что такое страница 404?

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

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

Когда пользователи не могут получить доступ к странице, они не могут найти нужную им информацию.

Это также сообщает Google, что ваш сайт предлагает плохое обслуживание клиентов, что может привести к снижению трафика и снижению рейтинга.

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

Почему посетитель может попасть на страницу 404?

Почему пользователь может получить ошибку 404?

Причин несколько, в том числе:

• Сервер не работает.
• Страница перемещена, но не перенаправлена.
• Страница никогда не существовала.
• Пользователь неправильно ввел URL.
• URL-адрес не работает.

По сути, если пользователь пытается посетить страницу, которую не может найти, он будет отправлен на вашу страницу 404.

Какой смысл создавать страницу 404, которая выделяется?

Визуально привлекательная и удобная страница с ошибкой 404 показывает клиентам, что вы заботитесь об их опыте и заинтересованы в том, чтобы они оставались на вашем веб-сайте.

Когда все сделано правильно, хорошая страница 404 помогает пользователям простить вас за ошибку (даже если это была их собственная ошибка из-за неправильного ввода URL-адреса) и удерживает их на вашем сайте.

Отличная страница 404 может заставить пользователей улыбнуться и, самое главное, помочь им найти то, что они ищут.

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

Вот 37 лучших примеров хорошо выполненных 404 страниц.

1. Дисней

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

В них также есть KnowsMore, второстепенный персонаж в Ralph Breaks The Internet.

Оба символа подходят для страницы 404, но обратите внимание на то, что находится рядом с KnowsMore: маленькая панель поиска.

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

2. Drift

Drift — это инструмент конверсионного маркетинга и платформа продаж, которая предлагает инструменты для живого чата, целевых страниц и многого другого.

Копия на их странице 404 остается фирменной за счет упоминания «разговоров», но также помогает удерживать людей на веб-сайте Drift, предлагая ссылки на их домашнюю страницу, их блог и ссылки на некоторые из их самых популярных частей контента. .

В правом верхнем углу они также предлагают путь к конверсии, предоставляя кнопку Get Drift Free.

3. Help Scout

Help Scout предоставляет компаниям инструменты для программного обеспечения службы поддержки, поддержки клиентов по электронной почте и интерактивных баз знаний.

Как и Drift, их страница 404 предлагает ссылки на их блог и другие сообщения, но они используют симпатичную графику милых собак, чтобы люди улыбались.

4. Apartment Therapy

Apartment Therapy, сайт домашнего декора, шутит, что васи-лента (популярная бумажная лента, используемая в декорировании и скрапбукинге) не может исправить сломанное звено.

Чуть ниже сгиба они ссылаются на несколько популярных постов, чтобы заинтересовать посетителей сайта.

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

5. CoSchedule

CoSchedule, маркетинговый инструмент планирования, делает его простым с симпатичной собакой GIF и ссылками на их домашнюю страницу и блог.

Этот пример просто показывает, что вам не нужно тратить большие деньги, чтобы создать привлекательную страницу 404.

Это просто, но работает.

6. Sprout Social

Sprout Social, инструмент маркетинга в социальных сетях, действительно хочет удерживать своих клиентов на странице.

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

Затем появляется их чат-бот, чтобы узнать, что вам нужно.

Внизу они рекламируют свой информационный бюллетень.

По сути, они превратили свою страницу 404 в целевую страницу.

7. ConvertKit

Кто не любит собак?

ConvertKit упрощает задачу, предлагая фотографию собаки члена команды и ссылку на его домашнюю страницу.

Но они также сохраняют профессионализм, предоставляя свой онлайн-чат и CTA для бесплатной регистрации.

8. Screaming Frog

Screaming Frog — это инструмент, разработанный, чтобы помочь владельцам сайтов находить и исправлять неработающие ссылки. блог, контактная страница и услуги.

В отличие от других 404 страниц в списке, эта не статична.

Мухи летают по странице, рыбки плавают, кувшинки крутятся.

Это небольшое изменение, но оно делает страницу более продуманной.

9. Moz

Moz упрощает задачу благодаря камео Роджера Мозбата, талисмана бренда.

Его присутствие на бренде и простой способ заставить большинство людей улыбнуться.

Moz также предоставляет вам панель поиска по сайту, чтобы вы могли найти то, что ищете.

10. BigCommerce

Страница 404 BigCommerce предлагает многие из тех функций, которые мы видели раньше — CTA для связи, запрос демонстрации и простой способ изучения сайта.

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

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

11. Kinsta

Kinsta, облачная хостинговая компания WordPress, использует аналогичный подход к BigCommerce, предлагая хорошо продуманное изображение на странице 404.

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

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

12. Lego

Lego делает его легким, используя большое изображение человечка Lego вместе с шуткой «Извините, мы не можем найти эту страницу! Не волнуйтесь, хотя все ПО-ПРЕЖНЕМУ УДИВИТЕЛЬНО!» это отсылка к песне из фильма «Лего».

Они также предлагают ссылку на свой магазин, чтобы пользователи оставались на сайте.

13. Slack

Страница 404 Slack невероятна.

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

Он также становится черно-белым, если вы переходите на другую вкладку, что, к сожалению, затрудняет получение снимка экрана.

Зайдите на их сайт, чтобы получить полный опыт.

14. Мейлчимп

Инструмент для работы с электронной почтой Mailchimp делает его простым, но умным, с их анимированной страницей 404, на которой животное ищет в норе, предположительно, потерянную страницу.

Это умно и показывает, что их страница 404 не является второстепенной.

15. okta

Okta — компания по управлению облачным доступом, базирующаяся в Сан-Франциско.

Их страница 404 довольно проста, но мне очень нравится, что они предлагают причины, по которым ссылка может быть неработающей, что помогает пользователям понять, что могло пойти не так.

16. Swiss

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

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

Это интересная функция, которая продержала меня на их странице 404 дольше, чем мне хотелось бы признать.

17. Волшебный мир

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

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

18. Southwest

Вот еще одна страница 404, которая заставила меня улыбнуться — во-первых, они используют ссылку на «Звездные войны», что делает ее легкой.

На странице также есть движущаяся жезл, которым пользуются авиадиспетчеры, направляющие самолеты на взлетно-посадочную полосу.

Рядом с изображением Southwest предлагает быстрые ссылки, чтобы помочь пользователям найти то, что им нужно.

Он функционален, но выделяется.

19. 9GAG

9GAG, онлайн-платформа для мемов и видео, использует полностью фирменный GIF для своей страницы 404 и предлагает единую ссылку, которая направляет пользователей в их приложение.

Это просто, но сохранение бренда гарантирует, что посетители сайта будут знать, что они на правильном сайте, несмотря на то, что они не находят страницу, которую искали.

20. Flywheel

Flywheel, управляемая хостинговая компания WordPress, предлагает эту причудливую страницу 404, чтобы люди знали, что они попали не на ту страницу.

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

Как и некоторые другие бренды, они также предлагают функцию чата, чтобы помочь пользователям, которые заблудились.

21. Дэн Вуджер

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

Обратите внимание, что он не упоминает, что это страница 404, и не дает никакой другой информации, кроме ссылки на свою работу.

Этот пример показывает, что отличная страница не обязательно должна быть сложной.

22. Дистиллированный

Многие бренды звонят на страницу 404. Они считают, что не многие люди увидят страницу, так что какое это имеет значение.

Но демонстрация стиля вашего бренда на (кажущейся) незначительной странице имеет большое значение.

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

Distilled использует изображение, похожее на инфографику, чтобы объяснить, что это за страница и что могло пойти не так.

23. Taco Bell

Taco Bell известен своей непочтительностью. Их страница 404 не исключение.

На странице изображен танцующий тако, который соскальзывает и расплескивает начинку, а затем зачерпывает ее обратно в скорлупу.

Это забавное напоминание о том, что они знают, что что-то пошло не так.

Страница также содержит ссылку на домашнюю страницу сайта, меню, адреса и места, где можно купить подарочные карты и товары.

24. Магнит

Magnt предлагает простой в использовании конструктор и инструменты для создания сайтов, и они гордятся тем, что они лучше, чем ваш стандартный конструктор веб-сайтов на основе шаблонов.

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

25. Dribble

Dribble, креативная торговая площадка для дизайнеров, предлагает полнофункциональную страницу 404.

Пользователи могут перетаскивать точку под шрифтом 404, чтобы изучить дизайнеров в определенном цветовом диапазоне.

Нажав на блоки, из которых состоят числа 404, вы перейдете к этим конкретным дизайнерам.

Они также предлагают панель поиска для пользователей, которые предпочитают искать сайт таким образом.

26. Overflow

Личность Overflow размещена в центре страницы 404.

Их разговорный тон и юмор приветливы и гостеприимны, что вызывает у меня желание вернуться на их домашнюю страницу.

И тот же голос и тон передаются на главной странице.

27. Wendy’s

К настоящему моменту вы, наверное, смеялись над одним или двумя твитами от Wendy’s.

Но, как и в случае с Overflow, Wendy’s продолжает вести тот же голос и тон на своем веб-сайте, даже на своей странице 404.

Они создали интерактивную видеоигру для пользователей, похожую на Pac-Man на своей странице 404.

Посмотрим, сможешь ли ты довести Венди до конца!

28. Ред Булл

Страница 404 Red Bull — мечта любого специалиста по поисковой оптимизации или маркетингу.

Он битком набит ссылками на статьи и список воспроизведения видео.

Red Bull даже меняет список воспроизведения видео для своего последнего события.

На изображении выше видно, что компания Red Bull использовала в качестве источника вдохновения мероприятие Red Bull Big Wave 2020 по серфингу.

29. Blizzard

Blizzard Entertainment, создатели World of Warcraft, также известные как WOW, если вы такой же компьютерщик, как я. 🤓

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

30. Marvel

Marvel использует различных персонажей комиксов, таких как Капитан Америка, Дэдпул и т. д., на вращающейся странице 404.

Небольшой совет: продолжайте нажимать кнопку «Обновить». Каждое третье обновление Marvel будет показывать новый визуальный ряд.

31. Patagonia

Patagonia висит на странице 404, подчеркивая свою непринужденную тропическую атмосферу.

Сначала они вовлекают зрителя в цикл видео, а затем направляют пользователя дальше вниз по странице к ссылкам на популярные категории покупок.

32. Backcountry

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

33. Nintendo

Nintendo не хватает некоторых визуально привлекательных элементов, что меня удивило, знаете ли, тем, что это Nintendo и все такое.

Но важно то, что Nintendo добавляет ссылки на ресурсы для пользователя.

Это заставляет пользователей оставаться на веб-сайте и не возвращаться к поисковой выдаче.

34. Zillow

Zillow предлагает пользователям, ищущим дома, интерактивные преимущества в формате GIF.

Zillow использует данные о клиентах, чтобы узнать, являются ли их пользователи любителями домашних животных.

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

Как любитель животных, я могу это понять!

35. Блок H&R

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

36. World of Warcraft

Команда World of Warcraft признательна своим читателям за их навыки, пошутив о CDN и выше сгиба.

37. Playstation

Playstation похвалила одну из своих новых игр на странице 404.

Кроме того, они позволяют вернуться на домашнюю страницу или получить совет в справочном центре.

Резюме

В идеальном мире никто никогда не увидит ваши 404 страницы.

Они останутся спрятанными далеко, как сумка с вещами Риза, которую я прячу в шкафу. Вы знаете, в трудные времена.

Но в реальном мире всякое случается.

Ссылки обрываются, толстые пальцы проскальзывают, а иногда просто забываешь перенаправить страницу. Начните с использования такого инструмента, как Screaming Frog, чтобы найти неработающие ссылки.

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

Дополнительные ресурсы:

• Ошибки 404 и Soft 404: в чем разница и как их исправить
• Как сопоставить URL-адреса 404 в масштабе с вложениями предложений
• Техническое SEO-руководство по перенаправлениям

Кредиты изображений

Рекомендуемое изображение: Создано автором, август 2020 г.
Все скриншоты сделаны автором, август 2020 г.

Категория
Цифровой опыт
Web Dev SEO

44 невероятных страницы с ошибкой 404

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

Мы всегда хвалим преимущества хороших стратегий во время простоя. Другим аспектом этого является забота о посетителях, если они попадут на старую страницу или неработающую ссылку. Вот почему мы рекомендуем немного подумать над страницами ошибок с уровнями 400 и 500.

Умная или привлекательная страница с ошибкой подкрепляет сообщение вашего бренда и увеличивает шансы посетителей остаться на вашем сайте, а не вообще щелкнуть.

Что такое страница ошибки 404?

Страница ошибки 404 — это веб-страница, предназначенная для отображения, когда запрос вызывает код ответа HTTP 404. Этот код означает, что клиент (или «посетитель») смог найти сервер, но не конкретный пункт назначения. Другими словами, они нашли ваш сайт, но не конкретную страницу вашего сайта. Таким образом, сервер отправляет вашему браузеру код ответа 404, сообщая им, что произошло. Если дизайнер сайта указал один, загружается страница ошибки 404.

Вот пример:

Посетите страницу состояния, и ваш браузер загрузит нашу главную домашнюю страницу. Вы нашли наш сервер. Добавьте правильное место назначения в конец этого URL-адреса, например, /pricing или /login, и ваш браузер загрузит это конкретное место назначения. Но попробуйте несуществующий пункт назначения, например /gibberish, и вы получите страницу 404. По сути, наш сервер говорит следующее: вы нашли меня, я вижу там свой URL-адрес, но конкретное место назначения, которое вы ищете после косой черты, — это страница, для которой у меня нет соответствия. Итак, вот эта страница с ошибкой, чтобы вы знали, что я не вижу в своем каталоге страницы, которая соответствует тому, что вы просите.

Самое замечательное в странице с ошибкой 404 то, что одна и та же страница загружается независимо от того, какая ошибка привела вас туда. Таким образом, любая из бесконечных комбинаций неверных расширений URL будет генерировать эту страницу при условии, что домен верхнего уровня, часть site-dot-com, не поврежден.

Существует две распространенные причины, по которым посетитель может попасть на страницу с ошибкой:

1. Они нажимают на ссылку, которая указывает на URL-адрес страницы, которой больше не существует
2. Они нажимают или вводят ссылку с ошибкой

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

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

А как насчет других страниц ошибок?

Хотя 404 является наиболее распространенным кодом ошибки, который видит большинство людей, это лишь одна из немногих ошибок, которые можно обслужить.

Любой трехзначный код ошибки, который начинается с 4, например 404, называется ошибкой уровня 400 и означает, что что-то пошло не так на стороне клиента. Клиент в этих отношениях — ваш веб-посетитель. Точнее, это их браузер. Поэтому имеет смысл, что неправильно написанный URL-адрес считается ошибкой клиента. Сервер (компьютер, на котором размещен сайт) работает нормально.

Другие распространенные ошибки уровня 400 включают:

• 400 Неверный запрос: запрос, отправленный на сервер, был неправильно сформирован или каким-то образом не соответствовал правилам синтаксиса.
• 404 Запрещено: Звучит зловеще. Но на самом деле все это означает, что запрошенный URL-адрес действителен, но у клиента нет необходимых разрешений для доступа к сайту. Это может произойти, когда вы пытаетесь перейти по URL-адресу сайта, для посещения которого необходимо войти в систему.

Другим распространенным набором кодов ошибок являются 500-уровневые коды. Там, где коды уровня 400 указывают на проблему с чем-то, что делает клиент, коды уровня 500 указывают на что-то неожиданное, происходящее на стороне сервера.

Некоторые из распространенных кодов уровня 500:

• 503 Служба недоступна: это стандартная ошибка «сервер недоступен». Обычно сервер не может ответить, потому что он перегружен или отключен для обслуживания.
• 504 Время ожидания шлюза: сервер действовал как шлюз для вышестоящего сервера, но вовремя не получил ответ от вышестоящего сервера.

Совет: Даже если на сайте нет страницы с ошибкой, вы можете увидеть коды ошибок в своем браузере. Например, в Chrome щелкните правой кнопкой мыши страницу и нажмите «Проверить». Вы увидите набор панелей инструментов разработчика. На вкладке «Консоль» вы увидите список любых кодов ответов HTTP, которые могут быть сгенерированы, а также кучу другой «внутренней» информации, которую сервер сообщает вашему браузеру.

Забавный факт: Существует и иногда используется малоизвестный код ошибки 451. Код предназначен для использования, когда доступ запрещен из-за юридического запроса, и является отсылкой к роману-антиутопии «451 градус по Фаренгейту».

44 невероятных примера страниц с ошибкой 404

1. 20th Century Fox

У такой компании, как 20th Century Fox, есть огромная библиотека запоминающихся материалов, которые можно использовать для вдохновения. Они взяли несколько клипов из своей любимой фильмотеки, таких как «Офисное пространство», «Месть ботаников» и «Эдвард Руки-ножницы». Нажмите на текст, и вы попадете на страницу, где вы можете купить собственную копию.

2. Amazon

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

3. Astuteo

Фирма веб-дизайна и цифрового маркетинга Astuteo привлекла большое внимание своей страницей ошибок на тему «Касабланки». Приземлитесь на их страницу с ошибкой сейчас, и копия делает умную ссылку на всех, кто ищет забавную страницу с ошибкой. Все еще смешно.

4. Batman 3-D

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

5. Benjamin Reid

Британская компания веб-дизайнера Бенджамина Рида Nouveller создала невероятную страницу ошибок, вдохновившись фильмом «Парк Юрского периода». Страница позволяет посетителям попробовать взломать компьютерную систему парка, основываясь на сцене, где персонаж Сэмюэля Л. Джексона пытается обойти систему безопасности, установленную коварным программистом парка.

6. Кампания Берни Сандерса

Вскоре после объявления своей кандидатуры на пост президента в 2016 году Берни Сандерс создал, вероятно, самую запоминающуюся страницу ошибок любого кандидата в президенты. На странице воспроизводится видео, в котором Сандерс объясняет, что пошло не так и как вернуться на домашнюю страницу. «Просто пролистните страницу вниз, и вы найдете дорогу домой, туда, где вы должны быть!»

7. Bitly

Интерактивность и анимационное искусство не обязательно должны быть чрезмерными, чтобы произвести впечатление. Страница ошибок Bitly переносит посетителей на существо, плавающее в море. Используйте свой курсор, чтобы заставить волны подпрыгивать и катиться. Удивительно успокаивающий и удовлетворяющий, почти заставляет вас чувствовать себя хорошо, когда вы теряетесь, как море.

8. Blizzard Entertainment

Blizzard Entertainment использует дизайн разбитого стекла на своей странице ошибки с дерзким текстом о том, что пользователь «сломал» страницу. Умная концепция, особенно для миллионов поклонников Blizzard, стреляющих цифровыми боеприпасами на своих экранах.

9. Bloomberg

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

10. Bluegg

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

11. Codecademy

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

12. Daniel Karcher

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

13. Дилберт

Комикс о Дилберте — отличный пример использования собственного контента в качестве материала для страницы 404.

14. Dogstudio

Dogstudio использует потрясающую библиотеку Giphy с изображениями животных, чтобы заполнить свою страницу ошибок постоянно меняющимися изображениями собак.

15. Восточный рынок

Людям нравятся игры с флэппи, в которых нужно нажимать или нажимать, чтобы летать по небу и избегать препятствий. На Восточном рынке Детройта размещена страница ошибки 404 с игрой под названием «Flappy Spud». Может быть, это тот же самый вид картофеля, который вы можете купить на рынке. Также приятно, что картофель взрывается в кучу картофеля фри, когда он ударяется о стену.

16. Emailcenter UK

Страницы ошибок — хорошее место, чтобы продемонстрировать некоторые члены команды вашей компании и их творческий потенциал. Для Emailcenter UK это означало интерактивную шутку об увольнении члена команды разработчиков. Это умный способ повеселиться как бренд и показать команду за кулисами, которая обычно не получает много фанфар.

17 . Google

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

Страница с ошибкой представляет собой простую иллюстрацию сломанного робота и копии. Но пасхальное яйцо находится в заголовке страницы, который вы видите на вкладке браузера. Сначала это выглядит как опечатка, но «!!1» — это отсылка к интернет-шутке о том, как быстро энтузиазм (!!!) может стать неряшливым (!!1). Обратите внимание на эту клавишу Shift, дети.

18. HeyZap

Люди любят винтажные видеоигры. Команда HeyZap уловила часть этой любви, закодировав версию классической аркады «Astroids» на своей странице ошибок. Выпустите несколько лазеров в летающие космические камни, и вы скоро простите того, кто отправил вас на мертвую связь.

19. Hot Dot Production

Hot Dot Production создала привлекательную интерактивную страницу ошибки 404 с гигантской плавающей анимацией «404». Щелкайте по частям чисел, и точки взрываются в пространстве и возрождаются.

20 Хьюго Боначчи

Страница ошибки разработчика и дизайнера Хьюго Боначчи при первом посещении выглядит как стандартная страница ошибки 404. Затем фиолетовая вращающаяся черная дыра начинает засасывать все элементы страницы.

21. IGN

IGN заимствует некоторую ностальгию у любителей видеоигр по их странице ошибок, вдохновленной Марио. Копия ссылается на моменты из игр «Принцесса в другом замке».

22. IMDb

Страницы ошибок не должны загружать один и тот же контент при каждом посещении. Их можно настроить так, чтобы они перемещались по библиотеке копий или иллюстраций, поэтому каждое посещение будет новым. Это то, что IMDb сделал со своей страницей ошибок, которая содержит слегка измененные цитаты из фильмов. Идите вперед и нажмите «Обновить» несколько раз, чтобы увидеть, какие еще цитаты появляются.

23. Iconfinder

Эффект полета в космосе из «Звездных войн» завораживает зрителей с 1970-х годов. Это в полной мере влияет на страницу ошибки 404 Iconfinder. Еще один отличный пример тонкой анимации, производящей большое впечатление.

24. Imgur

Говоря о тонкостях, вы можете попасть на страницу ошибки Imgur десятки раз, прежде чем заметите, что там даже происходит анимация. Двигайте мышью и попытайтесь найти его.

25. Jackrabbit Design

Jackrabbit Design позволяет посетителям погрузиться в эту богатую анимацию, создавая слои, которые перемещаются и смещаются в зависимости от курсора пользователя. Это отличный способ заставить людей проводить немного больше времени с вашим произведением искусства.

26. Куало

Space Invaders — еще одна классическая аркадная игра. Британская команда, стоящая за Kualo, сделала забавный ход, назвав название своей компании Invaders. Захватчики, которых вы полюбите уничтожать космическим лазером.

27. Lego

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

28. Lonely Planet

Не каждая страница с ошибкой должна иметь какую-то умную связь с брендом или сложную метафору. Иногда забавной гифки с животным достаточно, чтобы перевернуть настроение пользователя. Lonely Planet отлично справляется с этой страницей с ошибкой.

29. Lush

Эта страница с ошибкой косметического бренда Lush — отличный пример привязки вашей страницы к рекламной акции. К Пасхе 2014 бренд анонсировал «Охоту за пасхальными яйцами». Найдите пасхалку на их сайте и выиграйте бесплатный приз. Оказывается, пасхалка была спрятана на странице с ошибкой 404, а призом стала специальная версия «Ошибка 404» их популярного продукта с бомбой для ванны.

30. Magnt

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

31. MailChimp

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

32. NPR

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

33. Национальный музей истории похорон

Похороны — это смешно? Если кто-то знает, это Национальный музей истории похорон. На их странице с ошибкой есть каламбур «серьезная ошибка» и упоминается, что страница «исчезла в загробной жизни».

34. Житель Нью-Йорка

Житель Нью-Йорка известен своими превосходными мультфильмами. Так что, конечно, у них есть тот, который идеально подходит для страницы с ошибкой.

35. Правительство Новой Зеландии

У людей есть плохая привычка оставлять Новую Зеландию вне карты. Правительство страны немного позабавилось этим на своем собственном веб-сайте со ссылкой «чего-то не хватает» и картой мира без Новой Зеландии.

36. Nuvango

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

37. Оранжевое пальто

Интерактив не обязательно означает игры и виджеты Javascript. Страница ошибок Orange Coat дает посетителям блок-схему в стиле «выбери свое приключение».

38. Romain Brasier

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

39. Spotify

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

40. Стив Ламберт

Страница художника Стива Ламберта, получившая название «Самая неуклюжая страница ошибок в Интернете», заслуживает внимания. Попробуйте дойти до конца. Как пишет Стив на странице: «Такая идея приходит к вам только в 12:30. И ты должен сделать это тогда, иначе ты никогда этого не сделаешь».

41. Sygic Travel

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

42. Австралийские

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

43. Музей творения

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

44. The Irish Times

Вот еще один пример того, как новостная организация развлекается со своей страницей с ошибкой. На странице Irish Times 404 показан код, прорывающийся сквозь газетную бумагу.

Дополнительный совет:

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

This entry was posted in Популярное