Что разместить на первом экране сайта

Обновлено: август 2026.

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

Термин above the fold пришёл из газет: важное ставили на верх полосы, видимый на лотке. В вебе логика та же. Критичные элементы должны быть видны до скролла. Не понял за секунды, куда попал и зачем - вкладка закрывается. Контент ниже уже не спасёт.

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

Практически это три ответа посетителю:

1. куда я попал
2. почему мне это интересно
3. что сделать прямо сейчас

Если хотя бы один ответ размыт, человек сравнивает вас с соседней вкладкой и уходит. Особенно это заметно на платном трафике: клик уже оплачен, а экран не подтверждает ожидание из объявления.

После клика по рекламе человек часто открывает несколько вкладок. Выигрывает экран, который быстрее подтверждает обещание объявления. Подробнее про формат посадочной - в материале посадочная страница: виды и критерии.

Шапка как часть первого экрана

Многие считают первым экраном только баннер. На деле шапка тоже в зоне без прокрутки - особенно на мобильном.

• Логотип - кто вы.
• Дескриптор - 3-4 слова про нишу: «Сайты для строителей», «Поставка металлопроката», а не слоган «Мы делаем будущее».
• Короткое меню - 4-6 пунктов, без простыни из десяти ссылок.
• Ориентиры связи - как принято в нише (кнопка действия в шапке, мессенджер, город). В статье не дублируем контакты агентства: речь про паттерн интерфейса.

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

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

Обязательные элементы первого экрана

Заголовок

Читается первым в контентной зоне. Должен отвечать: «Что здесь происходит?». Конкретика для аудитории, не абстрактный слоган.

Слабо: «Мы делаем ваш бизнес лучше».
Рабочее: «Сайты для строительных компаний - с понятной воронкой заявок».

Ценностное предложение

1-3 предложения под заголовком: что предлагаете, для кого, чем отличаетесь. Не «качество и опыт», а условия, срок, формат, специализация.

Опционально под оффером - 2-3 буллита: результат, срок или условие, отличие. Больше пяти пунктов на первом экране уже шум.

Один главный следующий шаг

Одна основная кнопка или ссылка действия. Две равнозначные кнопки делят внимание. Формулировка конкретная: «Получить расчёт», «Смотреть каталог», «Записаться на разбор» - лучше, чем «Узнать больше». Кнопка логически продолжает заголовок: человек понимает, что будет после клика.

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

Визуальный якорь

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

Скорость

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

Мини-схема «было → стало» без магии:

• Было: слоган «Комплексные решения для бизнеса», пять пунктов меню, слайдер из четырёх офферов, кнопка «Подробнее».
• Стало: дескриптор «Сайты и реклама для строителей», заголовок с аудиторией и результатом, два буллита, одна кнопка «Получить разбор сайта», одно фото объекта или интерфейса.

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

Главная и посадочная: разные задачи экрана

Вести весь Директ на общую главную - частая ошибка: человек искал «сайт для стоматологии», а видит студию «про всё». Конверсия падает. Либо отдельная посадочная, либо динамическая подмена заголовка и оффера под группу объявлений. База блоков лендинга - в статье Landing Page: структура и примеры.

Что добавить в зависимости от типа сайта

Для B2B часто полезен элемент доверия уже на первом экране: цифра, срок, отрасль. Для магазина важнее быстрый путь в нужный раздел, а не длинный рассказ «кто мы». Если работаете в нескольких городах - укажите географию в оффере или шапке либо сделайте отдельные посадочные. Архитектура таких URL - в материале структура сайта под SEO и рекламу.

Всё, что обещали сверху, должно продолжаться сразу под fold: категории, кейсы, условия, FAQ. Иначе сильный экран обрывается в «дыру» - обещали помочь с выбором, а ниже сетка без логики.

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

Типичные ошибки на первом экране

• Размытый заголовок. «Профессионализм. Качество. Результат» не отвечает ни на один вопрос посетителя.
• Перегруз. Баннер, три абзаца, пять кнопок, форма и преимущества сразу - действие теряется.
• Нет очевидного следующего шага. Кнопка отсутствует, серая или уехала ниже fold.
• Слайдер / ротатор офферов. На сайте услуг несколько сменяющихся слоганов спорят друг с другом. Один экран - один главный смысл. Акции магазина - исключение, и то лучше одна явная акция, чем карусель из пяти.
• Стоковые фото вместо смысла. Картинка не связана с продуктом или результатом.
• Медленная загрузка. Трафик уходит до отрисовки оффера.
• Разрыв с рекламой. В объявлении одно, на экране другое.
• Обещание без продолжения ниже. Сверху «удобный подбор», ниже нет фильтров, подборок и сценариев.

Как сформулировать заголовок и оффер

Рабочая формула заголовка:

[Что делаете] + [для кого] + [результат или условие]

• Строительство: «Проектирование промышленных объектов - от эскиза до сдачи»
• Медицина: «Лечение спины без очередей - запись онлайн»
• Логистика: «Грузоперевозки по России - расчёт за 15 минут»
• E-commerce: «Запчасти для иномарок с доставкой на следующий день»

Оффер под заголовком усиливает, а не повторяет H1: условия, отличие, гарантия формата. Три вопроса для черновика:

1. Что конкретно получает клиент?
2. За какое время или на каких условиях?
3. Почему у вас, а не у соседа по выдаче?

Быстрый litmus-тест: если заголовок можно поставить на сайт конкурента один в один - он слабый.

Как проверить, что первый экран работает

1. Сначала мобильная ширина. В Chrome - режим устройства. Смотрите, видны ли заголовок, оффер и кнопка без прокрутки на типичном смартфоне.
2. Тест на 5 секунд. Покажите экран 5-7 людям из ЦА. Спросите: что предлагают и что делать дальше. Ответы расходятся - переписывайте.
3. Теплокарты и записи сессий. Кликают ли по главному действию, не перекрывает ли что-то оффер.
4. A/B при достаточном трафике. Одна гипотеза за раз: заголовок, кнопка или визуал.
5. Скорость. Первый контентный кадр не должен «висеть».

Короткий чеклист перед запуском трафика:

• на мобильном без скролла видны заголовок, оффер и главное действие
• дескриптор в шапке читается без знания бренда
• один доминирующий CTA, без спора кнопок
• нет карусели из разных офферов на услужном экране
• оффер совпадает с объявлением или органическим сниппетом
• первый блок ниже fold продолжает обещание, а не ломает его

Перед запуском рекламы удобно пройтись и по общему чеклисту приёмки сайта - там же скорость, формы и аналитика.

Частые вопросы