Что такое превью письма (preheader) и как его добавить
Разбираемся, что такое превью-текст в HTML-письме, зачем он нужен и как добавить скрытый превью в свои письма.
Кратко
- ✓Превью - это текст, который виден в почтовом ящике рядом с темой письма или под ней.
- ✓Он работает как «вторая тема» и может повысить открываемость.
- ✓Скрыть превью в теле письма можно простым CSS.
- ✓В html2email превью проверяется автоматически.
Превью письма (preheader, preview text) - это короткий текст, который показывается в почтовом ящике рядом с темой или под ней. Он даёт получателю контекст до открытия письма и работает как «вторая тема», которая может заметно повлиять на открываемость.
Что такое превью письма по сути?
Технически превью - это самый первый текст в теле HTML вашего письма. Gmail, Outlook и Apple Mail автоматически подхватывают его и показывают рядом с темой или под ней в списке писем.
В почтовом ящике: тема письма и превью-текст рядом.
Если своё превью не задать, клиент возьмёт первый попавшийся текст - часто это «Открыть в браузере», «Отписаться» или alt у картинки.
Зачем нужен превью-текст?
Превью важно по нескольким причинам:
- Больше открытий. Хороший превью может поднять открываемость до ~7%, добавляя контекст или срочность к теме.
- Мобильные. На телефоне тему часто обрезают. Превью занимает место под ней и даёт второй шанс зацепить читателя.
- Вид. Своё превью выглядит осознанно, а «Открыть в браузере» - как недочёт.
| Сценарий | Эффект |
|---|---|
| Своё превью (краткая выгода) | До ~7% выше открываемость |
| Без превью / «Открыть в браузере» | Теряется место превью, меньше контекста |
Зачем нужно своё превью.
Как добавить скрытый превью в HTML?
Имеет смысл, чтобы превью было видно в почтовом ящике, но не было видно при открытии письма. Для
этого в самом начале <body> добавьте <div> или <span>
с нужными стилями.
<!-- Скрытый превью-текст -->
<div style="display:none;font-size:1px;max-height:0px;overflow:hidden;">
Текст, который покажется в почтовом ящике, но не в теле письма.
</div>← Эти стили скрывают блок в открытом письме; клиенты всё равно берут из него текст для превью.
Зачем такие стили?
display:none- скрывает блок в большинстве клиентов.max-height:0px; overflow:hidden- если display:none срежут, блок не займёт места.font-size:1px; color:#333333- запасной вариант: текст будет почти невидим или очень мелким.
<body style="margin:0; padding:0;">
<!-- Превью: первый элемент, чтобы клиенты взяли его в список писем -->
<div style="display:none; max-height:0; overflow:hidden;">
Ваш превью-текст.
</div>
<table>...остальное письмо...</table>
</body>← Скрытый блок превью должен быть первым внутри
<body>.
«Пробельный» трюк
Если превью короткое, клиент может подтянуть следующий текст («Открыть в браузере») и показать его сразу после
вашего. Чтобы этого избежать, можно добавить цепочку неразрывных пробелов ( ) и
zero-width non-joiner (‌), чтобы отодвинуть лишний текст за пределы превью.
Рекомендации по превью
- Длина. 40–130 символов. Короче - в превью может попасть другой текст; длиннее - обрежут.
- Дополняйте тему. Не дублируйте тему. Если тема «Распродажа сегодня!», превью может быть: «Скидка 50% на обувь до полуночи.»
- Призыв к действию. Подталкивайте к клику уже из почтового ящика.
- Не начинайте с «Открыть в браузере». Своё превью должно идти раньше служебных ссылок.
Как проверить превью?
Вручную проверять структуру письма неудобно. Легко забыть скрытый блок или ошибиться в стилях.
В расширении html2email для Chrome есть встроенная проверка превью: она автоматически проверяет HTML на соответствие рекомендациям перед отправкой.
Проверка превью в html2email.
Проверяется:
- Наличие
<div>или<span>как первого элемента в body. - Скрывающие стили вроде
display: noneилиfont-size: 0. - При необходимости - класс
preheader.
Если превью нет, расширение предупредит - так вы не упустите возможность улучшить открываемость.
Итог
Превью письма - небольшой, но сильный инструмент. Добавив в начало письма простой скрытый блок, вы контролируете, что видят получатели в почтовом ящике, и делаете коммуникацию профессиональнее.
Добавляйте превью в шаблоны и используйте html2email, чтобы каждый раз всё было сделано правильно.
Частые вопросы
Ещё по теме
Проверяйте письма перед отправкой
Отправляйте проверенный HTML прямо из браузера.
Gmail/Yahoo - бесплатноБез карты и регистрации