Title Tag
Title Tag 是搜尋結果標題的主要來源之一，影響點擊率（CTR）與相關性訊號；需唯一、貼近意圖、可讀。
定義
Title Tag 指的是 HTML 的 <title> 元素（通常在 <head> 內）。搜尋引擎常用它作為 SERP 標題來源，但也可能依查詢意圖與頁面內容改寫。好的 Title 不只「放關鍵字」，更要讓使用者一眼看懂這頁能解決什麼問題。
為什麼重要
- 影響 SERP 的可讀性與 CTR，間接影響整體表現
- 協助搜尋引擎判斷主題與頁面定位（尤其在相似頁面之間）
- 能與內文/H1 一起形成清楚的資訊層級，降低被改寫的機率
- 是 Google 決定 SERP 顯示標題的主要依據（雖然可能被改寫）
- 瀏覽器分頁標題：讓使用者在多分頁時一眼辨識
- 社群分享預設來源：若無 og:title，平台可能使用 <title>
- 開發者可程式化管理：用模板批量產生一致且有結構的 title
怎麼做（實作重點）
- 每頁唯一：避免多頁同 title 造成競爭與混淆
- 以意圖為先：把使用者要的答案寫在最前面
- 控制長度：桌機約 50-60 字元、手機更短，避免被截斷
- 加入品牌：可放在尾端用分隔符（| 或 -）區隔
- 與 H1 搭配：title 可稍微不同（更精簡或加品牌），但主題一致
- 避免關鍵字堆砌：自然語句優於重複堆疊關鍵字
- 使用動態模板：例如 `{產品名} - {分類} | 品牌`
範例
html
<!-- 基本 Title Tag -->
<title>免費 Meta Tags 生成器｜SEO Academy</title>
<!-- 針對不同頁面類型的模板 -->
<!-- 產品頁 -->
<title>iPhone 16 Pro 128GB 黑色 - 智慧型手機 | Apple</title>
<!-- 文章頁 -->
<title>如何優化 Core Web Vitals：完整指南 (2024) | SEO Academy</title>
<!-- 工具頁 -->
<title>robots.txt 測試工具 - 免費線上檢查 | SEO Academy</title>typescript
// React 動態產生 Title Tag
import { Helmet } from 'react-helmet-async';
interface PageTitleProps {
title: string;
suffix?: string;
}
function PageTitle({ title, suffix = 'SEO Academy' }: PageTitleProps) {
const fullTitle = suffix ? `${title} | ${suffix}` : title;
return (
<Helmet>
<title>{fullTitle}</title>
</Helmet>
);
}
// 使用範例
<PageTitle title="免費 Meta Tags 生成器" />
// 輸出: <title>免費 Meta Tags 生成器 | SEO Academy</title>相關連結
常見問題
關於這個詞彙的常見問答。