Markeaze Блог

HTML-письма: самые частые ошибки и как их избежать

Верстать HTML-письма — занятие сомнительное. Код настолько устаревший, что видел динозавров, а неудобный настолько, что хочется уволиться. К счастью, существуют Drag & Drop редакторы. Но иногда все же приходится лезть в HTML. А ты — не программист. Скучно, тяжело, нудно.
Если HTML-код письма поврежден, почтовые сервисы не смогут его правильно загрузить — и все развалится. Почтовики это чувствуют и часто сразу отправляют письмо в спам или вовсе блокируют. Потерять из-за этого целую рассылку — обидно.
Мы понимаем, насколько болезненный опыт — HTML в емейлах. Поэтому ранее рассказали о базах, а сейчас — о самых частых ошибках. Разберем их по порядку, чтобы ты больше никогда не испортил письмо случайно. Поехали!

Безголовый почтальон

Есть ошибка, которая похоронит твое письмо сразу. Какой бы классный код ты ни написал дальше — он никуда не дойдет, если у него нет «головы».
В начале любого HTML-письма нужно указать, как почтовики должны читать и отображать код. Это и есть head — заголовок. В нем указываются заголовок письма, метатеги, тип документа, стили текста, анимации CSS, медиафайлы и т. д. Без этой части письмо просто не пройдет в почтовик.
Head выглядит примерно так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>✉️This is not just a letter. This is a game-changer!</title>
    <meta name="color-scheme" content="light dark">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="supported-color-schemes" content="light dark">
    <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
    <!--[if gte mso 9]>
      <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
      </xml>
    <![endif]-->
Убедись, что в этом «монстре» нет пропущенных важных элементов — или что он вообще на месте.

Слабая работа с тегами

Никаких поблажек. Пропущенный тег — и вся верстка падает в бездну.
Большинство тегов в HTML идут парами: открывающий и закрывающий. Например: <a> </a>. Между ними и должен находиться весь нужный контент. Если забыть закрыть тег — он просто не сработает.
Пример с <xml>:
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
Тег </xml> легко пропустить — он затерян среди других строк. Следи за своими тегами, используй шаблоны кода, если не уверен в себе. Все, что помогает маркетологу не становиться программистом — полезно.

Цветовые заморочки

Некоторые почтовики не понимают укороченные коды цветов. Поэтому вместо #000 всегда пиши #000000. Так ты избежишь неприятных сюрпризов: сдвинутых палитр или исчезнувших фонов.

Линк, но не тот

Почтовики не любят короткие ссылки и редиректы. Если ты зашьешь красивую короткую ссылку с переадресацией — письмо никуда не дойдет. ESP сравнивает адрес, который указан, и тот, на который ведет ссылка. Если они не совпадают — письмо в спам.
То же самое произойдет, если просто вставить полный URL, а не сделать гиперссылку. Оптимальный вариант — вшивать ссылки в текст или картинки.

Облачные проблемы

Нельзя вставлять в письмо ссылку на файл в облачном хранилище — она не загрузится. HTML-письма поддерживают только прямые ссылки. Даже если в облаке стоит режим «Открыть для всех», это не считается прямой ссылкой.
Это касается в первую очередь изображений, но может быть и с другими файлами.
Варианты решений:
  • Использовать онлайн-сервисы вроде imgur.com
  • Загружать файлы прямо в редактор письма
  • Загружать файлы на свой хостинг

Нет ALTернатывы

Многие почтовики не показывают изображения по умолчанию. Или пользователь отключил автозагрузку. Поэтому обязательно добавляй ALT-теги — текст, который будет отображаться, если картинка не загрузилась.
Если изображение важное — опиши его. Если декоративное — оставь тег пустым, но не удаляй его вовсе.

Пропущенная опция

Мы много раз говорили об этом, но напомним еще раз: в каждом письме должна быть ссылка на отписку.
Почему это важно:
  • Это обязательное требование закона
  • Помогает не попасть в спам
  • Повышает репутацию отправителя
  • Очищает базу
  • Показывает уважение к получателю
А в контексте этой статьи главное вот что: без ссылки на отписку письмо с большой вероятностью попадет в спам или будет заблокировано вовсе.
Добавь ссылку на отписку в футер по умолчанию — и забудь об этой проблеме навсегда.

Хватит про ошибки

Можно рассказать еще десятки случаев, когда HTML ломает письма. Но мы уже разобрали самые частые и критичные ошибки, которые легко упустить — и этим испортить всю рассылку.
Пусть HTML-письма не станут для тебя увлечением, но, по крайней мере, ты не будешь в панике искать, почему снова ничего не работает. Надеемся, помогли тебе сэкономить и нервы, и письма.
2025-07-30 12:28 Эффективность работы Профессионалам