Текст для страницы 404: Примеры 404 страниц: ТОП-155 самых прикольных, красивых, интересных, креативных примеров оформления, дизайна и текста страниц 404 ошибки — Независимое театральное объединение "Зрительские симпатии"

Содержание

Копирайтинг для страницы «Ошибка 404» — Студия Дениса Каплунова

Все течет, все изменяется…

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

А ссылки на них со сторонних источников могли остаться. Переходят по ним новые посетители и видят перед собой пустой экран с фразой “404 Not found”.

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

Посетитель снова видит перед собой “404 Not Found”.

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

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

Классические правила оформления страницы «Ошибка 404»

Открывать Америку вам никто не собирается. Просто все четко и системно, чтобы вы могли удобно этим пользоваться:

Размещение логотипа и имени сайта, компании, проекта – это дает возможность посетителю понимать, что сайт существует. Достаточно лишь кликнуть по лого, и он уже на главной странице.
Наличие сообщения, которое четко говорит посетителю, что произошло и (желательно) что делать ему дальше.
Заметная кнопка, переводящая посетителя на главную страницу сайта.
Допускается наличие контактных данных владельца сайта, чтобы при желании с ним сразу связаться
Иконки социальных сетей – раз уж человек пришел к вам в гости, не лишним будет его пригласить в круг читателей и последователей вашего ресурса в социальных сетях

Нужен ли вообще текст на странице «Ошибка 404»?

Конечно, нужен!

Иначе вы потеряете посетителя. И возникает вопрос – нужен текст-то для чего?

Скажу так: на этой страницы у текста есть 3 последовательные функции:

Сообщить, что произошло
Указать причины происшедшего
Подсказать, что делать дальше

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

Сообщите, что произошло

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

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

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

«Извините! Страница, которую Вы ищете, не может быть найдена»
«Упс… Мы не можем найти то, что Вы ищете»
«Простите, но у нас возникли проблемы с поиском страницы, которую Вы запрашиваете»
«Добро пожаловать на страницу 404! Вы находитесь здесь, потому что ввели адрес страницы, которая уже не существует или была перемещена по другому адресу».
«Так уж получилось, что из множества страниц нашего сайта Вы оказались как раз на той, которая уже не существует…»
«404… Увы, но эта страница где-то затерялась в галактике Интернета»
«Дружище, извини, но мы не смогли найти эту страницу…»
«Ищете что-то интересное на нашем сайте? К сожалению, страница, которую Вы запрашиваете, не существует…»

Укажите причины происшедшего

Очень часто на странице «ошибка 404» этот текстовый блок вообще отсутствует

Авторы, порой, вообще ограничиваются «пустым текстом» в стиле: «Ошибка 404. Страницы не существует или он была удалена».

А дальше думайте, как хотите, если вообще хотите думать.

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

Вот несколько примеров формулировок указания возможных причин ошибки 404:

«… Возможно, запрашиваемая Вами страница была перенесена или удалена. Также возможно, Вы допустили небольшую опечатку при вводе адреса – такое случается даже с нами, поэтому еще раз внимательно проверьте»
«… Скорее всего, это случилось по одной из следующих причин: страница переехала, страницы больше нет или Вам просто нравится изучать 404 страницы»

Подскажите, что нужно делать

Во-первых, не паниковать…

Во-вторых, всегда можно переадресовать человека на главную страницу сайта (или любую внутреннюю – если в этом есть необходимость).

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

Звучит это примерно так:

«… Чтобы найти интересующую Вас информацию – воспользуйтесь этой формой поиска»
«… Переходите на главную страницу – там Вы также сможете найти много полезной информации»
«… Пожалуйста, воспользуйтесь навигацией или формой поиска, чтобы найти интересующую Вас информацию»

Выделяем главное

Конечно, хочется из всего этого ассорти выделить наиболее ключевые моменты.

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

Поэтому…

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

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

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

А если наглядно, вот вам простой пример для сайта компании – строго, четко и понятно:

Здравствуйте!

Добро пожаловать на «страницу 404» нашего сайта.

