什麼是 Title tag 、Meta Description 、Meta Keyword?|SEO 自學筆記 3

更新日期: 2021 年 7 月 11 日

什麼是 Title tag、Meta Description、Meta Keyword 文章的封面圖

最近我在公司寫文章時,發現內容管理的後台總有 Titile tag 、Description tag、Keyword tag 三種標籤需要填寫。

為了提升自己的專業能力,決定仔細研究這三種標籤究竟代表的意涵?

經過查詢後,才發現這三種標籤是 SEO 優化最基本的設定,可以讓網站更良好呈現在搜尋結果頁面,以下分別針對三者進行說明。

Title tag 介紹

一、什麼是 Title tag?

Title tag 是 HTML 程式碼中一個語法,最主要的功能是讓搜尋引擎,能夠清楚辨識該網頁的名稱。

一般來說,我們的網頁程式碼如同人體構造一樣,主要分成頭部與身體,兩個區塊有各自的職責所在,大致構造如下。

<html>
<head>
<title>網站標題</title>
<head>
<body>
<div>內容</div>
</body>
</html>

寫完後,網頁會如此呈現:

在 title tag 撰寫網頁名稱時,頁面實際的呈現方式

其中,Title 是個不可或缺的語法。因為它是呈現網頁標題的語法,若沒有設定相關內容,則會變成一個無標題的網頁。

二、Title tag 為什麼重要?

1. 使用者對網站的第一印象

Google 呈現搜尋結果的依據,是根據網頁 Title 設定的內容去呈現。以 yahoo 新聞為例,若網頁名稱為「Yahoo 奇摩新聞」,則搜尋結果頁也會以「Yahoo 奇摩新聞」呈現。

yahoo 新聞的搜尋結果,與網頁標題文字相同

由此可推論,若將網頁視為一本書,Title 則是那本書的「書名」,將影響使用者對該網頁的第一印象,也是讓使用者決定是否點開的重要依據。

2. 分享連結呈現的內容

當使用者在社交軟體(如 Facebook、Instagram )分享網站連結時,社群媒體會採納 Title tag 的內容,製作成「書籤」的形式讓使用者查閱。

同樣以 Yahoo 新聞網頁連結為例,在臉書貼上該連結後,就會自動呈現出以下書籤形式。

分享 yahoo 新聞網址時,會自動以書籤方式呈現

3. 網站排名重要因素

最後,Title tag 是影響網站排名的重要因素之一。

當使用者輸入關鍵字時,搜尋引擎會根據網頁 Title 內的文字,判斷哪些網站與使用者的需求相符,以此決定搜尋結果要抓取哪些網站。

此外,根據 SEO 公司 Moz 的報告顯示,全球頂尖 SEO 專家都將 Title tag 視為重要排名因素。

因此,若網站流量成效不佳,可以不妨試試調整 Title tag 關鍵字內容,重新獲得搜尋引擎的青睞。

三、如何撰寫 Title tag?

一般來說,Title 主要分成三個部分組合:主要關鍵字、次要關鍵字、品牌名稱。並且透過「:」、「-」、「|」三種符號連結。

公式如下:

主要關鍵字-次要關鍵字|品牌名稱

當然,不同類型的網頁,在標題設計上會有不一樣的呈現方式。以下

根據常見網頁提供範例。

1. 首頁:品牌名稱-公司理念 & 口號|近期活動

  • Hahow 好學校| 最有趣的線上課程平台| 自學那些學校沒教的事
  • Yourator 新創職涯平台: 讓求職視野更開闊
  • The News Lens 關鍵評論網- 分享觀點從這開始

2. 商品頁:商品名稱-規格 & 補充說明|品牌名稱

  • 桌燈/檯燈/工作燈|桌上燈具、工作照明| IKEA線上購物
  • 電視.4K電視– 電視.音響.遊戲| 燦坤線上購物~燦坤實體守護
  • Google Pixel 5 (8G/128G)最低價格及規格|傑昇通信~挑戰手機 …

3. 文章頁:文章名稱|品牌名稱

  • 台股爆7148億天量、重挫652點摜破16600點- 自由財經
  • 戀愛悄悄話:15條你不能不知的愛情潛規則| Marie Claire 美麗 …
  • 認識糖尿病:原因、症狀、診斷、預防- Hello 醫師

特別注意,關鍵字與關鍵字之間的連結,建議不要使用「:」、「-」、「|」以外的符號,以免搜尋引擎產生關鍵字誤判。

四、撰寫 Title tag 要注意什麼?

1. 長度控制在 25 – 30 字之間

撰寫 Title Tag 內容時,建議長度為 25–30 字之間,若標題內的字數過多,可能導致搜尋結果會自行切除重要的關鍵字,改由「…」顯示。

