![](https://habrastorage.org/files/400/2f1/365/4002f1365f784bf1a3f0e0fb94a84459.png)
Вы потратили много времени на оптимизацию своих email-писем, и уверены что сообщения почтовой рассылки хорошо написаны, приятно выглядят и, что еще важнее, нормально отображаются в большинстве почтовых клиентов. Проблема в том, что даже самые идеальные письма с большой долей вероятности никогда не будут даже открыты получателем. Они просто попадут в папку «Входящие», где уже и так похоронено огромное количество текста.
Папка входящи сообщений — это первое, что видит пользователь почтовой программы, но это также часто и последний фактор, рассматриваемый при принятии решения о том, открывать ли письмо. Все почтовые клиенты в обязательном порядке показывают, от кого пришло письмо (поле “from”) и тему сообщения. Некоторые программы также показывают небольшой текст превью.
Оптимизация этого текста может приносить отличные результаты и значительно увеличивать процент открытых писем (иногда, до 45%).
Что такое текст превью
Текст превью (или прехедер) — это небольшой кусочек текста, который «подтягивается» из тела сообщения, и обычно он отображается под полями с именем отправителя и темой сообщения.
![](https://habrastorage.org/files/012/1de/337/0121de337d2a4329ba3e871cd901743a.jpg)
Концепция текста превью это современная адаптация понятия «Блока Джонсона» (Johnson Box) —блока с продающим предложением, который размещался в самом верху бумажных рекламных посланий. Идея совершенно та же — текст превью может привлечь внимание получателя сообщения и сподвигнуть человека на открытие письма.
Кроме того, прехедер также может влиять на поведение пользователя —например, если заинтересовать человека упоминанием какого-то интересного объекта (название статьи), то он затем будет искать его в тексте сообщения. Пример такой манипуляции — компания Wedding Wire стала упоминать в тексте превью «вдохновляющие свадебные идеи этой недели», что вызывало интерес у читателей. Процент открытий сообщений в ходе тестов увеличился на 30%.
![](https://habrastorage.org/files/319/506/016/319506016daf43ab861fe1e82d1fea5b.jpg)
Проведение подобных тестов может давать хороший результат (пусть и не всегда быстрый), плюсом также является простота внесения изменений — не нужно ничего верстать и изменять HTML или дизайн шаблона.
Добавляем текст превью в сообщение
Текст превью «вытягивается» из первых нескольких строк текста письма. В теле текста сообщения его можно также отображать или скрывать. Можно просто начинать письмо со слов, которые будут дополнять тему сообщения и поле «от кого»:
![](https://habrastorage.org/files/b27/7c7/0ed/b277c70ed4bd4acaa09236c26f07bb31.jpg)
![](https://habrastorage.org/files/19b/0cb/97c/19b0cb97ce0c4f09a7377d8bdb87fb4b.png)
Видимый текст превью
Очень часто в прехедер попадают небольшие иконки, ссылки для «шаринга» контента в соцсетях или служебные фразы, сообщающие о том, что делать, если письмо отображается некорректно. Все это важные элементы, но они не говорят пользователю «Открой меня!» — а ведь текст превью нужен именно для этого.
![](https://habrastorage.org/files/695/ac6/e32/695ac6e327894f4d8ba7234546007fd0.png)
В том случае, если в прехедер попали перечисленные элементы, стоит подумать о том, чтобы перенести их в другое место в сообщении или добавить перед ними пару строк дополнительного, более привлекательного текста.
Можно не только показывать в превью первые фразы письма, но и конкретно указывать, какой текст должен попасть в прехедер. Делается это с помощью пары тегов, которые нужно разместить после тега
:
<body>
<div>
Вот так выбирается текст для превью.
</div>
</body>
Скрытый текст превью
Не всегда можно использовать видимый текст превью. Например, иногда принципиально важно первым делом поместить в письмо ссылку на сайт компании или кнопку для открытия письма в браузере. Но даже в таком случае есть выход.
Скрытый текст превью позволяет изменять текст, отображаемый в прехедере письма, без необходимости наличия этого текста в самом email.
![](https://habrastorage.org/r/w1560/files/ba2/475/a96/ba2475a961904da1a6668a832d79b379.png)
![](https://habrastorage.org/r/w1560/files/6ba/bac/442/6babac4423a14be6a3a775e027fe5cf5.png)
В случае, изображенном выше, если бы не использование скрытого текста превью, то в прехедер попала бы не нужная фраза, а ALT-текст логотипа компании.
Для скрытия текста превью можно использовать несколько разных способов. Например, с помощью CSS можно подсказать тексту, что он не должен отображаться. Поскольку опция display:none работает не во всех почтовых программах (да-да, речь о тебе, Gmail), можно добавить к ней еще пару моментов — например, указать, что текст должен совпадать с цветом фона и быть высотой всего один пиксель:
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
Здесь текст превью.
</div>
Подобные методы иногда вызывают обсуждения того, могут ли возникнуть проблемы при доставке такого сообщения. Однако если не злоупотреблять ими и в целом иметь хорошую репутацию у спам-фильтров, то все должно быть нормально.
Какие почтовые клиенты поддерживают текст превью
Как и с любой другой вещью, связанной с email, поддержка прехедеров от приложения к приложению отличается. Даже если программа поддерживает данную функцию, все равно в каждой папке входящие письма будут выглядеть по-разному — отличается и расположение и число отображаемых символов.
Десктоп
Поддержка прехедеров
Среднее число отображаемых символов
Apple Mail
![check-green](https://habrastorage.org/r/w1560/getpro/habr/post_images/1f0/541/fa8/1f0541fa8d9809fe8fe333ee41c35013.png)
140
Lotus Notes 8.5
![check-X](https://habrastorage.org/r/w1560/getpro/habr/post_images/486/2d0/7d2/4862d07d2c465f03b9813cdff9496137.png)
N/A
Outlook 2003
![check-X](https://habrastorage.org/r/w1560/getpro/habr/post_images/486/2d0/7d2/4862d07d2c465f03b9813cdff9496137.png)
N/A
Outlook 2007
![check-x](https://habrastorage.org/r/w1560/getpro/habr/post_images/486/2d0/7d2/4862d07d2c465f03b9813cdff9496137.png)
N/A
Outlook 2010
![check-X](https://habrastorage.org/r/w1560/getpro/habr/post_images/486/2d0/7d2/4862d07d2c465f03b9813cdff9496137.png)
N/A
Outlook 2013
![check-green](https://habrastorage.org/r/w1560/getpro/habr/post_images/1f0/541/fa8/1f0541fa8d9809fe8fe333ee41c35013.png)
35
Outlook for Mac 2015
![check-green](https://habrastorage.org/r/w1560/getpro/habr/post_images/1f0/541/fa8/1f0541fa8d9809fe8fe333ee41c35013.png)
55
Мобильные приложения
Поддержка прехедеров
Среднее число отображаемых символов
Android Native App
![check-green](https://habrastorage.org/r/w1560/getpro/habr/post_images/1f0/541/fa8/1f0541fa8d9809fe8fe333ee41c35013.png)
40
Android Gmail App
![check-green](https://habrastorage.org/r/w1560/getpro/habr/post_images/1f0/541/fa8/1f0541fa8d9809fe8fe333ee41c35013.png)
*
Android Yahoo! App
![check-green](https://habrastorage.org/r/w1560/getpro/habr/post_images/1f0/541/fa8/1f0541fa8d9809fe8fe333ee41c35013.png)
45
BlackBerry
![check-x](https://habrastorage.org/r/w1560/getpro/habr/post_images/486/2d0/7d2/4862d07d2c465f03b9813cdff9496137.png)
N/A
iOS Native App
![check-green](https://habrastorage.org/r/w1560/getpro/habr/post_images/1f0/541/fa8/1f0541fa8d9809fe8fe333ee41c35013.png)
90
iOS Gmail App
![check-green](https://habrastorage.org/r/w1560/getpro/habr/post_images/1f0/541/fa8/1f0541fa8d9809fe8fe333ee41c35013.png)
50
iOS Yahoo! App
![check-green](https://habrastorage.org/r/w1560/getpro/habr/post_images/1f0/541/fa8/1f0541fa8d9809fe8fe333ee41c35013.png)
50
Windows Phone
![check-green](https://habrastorage.org/r/w1560/getpro/habr/post_images/1f0/541/fa8/1f0541fa8d9809fe8fe333ee41c35013.png)
40
Веб-клиенты
Поддержка прехедеров
Среднее число отображаемых символов
AOL Mail
![check-green](https://habrastorage.org/r/w1560/getpro/habr/post_images/1f0/541/fa8/1f0541fa8d9809fe8fe333ee41c35013.png)
75
Gmail
![check-green](https://habrastorage.org/r/w1560/getpro/habr/post_images/1f0/541/fa8/1f0541fa8d9809fe8fe333ee41c35013.png)
*
Yahoo!
![check-green](https://habrastorage.org/r/w1560/getpro/habr/post_images/1f0/541/fa8/1f0541fa8d9809fe8fe333ee41c35013.png)
*
Outlook.com
![check-x](https://habrastorage.org/r/w1560/getpro/habr/post_images/486/2d0/7d2/4862d07d2c465f03b9813cdff9496137.png)
N/A
* может отличаться в зависимости от темы и длины.
Использованные устройства:
Samsung Galaxy S3 – Android 4.3
BlackBerry Z10
iPhone 6
Nokia Lumia 520 – Windows Phone 8
Расположение текста превью
Большинство почтовых программ отображают текст превью на новой строке, отделенной от темы сообщения и поля «от кого». В случае приложений Apple Mail и iOS Mail часто показываются две или даже три строки текста:
![](https://habrastorage.org/r/w1560/files/94a/ef3/323/94aef3323e05487f9114dc027ef326ab.png)
В случае других приложений (напримел AOL Mail), показывается строго одна строка текста:
![](https://habrastorage.org/r/w1560/files/83d/6c1/7f7/83d6c17f7f4f494b9a0128c2f71b84cd.png)
Почтовое приложение iPhone 6 отображает три строки текста превью.
![](https://habrastorage.org/r/w1560/files/ce2/26c/b61/ce226cb61e6b4057960bf6f5f90ed9b8.png)
В Gmail (и Yahoo!) прехедер показывается сразу после темы письма:
![](https://habrastorage.org/r/w1560/files/5d5/4ae/6f7/5d54ae6f7c434e14a52f06062578b12f.png)
В зависимости от ширины дисплея мобильного устройства и длины темы письма, прехедер в Gmail может и не отобразиться.
В случае Gmail для Android тема письма и текст превью сливаются в две строки непрерывного текста:
![](https://habrastorage.org/r/w1560/files/614/086/861/6140868611974b85a4b5e70a3520d6ec.png)
Подсчет символов в прехедере
Ширина окна браузера, почтовое приложение, длина темы сообщения — все это может влиять на то, сколько символов текста превью будет отображено в папке входящих писем. Например, iOS Mail может отобразить примерно 90 символов текста превью, а Windows Phone не более примерно 40 символов перед тем, как обрезать строку.
![](https://habrastorage.org/r/w1560/files/e8d/366/957/e8d366957c524156b74c38132a9c0596.png)
Нативное почтовое приложение iOS
![](https://habrastorage.org/r/w780q1/files/09c/a40/c8f/09ca40c8f7ca45709aeac6d5dc43a49d.jpg)
Windows Phone
В Gmail, Yahoo и Gmail для Android длина прехедера зависит от длины темы письма, поэтому текст превью в этих случаях может составить и ноль и несколько десятков символов.
Какие приложения не поддерживают текст превью
BlackBerry, Outlook.com, Lotus Notes и ранние версии Outlook не поддерживают прехедеры. Если эти почтовые программы популярны среди целевой аудитории почтовой рассылки, то следует больше времени уделить работе над оптимизации темы сообщения и поля «от кого».
![](https://habrastorage.org/r/w1560/files/ef3/5d1/cb9/ef35d1cb92e0442aa46bc336cf8b5de1.png)
BlackBerry
![](https://habrastorage.org/r/w780q1/files/a03/91e/1e0/a0391e1e08304f678e9d314468c491a1.jpg)
Outlook 2010
Как оптимизировать текст превью
Вторая тема письма
О прехедере нужно думать, как о «второй теме» и использовать похожие подходы к его оптимизации. В нем должна содержаться полезная, конкретная и, если это уместно, срочная информация. Текст превью — отличное место для экспериментов с юмором, различными символами и другими вещами, которые боязно выносить в саму тему.
Ключевые слова в начале
Важно помнить об ограничении на отображаемые символы текста превью. Поэтому нужные вещи должны идти в самом начале сообщения, чтобы их показали даже те клиенты, которые нещадно обрезают прехедер. Не следует делать превью слишком коротким — нужно заполнить все три строки в iOS-клиентах. Важно найти баланс.
Следует избегать повторений
Идея еще раз использовать тему может быть соблазнительной, но искушению нужно противостоять, поскольку никто не любит два раза в течение пары секунд читать одно и то же. Дополнительное место в прехедере лучше использовать, чтобы дополнить тему сообщения и стимулировать получателей сообщения открыть его. A/B тесты помогут определить, какие варианты текста работают лучше.
Еще несколько советов:
- Персонализация: Если в других email-кампаниях бизнеса использование персонализации оказалось удачным решением, стоит применить его и в случае текста превью.
- Резюме послания: Если в теме сообщения используется призыв к действию, то с помощью прехедера можно дать потенциальному клиенту больше информации. Например, если тема звучит как «Скидка 50% на новые поступления», то в прехедере можно раскрыть, какие типы одежды поступили на склад.
- Призыв к действию: Если в теле письма есть призывы к действию, которые хорошо сочетаются с темой сообщения, то вполне можно вынести одно из них в текст превью.
- Честность: Не нужно обманывать пользователей, заставляя их любой ценой открыть сообщение. Имя отправителя, тема письма и превью должны однозначно давать человеку понять, от кого он получил письмо, и что в нем содержится.
- Поощрение прокрутки: Если в прехедере упомянуть что-то важное, о чем говорится в середине сообщения, то многие пользователи захотят долистать сообщение до этого момента.
Читайте также другие материалы от «Печкина»: