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

Так чего же вы ждете?

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

Дизайн страницы 404: лучшие практики и потрясающие примеры

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

Вы знаете это чувство. Вы нажимаете интересную ссылку на сообщение в блоге, которое хотите прочитать, и БАМ! 404 Страница не найдена. Это автоматически раздражающий и негативный опыт. Но как эта страница 404 говорит с вами? Это полезно? Даже восхитительно?

Начните создавать запоминающиеся интерактивные страницы 404 с помощью Justinmind

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

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

Коды состояния HTTP: краткая история страницы 404

Так почему же она вообще называется страницей 404? Как обычно, объяснение довольно загадочно и возвращает нас в темные века Интернета (где-то около 1990 года). Несмотря на популярные мифы о 404, относящиеся к древней серверной комнате или к офису изобретателя во всемирной паутине Тима Бернерса-Ли, оказывается, что 400 — это произвольный ярлык, прикрепленный к ошибкам клиента, который включает 404: Страница не найдена.

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

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

Конкурирующие философии страницы с ошибкой 404

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

Мы склонны не соглашаться с этим подходом — фактически, так же поступает и Google в своем собственном совете по созданию страниц 404. Хорошая страница с ошибкой 404 должна показать вашему пользователю, что даже если что-то идет не так, все будет хорошо. Страницы с ошибками должны успокаивать, радовать и направлять пользователя к интересному контенту. Потратьте время на создание потрясающей, запоминающейся страницы 404 — стоящее вложение. Помните: на самом деле это разновидность целевой страницы.

Что должна включать страница 404?

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

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

Присмотритесь: ключевые аспекты вашей страницы 404

Превратите ошибку пользователя в возможность UX

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

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

Избегайте беспорядка для более высоких показателей успеха пользователей

Перегрузка пользователя страницей 404, заполненной ссылками на каждый уголок вашего сайта, — верный способ когнитивно перегрузить и без того разочарованного пользователя. И, как ясно дает понять гуру NN Group Кэтрин Уитентон, когнитивная перегрузка и удобство использования несовместимы.

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

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

Лучшие страницы 404 — это возможности для брендинга

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

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

Великолепный дизайн страниц 404 для вдохновения

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

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

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

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

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

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

Смелое использование цвета добавляет яркости, в то время как меню навигации достаточно интегрировано на страницу, поэтому не требует дополнительных ссылок. Затем есть та замечательная копия, которая привлекает и удивляет пользователя.Мы любим это!

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

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

20th Century Studios также разместили ссылку на фильм на своей странице 404 и сделали отличный брендинг.Он включает в себя фон с культовой сценой из одного из их фильмов, а также цитату. Нам нравится, что большой белый шрифт производит впечатление и сохраняет удобочитаемость, поскольку цвета фона меняются вместе с видео.

Spotify не нуждается в представлении. Страница 404 является прямым отражением их бренда и их целевого рынка, создавая отличное сочетание брендинга и UX.

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

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

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

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

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

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

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

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

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

12. Музей науки и промышленности Чикаго

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

Мы также ценим забавную информацию о старой школе 1902 года. Весь алфавит на одном циферблате доступен потребителям! Это заставляет вас оценить, как долго мы прошли, и в каком-то смысле это уже не может быть более репрезентативным для музея.

Дэн Вуджер — иллюстратор и графический дизайнер, работавший для таких крупных компаний, как McDonald’s, Bloomberg’s и New York Times.Нам нравится, что дизайн его страницы 404 забавный и непринужденный, с некоторыми вещами, кроме иллюстрации гамбургера, в котором он сожалеет о пропущенной странице. Иногда это все, что вам нужно.

Дэн взял то, что побуждает большинство пользователей покинуть веб-сайт, и превратил это в возможность со ссылкой на свое портфолио. Это умный UX-дизайн!

Mashable — новостная платформа, охватывающая все, от технологий до публикаций в Game of Thrones. Их контент разнообразен и пытается охватить широкую группу пользователей.Их страница 404 — победитель, потому что она проста и приятна.

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

