Preheader maila: jak wykorzystać linię po temacie

Preheader maila to krótka linijka, którą skrzynka pocztowa pokazuje zaraz po temacie wiadomości. Jeśli go pominiesz, program pocztowy po prostu weźmie pierwszy tekst, jaki znajdzie w mailu. Dlatego tyle podglądów brzmi „Wyświetl tę wiadomość w przeglądarce” albo pokazuje pierwszy link z menu zamiast prawdziwego podsumowania. Poniżej: czym jest preheader, jak programy pocztowe go wybierają, jak go napisać i jak ukryć go w kodzie HTML.

Czym jest preheader maila?

Preheader to fragment tekstu podglądu, który lista wiadomości pokazuje obok tematu albo pod nim. Jedna rzecz, dwie nazwy. Preheader zwykle oznacza linijkę w kodzie, a tekst podglądu to to, co subskrybent faktycznie widzi. Tak czy inaczej, ludzie czytają go, zanim cokolwiek otworzą (razem z nazwą nadawcy i tematem), więc ma wpływ na to, czy mail w ogóle zostanie otwarty. Jego zadaniem jest wspierać temat. Nie zastępować go.

Dlaczego w podglądzie widać „Wyświetl tę wiadomość w przeglądarce”?

Gdy preheader nie jest ustawiony, program pocztowy bierze pierwszy czytelny tekst z kodu HTML. W większości szablonów jest to link do wersji w przeglądarce, tekst alternatywny logo albo nawigacja. Najczęstsi winowajcy:

• link „zobacz online” albo „wyświetl w przeglądarce” na górze szablonu
• tekst alternatywny obrazka w nagłówku albo logo
• pozycje menu, takie jak „Sklep”, „Blog” czy „Kontakt”
• zdania w stylu „Masz problem z wyświetleniem tej wiadomości?”

Chcesz sprawdzić swój? Wyślij test na własną skrzynkę, otwórz go na komputerze i na telefonie i przeczytaj linijkę podglądu. Rozwiązanie jest proste. Umieść prawdziwe podsumowanie na samej górze kodu, żeby było pierwszą rzeczą, jaką znajdzie program pocztowy.

Jak długi powinien być preheader?

Nie ma jednej właściwej długości preheadera, bo widoczny podgląd zmienia się w zależności od programu pocztowego, urządzenia i szerokości ekranu. Pełne zdanie na szerokim monitorze może zostać ucięte po kilku słowach na telefonie. Dobre układy maili dopasowane do telefonu sprawiają, że reszta wiadomości też jest czytelna na małym ekranie. Do tego temat również zabiera miejsce - długi temat zostawia mniej przestrzeni na to, co po nim. Praktyczna zasada jest więc taka: najważniejszą informację umieść w pierwszych kilku słowach, tam gdzie przetrwa cięcie. Potem sprawdź, jak podgląd faktycznie wygląda w programach pocztowych, z których korzysta Twoja lista.

Temat i preheader piszemy razem

Traktuj temat i preheader jak jedną wiadomość, w której preheader uzupełnia to, czego temat nie mówi. Kilka połączeń, które się sprawdzają:

• Temat i szczegół: temat nazywa zagadnienie, a preheader podaje konkret.
• Pytanie i podpowiedź: temat zadaje pytanie, a preheader sugeruje odpowiedź.
• Oferta i warunek: temat przedstawia ofertę, a preheader dodaje termin albo warunki.

Nie powtarzaj tematu słowo w słowo. Zrezygnuj też z ogólników w stylu „Nasz najnowszy newsletter” (nie mówią czytelnikowi absolutnie nic). I pisz uczciwie. Jeśli podgląd obiecuje coś, czego mail nie dostarcza, tracisz zaufanie szybciej, niż zyskujesz otwarcia. Jeśli chodzi o drugą połowę tej pary, zajrzyj do wskazówek dotyczących pisania lepszych tematów maili, które dobrze współgrają z mocnym podglądem.

Jak dodać ukryty preheader do szablonu HTML

Wstaw krótki blok tekstu zaraz po otwierającym znaczniku body i ukryj go za pomocą CSS inline. Podgląd w skrzynce nadal go pobierze, ale po otwarciu maila nikt go nie zobaczy. Oto jak to ustawić:

1. Dodaj div jako pierwszy element wewnątrz <body>.
2. Wpisz w nim tekst podglądu.
3. Zastosuj style ukrywające: display none, zerowy rozmiar czcionki i wysokość linii, zerową maksymalną wysokość, zerową przezroczystość i ukryte przepełnienie.
4. Opcjonalnie dodaj po tekście niewidoczne znaki wypełniające, żeby program pocztowy nie wciągał do podglądu treści maila.

Najprostsza wersja ukrytego preheadera w HTML:

<body>
  <div style="display:none; font-size:0; line-height:0; max-height:0; opacity:0; overflow:hidden;">
    Tu wpisz podsumowanie, najważniejsze na początku.
    &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
  </div>
  ...
</body>

Nie wszystkie programy pocztowe traktują ukryte elementy tak samo, więc testuj przed każdą większą wysyłką. Tworzenie maila w kreatorze z podglądem na żywo pozwala wyłapać problemy z układem jeszcze w trakcie edycji, a nie dopiero wtedy, gdy kampania już wyszła.

Testowanie tekstu podglądu przed wysyłką

Wysyłaj testy do prawdziwych skrzynek w głównych programach pocztowych i na urządzeniach, z których faktycznie korzystają Twoi subskrybenci. Potem przeczytaj nazwę nadawcy, temat i linijkę podglądu razem, tak jak zrobiłby to subskrybent. Telefonom poświęć szczególną uwagę. Wąskie ekrany najbardziej przycinają podgląd. Upewnij się, że link do wersji w przeglądarce i menu nie trafiają już do podglądu. Gdy blok działa, zapisz go w szablonie bazowym, żeby każda kampania zaczynała się od niego. Nasze artykuły o szablonach i projektowaniu maili opisują, jak zbudować taki szablon.

Preheader maila to jedna mała linijka, nad którą masz pełną kontrolę. Szczerze mówiąc, niewiele elementów maila daje tyle widoczności przy tak małym wysiłku. Ustawiaj go więc świadomie w każdej wysyłce, zamiast zostawiać wybór programowi pocztowemu.

FAQ

Czytaj też:

• Obrazki w mailu: tekst alternatywny, rozmiar plików i pułapka maila z samych grafik
• Wersja tekstowa maila: dlaczego sam HTML nie wystarczy
• Kategorie w Apple Mail: jak przygotować e-maile promocyjne na kartę Promocje
• Stopka maila marketingowego: co musi zawierać każda kampania