Email Pre-Header richtig einsetzen
Der sogenannte E-mail Pre-Header ist ein essenzielles Werkzeug im E-Mail-Marketing und ist unverzichtbar, um Interesse beim Empfänger zu wecken und somit mehr Öffnungen und Klicks zu generieren. Was du beim Verfassen deines Pre-Headers beachten solltest und wie du diesen am effektivsten nutzt, zeigen wir dir hier!
Was ist ein Pre-Header?
Email Pre-Header sind (einfach gesagt) die ersten Textzeilen einer E-Mail. Diese werden in den meisten Mail-Clients und Apps direkt unterhalb des Betreffs angezeigt, um dem Empfänger eine Vorschau auf den Inhalt der Mail zu geben. So würde der Inhalt einer „normalen“ Mail in etwa so aussehen:
Die Mail-Vorschau ist also wie folgt aufgeteilt:
- Absender
- Betreff
- Vorschautext bzw. Pre-Header
Im E-Mail-Marketing wird der Vorschautext jedoch genutzt, um beim Empfänger Interesse zu wecken und ihn zum Öffnen der Mail zu bewegen. In diesem Fall sähe die E-Mail im Mail-Client eher so aus:
In diesem frei erfundenen Beispiel wird der Empfänger mit einer Kombination aus Betreff und Pre-Header zum Öffnen der Mail angeregt. Auch sind gezielte Schlagwörter und Emojis ein gängiges Mittel, um im Postfach des Empfängers schneller aufzufallen und sich von anderen Mails abzuheben.
Pre-Header richtig einbetten
In der Regel soll der Pre-Header in der eigentlichen Mail nicht sichtbar sein, da ein loser Text über einem aufwändig gestalteten Mail-Design unprofessionell und stümperhaft aussieht. Um das zu umgehen, wird der Text für den Pre-Header schlicht unsichtbar, bzw. nicht lesbar gemacht und verschwindet somit im Mail-Template. Passend umgesetzt, sieht dies beispielsweise so aus:
<div style=“display: none; max-height: 0px; overflow: hidden;visibility: hidden;„>
Pre-Header Text hier einfügen!</div>
Richtig eingebettet wird der Code als erster lesbarer Inhalt, bzw. nach dem öffnenden Body-Tag.
Je nach Email-Client kann die Länge des Vorschautextes allerdings auch variieren. So folgt auf den Inhalt des Pre-Headers dann gleich der Inhalt der Mail, was zu solchen unschönen Ergebnissen führt:
Dieses Problem tritt auf, da die meisten Clients Leerzeichen und Textfreie Absätze innerhalb der Mail einfach ignorieren. Um dies zu Umgehen, kann man folgenden Code für seinen Pre-Header nutzen:
<div style=“display: none; max-height: 0px; overflow: hidden; visibility: hidden;“>
*Vorschautext hier* ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div>
Anwender von Campaign.Plus können außerdem auch Abseits von HTML-Codes ihre Pre-Header im Template-Editor generieren. Hierzu reicht ein einfacher Klick auf „Einstellungen“ und das Eingabefeld für den Vorschautext erscheint links unten.
Hilfreiche Tipps
Zu guter letzt noch ein paar wichtige Hinweise für das Erstellen eigener Pre-Header:
- Nicht jeder Client unterstützt Vorschautexte. Also sollte bereits die Betreffzeile gut gewählt sein. Der Pre-Header selbst sollte die Aussage des Betreffs bestenfalls unterstützen.
- Die Zeichenanzahl des Vorschautextes unterscheidet sich je nach Client sehr. Es wird geraten sich auf 100 bis 130 Zeichen zu beschränken. Zu einem kurzen, aussagekräftigen Text ist in jedem Fall geraten!
- Sonderzeichen im Vorschautext werden ebenfalls nicht von jedem Client unterstützt. Im besten Fall enthält der Pre-Header also keine Sonderzeichen.
Fazit
Ein Email Pre-Header ist ein wichtiges Werkzeug im Mail-Marketing und kann mit nur wenigen Schritten in jedes Template eingebettet werden. Richtig und kreativ eingesetzt, regt der passende Vorschautext den Empfänger zum Öffnen deiner Mail an!