Blue Path — это консалтинговая компания по науке о данных, которая предлагает пользователям отличную страницу 404. Эта страница хороша своим юмором и простой графикой, которая представляет собой текст и график.Юмор размещать карту слева и сигнализировать пользователю, что он будет далеко от этой карты, справа? Отличная аналогия!

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

Это момент, когда вы выбираете момент, который обычно наполнен разочарованием и негативом, и превращаете его во что-то хорошее.Сделайте его незабываемым по правильным причинам!

Что делает страницу с ошибкой 404 большой?

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

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

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

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

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

• 404 Не найдено
• HTTP 404 не найден
• Ошибка 404
• Страница не найдена
• Запрошенный URL не найден на этом сервере

Когда дело доходит до общего дизайна страниц 404, есть два варианта — стандартная страница 404 или настраиваемая страница 404.Стандартные страницы просто выплевывают сообщения выше безотносительно к дизайну. Пользовательские страницы — это те страницы, которые вы проектируете и для которых создаете опции. Для этого у вас должен быть доступ к хост-серверу. (Мы не будем здесь вдаваться в подробности, но вы можете узнать больше об этом из A List Apart.)

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

Основная необходимая информация

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

Чего не должно быть на странице 404, так это кучи технического жаргона. (Вы же не хотите пугать пользователей, не так ли?) На самом деле вам, вероятно, даже не следует использовать заголовок «Ошибка 404», потому что многие из ваших пользователей понятия не имеют, что это означает.Придерживайтесь чего-нибудь более значимого, например «Не удается найти страницу».

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

• Сильный заголовок или текст, объясняющий пользователю, почему он здесь. Это неприятно, когда вы попадаете на веб-страницу, которая не соответствует вашим намерениям. Убедитесь, что пользователи знают, что они не на правильной странице, а на правильном веб-сайте.
• Поиск. Убедитесь, что страница ошибки 404 имеет те же функции поиска (и находится в том же месте), что и остальная часть вашего сайта. Таким образом пользователи смогут искать страницу, которую они намеревались посетить.
• Ссылки на вашу домашнюю страницу и карту сайта. Скорее всего, это произойдет как элемент дизайна, включающий верхний или нижний колонтитул, соответствующий остальной части сайта.
• Минимальная информация в противном случае. Подумайте о том, чтобы избавиться от сложной навигации. Если пользователь попадает на страницу по ошибке, дайте ему только несколько вариантов, которые приведут к успеху.Слишком много вариантов может еще больше расстроить или запутать пользователя.
• Включите явный призыв к действию. Сообщите пользователям, что делать дальше.

Сделать 404 страницы пригодными для использования

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

У Google есть список отличных предложений для включения информации на настраиваемую страницу 404 в своих инструментах для веб-мастеров. Эти советы включают:

• Четко скажите посетителям, что страница, которую они ищут, не может быть найдена.Используйте дружелюбный и привлекательный язык.
• Убедитесь, что ваша страница 404 выглядит так же, как и остальная часть вашего сайта.
• Рассмотрите возможность добавления ссылок на свои самые популярные статьи или сообщения.
• Подумайте о том, чтобы предоставить пользователям возможность сообщить о неработающей ссылке.
• Убедитесь, что ваш веб-сервер возвращает фактический код состояния HTTP 404 при запросе отсутствующей страницы, чтобы она не отображалась в результатах поиска.
• Используйте виджет Enhance 404, чтобы встроить поле поиска на свою пользовательскую страницу 404.
• Используйте инструмент «Изменение адреса», чтобы сообщить Google о перемещении вашего сайта.

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

Дизайн 404 страницы с целью

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

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

Подумайте о дизайне страницы с ошибкой, как о любой другой странице в общей схеме дизайна.

