Хедер и прехедер письма — важные технические и смысловые элементы email-письма. От них во многом зависит открываемость и, соответственно, конверсия рассылки.
Эта статья — о тонкостях создания хедера и прехедера email-сообщения. Грамотно реализованная шапка улучшает открываемость и, соответственно, конверсию email-рассылки.
Что такое хедер
Это технический заголовок письма, который идет перед его телом. Может быть как текстовым, так и графическим. Чаще всего это логотип бренда, который растянут во всю ширину письма.
Хедер играет важную роль в письме — он является маркером узнаваемости отправителя, по которому адресат делает выводы о содержимом письма. Все это происходит на интуитивном уровне и за доли секунды, детально хедер практически не смотрят.
Например, фирменная шапка Т-Ж в письме с лету дает понять, что в письме будет про финансы, а не про ежиков или космические корабли.
Технически хедер выглядит, как вся часть HTML-кода до тега <body>, который открывает тело письма. В нем содержится информация о таких атрибутах письма, как:
- отправитель и адресат;
- дата и время отправки вплоть до секунд;
- «резервная» ссылка на браузер, позволяющая открыть письмо вне почтовика;
- техническая тема письма.
В момент отправки сообщения сервис рассылок добавляет дополнительную техническую информацию — ip-адрес отправителя, категория письма, подтверждение подлинности цифровых подписей DKIM и SPF.
Как добавить DKIM-подпись и SPF-запись – читайте в нашей базе знаний.
Все эти данные тоже представлены в виде элементов кода. Но помимо них, в хедер можно вставить ряд других атрибутов, которые придадут ему смысловую наполненность. Собственно, они и превращают шапку письма из вспомогательного блока в элемент email-маркетинга.
Помимо логотипа, в хедер можно поместить текст или кликабельные ссылки — разделы меню, ссылку на личный кабинет пользователя, условия доставки или возврата товара. Таким образом бренды доносят информацию о текущих акциях, призывают к покупке или другим действиям и переводят в другие каналы коммуникации, те же соцсети.
Продуманная шапка письма не только повышает шанс на вдумчивое прочтение, но и конверсию других маркетинговых каналов, улучшает доставляемость и уменьшает вероятность попадания в спам. Функциональный подход к реализации хедера значительно повышает шанс на прочтение письма.
Верстка хедера: основные моменты
Шапкой будет считаться все, что входит в рамки тега <head>. Если этот атрибут не прописан, хоть вручную в блокноте, хоть в виде готовых блоков редактора, почтовые сервисы автоматически наденут шапку на ваше письмо. Визуально она будет выглядеть как пустое место. Поэтому если вы хотите, чтобы ваш хедер получился красивым и информативным, в HTML следует прописать теги, которые «объяснят» почтовикам, как и что показывать:
- <!DOCTYPE> – содержит информацию об используемых в письме HTML-атрибутах.
- <meta http-equiv=”Content-Type” /> – содержит данные о спецсимволах письма и способе обработки его кода.
- <meta name=”viewport”/> – указание предпочтительных устройств просмотра;
- атрибут «text/html» указывает почтовому сервису, что дальнейшее содержимое нужно читать, как HTML-код. В ином случае он отсечет их, как ненужные элементы.
Также не забывайте об атрибуте <title>. Он дает почтовому провайдеру информацию о теме письма.
Сделать аккуратный информативный хедер с логотипом, ссылками и другими элементами брендинга и конверсии можно и без углубленных знаний HTML. В блочном редакторе Sendsay необходимые элементы встраиваются в структуру письма одним движением мышки:
Через опцию редактора «HTML-блок» вы сможете реализовать любые визуальные атрибуты: иконки, шрифты и т.д. Результат работы сразу отображается в окне редактора. А готовый хедер уже содержит все необходимые данные.
Как сделать рабочий хедер: общие рекомендации
- Избегайте визуальной перегруженности. В шапке достаточно одной детали, которая указывает на отправителя: название или логотип. То и другое — уже перебор, если учесть, что элементы фирменного стиля принято включать еще и в футер письма. Смысловая лаконичность и информативность — лучшие друзья хедеров.
- Если вы включаете в шапку текстовые элементы (слоган, УТП), следите, чтобы они не диссонировали с телом. Например, в шапке каллиграфия с засечками, а само письмо написано минималистичным шрифтом. Такие фрагменты смотрятся, будто из разных писем, нет целостности восприятия информации, к которой всегда стремятся рассылки.
- Помните о цветовой гамме и правилах цветового круга. Если в теле используется цветной фон, он должен быть комплементарным шапке, то есть находиться на противоположной стороне круга. Например, если логотип у вас оформлен в сочных красно-розовых тонах, фон можно сделать ненасыщенным голубым и бирюзовым. Комплементарность важна и на уровне размеров и шрифтов. При скролле тела письма хедер должен быть небольшим (но и не крошечным), чтобы адресату не пришлось крутить колесо мышки, дабы увидеть текст.
Как сделать прехедер и зачем над этим заморачиваться
Структурно прехедером называют небольшую область над шапкой письма. Несмотря на размер, роль у него значительная. Прехедер, он же сниппет, отображается сразу после заголовка письма и отличается от него шрифтом. Если его не прописывать, сниппет подтягивается автоматически из текста письма.
Что по размерам: рекомендуемая длина прехедера в десктопных email-клиентах — до 130 символов с пробелами. В мобильных — максимум 40. Если сделать длиннее, почтовик «обрубит» сниппет на середине фразы или слова. Слишком короткий (менее 20 символов) прехедер — тоже не круто. Некоторые сервисы в таком случае подтягивают вместо него email-адрес отправителя.
Продуманный прехедер хорошо работает на открываемость. Если заголовок привлекает внимание, то сниппет способен не только его удержать, но и еще больше заинтересовать адресата. Вот приемы, которые часто используют в маркетинговых рассылках:
- Персонализация — прехедер начинается с имени адресата или другой информации, которая к нему относится.
- Эмодзи вместо фрагментов текста. Задают письму неформальный тон и создают интригу. Но с ними нужно аккуратно, чтобы не выпасть за рамки tone of voice.
- Призыв к действию. Если письмо «обернуто» вокруг УТП (например, вы информируете подписчиков о скидках), есть смысл добавить в прехедер CTA, который отражает пользу или выгоду. «Сэкономьте до 40 %», «Получайте подарки», «Участвуйте в розыгрыше и т. д.».
- Скрытый (невидимый) прехедер. Иногда отсутствие сниппета работает на открываемость лучше, чем его наличие. Например, вы хотите повысить открываемость за счет интриги. В качестве письма используете логотип компании, а прехедер, уточняющий тему, прячете. Есть нюанс: скрытый прехедер все равно отображается в списке писем.
В Sendsay скрытый прехедер можно реализовать двумя способами:
- Вставить код <div style="display:none;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"> текст</div> в HTML-редакторе.
- Поиграть со шрифтами и фонами в блочном редакторе. Нужно добиться эффекта, при котором текст максимально «растворяется» на фоне. Повторимся, что блочный редактор Sendsay удобен тем, что результат верстки отображается в режиме реального времени — не нужно переходить в другую вкладку. Не забывайте и о том, что есть темная тема, которую тоже нужно проверить.
Как выжать максимум из хедера и прехедера: советы от Sendsay
Тестируйте верстку письма на разных устройствах. Съехавший в сторону текст или битые картинки могут свести на нет прогревающий эффект письма. Больше о тестировании писем читайте здесь.
С осторожностью используйте стоп-слова, вроде «срочно», «выгодно», «помогаем» «это должен знать каждый», «мы в шоке» и т. д. Легкий кликбейт стимулирует открываемость, поэтому отказываться от этого приема не стоит.
Следуйте двум правилам: вместо явных стоп-слов и фраз используйте их вариации («Советуем ознакомиться», «Хороший способ сберечь деньги» и т. д.), и привязывайте кликбейтные шапки и прехедеры к содержанию письма. В этой статье мы писали о словах, которые чаще всего попадают в спам-фильтры почтовых сервисов.
