今天筆記5-1的內容。 網頁的標題與網頁的描述會影響搜尋引擎的索引,也會影響讀者的判斷。 撰寫獨特的 網頁標題(Title)網頁描述(Description) 是區別你的網頁與別人網頁的最好方式。 而網頁標題與網頁描述必須具備獨特精確、以及簡短等等特性,才能夠將網頁凸顯出來。

網頁標題與網頁描述這些也都是放在 <head></head> 的訊息,那放這些訊息有什麼用了? 我以 pchome 的網站為例子,如下圖

description comparisondescription comparison

先看綠色框框的部分,你所撰寫的網頁描述,會顯示在搜尋結果裡面,這可以讓使用者馬上了解你的網站的重點。

再來看紅色圈起來的部分,那是由 The Open Graph protocol 定義的 Open Graph 的網頁描述。可以跟社群媒體互相串連的一種宣告標記,以 Facebook 為例,我在分享的貼文裡面貼上某一個網址後,Facebook 會根據 Open Graph 網頁描述內容,產生預覽,如下圖

The Open Graph protocolThe Open Graph protocol

好的網頁標題原則

  • 獨特、精確、簡短
  • 最重要的關鍵字放在最前面
  • 標題長度最好符合搜尋引擎規則
    • 建議長度為 28 個中文字或 56 的含空格的英數字
  • 適度包含關鍵字,但是不要充塞或重複的關鍵字
  • 要準備子標題
    • 使用 <h1> 當作子標題

好的網頁描述原則

  • 獨特、精確、簡短
  • 適度包含關鍵字,但是不要充塞或重複的關鍵字
  • 標題長度最好符合搜尋引擎規則
    • 建議長度為 80 個中文字以內或 150~160 個字元

延伸閱讀

[The Open Graph protocol]
[A free guide to HTML5 head elements]