«Предварительный просмотр сообщения» в GMAIL показывает альтернативный текст

Question

Я создал HTML Шаблон электронной почты, который отлично работает в большинстве почтовых клиентов. Как и ожидалось, у меня есть атрибуты alt и title в разных элементах.

Моя проблема в том, что GMAIL читает эти атрибуты alt или title и включает их содержимое в раздел предварительного просмотра электронной почты.

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

Для справки, это то, что я имею в виду под «Предварительный просмотр электронной почты» (из соображений конфиденциальности я не могу сделать снимок экрана со своей электронной почтой):

Есть какие-нибудь идеи по этому поводу?

Answer 1

То, что вам нужно, называется pre header или preview text. Это скрытый текст, помещаемый сразу после тега body в div

<div style="display:none;font-size:1px;color:#{color};line-height:1px;font-family:{font};max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;">
    Pre header/Preview text here&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;
</div>

. Замечания:

• Если вы хотите оставить это поле пустым, просто удалите текст ' Предварительный заголовок / Предварительный просмотр текста здесь '
• Если вы хотите сохранить предварительный заголовок, используйте приведенный выше код как есть.
• Измените цвет и семейство шрифтов в соответствии с вашими потребностями. ( цвет текста должен совпадать с цветом фона электронной почты).
• Если текст все еще отображается, добавляйте содержимое div с помощью  ͏, пока не получите то, что вам нужно.

Вот количество символов для предварительного просмотра текста на разных устройствах.

Источник