Разборы

15 ошибок вёрстки, из-за которых письмо может попасть в спам

... и как их исправить.

Сыграем в игру. Я покажу 2 письма, а вы угадаете, какое я достал из папки «Спам».

Какое письмо я достал из спама
Игра: какое письмо я достал из спама?

Спам-рассылку сразу видно из-за специфического дизайна: шапка и футер отсутствуют, ссылки привязаны почти ко всему тексту, используются вырвиглазные цвета.

Почтовые клиенты анализируют тонны таких писем и вычисляют приёмы, которые спамеры используют чаще всего. Эти закономерности лежат в работе спам-фильтра. Именно он решает, куда отправить письмо — в «Спам» или во «Входящие».

Иногда спам-фильтры отправляют в «Спам» письма от добросовестных отправителей. Часто это происходит из-за особенностей вёрстки — программа цепляется к цвету шрифта, сокращённым ссылкам или отсутствию alt-тегов у картинок. Если таких мелочей наберется достаточно, рассылка будет отмечена как спам и не дойдёт до «Входящих».

Я расскажу об ошибках в вёрстке письма, из-за которых рассылка может попасть в спам, и дам рекомендации, как их исправить.

Ошибка 1. Отсутствует Plain text версия письма

Plain text — письмо, которое состоит только из текста. Такой формат нужен для почтовых клиентов, которые не могут отображать HTML. Отсутствие Plain text версии письма настораживает спам-фильтры — почтовый сервис может посчитать рассылку спамом.

HTML и Plain text версии письма
HTML и Plain text версии письма

Большинство писем уходят сразу в 2 форматах: HTML + Plain text. Какую из версий показать пользователю, решает почтовый клиент.

Как исправить. Большинство сервисов рассылок автоматически добавляют Plain text версию. Проверяем текстовую версию письма в Unisender:

Проверяем Plain text версию письма

Ошибка 2. Письмо свёрстано одной картинкой

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

Бухгалтерский беспредел в папке «Спам»

Как исправить. Напишите в письме текст, хотя бы 1-2 абзаца. Это снизит риск того, что рассылка попадёт в спам.

Ошибка 3. В письме есть Flash, JavaScript или ActiveX

С помощью Flash, JavaScript и ActiveX спамеры могут рассылать вирусы. Большинство почтовых сервисов не поддерживают эти технологии и с подозрением относятся к письмам, в которых они есть.

Чаще всего Flash, JavaScript и ActiveX попадают в рассылки, когда отправитель напрямую копирует код с сайта в письмо. Также в сообщение могут проникнуть запрещённые CSS-стили и атрибуты HTML. Mail.ru написали об этом в требованиях по отправке электронных писем:

При использовании HTML в ваших сообщениях, убедитесь что соблюдена валидная структура HTML-документа. Запрещено использовать потенциально опасные объекты, такие как ActiveX, JavaScript, VBScript, Java-апплеты, Frames и IFrames, подключаемые с внешних сайтов CSS, Meta Refresh и т.п. (использование таких элементов может привести к блокировке ваших рассылок).

Как исправить. Просто вырезаем все элементы, которые могут смутить спам-фильтры. В некоторых случаях Flash-анимацию можно заменить на GIF.

Ошибка 4. В письме используются редиректы или укоротители ссылок

Почтовые сервисы не хотят, чтобы отправители скрывали ссылки, на которые кликают пользователи. Редиректы и укоротители ссылок часто используют спамеры — так можно скрыть загрузку .exe-файла или переход на вредоносный сайт. Снова цитируем требования по отправке электронных писем Mail.ru:

Попытка использовать сторонние сервисы (редиректоры, „укоротители ссылок“) для сокрытия информации о настоящей целевой странице любой из веб-ссылок в письме могут привести к тому, что рассылка будет заблокирована.

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

Гиперссылка в письме
Гиперссылка ведет прямиком на сайт — у спам-фильтра никаких подозрений
URL не совпадает с конечным адресом
URL в письме не совпадает с конечным адресом. Не удивительно, что письмо попало в «Спам»

Как исправить. Зашиваем ссылки в текст и картинки. Укоротители ссылок и редиректы не используем.

Ошибка 5. Большой размер вложения к письму

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

Как исправить. Если вам нужно, чтобы пользователь скачал файл, дайте на него ссылку в письме. Файл для этого нужно заранее залить на файлообменник. Вот пример того, как можно привязать ссылку на загрузку к кнопке:

Ссылка на Google Диск привязана к кнопке
Привязываем ссылку на Google Диск к кнопке

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

Лимиты на размер вложенных файлов
Лимиты на размер вложенных файлов. Информация из Базы знаний UniSender

Ошибка 6. Большой размер письма

Маркетологи из Email On Acid решили выяснить, как размер письма влияет на доставляемость. Они протестировали текстовые HTML-письма размером от 15 до 650 КБ на 23 наиболее известных спам-фильтрах. Сообщения меньше 100 КБ успешно проходили антиспам-проверку. При увеличении размера начинались проблемы: один или несколько спам-фильтров не пропускали сообщение во «Входящие».

Спам-фильтры в исследовании EmailOnAcid
7 из 23 спам-фильтров не пропустили «тяжелое» письмо во «Входящие»

Как исправить. Стараемся уменьшить размер писем до 100 КБ и меньше. Мы уже писали, как это сделать, в статье про схлопывание писем в Gmail.

Ошибка 7. Слишком широкое письмо

Большинство десктопных сервисов для чтения почты имеют размер области просмотра меньше 600 px. Письмо шире 600 px будет разъезжаться и не отобразится нормально.

