HTML Head是甚麼？

內容目錄

HTML的世界一開始對我來說真的是一團迷霧，特別是當我第一次接觸到「head」的時候，我心想：這是頭頂的那個head嗎？不過，真的開始花時間研究它後，才發現這小小的HTML區塊，其實負責著網站的第一印象，有點像是網站的秘密武器。這次我們就一起來聊聊HTML的head是什麼，為什麼它真的超重要，還有你應該怎麼使用它來提升網站的表現！當我學到怎麼正確配置head區塊後，不只是網站打開速度變快，甚至連搜尋引擎排名也有提高的跡象——說真的，head區塊絕對是所有新手建站者不該忽略的一部分！

當我們談到網站架構時，HTML head 幾乎是一個不容忽視的關鍵部分。它不像網站的內容部門那樣直觀，但它提供了搜尋引擎和瀏覽器許多重要的資訊。以下，我會分享幾個在設計 HTML head 時需要注意的重要元素及技巧，讓你的網站更專業、更吸引人。

撰寫 `title` 標籤吸引點擊

網站的標題就是第一印象。title 標籤不僅出現在瀏覽器的標籤上，也是搜尋引擎中點擊率的重要因素。簡短直接是關鍵，通常推薦不要超過 60 個字元，讓使用者一眼就能了解你的網站重點。同時，可以融合以下技巧：

包含關鍵字濃縮主題： 例如「學會用HTML排版，提升SEO技巧」。
增加誘人的描述： 像是「免費工具、速成指南」這類詞語特別吸引目光。
避免重複或字數過長： 冗長的標題容易失去焦點，也可能會被搜尋引擎截短。

善用 `meta` 標籤提升 SEO

meta 標籤可以說是網站的「隱形達人」，它們在網頁中表面看不到，卻對搜尋引擎和使用者有極大的影響。其中極為重要的是 meta description 以及 robots 標籤：

Meta description： 提供簡短摘要，最佳長度在 150-160 個字元，需加入核心關鍵字，如此更容易吸引人點擊。
Robots： 為搜尋引擎指示哪些網頁內容需要索引（index）或需要排除（noindex）。

記住，過度塞滿關鍵字（keyword stuffing）不僅沒有幫助，還可能被搜尋引擎降權喔！

有效連結 CSS 的 `link` 標籤用法

正確使用 link 標籤是網站視覺設計的基礎。它負責連結到你的 CSS 外部文件，讓網頁從留白樣式變得有層次、有風格。確保以下幾點：

CSS 檔案需存放於一致的資料夾結構，便於管理與維護。
使用 rel="stylesheet"，例如：。
為不同頁面加載專屬樣式時，透過多個 link 指定不同檔案。

正確擺放 `script` 標籤

大量 JavaScript 插進 head 部分可能拖慢頁面加載速度。所以，通常只會將關鍵或同步執行的腳本放在 head 中，使用非同步屬性（async 或 defer），例如如下：

其他腳本文件建議放在 body 結尾以提升效能，尤其是像 Google Analytics、廣告載入這些脚本。

利用 favicon 提升專業形象

最後，別忽視能增加網站識別度的小細節：favicon（網站圖標）。它就是那個瀏覽器標籤上的小圖案！帶來親切感又容易讓訪客記住你的品牌。要設置它很簡單：

準備 16×16 或 32×32 像素的 .ico 文件。
添加至 head：
若支援其他格式如.png，記得設定兼容性。

牢記這些技巧，你的 HTML head 將比一般隨便填充的網站更具專業性和吸引力！