Preheader in Email: What It Is, Length, and HTML Code

What is a preheader in email?

A preheader in email is the short line of text an inbox shows next to or below the subject line, before the message is opened. Gmail calls it the snippet, Apple Mail calls it the preview, and Outlook calls it the Message Preview; marketers also say preview text or Johnson box. Email has no dedicated header for it. Every client takes the first readable text in the message body and shows as much as fits, which means that without a deliberate preheader the inbox shows whatever comes first in your HTML: 'View this email in your browser', an image's alt text, a navigation bar, or the first line of a legal footer pulled up by a layout table. A preheader is therefore a piece of text you place at the very top of the body, visible or hidden, so the inbox preview says what you want. It works for marketing and transactional email alike: 'Your code expires in 10 minutes' under 'Your sign-in code' is as much a preheader as a sale teaser.

Why does preheader text matter?

Preheader text matters because the sender name, subject line, and preview are all a recipient sees when deciding whether to open, ignore, or report a message. Together they form what deliverability people call the envelope. A useful preheader extends the subject instead of repeating it: subject 'Your October invoice', preheader '$49.00 charged to Visa ending 4242. No action needed.' answers the question without an open, which builds trust in transactional mail. A broken preheader does the opposite: a preview reading 'Having trouble viewing this email?' or a string of template code looks careless and can look like phishing. Preheaders also affect how a message reads on lock screens and smartwatches, where only the subject and the first line appear. Since 2024, Apple Intelligence on iOS 18.1, iPadOS 18.1, and macOS Sequoia 15.1 can replace the preview with an on-device AI summary for users who enable it, and Gmail and Yahoo have added their own AI summaries, so the preheader is no longer guaranteed to appear, but it remains the default display in every major client.

How long should a preheader be?

A preheader should put its key message in the first 40 to 50 characters and stay under about 90 characters in total, which is Litmus's recommendation. The visible length varies by client and settings. Desktop webmail such as Gmail shares one line between subject and preview, so a long subject leaves little room; mobile clients typically show one or two lines below the subject; and Apple Mail can be set to show from 0 to 5 lines, about 278 characters at the maximum. Users can also turn previews off entirely, Gmail included. Because you cannot know which display a recipient uses, front-load the meaning: the amount, the deadline, the code expiry, the order number. A preheader that is too short has its own problem: clients fill the remaining space with the next text they find in the body, so a 30-character preheader followed by 'View in browser | Unsubscribe' shows both. The padding technique in the next section stops that.

How do you add a preheader with HTML?

Add a preheader with HTML by placing a hidden element as the first thing inside <body>, before any visible content, logo, or 'view in browser' link. The minimal version is a div with display:none, as Litmus shows. A more robust version adds properties that hide it in clients that strip display:none, including Outlook for Windows (mso-hide:all), and sets size, opacity, and overflow to zero. To stop the client from appending body text after a short preheader, follow it with a run of invisible characters: the combining grapheme joiner (&#847;), zero-width non-joiner (&zwnj;), and non-breaking space (&nbsp;) are common, repeated enough to fill the preview width. Keep the same text in the plain-text part of the message (the text/plain MIME part, sent alongside text/html), because clients that render the text alternative take the first line from there, and some API providers generate a text part from HTML when you do not supply one. If you send through an email API or SMTP without a preheader field, this snippet is the whole implementation: it is part of the html you send, and it adds well under 1 kb to the message.

<body style="margin:0;padding:0;">
  <!-- Preheader: first element in <body> -->
  <div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;
              opacity:0;overflow:hidden;mso-hide:all;">
    $49.00 charged to Visa ending 4242. No action needed.
  </div>
  <!-- Padding: stops clients pulling in the next visible text -->
  <div style="display:none;max-height:0;overflow:hidden;mso-hide:all;">
    &#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;
    &#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;
  </div>
  <!-- visible email starts here -->
  ...
</body>

Is a hidden preview line a spam risk?

A short hidden preheader that summarizes the visible email does not hurt deliverability in practice; it is used by nearly every email platform, and Litmus notes that hidden content no longer harms delivery the way it once did. There is a line, though. Google's email sender guidelines say not to use HTML and CSS to hide content and warn that hiding content might cause messages to be marked as spam. That guidance is aimed at hidden text used to manipulate filters, such as invisible keyword stuffing or text that contradicts what the reader sees, not at a one-line summary of the email. Stay on the right side of it with three rules: keep the hidden preheader short (under about 150 characters plus padding), make it accurately describe the visible content, and never put links, tracking, or text you would not show the reader inside it. A preheader also has no effect on authentication: SPF, DKIM, and DMARC results depend on your DNS records and signing, and a missing DKIM signature or a DMARC failure will hurt far more than any preview text. If you prefer to avoid hidden content entirely, make the preheader the first visible line of the email, styled small, which works in every client.

How do you add a preheader without code?

Most email platforms add the preheader for you through a field next to the subject line, so no HTML is needed. In Mailchimp it is the Preview text field in the campaign's subject settings; in ActiveCampaign, Klaviyo, Brevo, and HubSpot it sits in the same place under names like preview text or preheader. These fields inject the same hidden element shown above at the top of the body. Three checks still apply. First, look at the template: if it already has a hardcoded preheader block or a 'view in browser' bar at the top, the field's text may be followed by that bar, so remove or move it. Second, use personalization carefully: a merge tag with no value for some contacts can leave a blank or broken preview. Third, send a test to real Gmail, Outlook, and Apple Mail inboxes, or use a preview service such as Litmus or Email on Acid, and look at the inbox list view, not just the opened message, because that list view is the only place the preheader appears.

What makes a good preheader? Examples

A good preheader adds a fact the subject line does not have, uses the first 40 characters for the most useful part, and matches the email's content exactly. For transactional mail, give the answer: subject 'Your order has shipped', preheader 'Arriving in 2 days. Tracking: 1Z999AA10123456784'; subject 'Reset your password', preheader 'This link expires in 30 minutes. Ignore this if you did not ask.'; subject 'Your sign-in code', preheader 'Code expires in 10 minutes. Never share it.' For product and marketing mail, give the hook or the specifics: subject 'New: scheduled exports', preheader 'Send CSV reports to S3 or email every Monday, 9 AM.'; subject 'Last day for 20% off', preheader 'Ends at midnight PT. Annual plans included.' Avoid repeating the subject, avoid 'Hi there' or 'View this email in your browser', avoid all caps and spammy urgency, and do not promise anything the body does not deliver: a mismatched preheader is the fastest way to earn a spam report.

よく寄せられる質問

一次情報源

• The Ultimate Guide to Preview Text Support — Litmus
• Email sender guidelines — Google
• What Is a Preheader? — Mailchimp
• Combining Diacritical Marks chart — Unicode Consortium
• メール送信 — SendHQ