June 17, 2005 
No. 21 
 報主：謝寶煖
http://www.lis.ntu.edu.tw/~pnhsieh/epapers/no21.htm

>> 我要訂報     前期內容      取消訂閱

本期主題：如何寫好網頁標題

在每個組織，每個企業，甚至個人，都建有網站的今日，網站已經不再是一項科技，而是一項組織溝通，是一個大學、一個圖書館、一家企業，與顧客對話的地方。所以網站設計不能只是IT，更不能只是美工或視覺化設計，而是要講究資訊結構（information architecture）；網站內容呈現不是考量程式設計，是要思考顧客的網路行為；要運用的不是很炫的技術，而是資訊行銷策略。

這一期就先來與大家分享有關網頁標題的觀察。一般訪客常誤以為出現在網頁最頂端的文字，較粗較大的文字，就是網頁標題，所以就從網頁標題的界定說起，再來看看網頁標題到底有多重要，然後再來學習寫好網頁標題。

>>  什麼是網頁標題（Page Title）

網頁標題是寫在HTML文件中的head段，以TITLE tag標示。 當訪客訪問網頁時，網頁標題的內容會呈現在瀏覽器的標題列（browser's title bar），如下圖之紅框所示；如檢視原始碼，則可以在網頁程式碼的 <head> 段看到如下的內容。

<html>
<head>
<title>國立台灣大學</title>
</head>

>>  網頁標題很重要

訪客和搜尋引擎都高度倚賴網頁標題。訪客透過網頁標題的幫助來找到所需的資訊，搜尋引擎則利用網頁標題中的關鍵詞來索引網頁加權搜尋結果。

因為我是訪客，所以就先從訪客說起吧！不知大家有沒有注意到，當瀏覽器連到網站，下載網頁時，訪客最先看到的是那個部份，沒錯，就是出現在左上角的網頁標題。

除了瀏覽網頁以外，訪客還有很多機會必須依賴網頁標題來判讀網頁內容。也就是說，訪客沒有看到網頁內容，僅僅憑著網頁標題來解讀網頁內容。

  • 搜尋結果：搜尋引擎的搜尋結果是以網頁標題做開頭，而且以網頁標題做超連結。

  • 我的最愛或是書籤：當訪客把網頁存到「我的最愛」時，預設的名稱就是網頁標題。

  • 瀏覽器的歷史紀錄：當訪客迷路或是想要回到最近逛過的網頁時，在瀏覽器的歷史紀錄 （history list）中所顯示的也是網頁標題。

  • 儲存：當訪客將網頁內容儲存到電腦硬碟中時，預設的檔案名稱也是網頁標題。

  • 列印：當訪客將網頁列印出來時，網頁標題也會出現在左上角，供讀者辨識網頁內容。

  • 引用：更重要的是，當作者撰寫文章，尤其是學術論文時，要引用網頁資訊 時，各項標準書目格式如APA、Chicago等，均要求必須著錄網頁標題。

再來看搜尋引擎是怎麼看待網頁標題的。大部分的搜尋引擎視網頁標題為網頁內容的最主要描述詞(Primary descriptor)，所以描述性的標題(descriptive title)或資訊性標題(information title)可以增加網頁出現在搜尋引擎搜尋結果的機會與排序 的前後。

  • 指定欄位查詢：Google的進階搜尋時，可以限定所輸入的關鍵詞出現在網頁標題，例：allintitle: "大學"。

  • 搜尋結果排序：搜尋引擎在決定搜尋結果的相關性時，會將關鍵詞出現在網頁標題，給予較高的加權。

網頁標題的使用，還要考慮到標題的長度，因為螢幕大小有限要在螢幕左上角顯示，或者加到我的最愛、歷史紀綠時，太長的網頁標題是會被裁掉的。所以好的網頁標題應該既精簡又能呈現網頁內容。

>>  網頁標題七項錯誤

