"Message Preview" in GMAIL is showing alt text

user_6080254 0
Viewed 3868

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):

enter image description here

Any ideas on that?

alt html-email gmail html
1 Answers

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 &nbsp;&#847; until you get what you are after.

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

enter image description here Source

user_74674280
Related