8 распространённых ошибок в прехедере и как их избежать

После просмотра имени отправителя взгляд читателя падает на тему письма. В отличие от имени отправителя, темы писем меняются при каждой рассылке. С ними проводят больше А/В тестов, чем с другими элементами электронных писем. Мы рассмотрели восемь типичных ошибок в прехедере и обсудили их с нашим технологом Александром Каринцевым.

Превью текст, или прехедер — третий по значимости и расположению элемент письма.

У превью текста больше возможностей. Например, у родного почтового клиента на айфоне в теме умещается 35–40 символов, а в превью — вдвое больше.

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

В письме прехедер подтягивается из раздела <body>. В этом же разделе прописывается альтернативный текст для баннера, или ALT. Если не закрыть тег или прописать его с ошибкой, баннерный ALT встанет на место прехедера.

Чтобы ничего не перепутать, в самом начале раздела пропишите стандартный текстовый блок и впишите прехедер вместо заглушки — *|MC_PREVIEW_TEXT|* .

Если хотите, чтобы читатель первым делом видел логотип и баннер, используйте тег display:none. Тогда прехедер будет невидимым в письме. Код для скрытого прехедера выглядит так:

В Мейлчимпе правильно прописанный прехедер выглядит так

Если в коде письма ошибки — например, незакрытый тег — вместо превью текста получатель увидит код.

Чтобы проверить код на опечатки, проверяйте его с конца, то есть, задом наперёд. Но пропущенный символ так сложно заметить. Если глаз замылился, попросите коллегу помочь или сделайте перерыв и вернитесь к задаче через час.

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

Не все почтовые клиенты видят эмоджи. Самый проблематичный в этом плане — Аутлук. Особенно, если это эмоджи для iOS, где одних только цветов кожи шесть. В этом случае смайлик может превратиться в непонятные символы, квадраты или вообще в код:

Проверяйте поддержку символов в Литмусе, а ещё лучше — на настоящих устройствах. Если среди ваших подписчиков много пользователей Аутлука, с эмоджи лучше не экспериментировать.

Используете именные письма? Проверьте базу — если не у всех подписчиков указаны имена, дважды убедитесь в том, что рассылка настроена корректно. Иначе вместо обращения будет пробел:

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

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

Если все теги закрыты, а в прехедере по-прежнему HTML текст, проверьте, не попал ли в прехедер лишний тег.

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

Если текст, который идёт в письме первым (и автоматически становится прехедером) не подходит к теме, пропишите скрытый прехедер с display:none, как в первом пункте.

Менеджеры, которые отвечают за рассылку, не считают нужным тратить время на оптимизацию превью текста — это самая распространённая ошибка.

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

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

Используйте прехедер, чтобы раскрыть и объяснить тему письма.

Символы &zwnj;&nbsp; разбивают текст по строкам. Используйте их, чтобы оставить пространство в конце превью текста свободным.

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

Используйте программу Subject Line Checker от Литмуса. В ней вы сможете проверить, как отображаются тема и прехедер и посмотреть, как они выглядят в десктопных почтовых клиентах и в приложениях.