# 電子報最重要的小事：Preheader 預覽文字（上）

> 


叮咚！You got a mail！





在收到一封 Email 時，第一眼看到的是什麼呢？寄件人？主旨？這些影響收件人第一印象的元素，都是影響開信率的重要因素。如何設計出好的主旨提升開信率？推薦閱讀：什麼主旨開信率高？五個關鍵測試幫你「問」出答案





但是你可能不知道，有一個一樣重要但往往被忽略的要素： Preheader






Preheader 是什麼 ？





Preheader（預覽文字），是指 Email 在收件夾時，除了寄件人和信件主旨外，所顯示出的預覽文字，也是讀者第一眼看到的訊息之一。










Preheader 分成兩種：顯示型、隱藏型






顯示型：Preheader = Email 內文的前幾行。





在預設的情況下，信件的前幾行文字會被當成 Preheader。因此在設計 Email 版面時應避免將不適合的資訊放在版面最上方。





如下圖中讓「顯示有問題 ? 在瀏覽器中檢查」或是「訂閱/取消電子報」的內容成為 Preheader，不僅無法幫助讀者理解信件內容，更讓讀者在開信之前就留下壞印象：







**分類：** Email 行銷  
**作者：** Doris Tu  
**發布日期：** 2019-05-09T19:05:00.000+08:00


**叮咚！You got a mail！**

