Imagine: You’ve crafted the perfect subject line, your design looks great, and you’re ready to hit send. The email lands in inboxes and the preview text, the little snippet meant to entice readers, is nonsense. Or worse, it’s unsubscribe copy or a stray word from an ad tag.
One of our customers recently ran into this problem. They wanted a short, engaging preview line to appear in their subscribers’ inboxes, but instead, email clients pulled in random text, creating confusion and raising concerns across their team.
It’s time to stop letting email clients ruin your preview text. If you’re not telling inboxes what to display, they’ll decide for you, and the results aren’t always ideal.
Preview text is the short line of copy that appears in an inbox right next to or below your subject line.
If it is done well, the preview text can complement the subject line, provide additional context for the email content, and pique a reader’s curiosity. If an inbox oopsie happens (or you let the email client determine your preview text), it could tank your open rates or turn a reader away.
While preview text is what appears in the inbox next to the subject line, preheader text is the actual line of copy you place in your email’s code (or in a designated spot in your ESP).
For example, FeedOtter has Preheader field:
If you set preheader text intentionally (either by using your ESP’s preheader field or by coding a hidden preheader block in the HTML), most email clients will use that text as the preview text. If you don’t set it intentionally or it’s too short…well that brings us to the problem.
So, failing to set a preheader yourself or using one that is too short means that the email client will just grab the first readable text it finds in the <body> of your email, which could be anything like:
Herein lies the challenge: Email clients decide what to display in the preview based on the order of elements in your HTML, not how they appear visually. Even if your meaningful content is visually placed at the top, if the HTML source begins with something less important, that’s what may end up in the preview.
(Read more about ideal preheader text length here)
Good news! You can guide (and in most cases control) what appears in the inbox preview without changing your design, or even use the space to create a clean, concise look.
One of the most reliable techniques is the hidden preheader hack, popularized by Ryan Field at Litmus.
And Litmus summarizes it best: “In most cases, all you need to do is add a chain of zero-width non-joiners (͏ and ‌) and non-breaking spaces ( ) after the preview text you want displayed. The repetition of ͏‌ then fills any remaining preview text space.
There are caveats, though. As of March 2023, it seems that in some cases, this preview hack may not work. Email clients are always changing (on average, every 1.2 days) and it might not work everywhere.”
Insert this snippet (below) directly after the opening <body> tag in your email’s HTML. This approach worked successfully for our customer facing the same issue.
Placing it at the very top of the body ensures your chosen preheader text appears before any other content in the code, reducing the chance of unwanted text showing up in the preview.
<!-- Insert ͏‌ hack after hidden preview text -->
<div style="display: none; max-height: 0px; overflow: hidden;">
͏ ‌ ­ ͏ ‌
­ ͏ ‌ ­ ͏ ‌
­ ͏ ‌ ­ ͏ ‌
­ ͏ ‌ ­ ͏
‌ ­</div>
<!-- Insert ͏‌ hack after hidden preview text -->This hack isn’t foolproof. It doesn’t work in Yahoo Mail, and email clients frequently roll out updates that can impact layouts. With that in mind, implement the hack and always test your emails before sending!
Preview text is prime inbox real estate. Whether you’re using this hack or another method, make it intentional, keep it updated, and revisit it as your templates or client behaviors change. A few extra minutes of testing can mean a big difference in opens and engagement.
I hope this helps!
