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

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

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

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

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

введите описание изображения здесь

Любые идеи по этому поводу?


gmail html html-email alt
person Bruno Monteiro    schedule 25.02.2020    source источник
comment
Это говорит о том, что реальная проблема заключается в том, что альтернативный текст неуместен. alanflavell.org.uk/alt/alt-text.html полезное чтение.   -  person Quentin    schedule 26.02.2020
comment
Спасибо @Quentin, это действительно хорошее чтение! Я согласен, что наличие хорошего альтернативного текста поможет, но хороший альтернативный текст не обязательно означает хороший текст для предварительного просмотра, IMO.   -  person Bruno Monteiro    schedule 26.02.2020

Ответы (1)


arrow_upward
8
arrow_downward

То, что вам нужно, называется 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 с помощью &nbsp;&#847;, пока не получите то, что вам нужно.

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

введите здесь описание изображенияИсточник

person Syfer    schedule 25.02.2020
comment
Спасибо, это работает. Мой единственный комментарий заключается в том, что мы должны использовать <td> вместо <div>, так как Outlook (настольное приложение) плохо работает с <div>s - person Bruno Monteiro; 26.02.2020
comment
Только если вы хотите отображать div. В этом случае div скрыт с помощью CSS. Кроме того, если вы измените технику гибридного / губчатого кодирования для электронной почты. Он использует дивы. - person Syfer; 26.02.2020
comment
Но разве Outlook не удаляет div, а не просто скрывает его? (посмотрю на это, спасибо) - person Bruno Monteiro; 26.02.2020
comment
Я еще никогда не сталкивался с тем, что Outlook удаляет div. Какая версия удаляет? - person Syfer; 26.02.2020
comment
О, это был скорее вопрос. Это настольная версия приложения, поэтому я ничего не могу проверить. Я только что заметил, что использование div со стилями не работает, но использование тех же стилей в <table> работает. - person Bruno Monteiro; 26.02.2020
comment
Правильно, Outlook полностью игнорирует стили в div и сохраняет те, что в td (или table). - person Syfer; 26.02.2020
comment
Я бы только добавил, что если вы используете ..., это может быть признаком спама и его следует использовать с осторожностью. Это исходило от кого-то, кто работал со SpamAssassin, так что это не расплывчатое «может быть», а реальная вещь. - person Nathan; 26.02.2020
comment
Отметил Натан. Я еще не сталкивался с этим, но буду следить за этим, если это произойдет. - person Syfer; 26.02.2020