×

Boost email open rates with preheader text

By  on November 4, 2018
Preheader text

Email open rates are critical to the success of any email campaign. So how do we even entice recipients to open our emails and read the offers and content in the first place? Besides having a very captivating subject line, using preheader text can also help extend the subject line and provide more context for the email marketer to engage the recipients.

What is preheader text?

Email preheader text

The preheader text is a short snippet of text that follows right after the email subject line in a typical inbox view. Take a look at the screenshot above to see how it looks like in the Gmail inbox. More often than not, the preheader text does not flow very well with the rest of the content in the email. Thus, it is more commonly used to enhance the subject line and is usually hidden away from view when the email is opened.

How to add preheader text to your HTML email/newsletter

By default, email clients will take (part of) the first line of text within an email as the preheader text. Email marketers can therefore make sure that their desired preheader text be placed as the very first liner within the HTML email markup.

There are two steps to adding preheader text into your HTML email.

The first step is to wrap your preheader text in a <span> tag (or any other preferred HTML tag) and place it immediately after the <body> tag so that they will be the first to be picked up. The second step is to add a CSS rule in the <head> section to hide the preheader text <span> from the recipients’ view so that they don’t visually see it when the email is opened.

That’s it! Check out the example below.


<html>
<head>
  <style type="text/css">
    span.preheader-text { display: none !important; }
  </style>
</head>
<body>
  <span class="preheader-text">This is where the preheader text goes</span>
 </body>
 </html>


Posted in:

Leave a Reply

Your email address will not be published. Required fields are marked *