1. 部落格
  2. 電子報優化

如何客製化 Email HTML 製作預覽文字(preheader)

什麼是預覽文字:電子報最重要的小事:Preheader 預覽文字(上)
電子報最重要的小事:Preheader 預覽文字(下)

影響開信率的因素是什麼?當收件者打開收件匣後,收件者會看到的要素包括:寄件者姓名、主旨、預覽文字。

Gmail 手機版
Gmail 電腦版


一般預覽文字會是擷取 Email 開頭的文字,約莫 15-30 字元,電腦版視你的主旨長度而定,手機版則是會與主旨並排(每個收件軟體可能不一樣)。而要如何在不犧牲內容的情況下,客製化預覽文字呢?

將預覽文字藏在 HTML 原始碼中(支援 outlook)

將你的預覽文字放在 body 的最上方,並且用顏色、高度將它隱藏起來。

如果你的背景顏色是白色,下面那段原始碼只需更改「這是你要的預覽文字」。如果背景是別的顏色,請將 #ffffff (有兩處)換成你的背景色碼。

<table cellpadding="0" cellspacing="0" border="0" align="center">
  <tbody>
    <tr>
      <td style="font-size:0px;color:#ffffff;line-height:0px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;">
        <div style="display:none;font-size:0px;color:#ffffff;line-height:0px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;">
          這是你要的預覽文字
        </div>
      </td>
    </tr>
  </tbody>
</table>

將預覽文字藏在 HTML 原始碼中(不支援 outlook 2013 以下版本)

如果覺得更改顏色很困難的話,這邊提供只支援 outlook 2013 以上、其他所有非 outlook 的收件端的寫法:

<!--[if !gte mso 9]><!---->
<span style="display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;">
這是你要的預覽文字,只支援非 outlook
</span>
<!--<![endif]-->

完成之後,最好試寄一封給自己,確認預覽文字是否成功修改。