How to hide pre-header text? | Community
Skip to main content
Karen_Vuong
Karen_Vuong
Level 2
May 15, 2019
Question

How to hide pre-header text?

  • May 15, 2019
  • 5 replies
  • 8247 views

I have a short pre-header (23 characters). When I do inbox preview testing, I see my additional text from my email being pulled in also. Is there a way to prevent/hide that without extending my pre-header or changing my email layout?#pre-header‌#

    5 replies

    J_Grant_Gray
    J_Grant_Gray
    Level 3
    May 15, 2019

    Not that I'm aware of. We've utilized this hack: https://litmus.com/blog/the-little-known-preview-text-hack-you-may-want-to-use-in-every-email

      Sant_Singh_Rath
      Adobe Champion
      Sant_Singh_RathAdobe Champion
      Adobe Champion
      May 16, 2019

      I don't think that's possible but it's strange that if pre-header is short then it's showing the content from email.

      ~ Sant Singh Rathaur
      SanfordWhiteman
      SanfordWhiteman
      Level 10
      May 18, 2019

      ... it's strange that if pre-header is short then it's showing the content from email.

      Not at all, the preheader is itself content of the email! It just happens to be at the top of the HTML.

      If you take the first N characters of the the text representation of an HTML element, it always includes text across different sibling/child elements.

      For example, take this HTML fragment:

      <div>
        <div>
        This is a hidden preheader.
        </div>
        <div>
        This is like the body you intend to show.
        </div>
      </div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

      The textContent of this fragment is:

       

        
        This is a hidden preheader.

       

       

        This is like the body you intend to show.
      ‍‍‍‍‍‍‍‍‍


      ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

      (The line breaks are purposeful as they are preserved by textContent).

      The innerText of the same fragment is

      This is a hidden preheader.
      This is like the body you intend to show.
      ‍‍‍‍‍‍

      While textContent and innerText take different approaches to deciding what "the text version of HTML" is, in both cases you can see the text is taken from all possible elements. If you wanted N characters of the text it wouldn't matter what container it was originally in.

      Kristina_Moy1
      Kristina_Moy1
      Level 1
      May 16, 2019

      As mentioned, the Litmus hack it probably the best way to optimize your preheader. Keep in mind that having a short preheader and using the hack means there will be a lot of blank space, so it's something you might want to A/B test if having a shorter or longer preheader helps. 

      Geena_Boyer
      Geena_Boyer
      Level 2
      May 21, 2019

      I usually use the first few sentences from the actual email header if the pre-header is too short. The header will provide more context about the email's content, which will hopefully make the reader want to read more.

      Jackie_Potts
      Jackie_Potts
      Level 6
      June 12, 2019

      There is a great webinar from the North America VMUG that talks about preheader text in it. Brooke talks about why longer pre-header text is important as people use their phones and siri to even read their emails. More from the email is valuable and it is ok to go over the 80 character limit.

      nation.marketo.com/events/2780-7-tips-to-improve-email-deliverability-and-accessibility-with-brooke-bartos-followed-by-qa-with-panelists-sydney-gordon-ande-kempf-and-taylor-enfinger-north-america-vmug-may-meeting-may-29-2-pm-est

        Terms & ConditionsAccessibility statement

        Loading footer...