К сожалению, введенный Вами адрес недоступен. Этому может быть несколько объяснений:

Страница удалена (из-за утраты актуальности информации)
Страница перенесена в другое место
Возможно, при вводе адреса была пропущена какая-то буква (на самом деле, у нас самих так часто получается)

Тем не менее, предлагаем Вам найти нужную информацию с помощью этой простой формы:

ФОРМА

Или же приглашаем Вас посетить другие разделы нашего сайта:

Главная Услуги О компании Примеры работ Отзывы Блог

Если у Вас возникли какие-то вопросы – свяжитесь с нами по тел. ______ или же напишите на e-mail ___________.

Как видите – это простая, строгая, четкая текстовая часть страницы, которая смягчает эффект разочарования при посещении несуществующей страницы.

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

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

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

Хорошо это или плохо – на самом деле, не важно. Это просто факт.

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

Оригинальный текст для страницы 404 делает посетителей счастливыми

Jimdo · 08 December 2021

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

Но хороший сайт готов к подобному. Он распознает это как «Ошибка 404: Страница не найдена». Пользователи увидят страницу 404 и поймут, что произошло.

Ситуация решена, верно? Не совсем так. Ведь посетитель сайта все ещё не нашел искомую страницу. Когда он видит информацию «Страница не найдена», тогда пользователи, вероятно, просто уйдут с сайта.

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

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

Что показывает страница 404
Что обычно пишут для пользователей

Хорошие примеры для сайта
Как выполнить редактирование
Как предотвратить появление ошибки 404

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

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

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

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

Решение проблем

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

Смешной текст

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

Полезный контент

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

Ссылки на социальные сети

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

Скидка или вознаграждение

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

На сайтах Jimdo на странице 404 размещается стандартное сообщение с текстом. Его несложно самостоятельно отредактировать через настройки:

Перейдите к странице > Системные страницы
Выберите «Страница не найдена / 404»
Отредактируйте текст страницы.
Опубликуйте на сайте.

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

Вот некоторые способы, чтобы предотвратить ошибку «Страница не найдена»:

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

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

Источник Блог Jimdo

Перевод WaterMillSky

Другие статьи Jimdo

tagPlaceholderTags: Jimdo, Страница с ошибкой 404, Текст на странице 404

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

19899 2

How-to

– Читать 7 минут

Прочитать позже

ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — ОШИБКИ

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

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

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

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

Или так, если мы пытаемся попасть на страницу из поиска Google:

Такая проблема может возникать по нескольким причинам:

Допущена ошибка в ссылке на страницу (URL).

Страница удалена.

Изменен адрес страницы.

Сервер работает некорректно.

В большинстве случаев владельцы сайтов, особенно крупных, могут просто не знать о существовании этой ошибки. Чем больше страниц и чем сложнее структура, тем легче ошибиться в настройке ссылок. Для анализа и проверки ссылок на «битость» можно воспользоваться сервисом «Аудит сайта» в Serpstat. Он проанализирует все внутренние и внешние ссылки сайта, укажет на наличие и характер проблем.

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

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

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

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

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

Мы не всегда знаем, по какому именно адресу находится ошибка и есть ли она вообще. Тем более, часто проблема возникает из-за того, что пользователь вводит неправильный адрес. Поэтому лучше перестраховаться и заранее подумать о том, как будет выглядеть 404 Not Found, если что-то пойдет не так.

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

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

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

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

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

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

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

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

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

Почему это важно

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

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

Как создать 404 страницу

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

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

ErrorDocument 404 http://ВАШ_САЙТ/404.html

Где: ВАШ_САЙТ — домен, а ссылка целиком — это путь к реальной странице. Вписываем его в любую свободную строку.

Благодаря этому отображаться будет именно та страница 404, шаблон которой мы создали, а не стандартная. Вместо расширения php можно прописать html, особой разницы нет.

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

Как сделать страницу 404 в WordPress

Популярные CMS позволяют автоматизировать этот процесс и избавляют от необходимости редактировать код вручную. К примеру, в WordPress эту задачу решает плагин 404page: он позволяет кастомизировать страницу с ошибкой «почти на любой теме». Чтобы его установить, потребуется версия WordPress от 4.0. Аналогичные решения существуют и для других CMS.

