Всё, что нужно знать про прехедер письма

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

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

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

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

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

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

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

    прехедер письма

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

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

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

прехедер письма

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

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

прехедер письма

Выделяйтесь среди остальных

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

Каомодзи — японские смайлики, созданные с помощью пунктуационных знаков, иероглифов и прочих символов. Например, (´・ω・`) или ¯\(ツ)/¯.

прехедер письма

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

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

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

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

прехедер письма

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

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

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

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

прехедер письма

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

Каждая почтовая программа отображает разную длину прехедера. Чтобы избежать казусов, прописывайте прехедер письма до 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]-->

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

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

прехедер письма

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

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

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


	<!--[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;">
&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;
</div>
<!--<![endif]-->

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


	<!--[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;">
&nbsp;&zwnj; &nbsp;&zwnj; &nbsp;&zwnj; &nbsp;&zwnj; &nbsp;&zwnj; &nbsp;&zwnj; &nbsp;&zwnj; &nbsp;&zwnj; &nbsp;&zwnj; &nbsp;&zwnj; &nbsp;&zwnj; &nbsp;&zwnj; &nbsp;&zwnj; &nbsp;&zwnj; &nbsp;&zwnj; 
</div>
<!--<![endif]-->

Обратите внимание, что между «zwnj;» и «&nbsp;» находится символ четверного пробела (код & #8197;).

При этом, если вы будете использовать этот код и для других провайдеров, ваше письмо, скорее всего, попадёт в спам. Поэтому при рассылке комбинируйте оба метода: для писем на все емейл-адреса, кроме тех, что относятся к Mail.ru (@mail.ru, @list.ru, @inbox.ru, @bk.ru), прописывайте код короткого прехедера из первого примера. А для писем на Mail.ru используйте вторую версию.

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

прехедер письма

Код для короткого прехедера во всех провайдерах, кроме Mail.ru

Код для пустого прехедера во всех провайдерах, кроме Mail.ru

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

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

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

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

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

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



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

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

Понравились идеи?
Обращайтесь! Оптимизируем вашу рассылку.
Поделиться статьёй
Подписаться на рассылку