例如,文章標題原本是:

  • 戀愛悄悄話:15條你不能不知的愛情潛規則| Marie Claire 美麗佳人

但由於字數過長,導致顯示結果切掉部分品牌名稱,改為:

  • 戀愛悄悄話:15條你不能不知的愛情潛規則| Marie Claire 美麗…

此外,若超過正常的標題字數(30 字以上),還會進而導致 SEO 的關鍵字排名與流量。

由此推論,該網頁越重要的關鍵字,越應該放置在標題前幾個次,前不會因字數限制無法顯示在搜尋結果頁。

另外,根據關鍵字研究公司 MOZ 2015 年的報告,當重要關鍵字在標題越前面幾個字,越有可能對關鍵字排名產生重要影響。

2. 不要堆積關鍵字

有些人為了取得良好的關鍵字流量,會選擇以大量的關鍵字組合,試圖讓使用者最大程度搜尋到該網頁。

例如,若撰寫一篇有關減肥的文章,可能會如此下標題:

  • 減肥/減肥運動/減肥飲食/減肥食譜-減肥文章
  • 為自己減重:一篇專為減重人士的減重指南|減重教練

以使用者的角度觀察,這種標題讓搜尋者無法判斷文章內容,完全違法「使用者友善」的平台政策。

因此,搜尋引擎懲罰會懲罰類似標題的網站,調降該網頁曝光的次數與排名。

Meta Description介紹

一、什麼是 Meta Description?

Meta Description 與 Title tag 都是 HTML 的一種語法,差別在於 Title tag 是讓搜尋引擎理解「網頁標題」,Meta Description 則是搜尋引擎讀取「網頁簡介」的語法

我們填寫在 Description 語法中的內容,都會被搜尋引擎(例如 Google )呈現在搜尋結果頁上。

例如,若我們搜尋「會考 日期」出現以下結果

搜尋會考日期時,搜尋結果顯示的網頁描述

接著,我們點開來可以看到以下內容

搜尋國中會考相關頁面時,點擊後呈現的網站內容

再來,點滑鼠右鍵按「檢查網路原始碼」,就可以發現 Description 語法的文字,與「網頁內容」、「網頁描述」有相同的內容

網站內容的 meta description 內容
太神奇了!傑克

二、Meta Description 為什麼重要?

如果從 SEO 的角度理解 Meta Description,不管你網頁描述寫得如何,都不會對網站排名造成直接的影響。

Google 在2009 年就宣布:「不論 Meta Description 或 Meta tag 都是演算法排序網站名次的因素。」

話雖如此,Meta Description 仍然會對網站排名造成間接影響。事實上網站描述的內容,將影響使用者是否願意點擊查看網站內容。

當網站被使用者持續點擊觀看時,就會讓網站排名不斷向前,因為「點擊率」是網站排名的重要成因。

三、撰寫 Meta Description 要注意什麼?

1. 不要堆疊關鍵字

網頁描述的功能是呈現網站內容的簡介,幫助使用者預覽網站內容,並以此為根據判斷是否點進網站。

如果只是填寫一堆關鍵字,不只無法對使用者沒有幫助,也不是搜尋引擎考量排名的因素。

最可能的情況,是因此導致網站點擊率持續下跌,因此讓 SEO 排名持續降低。

2. 有時不須寫 Meta Description

一般情況,都會建議替網頁撰寫一份引人入勝的網頁描述,但當網頁內容包含兩個以上搜尋量很高的關鍵字時,可以考慮不需特別填寫此項目。

因為當網站網頁含有多種長尾關鍵字時,與其自行預測使用者常用的關鍵字,不如讓搜尋引擎隨著使用者真正的搜尋情況,去調整網頁描述的呈現內容,反而是更聰明的選擇。

換句話說,若先行將預設的網站描述寫上,反而限制搜尋結果的呈現方式,若讓搜尋引擎自行選擇文章段落與關鍵字組合,能產生更多元且更貼切使用者需求的樣式。

3. 搜尋引擎不一定會使用你設置的 Meta Description

某些情況,若你建置好的 Meta Description 內容,無法滿足使用者對關鍵字的資訊需求,搜尋引擎不會採用你,並會自行挑選合適的片段呈現在搜尋結果中。

看到這裡,你可能會想:「什麼!?搞了半天原來 Google 要不要採用 Meta Description 不是我們能預測的,那我們還在這邊幹嘛?」

的確如此,因此我們公司在實務上,並不會特意為文章再撰寫一段 Meta Description 的段落,是直接將內文的第一段複製、貼上到語法中,讓搜尋引擎自行決定是否採用。

至於下一段分享的內容,與其說是 Meta Desctiption 的撰寫技巧,不如說是網頁前言的撰寫技巧。

畢竟只有寫出好的內容,才能被搜尋引擎挑選出好的摘要。