Как исправить. Задавайте ширину тела письма в 550-620 px, когда верстаете под экраны компьютера. Это гарантия того, что письмо будет хорошо смотреться в любом десктопном приложении.

Ошибка 8. Много ярких шрифтов

Яркие шрифты, которые часто меняются по ходу письма — популярный прием спамеров. Вот типичный пример спам-рассылки:

Яркие цвета текста часто меняются
Два письма из спама с частой сменой ярких цветов

Как исправить. Следим, чтобы рассылка не пестрила. Использовать 2-3 разных цвета можно, если не выкручивать насыщенность на максимум.

Рассылка The Bell
Рассылка The Bell. Цвет меняется только по делу: в новом разделе, в подзаголовке и для гиперссылок

Ошибка 9. Часть текста написана с Caps Lock

Ещё один прием, который можно встретить в спам-рассылках. Авторы хотят заинтересовать пользователей отдельными словами и фразами, но привлекают только внимание спам-фильтров.

Caps Lock в спам-рассылке
Caps Lock, восклицательные знаки и яркие цвета — все, чтобы попасть в «Спам»

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

Ошибка 10. Форматирование скопировано с текстовых редакторов или с сайта

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

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

Пеобразование Google Doc в HTML
Преобразовал Google Doc в HTML через конвертер. В коде появились атрибуты HTML и стили CSS, которые не поддерживаются почтовыми приложениями

Как исправить. Если нужно скопировать текст в рассылку, то сначала вставьте его в простейший текстовый редактор («Блокнот»), а только потом — в письмо. Так вы очистите форматирование текста — лишние теги и атрибуты не попадут в рассылку.

Проблемы с форматированием чаще возникают, когда копируют текст с отступами, дополнительными колонками, редкими шрифтами или заливкой фона. Если вставить несколько предложений обычного текста, написанного на Arial, то, скорее всего, ничего страшного не произойдет. Но чтобы перестраховаться, рекомендую любой текст прогонять через «Блокнот» или набирать вручную.

Ошибка 11. Нет ссылки на отписку

Ссылка на отписку от рассылки — обязательное требование всех почтовых сервисов. Письма, от которых нельзя отписаться, с большой вероятностью попадут в папку «Спам» или будут заблокированы.

Ссылка на отписку в письме
Ссылка на отписку в письме

Как исправить. Цитируем требования Яндекс.Почты к честным рассылкам:

«Процесс отказа от подписки:

  • (Обяз.) В каждом письме должны быть даны чёткие инструкции о том, как отписаться от рассылки. При этом процесс отписки не должен требовать от получателя сложных действий, таких как восстановление пароля, регистрация или авторизация. Получатель должен иметь возможность отписаться от рассылки в течение 10 минут.
  • В теле письма должен быть явно указан адрес подписчика.
  • (Обяз.) В письме должен быть использован заголовок list-unsubscribe, оформленный по стандарту RFC. При переходе по ссылке из этого заголовка пользователь должен быть моментально отписан от рассылки.
  • (Обяз.) Для отписки необходимо указывать только работающие ссылки».

Ошибка 12. Неправильно выбрана кодировка письма

Для вёрстки рассылок используют кодировку UTF-8. Это стандартная кодировка Юникода, которую используют для большинства HTML-страниц. Если использовать другую кодировку, то письмо отобразится некорректно, из-за чего может попасть «Спам».

Как исправить. Кодировку задают верстальщики, когда создают новую веб-страницу. Чтобы использовать UTF-8, в разделе <head> нужно добавить метатег:

<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″>

Чтобы проверить кодировку, откройте HTML-версию письма в редакторе первичного кода (можно даже в «Блокноте») и ищите атрибут charset. Если у него стоит значение «UTF-8», значит все ОК, кодировка выбрана правильно.

Если делаете письмо в сервисе рассылки, можно не переживать — блочные редакторы автоматически задают кодировку UTF-8.

Ошибка 13. У картинок отсутствуют alt-теги

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

Письмо без картинок, но с alt-тегами
Отключил картинки, чтобы увидеть alt-теги

К письмам без alt-тегов спам-фильтры относятся неодобрительно: пользователи с отключенными картинками могут не понять сути сообщения.

Как исправить. Прописываем alt-теги к каждой картинке. Если изображение имеет исключительно декоративную роль, alt-тег всё равно нужен, но его можно оставить пустым: alt=»».

Ошибка 14. Коды цветов указаны не полностью

Некоторые почтовые приложения не понимают сокращённые коды цветов из 3 символов (#000). В результате этого часть цветов может пропасть из рассылки или замениться другими.

Как исправить. Указываем все цвета в шестнадцатеричном формате (шесть символов). Например, чёрный будет выглядеть так: #000000.

Ошибка 15. Ссылки из письма открываются в окне почтового приложения

Подписчики не обрадуются, если клик по ссылке откроет страницу в том же окне браузера. Чтобы этого не происходило, всегда используйте атрибут «target» со значением «_blank». Такие ссылки всегда будут открываться в новом окне.

Как исправить. Добавляем тег к каждой ссылке:

Добавляем атрибут target
Ссылка откроется в новом окне браузера

Делаем чистенько

Спам-фильтрам нравится, когда рассылка аккуратно свёрстана и продумана до мелочей: для тех, кто смотрит без картинок, есть alt-теги, для старых почтовых приложений прикручен Plain text, а внизу гордо красуется большая кнопка отписки. Аккуратное и любовно свёрстанное письмо с большей вероятностью упадет во «Входящие», чем в «Спам».

В завершение ловите чеклист — что проверить в вёрстке, чтобы не попасть в спам:

Что проверить в верстке, чтобы не попасть в спам