Как сделать красивый тэг Alt для ваших писем

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

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



Что такое тэг ALT в email маркетинге?

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

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

Так же не стоит забывать про ситуации, когда изображения не могу загрузиться из-за слабого интернета. И снова в этом случае тэг ALT приходит на помощь, описывая контекст и смысл заключенный в изображении.

И ещё, самое важное. Почему этот тэг так важен? Из-за возможности – возможности получить больше открытий и кликов. Если вы игнорируете её, то возможно вы теряете новых покупателей или посетителей.

Вот пример письма с ALT текстом. Несмотря на то, что изображения были заблокированы в Gmail, текст тэга ALT на логотипе, социальных кнопках и в шапке письма показывает смысл того, что изображения должны были отображать для читателей. Даже если эти изображения заблокированы, текст на их месте ясно даёт понять то, какой смысл они несут и какое торговое предложение заключено в изображении.



Как создать тэг ALT для ваших писем?

И так, давайте посмотрим, как выглядит тэг за кулисами.

<img src=”img.jpg” border=”0″ alt=”привет я текст” width=”564px” height=”205″ />

То есть для того, чтобы вставить альтернативный текст в изображение, просто вставьте alt=”текст” после img src. Просто, не так ли?

Но давайте на этом не останавливаться, ведь мы может стилизовать этот текст используя инлайновые стили CSS. Вот как выглядит код для стилизованного тэга ALT:

<img style=”font-size: 20px; font-weight: bold; line-height: 205px; background-color: #5a54a4; color: #ffffff; text-align: center;” src=”img.jpg ” border=”0″ alt=”текст” width=”564px” height=”205″ />

Теперь давайте разберем всё по полочкам и обсудим каждый момент в этой конструкции.

Font-size: 20px – тут мы выставляет размер текста для альтернативного текста. Обычно он выставляет по дефолту в зависимости от предпочтений почтового клиента, но нам нужен большой текст! Текст который будет видно всем и который будет обращать на себя внимание!

Font-weight: bold – этот тэг делает текст жирным.

Line-height: 205px – а это уже хитрее и с этим придется поиграться. Но сейчас мы вам всё расскажем и покажем. Изображение на баннере в данном письме имеет высоту 205px, таким образом выставляя line-height для альтернативного текста на 205px мы выровняем текст по середине, с вертикальным выравниванием по центру. Но это зависит от случая, смотри по высоте изображения.

Background-color: #5a54a4 – это один из самых важных элементов стиля для альтернативного текста. Добавляя цвет фона, вы сохранаяете брендовый оттенок письма, оставляя его визуальную привлекательность для читающего человека. Никогда не забывайте работать именно с этим параметром. Множество людей попросту забывают его вставлять, тем самым, не давая своим письмам должной привлекательности в разных ситуациях.

Color: #ffffff – это текст альтернативного текста. Выберите цвет, который выглядит привлекательно и контрастно на выбранном вами фоне и не забывайте про брендирование.

Text-align: center – этот параметр выровняет ваш текст горизонтально по центру изображения.

И вот какой результат! Теперь ваше письмо с заблокированными изображениями выглядит гораздо привлекательней, не так ли?



Вот так вот! Всего лишь применив несколько корректировок для ваших изображений, вы можете вполне получить стилизованный ALT тэг, который не только расскажет вашим получателям о том, что находится на изображении. Но и сделает ваше письмо крайне привлекательным для читателя в любом, даже самом критическом случае. И ещё один небольшой совет для вас – если вы используете платформу автоматизации маркетинга, которая упрощает персонализацию, то вы даже можете добавить символы и знаки в ваш альтернативный текст, тем самым упростив ваши старания.

Используйте стилизованный альтернативный текст для вашим писем, как описано в этой статье и ваши письма всегда будут готовы «продать и показать» ваше предложение, вне зависимости от сложившейся ситуации в почтовике.

И не забывайте быть креативными!

Почему предпринимателям не стоит избегать SEO

Почему SEO должно дополнять контент маркетинг

Как получить обратные ссылки на блог из весомых источников

3 причины для использования аналитики в поисковом маркетинге

Получай лучшие статьи по
интернет-маркетингу на
свою почту