在收到一封 Email 時，第一眼看到的是什麼呢？寄件人？主旨？這些影響收件人第一印象的元素，都是影響開信率的重要因素。如何設計出好的主旨提升開信率？推薦閱讀：**[什麼主旨開信率高？五個關鍵測試幫你「問」出答案](https://blog.newsleopard.com/%E4%BB%80%E9%BA%BC%E4%B8%BB%E6%97%A8%E9%96%8B%E4%BF%A1%E7%8E%87%E9%AB%98%EF%BC%9F%E4%BA%94%E5%80%8B%E9%97%9C%E9%8D%B5%E6%B8%AC%E8%A9%A6%E5%B9%AB%E4%BD%A0%E3%80%8C%E5%95%8F%E3%80%8D%E5%87%BA%E7%AD%94/?utm_source=%E9%9B%BB%E5%AD%90%E8%B1%B9blog&utm_medium=referral&utm_campaign=20170504-%E9%9B%BB%E5%AD%90%E5%A0%B1%E6%9C%80%E9%87%8D%E8%A6%81%E7%9A%84%E5%B0%8F%E4%BA%8B%EF%BC%9APreheader%EF%BC%88%E4%B8%8A%EF%BC%89)**

但是你可能不知道，有一個一樣重要但往往被忽略的要素： **Preheader**

## Preheader 是什麼 ？

Preheader（預覽文字），是指 Email 在收件夾時，除了寄件人和信件主旨外，所顯示出的預覽文字，也是讀者第一眼看到的訊息之一。

![提高開信率 Gmail收件匣](https://cms.newsleopard.com/content/images/wordpress/2017/04/P2.png)

讓讀者決定是否開信的三大要素：寄件人、主旨、Preheader

## **Preheader 分成兩種****：顯示型、隱藏型**

### **顯示型**：Preheader = Email 內文的前幾行。

在預設的情況下，信件的前幾行文字會被當成 Preheader。因此在設計 Email 版面時應避免將不適合的資訊放在版面最上方。

如下圖中讓「顯示有問題 ? 在瀏覽器中檢查」或是「訂閱/取消電子報」的內容成為 Preheader，不僅無法幫助讀者理解信件內容，更讓讀者在開信之前就留下壞印象：

![提高開信率 預覽文字](https://cms.newsleopard.com/content/images/wordpress/2017/04/P6.png)

另一個常見的錯誤是，有些電子報以圖片的方式呈現，沒有任何的文字內容，這麼一來當信箱在抓取 Preheader 內容時，「 [取消訂閱](https://blog.newsleopard.com/%E6%88%91%E5%80%91%E4%B8%BB%E5%8B%95%E5%B0%872651%E5%80%8B%E6%9C%83%E5%93%A1%E7%9A%84%E9%9B%BB%E5%AD%90%E5%A0%B1%E5%8F%96%E6%B6%88%E8%A8%82%E9%96%B1/?utm_source=%E9%9B%BB%E5%AD%90%E8%B1%B9blog&utm_medium=referral&utm_campaign=20170504-%E9%9B%BB%E5%AD%90%E5%A0%B1%E6%9C%80%E9%87%8D%E8%A6%81%E7%9A%84%E5%B0%8F%E4%BA%8B%EF%BC%9APreheader%EF%BC%88%E4%B8%8A%EF%BC%89) 」等被放在版面最底端的文字，也會顯示在 Preheader，例如下面這個例子：

![提高開信率 取消訂閱](https://cms.newsleopard.com/content/images/wordpress/2017/04/P7.png)

讓「取消訂閱」、「無法正常瀏覽請點此」這些功能性文字出現在 Preheader，是電子報常見的錯誤

### **隱藏型**：Preheader ≠ Email 內文的前幾行。

利用 HTML 和 CSS 語法，將 Preheader 文字從 Email 內文隱藏。這有兩種方式可以做到。

**將預覽文字與背景融為一體**

如果不想修改複雜的 HTML 原始碼，最簡便的方式是在電子報最上方預留一行，打上希望出現在 Preheader 的文字，然後將文字顏色調整與背景一致。如此一來，如果使用者不將文字反白，Preheader 的內容就不會出現在信件中。

**將預覽文字藏在原始碼中**

這屬於比較進階的做法，可以讓 Preheader 文字完全消失於電子報中。可以透過各種不同的 HTML 與 CSS 語法達到這個效果，本文提供其中一種方式作為參考。

延伸閱讀：[怎麼做出隱藏式 Preheader](https://blog.newsleopard.com/%E5%A6%82%E4%BD%95%E5%9C%A8%E4%B8%8D%E5%BD%B1%E9%9F%BF%E9%9B%BB%E5%AD%90%E5%A0%B1%E5%85%A7%E5%AE%B9%E7%9A%84%E6%83%85%E6%B3%81%E4%B8%8B%E4%BF%AE%E6%94%B9%E9%A0%90%E8%A6%BD%E6%96%87%E5%AD%97%EF%BC%9F/?utm_source=%E9%9B%BB%E5%AD%90%E8%B1%B9blog&utm_medium=referral&utm_campaign=20170504-%E9%9B%BB%E5%AD%90%E5%A0%B1%E6%9C%80%E9%87%8D%E8%A6%81%E7%9A%84%E5%B0%8F%E4%BA%8B%EF%BC%9APreheader%EF%BC%88%E4%B8%8A%EF%BC%89)

來看看例子：下圖中的 Preheader 並非顯示信件內容最前面的 「Acrobat 讓您以前所未有… 」以及中間的「 不用停下來簽名…」，而是另外設定的「 利用Acrobat Pro DC 快速簽名和發送文件，無須紙筆。 」

![提高開信率 Adobe電子報](https://cms.newsleopard.com/content/images/wordpress/2017/04/P3.png)

## **Preheader 重要嗎？**

![提高開信率 收件匣](https://cms.newsleopard.com/content/images/wordpress/2017/04/P5.png)

根據 [litmus](https://litmus.com/blog/state-of-email-2016-webinar-recording-qa?utm_campaign=bestpractices_previewtext&utm_source=litmusblog&utm_medium=blog) 的調查，有 24% 的使用者表示他們會根據預覽文字顯示的內容，來決定是否打開一封 Email，然而 Preheader 的重要性卻往往容易被低估。許多品牌都忽視了這一點，從而讓不適當的任意內容出現。  
Preheader 重要嗎？重要阿！你看，酷航還特別修正了他們的錯誤：下圖是三月及四月修正的前後對照，雖然版面沒有改變，依然把無法顯示時的連結放在信件內容開頭，方便使用者在無法閱讀信件內容時點擊，但是透過設定隱藏式 Preheader，可以讓讀者在開信之前，看到更多有吸引力的宣傳資訊。  
  
在 2017 年的今天，無論是透過電腦或行動裝置收信，大多都會顯示 Preheader，雖然並非 100% 支援，但主要的 Email 信箱，如 iOS 內建信箱、Gmail、Outlook、YAHOO 等，都支援顯示 Preheader。  
根據不同裝置的支援程度不同，整理如下表：

![提高開信率 電子報優化](https://cms.newsleopard.com/content/images/wordpress/2017/04/P4.png)

參考 litmus，Icons Alfredo Hernandez on Flaticon

所以，善用 Preheader 提升開信率，是 Email 行銷人員必學的一招

## **結語**

了解 Preheader 的重要性之後，下一步要怎麼做才能實際提升開信率？在設計上又有哪些注意事項跟秘訣呢，我們將在[下一篇：Preheader 預覽文字（](https://blog.newsleopard.com/preheader-partll/?ref=cms.newsleopard.com)[下](https://blog.newsleopard.com/preheader-partll/?ref=cms.newsleopard.com)[）](https://blog.newsleopard.com/preheader-partll/?ref=cms.newsleopard.com)文章進一步說明。

* * *

延伸閱讀：[如何客製化 Email HTML 製作預覽文字(preheader)](https://blog.newsleopard.com/how-to-edit-email-preheader/?ref=cms.newsleopard.com)