# HTML `<head>` 元素
## 什麼是 `<head>` 元素
`<head>` 元素用來放置描述網頁的元數據(metadata),這些內容不會直接顯示在網頁上(除了 `<title>` 會顯示在瀏覽器分頁標題)。
---
## `<head>` 內的子元素
### 1. `<title>` 元素
網頁文件的標題,會顯示在:
- 瀏覽器分頁標題
- 搜尋引擎結果
- 書籤名稱
**注意:** 每個 `<head>` 只能有一個 `<title>` 元素
```html
<title>我的網站標題</title>
```
---
### 2. `<meta>` 元素
用於描述 HTML 文件的相關資訊和設定。
#### 基本 Meta 標籤
**charset 屬性 - 字元編碼**
```html
<meta charset="UTF-8">
```
定義網頁的字元編碼,建議使用 UTF-8
**name + content 屬性 - 文件資訊**
```html
<meta name="author" content="作者名稱">
<meta name="description" content="網頁內容描述,會顯示在搜尋結果">
<meta name="keywords" content="關鍵字1, 關鍵字2, 關鍵字3">
<meta name="generator" content="開發工具名稱">
```
常用的 `name` 屬性值:
- `author`: 網頁作者
- `description`: 網頁描述(重要!影響 SEO)
- `keywords`: 關鍵字
- `generator`: 開發工具
**http-equiv 屬性 - HTTP 標頭資訊**
```html
<meta http-equiv="refresh" content="30;url=https://example.com">
```
- `refresh`: 設定頁面自動刷新或跳轉
---
#### Viewport 設定 (響應式網頁必備)
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
```
**屬性說明:**
| 屬性 | 說明 | 建議值 |
|------|------|--------|
| `width` | 視窗寬度 | `device-width` (自動適應裝置寬度) |
| `initial-scale` | 初始縮放比例 | `1.0` (100% 原始大小) |
| `maximum-scale` | 最大縮放比例 | `5.0` (允許放大到 500%) |
| `minimum-scale` | 最小縮放比例 | `0.5` |
| `user-scalable` | 是否允許使用者縮放 | `yes` 或 `1` (建議允許) |
**無障礙提醒:** 不建議設定 `user-scalable=no`,這會影響視障使用者的瀏覽體驗。
---
#### Open Graph (OG) 標籤 - 社群媒體分享
當網頁被分享到 Facebook、LINE、Twitter 等社群平台時,這些標籤決定了預覽卡片的內容。
**必要標籤:**
```html
<meta property="og:title" content="網頁標題">
<meta property="og:description" content="網頁描述或摘要">
<meta property="og:image" content="https://example.com/preview.jpg">
<meta property="og:url" content="https://example.com/page">
```
**完整標籤列表:**
| 標籤 | 說明 | 備註 |
|------|------|------|
| `og:title` | 分享時顯示的標題 | 未設定則使用 `<title>` |
| `og:description` | 分享時顯示的描述 | 未設定則使用 `<meta name="description">` |
| `og:image` | 分享預覽圖 | 建議尺寸: 1200x630px,< 8MB |
| `og:image:alt` | 預覽圖的替代文字 | 提升無障礙性 |
| `og:url` | 網頁的標準網址 | 避免重複內容問題 |
| `og:type` | 內容類型 | `website`、`article`、`video` 等 |
| `og:site_name` | 網站名稱 | 品牌識別 |
| `og:locale` | 語言地區 | `zh_TW`、`en_US` 等 |
**範例:**
```html
<meta property="og:title" content="HTML Head 元素完整指南">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/html-head-guide">
<meta property="og:image" content="https://example.com/images/og-image.jpg">
<meta property="og:image:alt" content="HTML head 元素結構圖">
<meta property="og:description" content="詳細介紹 HTML head 元素的使用方法,包含 meta、og 標籤等">
<meta property="og:site_name" content="我的技術部落格">
<meta property="og:locale" content="zh_TW">
```
---
### 3. `<style>` 元素
在文件中直接撰寫 CSS 樣式:
```html
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
}
</style>
```
---
### 4. `<script>` 元素
引入或撰寫 JavaScript:
```html
<!-- 外部腳本 -->
<script src="script.js"></script>
<!-- 延遲執行 (推薦) -->
<script src="script.js" defer></script>
<!-- 非同步載入 -->
<script src="script.js" async></script>
<!-- 內嵌腳本 -->
<script>
console.log('Hello World');
</script>
```
**屬性說明:**
- `defer`: 延遲執行,等 HTML 解析完成後才執行,保持執行順序
- `async`: 非同步載入,下載完立即執行,不保證順序
**最佳實踐:** 在 `<head>` 中引入 JS 時,建議使用 `defer` 避免阻塞頁面載入。
---
### 5. `<link>` 元素
引入外部資源:
```html
<!-- CSS 樣式表 -->
<link rel="stylesheet" href="styles.css">
<!-- 網站圖示 -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- 預先載入資源 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
```
---
## 完整範例
```html
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<!-- 字元編碼 -->
<meta charset="UTF-8">
<!-- Viewport 設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 網頁資訊 -->
<meta name="author" content="張三">
<meta name="description" content="這是一個關於 HTML head 元素的教學文章">
<meta name="keywords" content="HTML, head, meta, SEO">
<!-- Open Graph 標籤 -->
<meta property="og:title" content="HTML Head 元素完整指南">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/html-head-guide">
<meta property="og:image" content="https://example.com/images/preview.jpg">
<meta property="og:image:alt" content="HTML 文件結構圖">
<meta property="og:description" content="詳細介紹 HTML head 元素的使用">
<meta property="og:site_name" content="技術筆記">
<meta property="og:locale" content="zh_TW">
<!-- 標題 -->
<title>HTML Head 元素完整指南 | 技術筆記</title>
<!-- 外部資源 -->
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css">
<!-- JavaScript -->
<script src="script.js" defer></script>
<!-- 內嵌樣式 -->
<style>
body {
font-family: system-ui, sans-serif;
}
</style>
</head>
<body>
<!-- 網頁內容 -->
</body>
</html>
```
---
## 重要提醒
### SEO 相關
- **Meta Keywords 已無效:** Google 自 2009 年起不再將 `<meta name="keywords">` 納入排名因素 ([官方公告](https://developers.google.com/search/blog/2009/09/google-does-not-use-keywords-meta-tag?hl=zh-tw))
- **Description 很重要:** `<meta name="description">` 會影響搜尋結果的點擊率,建議最大長度中文 80 字元以內、英文 150-160 字元
- **Title 標籤:** 建議最大長度中文 30 字元以內、英文 50-60 字元(包含關鍵字),超過可能會被截斷
### 效能優化
- 將 CSS 放在 `<head>`,JS 放在 `</body>` 前(或使用 `defer`)
- 使用 `<link rel="preload">` 預先載入關鍵資源
- 壓縮和合併 CSS/JS 檔案
### 無障礙
- 確保有清楚的 `<title>`
- OG 圖片加上 `og:image:alt`
- 允許使用者縮放頁面(`user-scalable=yes`)
---
## 實用工具
- [Facebook 分享偵錯工具](https://developers.facebook.com/tools/debug/)
- [Google Rich Results Test](https://search.google.com/test/rich-results)
---
## 參考資源
- [MDN - HTML head 元素](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/head)
- [Open Graph Protocol](https://ogp.me/)
- [Google Search Central - Meta 標籤](https://developers.google.com/search/docs/crawling-indexing/special-tags)
Sign in with Wallet
Connect another wallet