接下來，根據個人逛網的經驗，歸納幾類常見的錯誤網頁標題，供大家在設計網頁標題時之參考。

  1. 未命名的網頁
    最常見的錯誤是不知道要寫網頁標題，或者是忘記寫網頁標題了。如果沒有在HTML或其他程式中設定網頁標題，系統自動產生的網頁名稱就會被命名為「新網頁（new-page）」或者「未命名的文件（untitled document）」。
    到底網頁上有多少沒有命名的網頁呢？這時就要請教Google大神了！
    光是台灣的政府網站就有一萬七千多個網頁叫做「新網頁」，而全球則有一千多萬的網頁未命名。
    試想，連網頁標題都沒有，訪客怎麼可能會點進去看呢？
    如果您想要知道某個單位或組織有沒有未命名的網頁，只要在Google的進階搜尋中輸入關鍵詞untitled document或新網頁，然後指定網域名稱即可；或者直接在 搜尋框中輸入：
    allintitle:    untitled document site:www.ntu.edu.tw
    allintitle:新網頁 site:www.ntu.edu.tw


　

  1. 以URL為網頁標題
    不要懷疑，還真的有不少網站直接以URL當網頁標題，下面純屬方便抽樣的結果。大家若有興趣，可以 allintitle: "www." 請google查查。
    URL是另一個值得探討的網站好用性問題，有空再來分解。

  1. 以實體組織為網頁標題
    這可能是台灣網頁的一項特色，尤其是學校或是政府機關的網站，經常會以實體組織或是處室名稱為網頁標題。像我就很不懂為什麼各大學的校長、副校長的首頁不直接命名「XX大學校長」或「XX大學 | 校長」，而要很一致的命名為「校長室」或「副校長室」，甚至連大學名稱都沒有出現。
    反觀美國大學或企業則傾向於以職稱或人名為網頁標題，耶魯大學校長首頁的網頁標題是：
    <title>Yale University > President > Home</title>
    至於MIT的首位女校長可就很有資訊行銷的觀念，網頁標題中直接打上名字：
    <title>Susan Hockfield, President, Massachusetts Institute of Technology</title>

  1. 冗贅的網頁標題
    再來有很多網站應該是意識到網頁標題的重要性，但是不知道網頁標題該怎麼寫。因為害怕有重要的訊息沒有出現在網頁標題中，所以儘可能的把所有的資訊都寫進網頁標題中。有時是直接 把紙本內容的章節或段落直接移做網頁標題。
    例：<title>13.12:H313211 在網頁標題、段落、及列表之前，提供辨別訊息以利識別</title>

  2. 模糊的網頁標題
    例如：台大網路畢業典禮的網頁標題為「實況轉播」，為什麼不直接用「台灣大學網路畢業典禮」做網頁標題 ；「實況轉播」感覺好像要看棒球或奧運。

  3. 固定的網頁標題
    網頁標題應該是每個網頁都不一樣，但是有很多網站是設計成一個子網站內的所有網頁的網頁標題都一樣。例如：世新大學圖書館，無論瀏覽那個網頁，網頁標題始終如一：<title>..::世新大學 圖書館::..</title>。這種網頁標題稱為Cloned titles。

  4. 專業的網頁標題
    有些網站會直接以專有名詞或是專業術語縮寫做為網頁標題，訪客可能無法理解網頁內容，也就不會點閱該網頁了。

  5. 花俏的網頁標題
    有些網站的網頁標題會加上視覺化設計，這些設計對搜尋引擎搜尋和訪客辨識是沒有幫助的。
    -----歡迎光臨慶豐銀行-----
    ∴∵內政部兒童局--入口網∴∵
    歡迎光臨~農業兒童網~^o^

>>  寫好網頁標題

在撰寫網頁標題時，要時時提醒自己，在一長串的搜尋結果清單或是瀏覽紀綠中，我們的網頁標題看起來是什麼樣子？我們的網頁標題可以提示訪客網頁內容正是他要搜尋的嗎？甚至是吸引訪客點閱網頁內容？