• Поддерживайте согласованность дизайна. Используйте тот же цвет, типографику и стили изображений, которые интегрированы на других страницах веб-сайта.
• Поддерживайте брендинг. Использование одинакового логотипа, верхнего и нижнего колонтитулов поможет пользователям узнать ваш сайт.
• Сохраняйте простоту визуально. Когда дело доходит до страниц с ошибками, меньше значит больше.
• Не заставляйте пользователей прокручивать. Это одноэкранный дизайн.
• Избегайте слишком большого количества уловок. Хотя поддерживать тон и настроение вашего сайта и бренда — это хорошая идея, слишком большое количество «дополнений» может заставить пользователей забыть то, что они искали в первую очередь.
• Извинитесь и проявите сочувствие.Можно сожалеть, что пользователь попал не в то место.
• Если ваш сайт требует входа в систему, добавьте для него место. (Ошибка произошла из-за того, что пользователю нужно было войти в систему?)
• Будьте изобретательны. Или смешно. Но сначала проверьте страницу. Убедитесь, что случайные пользователи «поняли».
• Если вы используете «Ошибка 404», добавьте вторую строку текста, рассказывающую пользователям, что это означает или что им нужно делать дальше.

12 отличных примеров

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

Девиантное искусство

Gig Masters

iFolderLinks

LimpFish

Magnt

Mattel

ModCloth

NPR

Стив Ламберт

Титулист

Тоби

Заключение

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

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

40 примеров 404 страниц

Эээ… 404, страница не найдена! Худшая ошибка, правда?

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

Что такое ошибка 404?

Ошибка 404 Not Found — это код ответа HTTP, который указывает, что браузер смог связаться с сервером, чтобы попытаться получить страницу, но сервер не смог найти то, что было запрошено. Часто они возникают, когда человек ищет страницу, которой не существует, или когда он щелкает ссылку на страницу, которая больше не существует и не была перенаправлена ​​в другое место.Ссылки, которые никуда не ведут, известны как «мертвые ссылки» или «битые ссылки».

Ошибки 404 вредны для SEO?

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

Проектирование страницы 404

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

Лучшие методы проектирования страницы 404

1. Объясните, что такое 404. Страница с надписью «Ой, 404! Вернитесь назад!» не помогает большинству людей. Объяснение того, что страница, которую они ищут, либо перемещена, либо больше не существует, и предложение альтернатив, таких как панель поиска, меню или другая навигация, является ключом к обеспечению хорошего взаимодействия с пользователем на странице 404.

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

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

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

1.Ялантис

Yalantis привлекает внимание. Что еще интереснее, эта страница 404 на самом деле интерактивна! При перемещении курсора по точкам волна перемещается в разные стороны. Кто знал, что 404-й может быть забавным?

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

2. IMDB

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

3. Битли

Еще один интерактивный 404, Bitly’s включает забавную анимацию и милую иллюстрацию рыбы-иглобрюха, которая заблудилась.Каждый раз, когда вы наводите курсор на воду, вы вызываете рябь в волне. Bitly также включает ссылки на домашнюю страницу и блог со страницы 404.

4. Здание Discovery

Модель 404 для Discovery Building чрезвычайно элегантна. Этот дизайн включает красивые изображения пути и дерзкое сообщение «Мы свернули не туда». Страница также включает в себя полную навигацию, которая чрезвычайно полезна для возврата туда, куда вы хотели пойти.

5.Форсанетти

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

6. Строения Солт-Сити

Salt City Builds специализируется на обслуживании мотоциклов и ремонте японских моделей, выпущенных до 1979 года. Страница 404 этого бренда гладкая и фирменная с сообщением: «Заблудиться — не так уж и плохо». Он хорошо обращается к их целевому рынку, а также имеет удобную навигацию вверху, которая поможет им вернуться на правильный путь, когда они будут готовы!

7.Pixar

Анимационная студия Pixar на странице 404 изображает персонажа из одного из их фильмов «Наизнанку», известного своим плачем, с дерзким сообщением «Ой… не плачь». Четкий дизайн и фирменный контент делают эту страницу 404 победителем.

8. Orangecoat

Orangecoat — дизайнерская фирма, базирующаяся в Гринвилле, Южная Каролина, специализирующаяся на веб-дизайне и маркетинге, которая помогает предпринимателям создавать компании и руководить веб-стратегиями существующих компаний.На их потрясающе оформленной странице 404 есть диаграмма, которая направляет действия пользователя.

9. Dogstudio

Design компании Dogstudio соответствует их 404 странице. Их страница включает в себя случайный GIF-файл с изображением собаки, зацикленной на заднем плане страницы. Обновите страницу, и вы получите еще один GIF с изображением собаки!

