Обсудим ваш проект?
Комплексный интернет-маркетинг
15 лет опыта | 90+ специалистов
Отправить заявку

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

Обновлено: 06 мая 2023
Время на прочтение:
Просмотров: 45987
Дарья Иванова
редактор
Станислав Мозгель
руководитель отдела веб-разработки
Редполитика
Мы прилагаем все усилия, чтобы наши обзоры были максимально честными, точными и объективными. Если вы посещаете ссылки в нашем контенте, мы можем получить комиссионное вознаграждение от ваших покупок, однако это не влияет на нашу редакционную политику и мы не станем рекомендовать продукты или сервисы, в которых не уверены.

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

Зачем создавать страницу-заглушку?

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

Целей, ради которых устанавливается подобная страница, может быть несколько:

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

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

Нет времени разбираться?
Комплексное продвижение в онлайне
Разрабатываем стратегии продвижения бизнеса в онлайне с пошаговым планом действий, и обеспечиваем его реализацию. Проектируем, реализуем, поддерживаем и развиваем сайты, приводим на сайт целевой трафик (реклама, SEO, email-рассылки), расширяем присутствие компании на сторонних площадках, настраиваем аналитику и проводим постклик анализ.
Ваш сайт:

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

Основные элементы страницы-заглушки для сайта

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

  • Первое, что нужно понимать – недостаточно разместить надпись «На сайте ведутся технические работы» или «Сайт в разработке». Здесь важно уведомить посетителя о том, на какой именно ресурс он попал, указав название и логотип компании.
  • Второе, это контактная информация, ее также обязательно следует указывать. Возможно, на сайт пришел потенциальный клиент и попал на заглушку. В этом случае, если нет контактов, он, вероятнее всего, покинет ресурс и обратиться за помощью к конкурентам. Поэтому на заглушку следует опубликовать контактные данные.
  • Не лишней будет публикация краткой информации о том, чем занимается компания. Здесь главное не перегружать страницу данными, а указывать только ключевые направления.
  • Говоря о предыдущем пункте, кроме текстовой и графической информации, можно опубликовать видеоролик о компании. В некоторых случаях, это будет уместнее, к примеру, если информации много.
  • На заглушку можно поставить форму для email-рассылки, но тогда следует замотивировать посетителя оставить свой контакт. Кроме прочей информационной рассылки, данную функцию часто используют для оповещения аудитории о том, когда сайт снова будет доступным для посещения. Но этот вариант больше подходит для известных компаний, у которых уже имеются постоянные посетители.
  • Уведомление пользователей о сроках проведении технических работ. Можно подойти к этому элементу креативно, указав не просто дату активации ресурса, а сделать анимированный счетчик, отсчитывающий время в обратном порядке.
  • Заглушку можно использовать для решения маркетинговых задач, например, указав на ней информацию о проведении конкурса, итоги которого будут подводиться уже на работающем сайте. Таким образом, можно замотивировать посетителя вернуться на ресурс.
  • Говоря о контактных данных, отдельным элементом хотелось бы выделить ссылки на группы и страницы проекта в социальных сетях. Это позволит не потерять потенциальных клиентов, к тому же есть шанс, увеличить число подписчиков на других платформах.
Привлекли 35.000.000 людей на 185 сайтов
Мы точно знаем, как увеличить онлайн–продажи
Применяем лучшие практики digital–продвижения как из вашей тематики, так и из смежных областей бизнеса. Именно это сделает вас на голову выше конкурентов и принесёт лиды и продажи.
Ваш сайт:

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

Как создать и установить заглушку на сайт?

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

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

Создание заглушки на сайт из готового HTML-шаблона

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

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

Графический редактор Nicepage.com
Графический редактор Nicepage.com

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

Выбор шаблона на сайте
Выбор шаблона на сайте

Поиск шаблона по идентификатору
Поиск шаблона по идентификатору

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

Редактируем шаблон
Редактируем шаблон

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

Экспортируем в нужном нам формате
Экспортируем в нужном нам формате

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

Проверка адаптивности
Проверка адаптивности

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

Примеры заглушек на основе готовых шаблонов

Мы собрали наиболее удачные, на наш взгляд, готовые HTML-шаблоны заглушек.

Пример заглушки для сайта - 1
Пример заглушки для сайта — 1

Ссылка

Пример заглушки для сайта - 2
Пример заглушки для сайта — 2

Ссылка

Пример заглушки для сайта - 3
Пример заглушки для сайта — 3

Ссылка

Пример заглушки для сайта - 4
Пример заглушки для сайта — 4

Ссылка

Пример заглушки для сайта - 5
Пример заглушки для сайта — 5

Ссылка

Создание заглушки с помощью кода-HTML

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

Создаем файл заглушки, который содержит в себе HTML-верстку с блоками <html>, <head> и <body>.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <title>Сайт на реконструкции</title>
    <style>
        main {
            max-width: 70%;
            margin: 100px auto 0 auto;
            padding: 25px;
            text-align: center;
            font-size: 20px;           
        }
    </style>
</head>
<body>
    <main>
        <p>ГРЯДЯЕТ НОВЫЙ СТАРТ!</p>
        <p>Наш сайт находится в стадии разработки, и мы почти готовы к работе!<br>
Мы готовим для вас нечто удивительное и захватывающее - специальный сюрприз для подписчиков</p>
   </main>
</body>
</html>

Таким образом собирается вся страничка заглушки.

Далее размещаем созданный HTML-файл в корень сайта через FTP.

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

В самом вверху файла прописываем:

<IfModule mod_rewrite.c>
    RewriteCond %{REQUEST_URI} !/file.html$
    RewriteCond %{REMOTE_ADDR} !^176\.111\.11\.21
    RewriteCond %{REMOTE_ADDR} !^176\.111\.11\.22
    RewriteRule $ /file.html [R=302,L]
</IfModule>

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

Плагины для CMS

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

Например, для WordPress популярен плагин WP Maintenance Mode, который имеет более 800 тыс. активных установок в репозитории. Он позволяет создавать красивые и современные дизайны заглушек, в том числе интегрировать анимированные счетчики, контактные формы. При этом шаблоны все адаптированы под мобильные устройства.

Для Битрикса также можно найти готовые плагины, например, одноименный «Заглушка: технические работы, сайт находится в разработке». Компания-разработчик оказывает всю техническую поддержку для платных версий плагина.

Примеры оформления заглушек для сайтов

Пример - 1
Пример — 1

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

Пример - 2
Пример — 2

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

Пример - 3
Пример — 3

Уведомление об обслуживании сайта и контактная информация, в ряде случаев этого достаточно.

Пример - 4
Пример — 4

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

Пример - 5
Пример — 5

Указано название проекта, таймер с обратным отсчетом до запуска и форма подписки.

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

Методология выбора
Кто мы
Директ Лайн
Крупнейшее региональное интернет-агентство России. ТОП-10 в рейтинге Рунета.
1200 +
проектов
90
экспертов
16лет
на рынке
Наша методология
Статьи в блоге Директ Лайн - это всегда оригинальный, проверенный и объективный контент. Все обзоры и рейтинги честно отражают наше мнение и опыт взаимодействия с каждым инструментом.
Содержание
Комментарии

Комплекс услуг для вашего бизнеса

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

Кейсы и статьи

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