四、如何撰寫 Meta Description?

我們以「點擊率」作為主要目標,可以將網頁描述的內容視為曝光網站內容的一段「廣告文案」,主要寫法有兩種:

1. 全文總結

採用「倒金字塔式」將最重要、最吸引人的內容呈現在最前面。此種寫作方式,可以讓使用者在最短時間內掌握網站內容。

撰寫時,重點關注以下四點關鍵要素。:

  • 內容簡單明瞭,每句話的邏輯清晰順暢
  • 優先接露重點利益,滿足使用者對資訊的需求與問題
  • 結合時事更新最新資訊,定期優化內容

舉例來說,當我們搜尋「SEO 優化」,會跳出以下 3 則結果。

搜尋 SEO 優化時跳出的搜尋結果:一
搜尋 SEO 優化時跳出的搜尋結果:二
搜尋 SEO 優化時跳出的搜尋結果:三

可以發現,這 3 則的網頁描述內容都很嚴謹,句子之間都有順暢的邏輯。

通常第一句話直接破題:「什麼是 SEO ?」,第二句話解釋:「SEO 是XXX」,第三句話則補充 SEO 的重要性:「目的是 XXX 」。

這種開門見山的寫作手法,可以讓使用者在三句話以內,就能對 SEO 有初步的了解與認識。

簡單來說,就是讓使用者能夠「秒懂」的寫作方式。

2. 吸引人的引言

我們可以將文章的第一句話,想像成魚鉤一樣,用意是抓住使用者的注意力,以此將自己的文章與思路慢慢展開。

文案大師 Joseph Sugarman:

文案標題只有一個目的:讓讀者讀下你內文的第一句話。同時,內文第一句也只有一個目的:讓他讀你內文的第二句話。

我以自己一篇文章為例。

標題:「高分落榜」每年都在發生,明年只會更嚴重!

第一段:2019 年大學申請入學首次採用考科 5 選 4,一位學測 4 科 60 級滿分的建中學生,最後落榜。當著輔導老師面前哭了將近一小時。

第二段:兩年後,一位學測 5 科總分 57 級分考生,以繁星推甄上高學醫學大學牙醫系,但申請入學成績卻是亞洲大學聽力治療系備取23名。

第三段:許多經歷過「聯考」時代的家長們,看到這種現象紛紛抱怨,「明明學測分數比別人高,卻被錄取到更差的學校」、「成績早遠超標準,最後卻因超篩淘汰」

可以發現,這篇文章前三個段落都有各自用意。

第一段是為了加強標題的可信度;第二段則故意使用相反例子,讓人產生差異感;第三段歸納小結論,點出讀者的心聲。

這種寫作手法,最常出現在各種類型的雞湯文,讓讀者深陷其中無法自己。

「人沒有了愛,會變成一塊冷冰冰的石頭」、「給他任何一個答案,都在意料之中。」、「才華和本事,都是逼出來的」

如果想學此種手法,可以多多觀察類似的雞湯文,並嘗試自己熬出幾碗雞湯。

Meta Keyword介紹

一、什麼是 Meta Keyword?

Meta Keyword 是 HTML 語法之一,早期用來提供更多相關資訊給搜尋引擎,讓它可以判斷網頁內容。

語法呈現如下:

<meta name="主要關鍵字" content="關鍵字1,關鍵字2,關鍵字3">

但到了 2002 年時, SEO 專家 Danny Sullivan 發布一篇文章後,讓 Meta tag 徹底跌落神壇,文章標題為:Death Of A Meta Tag。

文章裡,他如此告訴我們:

「有些網站管理員為了取得排名流量,會利用插入與網頁不相關的關鍵字,或填入大量重複的關鍵字,希望以此騙取搜尋爬蟲的青睞」

「由於這些原因,1998 年後新型的搜尋引擎(例如 Google )果斷將 其放棄,不曾將 Meta Keyword 列入搜尋排名的影響要素之一」

看到這裡,你可能會想說:「既然這樣就不用看了,大家可以回家啦!」

的確如此,大家真的可以回家了。

網路上一位 SEO 專家 Bill Slawski,特別寫一篇介紹 Meta Keyword 的文章,試著了解它到 2021 至今是否還有用處。

但是寫到最後,他如此評語:「過去二十年裡,我已經不再使用 Meta Keyword 在我優化的任何網頁上。」

「對此,我從來不曾覺得這項決定有任何錯誤。」

以上,就是我這次的分享,謝謝大家!

文章參考資料

  1. 認識 SEO的 Title Tag(標題標記)
  2. (Meta) Title Tags + Title Length Checker [2021 SEO] — Moz
  3. Meta Description [2021 SEO] — Moz
  4. Meta Keywords: Should You Use Them?

Similar Posts