10. Чудо

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

11. Точка доступа

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

12. Cirque du Soleil

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

13. Дисней

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

14. Метель

Blizzard Games есть спасательный мерлок, который поможет вам вернуться в безопасное место. Эта страница 404 с графикой, гармонирующей с игровой компанией, принадлежит бренду. Конечно, нам нравится видеть навигацию вверху, чтобы облегчить работу этого мерлока. Мммrrgmgrrrgmml!

15. Уловки CSS

Эта симпатичная страница с ошибкой 404 на сайте CSS Tricks занимает особое место в наших сердцах, поскольку мы — команда разработчиков.На этой забавной странице есть страница, которая разорвана внизу, по-видимому, обнажая CSS страницы внизу. Что может быть интереснее CSS-трюка, чем просмотр самого CSS?

16. Слабина

Slack имеет интерактивный фон, который делает работу с 404 безмятежной. Это также связано с брендом, потому что, если Slack когда-либо обнаруживает ошибку в приложении, экран, который появляется, будет таким же. Убедитесь сами!

17. GoDaddy

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

18. Purée Maison

Purée Maison — французское креативное агентство, специализирующееся на коммуникационной стратегии. На всем сайте вы увидите анимацию маленьких персонажей, и страница 404 не исключение. На этой сюрреалистической странице 404 запечатлен маленький персонаж, который врезался в стену (как будто вы попали в 404).Чистый дизайн включает в себя мобильную навигацию с правой стороны, которая помогает вернуться домой.

19. LEGO

Lego, конечно же, изображен персонаж LEGO из фильма LEGO. Он включает в себя симпатичную графику и краткую аннотацию (и строку из фильма), убеждая пользователя, что все по-прежнему великолепно!

20. 20 век Фокс

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

21. Фигма

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

22. Mailchimp

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

23. Чудо

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

24. ИКЕА

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

25. Американский домашний щит

American Home Shield известна своими гарантиями на бытовую технику, поэтому она идеально подходит для того, чтобы показать что-то, что сломано по неработающей ссылке.Нам также нравится, что AHS пользуется этой возможностью, чтобы превратить потерянный трафик в преобразованного пользователя, предлагая пользователю ознакомиться с доступными планами. Может быть, эта страница все-таки не так уж «сломана»!

26. Sony Alpha Вселенная

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

27. Живая нация

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

28. Каждый доллар

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

29. Github

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

30. 9GAG

9gag — это приложение, в котором вы можете найти всевозможный контент, гифки и многое другое. Страница 404 компании 9gag имеет одну цель: заставить вас загрузить их приложение, которое нам очень нравится. Он показывает причудливую гифку, играющую в фоновом режиме, но единственный призыв к действию — загрузить приложение, которое привлекает трафик для конвертации.Блестяще.

31. Фортнит

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

32. Southwest Airlines

Забыли на сайте? Может быть, вам нужен авиадиспетчер, чтобы направить вас в правильном направлении. Нам нравится почтение авиации на этой странице 404, при этом мы по-прежнему предоставляем пользователям те же меню и варианты входа в систему, которые они имели бы на найденной странице сайта.

33. Reddit

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

34. ebay

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

35. Buzzfeed

Можете представить, чтобы найти то, чего не было на Buzzfeed? На содержательном сайте, который, кажется, охватывает все, они все еще разработали минималистичную страницу 404 на тот случай, если то, что вы ищете, не существует или было удалено. Этот анимированный гиф и простой обмен сообщениями заставляют нас падать в обморок от страницы 404.

36.TED

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

37. Giphy

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

38. Trivago

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

39. Одноклассники

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

40. Lyft

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

БОНУС 404 ДИЗАЙНА СТРАНИЦ

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

41. Акодез

Acodez — веб-агентство, расположенное в Индии. Это агентство демонстрирует свою индивидуальность на своей странице 404, на которой изображен талисман компании Acodie!

42. CarWow

