如何定义 HTML 电子邮件预标头答案

【问题标题】：How to define HTML email preheader如何定义 HTML 电子邮件预标头
【发布时间】：2015-11-03 13:12:22
【问题描述】：

我正在为 CMS 构建 HTML 电子邮件模板，我想知道是否可以定义电子邮件的预标头。

电子邮件预标头是电子邮件中出现在您的电子邮件提供商的电子邮件主题之后的部分。在移动设备上非常有用，用户可以瞥见电子邮件的内容。它通常是定义它的电子邮件的第一个文本内容。

目前，在我的 HTML 电子邮件设计中，我有一个页眉模板、一个正文模板和一个页脚模板。我的预头文件由标头模板定义；出现在标题中的第一个文本内容是网站名称/徽标，从而在电子邮件设计中产生冗余。

关于如何解决这个问题的任何想法？

【问题讨论】：

好吧，现在我想起来了，解决方案是在标题之前定义一个文本；因此它被称为preheader。
我迷路了。您是在谈论创建一个可以包含在每封电子邮件中的文件，因为测试不会改变吗？
不，我说的是电子邮件主题行之后显示的文本。在您的 gmail/hotmail 的电子邮件列表中显示 NAME_FROM / SUBEJECT / PREHEADER_LINE。我看到一些营销人员能够定义这一行 preheader_line 是什么，他们能够忽略预先引导相关电子邮件内容的不相关文本。有意义吗？

标签： php html css email

【解决方案1】：

Sonu Yadav 分享了这个问题的完美而巧妙的解决方案（谢谢）。为了便于记录，Sonu Yadav 共享的链接上提供的解决方案如下。

基本上，您可以在 <body> 标记中的所有内容之前添加您希望 preheader 出现的文本，然后使用 CSS 将其隐藏。

<style>
/* ... */
/*--- Preheader declaration in style block in addition to inline for Outlook */
.preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }
</style>
</head>

<body>
<!-- PRE-HEADER TEXT -->
<span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">Preheader text shows up in GMail, iOS, Mail.app, &amp; more: 75 text char limit</span>
...

【讨论】：

【解决方案2】：

如果您的徽标是您的电子邮件中首先呈现的内容，那么最简洁的方法（无需依赖样式）是将预标题文本放置在图像 alt 标记中，例如：

<img src="https://s3.amazonaws.com/my-assets/logo.png" alt="My preheader text." >

【讨论】：