Заключение

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

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

» title = «Как создать страницу 404 ошибки 16261788214645» />

«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.

Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами 😉

Оцените статью по 5-бальной шкале

4.5 из 5 на основе 16 оценок

Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Как создать лучшие страницы 404 для ваших клиентов — Front End Development

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

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

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

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

Вам также могут понравиться: Микрокопия: почему крошечные слова имеют значение.

Индивидуальные настройки, которые вы можете сделать для страниц Shopify 404

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

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

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

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

1. Загрузить альтернативный шаблон макета для страниц с ошибкой 404

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

По умолчанию 9Файл макета 0065 theme.liquid применяется к файлу шаблона 404.liquid , но его можно легко изменить. Первым шагом будет создание копии файла theme.liquid в папке макета вашей темы и переименование 404-layout.liquid .

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

Чтобы отобразить страницу 404 с этим конкретным файлом макета, нам нужно добавить тег Liquid {% layout "404-layout" %} в начало файла шаблона 404.liquid . Так, например, ваш шаблон 404.liquid может выглядеть так:

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

2. Добавьте пользовательское фоновое изображение на страницу 404

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

Свойство background-image позволяет размещать изображение под остальными элементами на странице. Вы даже можете использовать CSS для наложения нескольких изображений на фон, что может быть полезно при объединении логотипов с вашим фоном.

Первое, что вам нужно сделать, это загрузить желаемое изображение в Shopify в разделе «Настройки»> «Файлы», что создаст уникальный URL-адрес, где хранится ваше изображение.

Затем вы должны перейти к таблице стилей темы и использовать класс открывающего контейнера или идентификатор вашей 404.liquid страницы в качестве селектора, а также CSS-свойство background-image и URL-адрес в качестве значения. Это может выглядеть так:

Вам также может понравиться: Создайте привлекающий внимание непрямоугольный дизайн заголовка.

3. Добавьте строку поиска на страницу

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

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

4. Добавьте раздел с призывом к действию.

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

Сначала вам нужно создать новый пустой файл Liquid в папке разделов вашей темы с именем 404-call-to-action. liquid . Затем добавьте этот код в файл:

Затем вам нужно включить этот новый раздел в файл шаблона 404.liquid в том месте, где вы хотите, чтобы кнопка призыва к действию отображалась. Вы захотите использовать тег темы Liquid {% section "404-call-to-action" %} , чтобы включить этот раздел, и в моем случае мой файл шаблона 404.liquid выглядит так:

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

Какая ошибка?

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

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

Вы экспериментировали с разными стилями, чтобы разработать функциональные и забавные страницы с ошибкой 404? Мы хотели бы услышать о вашем опыте в комментариях ниже!

Классные и креативные страницы 404: советы и примеры

Сообщение об ошибке «404 Not Found» сообщает пользователям веб-сайта, что на веб-сайте, который они пытались открыть, не найден контент. Если вы хотите точно знать, что такое ошибка 404 (также известная как код 404 или http 404), что ее вызывает и как ее избежать, вы можете узнать больше в нашей статье «Ошибка 404 не найдена». Итак, какие способы нашли компании для обработки этого сообщения об ошибке? Многие веб-сайты доказали, что можно превратить ошибку 404 в положительную, создав оригинальную и забавную страницу 404 вместо простого и стандартного отображения ошибок. Используя 20 вдохновляющих примеров от экспертов, мы покажем вам, как вы можете сделать то же самое.

Какой смысл в креативной странице 404?

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

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

Как создать хорошую страницу 404?

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

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

Кратко объясните, что случилось с посетителем : не каждый пользователь знает, что означает ошибка 404. Вместо того, чтобы просто писать «404 Not Found» или «Ошибка 404: страница не найдена», следует кратко и просто объяснить, почему пользователь попал на эту страницу. Это можно сделать беззаботным и забавным способом — часто творческие сообщения об ошибках 404 предполагают, что пользователь навсегда потерялся в огромном, пустом мире Интернета или что они были слишком медленными, а содержимое веб-страницы был перемещен.

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

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

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