CarWow поможет вам найти следующую любимую машину. Этот веб-сайт является одним из наиболее широко используемых сайтов сравнения покупок автомобилей в Интернете.Но пытались ли вы найти машину, которая, возможно, была продана или больше не указана? Не грустите слишком долго … вы можете сыграть в эту супер веселую интерактивную гоночную игру, которую они разместили на своей странице 404! Это определенно обеспечивает отличный пользовательский опыт. Щелкните ссылку выше и убедитесь в этом сами.

Как создать впечатляющую страницу ошибки 404 (с 12 примерами)

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

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

Итак, что посетитель будет делать дальше?

Они немедленно нажмут кнопку «Назад», если вы неправильно указали страницу с ошибкой 404 (код состояния). И они, вероятно, никогда больше не посетят ваш сайт.

Вы только что испортили свое первое впечатление своей страницей ошибок.

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

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

Результат?

Ну…

Снижение вашего рейтинга в поиске.

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

• Перезапуск сайта
• Внутренняя ссылка неработоспособна
• Ссылка на устаревшую поисковую систему

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

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

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

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

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

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

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

Но зачем вам тратить время или деньги на этот индивидуальный проект?

Вот 5 причин.

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

Как бы вы хотели увеличить свой поисковый трафик за счет индексации большего количества страниц веб-сайта с помощью страницы с ошибкой 404?

Сладкое. Не правда ли?

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

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

Путем перехода с него на случайные внутренние страницы вашего сайта.

Я использовал эту стратегию, чтобы увеличить посещаемость Techcrunch на 9% за месяц. Я связался со случайными 25-50 внутренними страницами, запустив алгоритм.

У вас наверняка будут неработающие ссылки на вашем сайте.

2. Это ваш шанс создать постоянный имидж бренда — люди любят постоянство.Как только вы знакомитесь с веб-сайтом, вы подсознательно начинаете ему доверять (хотя действуют и другие человеческие факторы, такие как ваш возраст, интересы и образование).

Вывод — создать согласованный образ. Общие страницы с ошибкой 404 — плохой опыт.

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

Вам нужен файл журнала для записи информации о проблеме и код ответа для ее надлежащего решения.

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

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

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

Как ты себя чувствуешь?

Совершенно верно.

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

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

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

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

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

Принятие того, что что-то пошло не так (код состояния HTTP), признание разочарования клиента и предложение другой помощи. Это то, что вы сделали бы при личном общении. Лучшие страницы с ошибками 404 делают именно это.

Но как именно?

Развлекаясь, как Магнт.

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

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

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

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

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

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

Если вы интернет-магазин, вы даже можете предложить рекомендации по релевантным продуктам на своей пользовательской странице с ошибкой, например Ballard Designs.

Согласно результатам What Test Won, эта страница с рекомендациями по продуктам привела к увеличению общего количества покупок, новых покупок клиентов, увеличению количества добавленных в корзину и более высокому среднему количеству просмотров страниц.

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

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

Вот 6 особенностей соблазнительной страницы 404.Помните, что вам не обязательно размещать их все на своей странице.

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

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

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

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

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

Design Shack предлагает ссылку на их последние статьи, галерею дизайна и на их домашнюю страницу, когда вы, к сожалению, найдете их код статуса http.

Вы также можете предложить обратную ссылку на домашнюю страницу, например Deviant Art. Это забавная, простая пользовательская страница ошибок, соответствующая их бренду.

Или, может быть, ссылку на вашу карту сайта, например Starbucks.

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

3. Использует простой человеческий язык, чтобы объяснить, что пошло не так. Во-первых, вы обслуживаете ошибку.Затем вы используете технические термины и коды, чтобы объяснить ситуацию. Вы вообще хотите, чтобы пользователь был на вашем сайте?

Видите ли, никого не волнует, что пошло не так с «вашим сервером».

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

Простой заголовок, например «Страница не найдена», работает лучше, чем «ошибка 404», потому что большинство посетителей вашего веб-сайта ничего не знают о вашем сервере или ошибке 404.

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

Страница ошибки 404 X-Cart имеет простой заголовок «Страница не найдена».

Вы заметили еще один аспект на странице выше?

В нем указаны «возможные причины», по которым вы столкнулись с ошибкой.

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

