"Message Preview" in GMAIL is showing alt text

Question

I created an HTML Email Template that works fine in most email clients. As expected, I have alt and title attributes in different elements.

My problem is that GMAIL is reading those alt or title attributes and including its content in the email preview section.

I tried to follow these instructions here, but having a Plain Text email didn't solve my problem.

For reference, this is what I mean by "Email preview" (for privacy reasons, I can't screenshot my email):

Any ideas on that?

Answer 1

What you need is called pre header or preview text. This is hidden text placed just after the body tag in a 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>

Things to note:

• If you want to keep it blank, simply remove the text 'Pre header/Preview text here'
• if you want to keep the pre header then use the above code as is.
• Change color and font family based on your needs.(text color should be same as background color of email).
• If you alt text still shows, append the div content with  ͏ until you get what you are after.

Here is character count for preview text based off different devices.

Source