20 забавных, оригинальных или просто великолепных страниц 404

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

Lego

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

Южный парк

Классический мультяшный Южный парк следует за Лего в стиле страницы 404 веб-сайта South Park Studios. Сценаристы изображают персонажа из сериала, используя одну из своих классических крылатых фраз. В нашем примере настала очередь Баттерса, милого четвероклассника. Но в прошлом уже были Стэн, Картман, Кенни и Кайл. Переключение вещей сохраняет страницу свежей и развлекает пользователей.

Blizzard Entertainment

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

takelessons

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

XING

Социальная сеть для профессиональных контактов XING предлагает умную функцию поиска на своем веб-сайте на странице 404. Картинка выглядит забавно непрофессионально, с рукописной запиской на фонарном столбе — забавно для профессиональной социальной сети.

GitHub

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

iStock

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

Jackrabbit Design

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

Fork

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

Audiko

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

Huwshimi and Friends

Дизайнерский веб-сайт Huwshimi and Friends использует другой подход к отображению своей прекрасной страницы 404: по данным компании, ниндзя несет ответственность за кражу рассматриваемой веб-страницы. Уведомление внизу следует теме с абсурдным поэтическим объяснением.

Umbro

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

Airbnb

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

This by Them

Похоже, в американской компании-разработчике программного обеспечения This by Them есть поклонники Дэвида Боуи. По крайней мере, компания выбрала подходящую лирику покойного музыканта для этой анимированной страницы 404, на которой изображен потерянный астронавт, медленно вращающийся и дрейфующий все дальше и дальше в космос. Звезды на заднем плане также можно перемещать с помощью курсора мыши.

Code School

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

Bluegg

Британское агентство Bluegg выбрало абстрактный подход, украсив страницу 404 видео кричащего козла.

Стив Ламберт

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

Emailcenter UK

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

Blue Fountain Media

Страница 404 Blue Fountain Media содержит игровую версию классической игры Pacman, которую пользователи могут использовать в качестве альтернативы странице, которую они искали.

Gamespot

Наконец, в соответствии со стилем содержания, эта страница отображения ошибок от Gamespot также дает посетителям возможность поиграть в небольшую игру.

16.08.19
Создание сайта

Юзабилити
Изображения

Статьи по теме

Самые популярные тенденции веб-дизайна на 2022 год

12.01.2022
Веб-дизайн

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

Самые популярные тренды веб-дизайна на 2022 год

Что означает ошибка 404 и как ее исправить Как часто вы натыкались на тупик во время серфинга в сети? Страницы ошибок HTTP 404 являются обычным явлением в Интернете, чтобы информировать пользователей о том, что запрошенная страница недоступна. Помимо того, что они раздражают посетителей, они означают плохие новости для владельцев веб-сайтов, поскольку неработающая ссылка может плохо повлиять на рейтинг веб-сайта в поисковых системах. В этой статье мы продемонстрируем важность 404 страниц и…

Что означает «Ошибка 404» и как ее исправить

Вдохновение для веб-дизайна: как обновить сайт

30.10.2019
Веб-дизайн

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

Вдохновение для веб-дизайна: как обновить ваш веб-сайт

HTTP 400: объяснение неверного запроса

16. 08.2019
Технические вопросы

Пользователи Интернета часто сталкиваются с сообщениями об ошибках. Коды состояния HTTP могут быть особенно раздражающими, особенно если вы не понимаете, что они означают. Сообщение «HTTP 400 — Bad Request» является загадкой для многих интернет-пользователей, но, к счастью, в большинстве случаев ее можно решить. Мы объясняем, что означает сообщение об ошибке и как исправить ошибку.

HTTP 400: Объяснение неправильного запроса

Создайте страницу 404, которая удерживает посетителей на вашем сайте

Вы не должны недооценивать ее полезность. Страница 404, пожалуй, самый игнорируемый элемент веб-дизайна.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Никто не хочет столкнуться со страницей 404. Но это случается.

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