Также не забудьте не винить посетителя за код ошибки (код статуса http).

Я знаю.

Есть вероятность, что пользователь действительно ошибся при вводе URL. Или, возможно, это был ошибочный перенаправление.

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

Посмотрите, как Email Center UK проявил некоторую индивидуальность на своей странице с ошибкой 404.Они не только принимают ошибку своих разработчиков, но и просят вас «выбрать, кого уволить».

Разве ты не хочешь их уже простить?

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

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

Так как же побудить посетителя сообщить об ошибке?

Вы предоставляете контактную форму или адрес электронной почты своей группы технической поддержки.

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

Бен Кук реализовал простую контактную форму на странице с ошибкой 404 во время восстановления и перезапуска клиентского веб-сайта.

Получил ли он какие-нибудь ответы?

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

5. Переведите страницу на несколько языков. Маркетинг — это общение с пользователем так, как ему нравится, и на том языке, который он использует. Верно?

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

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

David Hell Man — отличный пример страницы с ошибкой 404 не на английском языке.

6. Предложите им возможность присоединиться к вашему списку рассылки или использовать ваш продукт — Да, вы даже можете конвертировать этих посетителей. Это всего лишь указание пользователю выполнить действие, которое вы от него хотите.

А что может быть лучше, чем превратить плохой пользовательский опыт в положительный и прибыльный?

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

Вот видеоурок Джоша Бэйлесса о том, как собирать лиды со страниц с ошибкой 404.

Я уже показал вам, как Ballard Designs рекомендовала продукты на своей странице с ошибкой 404, чтобы увеличить количество конверсий.

Точно так же HubSpot предлагает пользователям возможность «подписаться на бесплатную демонстрацию» на их странице с ошибкой 404. Два других варианта над бесплатной демонстрацией также соответствуют целям конверсии HubSpot.

К настоящему времени у вас уже есть самая необходимая информация о создании страниц с ошибками 404. Я объясню технические аспекты настройки вашей страницы позже.

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

Надеюсь, ваши творческие соки начнут течь после просмотра этих страниц.

1. Поцелуй

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

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

2. Джейми Хаскиссон

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

Кроме того, вам будут предложены два варианта: окно поиска для поиска релевантной информации или ссылка на архив сообщений для чтения старого содержания, написанного Джейми.

3. Centresource

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

Затем он предлагает всего два варианта — вернуться на главную страницу или ударить лося. Здесь нет жаргона кода статуса http.

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

4. Huwshimi

У австралийской дизайнерской компании есть героическое изображение на странице с ошибкой: эту страницу украл ниндзя.

Их просьба вернуться на домашнюю страницу столь же увлекательна: «вы должны вернуться, когда у луны есть друзья, а лиса позаимствована».

5. Хиллари Клинтон

На сайте политика есть страница с ошибкой, на которой крякнет вас.

Она была даже признана Huffington Post за то, что она каламбур через эту страницу.

Показав счастливую фотографию, Хилари предлагает вам записаться на волонтерство.

Итак, это отличный способ направить посетителей вашего сайта к вашим целям, не так ли?

6. Зайчик в дизайне

Еще одна блестящая концепция от дизайнерской компании.Jackrabbit указывает на «опасность» в своем коде ошибки и сообщает пользователю, что они отклонились от маршрута. У них также есть крутой кролик-талисман, чтобы привлечь вас, в то время как их серверная часть создает файл журнала с кодом состояния http.

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

Разве не прекрасно, что пользователь может извлечь полезность даже из своей страницы с ошибкой?

7.Блюгг

Это британское брендовое агентство, и их страница с ошибкой очень забавна.

Это не минимализм. У них есть куча навигационных ссылок вверху и контактная информация в нижнем колонтитуле.

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

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

8. Уайтспарк

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

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

Вы также можете нажать на красный CTA «Good Riddance» и уволить Брента.

Нажав эту кнопку, вы увидите обеспокоенного Брента и получите сообщение о том, что многие дети Брента будут голодать на улицах.

Дело в том, что ваши пользователи больше не смотрят на жаргон кода ошибки, такой как http-код статуса «что?» Они видят, что что-то пошло не так, и видят способы решения проблемы.