Nielsen(2000)稱網頁標題為microcontent，所以必須非常精準地以5-9個字來表達網頁內容，讓訪客知道可以在網頁上看到什麼內容。除非網頁標題非常清楚地交代網頁內容，否則訪客是不會點進去看的。

不同的網頁要有不同的網頁標題。想想看，如果一個網站有十個網頁的標題都一樣，在「我的最愛」中要如何區別呢？在「瀏覽紀綠（history list）」中訪客又怎麼知道那個網頁才是他想要回去的呢？

所以，網頁標題要滿足Finding和Scanning的需求。這意味著在撰寫網頁標題的時候，要將資訊性的辭彙(information-carrying terms)放在網頁標題的開頭，而且最好以符合使用者瀏覽需求的關鍵字做為網頁開頭。這是什麼意思呢？請看下面的例子：

台灣大學
台灣大學首頁
臺灣大學
國立台灣大學
歡迎光臨台灣大學
歡迎光臨國立台灣大學
歡迎光臨台灣大學首頁

相信大家還可以想出更多的台大首頁標題，到底該如何抉擇呢？這時候顧客導向和Search Engine Friendly的觀念就很重要了。想想看，訪客應該不會在搜尋引擎輸入「歡迎光臨台灣大學首頁」來搜尋台大的首頁吧。通常使用者輸入的是「台灣大學」 或是「台大」，所以也期望在搜尋結果清單中快速找到「台灣大學」字樣。所以「國立」、「歡迎光臨」只會干擾訪客Scanning，降低搜尋引擎的排序，所以應省略或避免。英文網頁標題則建議省略開頭的定冠詞(The)或者A、An等非資訊性字詞。網頁標題不需要顧慮文法結構， 建議採用廣告看板的語法(billboard slogans)來展現網頁內容 ，吸引訪客。

可是我就是想要很熱情地歡迎訪客逛我的網頁，那怎麼辦？沒問題，只是這類的網頁描述要寫在metadata中，而不是網頁標題。還有，很多訪客可能是輸入「台大」，而不是「台灣大學」，可是網頁標題直接用「台大」又顯得太不正式了，有沒有兩全其美的方法呢？有的，同樣的，在metadata中可以定義keywords，只要是訪客可能用來搜尋我們的網頁的關鍵詞都可以寫在metadata的keywords。關於metadata在網頁寫作上的應用，我們下回再來一起研究。

>>  網頁標題設計原則

所以，要滿足訪客搜尋資訊、辨識網頁內容的需求，請遵循下列五項網頁標題設計原則：

  • 清楚、正確地描述網頁內容。

  • 精簡。

    • 網頁標題長度要適當。英文網頁標題應以60個英文字母為限，中文網頁標題以9個字為宜，再長也不要超過30個字。

    • 省略非資訊性的詞彙（如：歡迎光臨等）。

  • 容易瀏覽。

    • 以資訊性的關鍵詞開頭（如：台灣大學，而不是國立台灣大學）。

    • 包含公司、組織或網站的名稱時，儘可能精簡一致。

    • 格式一致，分類標題層次由大到小，逐層延伸。
      例：聯合新聞網 | 資訊科技 | 數位生活
               Yale University | Facts About Yale

  • 不用術語或縮寫，除非該詞彙已經非常普及了。

  • 每頁都有自己的標題。

•
Lynch  P. J., & Horton,  S. (2001).Web Style Guide: Basic Design Principles for Creating Web Sites (2nd ed.). New Haven, CO: Yale University Press.

Nielsen, J. (2000). Designing Web Usability: The Practice of Simplicity. Indianapolis, IN.: New Riders.

Nielsen, J. (1998, September 6). Microcontent: How to write headlines, page titles, and subject lines. Jakob Nielsen's Alertbox. Retrieved June 15, 2005, from http://www.useit.com/alertbox/980906.html

我要訂報     前期內容      取消訂閱