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

> 


什麼是預覽文字：電子報最重要的小事：Preheader 預覽文字（上）
電子報最重要的小事：Preheader 預覽文字（下）





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














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






將預覽文字藏在 HTML 原始碼中（支援 outlook）





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





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





<table cellpadding="0" cellspacing="0" border="0" align="center">
  <tbody>
    <tr>
      <td style="font-s

**分類：** 電子報優化  
**作者：** Bao  
**發布日期：** 2021-12-13T23:46:00.000+08:00


什麼是預覽文字：[電子報最重要的小事：Preheader 預覽文字（上）](https://blog.newsleopard.com/preheader-partl/?ref=cms.newsleopard.com)  
[電子報最重要的小事：Preheader 預覽文字（下）](https://blog.newsleopard.com/preheader-partll/?ref=cms.newsleopard.com)

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

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2021/12/perheader-mobile.png)

Gmail 手機版

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2021/12/preheader-desktop.png)

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\]-->

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