本文將以教學導向的方式,引導你認識 HTML <head> 中常見的 SEO 標籤、它們的用途與最佳實踐。我們也會提供每個元素的可複製範例程式碼,並解釋這些設定如何影響搜尋引擎的排名、網站的點擊率、索引收錄以及社群分享效果。最後,你還會看到一個實用的問與答單元,解答常見的疑惑,幫助你避開新手陷阱、優化網站表現。讓我們開始探索吧！
HTML <head> 區塊的 SEO 重要性與基本概念
HTML 文件由 <head> 和 <body> 兩大部分組成：<body> 呈現實際頁面內容給使用者,而 <head> 則放置有關頁面的描述性資訊（也稱為中繼資料）。搜尋引擎在抓取你的網頁時,會特別關注 <head> 裡的各種標籤,以了解你的頁面內容、設定索引規則,甚至決定在搜尋結果中如何顯示你的網站摘要。因此,妥善配置 <head> 中的 SEO 元素,可以：
提升排名與相關性：提供關鍵資訊讓搜尋引擎更瞭解你的內容主題,例如標題、描述等,增加與查詢的相關性。
增加點擊誘因：自訂在搜尋結果中的顯示文字（如標題和描述）以吸引使用者點擊,有效提高 CTR。
控制索引與抓取：透過特殊標籤（如 robots、canonical）告訴搜尋引擎哪些頁面該索引、如何處理重複內容,確保網站資源被正確收錄而不浪費抓取配額。
優化分享呈現：設定 Open Graph 等社群元資料,讓你的頁面被分享至 Facebook、LINE、Twitter 等平台時,自動產生精美的預覽卡片（包含標題、描述、縮圖）,提高分享的吸引力與點擊率。
改善用戶體驗：一些 <head> 元素（例如 viewport、favicon）雖不直接影響演算法排名,但關係到行動裝置的瀏覽體驗和品牌專業形象,間接影響使用者滿意度與留存,進而對 SEO 有正面助益。
總而言之,<head> 區域彙集了影響 SEO 表現的關鍵設定。我們接下來將一一介紹常用的標籤,包括 <title>、<meta name="description">、<meta name="robots">、<link rel="canonical">、<meta property="og:..."> (Open Graph)、<meta name="viewport"> 以及網站圖示 (favicon) 的設定方式與作用。
<title>：頁面標題標籤
<title> 標籤定義了網頁的標題,是 所有 SEO 元素中最重要的 之一。它不僅出現在使用者的瀏覽器頁籤上,也是搜尋引擎結果頁(SERP)中藍色可點擊標題連結的文字來源。搜尋引擎會將 <title> 視為該頁面的主要標識,這對排名影響很大。同時,一個撰寫良好的標題能吸引使用者眼球,提高點擊率。
作用與影響
<title> 應清晰描述頁面內容,包含主要關鍵字。搜尋引擎演算法會參考標題中的文字來判斷頁面主題相關性。因此,關鍵字置入標題有助於提升該關鍵詞的排名。但請注意,避免關鍵字堆砌——標題過度重複或羅列關鍵詞可能被視為垃圾訊號,反而不利排名。另一方面,標題是使用者在搜尋結果中第一眼看到的內容,決定他們是否點擊進入,因此一個吸睛且貼切的標題能顯著提升 CTR。
最佳實踐
每個頁面都應有獨一無二的標題,不要多個頁面使用相同 <title>。保持標題精簡且具描述性,建議長度約在 50～60 個字元 以內（約合 25～30 個中文全形字）為佳,超過這長度在 Google 搜尋結果中可能會被截斷顯示,影響閱讀與點擊意願。你可以在標題適當位置加入品牌名稱以建立識別,但應確保重點訊息在開頭就呈現。舉例來說,一個好的標題格式可能是：「核心關鍵字 – 網站/品牌名」。
範例
以下是一個簡單的 HTML 標題範例：
<title>HTML Head 中的 SEO 關鍵設定指南 - 範例網站</title>
上述範例中,標題清楚指出文章主題,後面加上品牌名稱「範例網站」。這樣的 <title> 即可讓搜尋引擎和使用者快速理解頁面內容,且在不同頁面間保持標題獨特。
<meta name="description">：頁面描述標籤
<meta name="description">（常簡稱 meta description）用來提供頁面的內容摘要,一到兩句話概括重點。這段描述通常不會直接影響搜尋排名（Google 已明確表示 meta 描述內容不作為排名演算法因素）,但它極為重要,因為搜尋結果中的黑色摘要文字(snippet)大多取自這裡。精心撰寫的 meta 描述能提升使用者對內容的理解,進而提高點擊率。
作用與影響
當你的頁面出現在搜尋結果中,Google 等搜尋引擎通常會將 meta 描述顯示為該結果的摘要（除非它認為你的描述不夠合適,稍後會談到這種情況）。一個貼切、有吸引力的描述能告訴搜尋者「這頁面提供他們需要的資訊」,從而增加點擊的可能。雖然它不直接參與排名計算,但較高的 CTR 可能間接影響你的排名表現。此外,良好的描述也有助於社群媒體分享時的預覽文字（若未特別設定 Open Graph 描述時）。
最佳實踐
撰寫 meta 描述時,保持長度適中、內容唯一且切合頁面主題。建議長度約 130～160 個字元（約 60～80 個中文字）以內,太長會在搜尋結果中被截斷,太短則可能無法充分傳達資訊。確保每個頁面的描述都是專屬的,避免全站用同一段描述文字。內容上,涵蓋該頁面的主要關鍵字和賣點,但以自然語句呈現,不要刻意堆砌關鍵詞。你也可以在描述尾端加入號召性語句(Call-to-Action),引導用戶點擊,例如：「閱讀完整指南了解更多細節。」。
範例
以下是一個 meta 描述的範例：
<meta name="description" content="掌握 HTML head 常見 SEO 設定,提升網站排名與點擊率的完整指南,教您設定標題、描述、OG、canonical 等關鍵元素。">
這段 content 簡短扼要地說明了頁面內容（教學指南）,並帶有吸引人的語氣,讓使用者大致瞭解點進去會獲得什麼。良好的 meta 描述能讓你的搜尋結果在眾多競爭者中脫穎而出。
<meta name="robots">：爬蟲索引控制標籤
<meta name="robots"> 標籤提供搜尋引擎爬蟲關於是否索引此頁面以及如何跟隨頁面上的連結的指示。透過這個標籤,你可以控制搜尋引擎對單一頁面的收錄與否,以及其他展示細節。常見的 content 屬性值包括：index / noindex（是否將頁面納入索引）、follow / nofollow（是否追蹤頁面上的連結抓取目標頁）、以及一些進階值如 noarchive（不儲存快取）、nosnippet（不顯示摘要）等。
作用與影響
預設情況下,搜尋引擎會「index, follow」,也就是索引頁面並追蹤其上的連結。只有當你明確告訴它「noindex」時,合規的搜尋引擎才會排除該頁面,不在搜尋結果中顯示；「nofollow」則是要求搜尋引擎不要繼續抓取本頁上的出站連結（常用於不可信或不希望傳遞權重的連結）。這在某些情境下非常有用,例如：網站的隱私政策頁、登入頁或重複內容頁,你可能不希望它們出現在搜尋結果中,便可使用 <meta name="robots" content="noindex"> 阻止。另外,如果你有頁面包含敏感資訊而不想讓搜尋引擎保留快取,noarchive 可以派上用場。
最佳實踐
僅在有需要時使用 robots meta。一般的公開內容頁通常不需要特別設定（預設讓搜尋引擎索引即可）。若使用,務必精確：例如,只在確定不公開的頁面上加上 noindex。避免在重要頁面上錯誤地使用了 noindex 或 nofollow,那可能導致這些頁面從搜尋結果中消失或失去傳遞權重的能力。此外,<meta name="robots"> 只對允許抓取的頁面有效——如果在 robots.txt 把整個頁面封鎖了,搜尋引擎根本看不到頁面的 meta 標籤。最後,記住各搜尋引擎對這標籤的遵循是自願性的（雖然主流如Google、Bing都會遵守）,但一些非主流爬蟲可能不理會,所以敏感資料絕不要僅靠這標籤隱藏。
範例
以下展示幾種 robots meta 的用法：
<!-- 預設行為,可省略 --> <meta name="robots" content="index, follow"> <!-- 不讓此頁被索引,但允許爬蟲追蹤連結 --> <meta name="robots" content="noindex, follow"> <!-- 讓此頁被索引,但不讓爬蟲追蹤頁面上的任何連結 --> <meta name="robots" content="index, nofollow"> <!-- 不索引也不追蹤,完全排除頁面 --> <meta name="robots" content="noindex, nofollow">
通常,我們不會為正常文章頁面特地寫 index, follow（因為這是預設值）,但在不希望曝光的頁面（如測試頁、重複內容頁）加入 noindex非常重要。同時請確認站上沒有意外的 noindex 讓該被收錄的頁面消失了。妥善使用 <meta name="robots"> 有助於掌控網站的索引狀態,避免搜尋引擎收錄不必要的頁面。
<link rel="canonical">：首選網址標籤
Canonical 標籤（規範化連結）是一個 <link> 標籤,用於告訴搜尋引擎「這個頁面最權威的網址是什麼」。它的典型形式為在 <head> 中加入：<link rel="canonical" href="完整首選網址">。這個設定對於網站上存在重複或相似內容的情況特別有用,它能將搜尋引擎對多個 URL 的權重統一到你指定的單一 URL 上,避免內耗。
作用與影響
很多網站會出現相同內容可以透過不同網址訪問的情況,例如有無 www 的兩種域名版本、附加追蹤參數的URL、或是商品分類篩選造成的URL變化。如果沒有 canonical,搜尋引擎可能將這些不同網址視作不同頁面,導致內容重複的問題,並分散該內容的SEO權重。透過在這些頁的 <head> 裡指定相同的 canonical URL,等於向搜尋引擎宣告：「不管用哪種路徑抵達,這些都應被視為同一頁,以這個我指定的網址為主。」搜尋引擎會傾向索引和展示 canonical 指定的網址版本,並將其他重複頁面的外部鏈接價值等信號歸集到這個首選網址上。這有助於避免重複內容分散排名,確保你的內容在搜尋結果中以你期望的網址出現。
最佳實踐
為避免疑慮,每個頁面（特別是內容頁）都應該帶有自我指向的 canonical 標籤（即 href 指向該頁面的正式網址）。這樣即使有人以不同大小寫、不同協定（http/https）或附加奇怪參數訪問你的頁面,搜尋引擎都能統一認定同一內容的首選URL。此外,若你發佈相似內容於多個頁面（例如列印版、分頁等等）,也可用 canonical 將它們指到主要版本。使用時務必確保 href 完整正確,包括正確的網域、路徑。切忌在不同頁面之間互相 canonical 到彼此,或循環指向,那會讓爬蟲困惑。還有,canonical 並非強制命令,搜尋引擎通常遵從但在某些情況可能自行判定,因此也需搭配良好的網站結構來減少重複。
範例
假設有兩個網址都可以訪問同一內容：https://example.com/page?id=123 和 https://example.com/page/123,我們希望後者為主要網址,則在頁面的 <head> 中加入：
<link rel="canonical" href="https://example.com/page/123" />
如果這段代碼放在 https://example.com/page?id=123 頁面上,搜尋引擎抓取時就會明白首選的版本是 /page/123 這個URL。未來在索引和排序時,就會以 /page/123 為主,避免將兩個網址視作不同頁面。運用 canonical 能有效解決網站的重複內容困擾,讓權重集中在你指定的頁面,對SEO友好。
Open Graph 標籤 (<meta property="og:...">)：社群分享優化
Open Graph (OG) 標籤是一系列以 <meta property="og:..."> 開頭的標記,最初由 Facebook 引入,如今已廣泛被各大社群平台（Facebook、Twitter、LinkedIn、LINE 等）支援。它的作用是將網頁變成「豐富的社交卡片」,當有人在社群媒體上分享你的頁面連結時,這些標籤所提供的資訊（例如標題、描述、縮圖）會被用來生成一個預覽內容,讓分享的貼文更具吸引力。儘管 Open Graph 標籤不直接影響搜尋引擎排名,但透過提升社群分享的點擊率與擴散度,能為網站帶來更多流量,間接有助於SEO成果。
作用與影響
當你的頁面缺少 Open Graph 資料時,社群平台在用戶分享連結時可能只能抓取頁面的部分內容,導致預覽顯示的標題、描述或圖片不理想（甚至亂抓圖片）。這可能削弱貼文對讀者的吸引力。而有了完善的 OG 標籤,你可以精確控制分享卡片的呈現。例如指定一張精美的縮圖（og:image）、自訂精簡有力的標題（og:title）和描述（og:description）。這不僅提高貼文在動態消息中被點擊的機率,也塑造專業的品牌形象。一篇內容如果經常被分享且點擊率高,將為你帶來更多訪客和潛在外部連結,長遠看對SEO的正面效應不容小覷。
最佳實踐
建議每個重要頁面都配置基本的 OG 標籤組合：至少包括 og:title（社群分享標題）、og:description（社群分享描述）、og:image（分享縮圖 URL）以及 og:url（頁面網址）和 og:type（頁面類型）。通常網站的首頁或一般頁面 og:type 可設為 "website",文章內容頁則多用 "article"。確保 og:title 與 <title> 保持一致或至少相關,而 og:description 則可與 meta description 相近但允許更具行動呼喚的語氣。og:image 所指向的圖片應符合社群平台的尺寸要求（例如 1200×630 像素以上,比例16:9常見）,檔案大小適中以加快加載。最後,og:url 一般填入該頁面的正式網址（通常和 canonical 相同）,以防社群分享時因 URL 參數不同而視作不同內容。
範例
下面是一組典型的 Open Graph 標籤範例：
<meta property="og:title" content="HTML Head 中的 SEO 關鍵設定指南" /> <meta property="og:description" content="教你如何設定 HTML <head> 標籤來提升網站SEO,包括標題、描述、OG等最佳實踐。" /> <meta property="og:image" content="https://example.com/images/seo-guide-og.webp" /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://example.com/blog/seo-guide.html" />
在這些標籤的幫助下,當有人在社群上分享此頁面時,就會看到預定義好的標題「HTML Head 中的 SEO 關鍵設定指南」、精選摘要,以及縮圖（假設 seo-guide-og.webp 是一張具代表性的封面圖）。這大大提高了貼文的專業度與可讀性。對於習慣從社群獲取資訊的使用者而言,良好的 OG 呈現能促進點擊和分享,為網站帶來更多自然流量。
(貼心提示：Twitter 雖然會讀取 Open Graph 資料,但也有自己的 Twitter Card 標籤,如果希望在 Twitter 上有更佳呈現,可額外補充 <meta name="twitter:card" content="summary_large_image"> 等標籤。不過基礎OG設定已能涵蓋大部分需求。)
<meta name="viewport">：響應式布局視窗設定
<meta name="viewport"> 是與行動裝置體驗密切相關的一個標籤。它告訴移動設備的瀏覽器如何設定頁面的視窗寬度和縮放比例。雖然此標籤主要影響的是使用者體驗而非傳統意義上的 SEO 元數據,但自從Google推行行動優先索引（Mobile-First Indexing）後,網站的手機瀏覽體驗已成為排名考量的重要部分。如果沒有正確設置 viewport,頁面在手機上可能以錯誤的比例顯示,字體小到難以閱讀、需要橫向捲動,造成極差的使用體驗,這將間接損害你的SEO表現。
作用與影響
常見的 viewport 設定為 width=device-width, initial-scale=1,其含義是：將視窗寬度設為裝置螢幕的寬度（device-width）,初始縮放比例為1（不縮放）。這樣一來,無論在手機、平板還是桌機上,瀏覽器都能依裝置寬度正確地渲染頁面。在響應式設計的頁面上,CSS 可以針對不同螢幕尺寸做調整,確保手機用戶有良好的閱讀體驗。如果缺少 viewport 標籤,手機瀏覽器通常會以桌面寬度來顯示頁面,結果就是縮成一個小小的全頁縮圖,使用者得不停放大縮小才能看內容,極其不便。這種體驗不佳會導致使用者立刻離開（提高跳出率）,而Google也可能因此降低你在手機搜尋結果中的排名。
最佳實踐
在所有行動裝置優先的頁面上（幾乎就是當今所有網站）,都應包含適當的 viewport meta。最常用的是 width=device-width, initial-scale=1。通常不建議禁用使用者縮放（例如設置 user-scalable=no）,因為那對某些使用者可能不友好（無法放大內容）。另外,如果有特定需求,也可以加入 minimum-scale、maximum-scale 等參數,但一般保持默認即可。重點是確保你的CSS與viewport協同作用,使版面能隨裝置寬度自適應。良好的行動裝置體驗不僅讓使用者滿意,更是SEO在移動端排名的基礎之一。
範例
以下是一個標準的 viewport 設定範例：
<meta name="viewport" content="width=device-width, initial-scale=1">
只需這一行,就讓你的頁面具備了響應式佈局的基礎。加入這標籤後,記得搭配CSS媒體查詢等方式,調整不同螢幕尺寸下的樣式,提供一致且友善的瀏覽體驗。最終,滿意的用戶將帶來更好的互動數據,而Google也更青睞於在行動搜尋中推薦那些行動端表現優秀的網站。
Favicon 網站圖示設定 (<link rel="icon">)
所謂 favicon,就是瀏覽器標籤上顯示的那個小圖示,也是使用者將網站加入書籤時所看到的圖標。雖然favicon本身不是傳統的SEO因素,但一個清晰且具有品牌識別性的favicon能增強網站專業度與可信度。自2019年起,Google在行動端搜尋結果中會在網站標題旁展示站點的小圖標,這意味著favicon也間接影響了搜尋結果的點擊吸引力——一個熟悉的品牌圖示可能讓用戶更快辨識你的網站,在眾多結果中脫穎而出。
作用與影響
當你的網站有設定favicon時,使用者在瀏覽器標籤列能更容易地識別並切換到你的頁面,提升使用體驗。而在搜尋結果中,顯示的網站圖示可以被視為一種信任標誌。如果你的品牌Logo或圖示廣為人知,搜尋者更傾向點擊帶有該圖示的結果。此外,在使用者收藏網站或保存至手機主畫面時,favicon 都會被用作圖標。因此,雖然favicon不會改變你的PageRank,但沒有favicon或圖示品質差,可能錯失一些潛在點擊與品牌曝光的機會。
最佳實踐
將 favicon 圖片設計為簡潔方形（常見尺寸包括16×16、32×32px等,多數情況下瀏覽器會自動調整大小）,格式可用 .ico、.webp 等。接著,在網站首頁（或可全站共用的 <head> 模板）中加入對應的 <link rel="icon"> 標籤。為了相容性,你也可以提供多種格式/尺寸的圖示並使用不同的 rel 屬性值（例如 "shortcut icon" 與適用於 Apple 裝置的 "apple-touch-icon"）,但一個基本的 icon 設定通常即可滿足現代瀏覽器與搜尋結果需求。注意,favicon 檔案最好放在網站根目錄或容易找到的路徑,並且不要透過 robots.txt 屏蔽掉對它的抓取。更新favicon後,Google可能需要幾天至幾週時間重新抓取並在搜尋結果中更新圖示。
範例
以下是在 <head> 中設定 favicon 的範例：
<link rel="icon" href="/favicon.ico" type="image/x-icon">
如果有多種尺寸或格式的圖示檔案,你也可以鏈接例如 PNG 格式：
<link rel="icon" href="/favicon-32.webp" type="image/png" sizes="32x32"> <link rel="icon" href="/favicon-192.webp" type="image/png" sizes="192x192">
以上示例將 /favicon.ico 作為網站的主要圖示。大多數瀏覽器會自動尋找 /favicon.ico 路徑,但明確指定有助於管理。設定好後,你的網站在瀏覽器頁籤、收藏夾,以及行動搜尋結果中都將顯示這個圖示,強化用戶對你品牌的記憶和信任。
以上介紹了 HTML <head> 區塊中幾個關鍵的 SEO 設定元素。我們強調了每個元素的用途、對 SEO 的影響,並提供了對應的程式碼範例與最佳實務建議。掌握這些設定,將有助於搜尋引擎更有效地理解和呈現你的网站資訊,同時也讓使用者在搜尋和分享時獲得更佳的體驗。
接下來,我們進入常見問題的解答環節,針對一些開發者與內容經營者經常遇到的疑惑進一步說明。
常見問答 Q&A
總結
希望上述解答能釐清你對 <head> 中 SEO 設定的疑惑。總而言之,掌握這些關鍵標籤的用法與最佳實踐,可以讓你的網站在搜尋引擎眼中更具備結構性與相關性優勢,同時也為使用者提供更友善的體驗。
不妨現在就檢視你網站的 <head> 區塊,應用本文的建議進行優化。當你正確設定了標題、描述、索引規則、規範網址、社群預覽和行動端配置,你的網站將更有機會在激烈的數位競爭中脫穎而出,獲得理想的排名和流量。祝你的網站SEO優化之旅順利成功！
