Прехедер

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

Главное

Технически это <span> с классом preheader, стилизованный как display:none для десктопов, но видимый в Превью мобильных клиентов.
Эффективный текст должен содержать 35–90 символов: слишком короткий не информативен, слишком длинный обрезается.
В email-рассылках прехедер напрямую влияет на Open Rate, так как виден до клика по письму.
На лендингах он работает как подзаголовок (lead-in), задавая Контекст перед основным оффером.
Отсутствие прехедера приводит к тому, что почтовый Клиент автоматически подтягивает «мусорный» текст из тела письма.

Как работает Прехедер

Механизм работы базируется на парсинге HTML-кода почтовым сервером или браузером. При получении письма система ищет первый видимый текстовый фрагмент после тега <Body>. Если Разработчик не внедрил специальный Скрытый блок, Клиент выводит случайные символы из верстки или первого абзаца текста. Правильно настроенный инструмент перехватывает этот Поток данных, предоставляя пользователю осмысленную информацию. Он не дублирует тему письма, а расширяет её, создавая когнитивный мост между интригой темы и сутью предложения.

Зачем нужен Прехедер

Основная задача элемента — повышение открываемости писем (Open Rate) и Улучшение пользовательского опыта. В условиях перегруженного инбокса пользователи сканируют Список сообщений за секунды, обращая внимание на длину и Содержание второй строки текста. Этот инструмент позволяет добавить Социальное доказательство, указать срок действия акции или персонализировать обращение. Без него бренд теряет контроль над тем, как его сообщение воспринимается на этапе принятия решения о клике.

Какие бывают виды прехедера

Классификация зависит от маркетинговой цели и стадии воронки продаж. Информационный тип сообщает факты: «Доставка бесплатно», «Скидка -50%». Социальный тип использует отзывы: «1000+ довольных клиентов». Персонализированный включает имя получателя или город, повышая Релевантность. Навигационный указывает на раздел контента: «Часть 2 статьи», «Новые кейсы». Технический тип представляет собой пустой или неразрывный пробел ( ), используемый для принудительного скрытия текста в старых почтовых клиентах, которые игнорируют CSS-свойства.

Где используется Прехедер

Первичная ниша применения — email-рассылки, где элемент критичен для конкурентной борьбы за внимание. Также он интегрируется в мобильные push-уведомления, где выступает как подзаголовок уведомления. На посадочных страницах (лендингах) аналогичный функционал выполняют подзаголовки H2 или Лид-абзацы, расположенные над главным заголовком H1. В SMS-маркетинге роль выполняет преамбула сообщения, предваряющая основной Оффер. Использование в социальных сетях ограничено форматом постов, где вместо него используются хэштеги или первые строки текста.

Пример: установка и чтение прехедера

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

html

<!-- Скрытый прехедер для email-клиентов -->
<div class="preheader">
  <span style="font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
    Используйте промокод SAVE20 для скидки 20% только сегодня!
  </span>
</div>

<!-- Основной контент письма -->
<body>
  <h1>Специальное предложение</h1>
</body>

Важно: избегайте использования тегов <img> без альт-текста в начале прехедера, так как некоторые клиенты могут обрезать изображение вместе с текстом, оставив пустое место.

Часто задаваемые вопросы прехедера

Часто задаваемые вопросы

Сколько символов должно быть в тексте?

Оптимальная длина составляет от 35 до 90 символов. Этого диапазона достаточно, чтобы передать смысл, но избежать обрезки в большинстве популярных почтовых клиентов, таких как Gmail и Apple Mail.

Что будет, если не использовать прехедер?

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

Можно ли дублировать тему письма?

Нет, это ошибка. Тема и прехедер должны работать в связке: тема создает интригу, а второй текст раскрывает выгоду. Дублирование wastes valuable real estate и не добавляет ценности.

Как проверить отображение?

Используйте сервисы тестирования рассылок (Mailtrap, Litmus) или отправьте тестовое письмо на разные аккаунты (Gmail, Outlook, iCloud) и посмотрите, как оно выглядит в списке входящих на мобильном устройстве.

Итоги

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

Элемент скрыт визуально, но видим в интерфейсе почтового клиента.
Влияет на Open Rate, выступая вторым аргументом для открытия письма.
Требует технической настройки через CSS для скрытия на десктопе.
Не должен дублировать тему, а дополнять её новой информацией.
Оптимален по длине в пределах 35-90 символов.
Обязателен для всех коммерческих и информационных рассылок.
Помогает бренду контролировать нарратив еще до клика.