9. Квартира Home Living

Какой бы вы хотели видеть овцу в ванной?

Вообразить это само по себе забавно, правда?

Это иллюстрация, которую сайт поиска квартир Apartment Home Living использует на своей странице с ошибкой.

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

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

10. Лего

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

И внизу слева они предлагают обратную ссылку на главную страницу.

11. Mattel

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

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

Но, чтобы оставаться на сайте, вы получаете анимированный шар Magic 8, который отвечает на ваши вопросы.

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

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

Помимо шара magic-8, Mattel имеет 3 ссылки внизу. Вы можете вернуться на главную страницу, выполнить поиск на веб-сайте или посетить магазин Mattel.

12. Дефрозо

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

Во-первых, он говорит на языке аудитории: «страница не в фокусе.’

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

Или вы можете отправить электронное письмо команде по разморозке о проблеме.

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

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

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

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

1. Используйте плагин 404 Page WordPress — Вам повезло, если вы ведете свой блог на WordPress.Существует множество мощных плагинов, которые помогут вам легко реализовать расширенные функции на вашем веб-сайте.

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

Вот видеоролик о плагине кода ошибки.

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

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

2. Наймите разработчика-фрилансера — плагины могут быть чрезвычайно полезны на начальных этапах работы вашего веб-сайта.

Но по мере вашего продвижения ваш брендинг и обслуживание аудитории вашего веб-сайта становятся все более важными.

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

Инвестируйте в найм талантливых разработчиков с сайтов-фрилансеров, таких как UpWork и Freelancer. Опубликуйте требование с как можно большим количеством конкретных деталей. У вас должен быть приличный бюджет, чтобы привлекать качественные приложения.

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

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

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

Если вы используете сервер Apache, вам нужно будет указать серверу на страницу с ошибкой, отредактировав файл .htaccess после загрузки файла с ошибкой на сервер.

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

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

Если вы запускаете свой веб-сайт на информационном сервере в Интернете, вы можете следовать инструкциям в этой статье.

Вы используете свой сайт на WordPress?

Многие темы WordPress снабжены файлом 404.php (пользовательский файл шаблона 404).

Вы можете редактировать их в текстовом редакторе и редактировать отображаемое сообщение об ошибке.

В приведенном ниже видеоуроке WebTegrity показывает, как настроить сообщение, отредактировав файл темы 404.php.

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

Что бы вы ни делали, не выбирайте ни одну из этих настроек страницы 404.

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

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

1. Проверьте расширение Chrome «Мои ссылки» — Это отличный инструмент, используемый в стратегии построения битых ссылок. Он сканирует веб-страницу, перечисляет общее количество ссылок, находит и помечает все неработающие ссылки красным цветом.

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

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

2. Плагин WordPress для проверки неработающих ссылок — Если вам нравится автоматизация, вам понравится этот инструмент.

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

Установите плагин и перейдите в Настройки »Проверка ссылок.

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

Чтобы просмотреть более подробный список неработающих ссылок и проблем с кодами ошибок на вашем веб-сайте, перейдите в Инструменты »Неработающие ссылки.

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

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

3. Google Analytics (GA) — Это один из самых мощных инструментов для веб-мастеров. Вы уже знаете о его функциях для отслеживания производительности вашего веб-сайта и разделения источников трафика.

Но знаете ли вы, что он может находить даже неработающие ссылки на вашем сайте?

Войдите в свою учетную запись аналитики. Перейдите в раздел Поведение »Контент сайта» Все страницы.

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

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

WordStream обнаружил, что его страница с ошибкой 404 была посещена 126 раз через 79 страниц (с 1 по 30 апреля).

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

Вы можете прочитать эту статью WordStream, чтобы получить помощь по анализу данных из GA и принятию решения о перенаправлении ваших страниц.

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

На большом веб-сайте нередко появляется 10 новых неработающих ссылок каждый день. Итак, если вы не можете исправить все неработающие ссылки на своем веб-сайте (что неизбежно), лучшим решением будет персонализированная страница с ошибкой 404.

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

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