Что такое прехедер письма: гайд по тексту и вёрстке

Арина Шустаева

редактор EMAILMATRIX

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

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

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

Прехедер письма — это его текстовое превью. Он помогает привлечь пользователя и повышает открываемость емейла.

Прехедер может быть:

• видимым — такой отображается и после темы в списке рассылок, и в самом начале емейла после его открытия.
  
  
• невидимым — этот отображается только в списке рассылок после темы письма, т. е. до его открытия.
  

Фишки и требования

Уделяйте внимание формулировке и тематике

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

Создавайте интригу

Ни в коем случае не дублируйте тему, а плавно продолжите и раскройте её.

Пример с использованием юмора

Примеры с использованием эмодзи

Не используйте «жёлтые» слоганы

«Сенсация!», «Свершилось!», «Революция!» и другие подобные призывы банальны и ассоциируются со спамом. Такие прехедеры могут навредить вашей репутации. Придумайте что-то более оригинальное и менее навязчивое. Например:

Не повторяйтесь

Новое письмо — новый прехедер. Шаблоны — это скучно, будьте уникальными.

Персонализируйте

Использование информации о подписчике в прехедере сделает письмо более личным и дружелюбным.

Соблюдайте длину

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

Но учтите, что есть почтовые клиенты, которые не отобразят прехедер письма, как бы вы ни старались:

Как прописывать прехедер в вёрстке

Чтобы прописать в вёрстке видимый прехедер, используйте следующий код:

<span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; color:#000000;">
    Этот текст отобразится рядом с темой до открытия письма и в самом письме.
</span>

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

А чтобы сделать прехедер невидимым, можно использовать такой метод:

	<!--[if !mso]><!-->
<div style="font-size:0px;color:transparent;opacity:0;">
Этот текст отобразится рядом только с темой до открытия письма
</div>
<!--<![endif]-->

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

Пример короткого прехедера

Пример пустого прехедера

Чтобы сделать прехедер письма коротким, используйте следующий метод:

	<!--[if !mso]><!-->
<div class="preheader" style="font-size:0px;color:transparent;opacity:0;">
    Текст короткого прехедера
</div>
<div class="preheader" style="font-size:0px;color:transparent;opacity:0;">
&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;&#10240; 
</div>
<!--<![endif]-->

Чтобы сделать прехедер письма пустым, используйте код для короткого прехедера, но не прописывайте формулировку.
Например:

Код для короткого прехедера

Код для пустого прехедера

При вёрстке прехедера нужно учитывать ещё несколько особенностей.

1. Использование невидимого прехедера может негативно повлиять на доставляемость.
   Когда вы используете невидимый прехедер, почтовый сервис может расценить это как попытку скрыть от него что-то. Из-за этого он понизит репутацию вашей рассылки, что увеличит вероятность попадания в спам. Но если изначально у вас хорошая репутация отправителя, то письма всё равно попадут в инбокс. Если же ваша репутация как отправителя низкая, то рисковать не стоит, используйте видимый прехедер письма.
2. Mail.ru игнорирует текст в display:none.
   Если вы делаете прехедер письма невидимым с помощью этого стилевого свойства, Mail.ru проигнорирует его и подтянет из письма информацию, следующую за текстом прехедера. Поэтому для Mail.ru используйте другой метод. Например, тот, что мы показали выше.
3. Яндекс может заменить текст вашего прехедера.
   Яндекс использует более сложный механизм проверки текста, который проще всего объяснить на примере.

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

   Если вы столкнулись с такой проблемой, вас спасёт только тестирование — пробуйте переформулировать тексты ссылок.

Как прописывать прехедер письма в ESP

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

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

И, конечно же, не забывайте тестировать. Перед «боевой» рассылкой всегда отправляйте письма на тестовые ящики. Так вы сможете выявить ошибки и убедиться, что прехедер письма отображается корректно во всех почтовых провайдерах. Также обязательно делайте a/b-тесты. Тогда вы поймёте, какие формулировки прехедеров дают наибольший Open Rate.