Meta Description
Meta description 主要影響點擊率與摘要品質;不一定直接影響排名,但會影響 SERP 表現與轉換。
定義
Meta description 是 <meta name="description"> 的內容。搜尋引擎可能用它來生成 SERP 摘要,但也可能改用頁面段落。它更像是「廣告文案」:告訴使用者這頁能解決什麼問題、為什麼值得點進來。
為什麼重要
- 直接影響 CTR — 好的描述可提升 5-10% 點擊率,在競爭激烈的 SERP 中脫穎而出
- 控制 SERP 摘要呈現 — 減少 Google 自動抓取不理想段落的機率
- 社群分享預覽 — 若沒設 OG description,社群平台會 fallback 使用 meta description
- 提升轉換品質 — 清楚的預期讓進來的用戶更可能是真正需要的受眾
- AEO 引用來源 — AI 助手可能使用 description 作為答案摘要的參考
- 品牌一致性 — 統一的描述風格強化品牌識別
- 降低跳出率 — 用戶預期與內容一致時,更願意停留探索
怎麼做(實作重點)
- 長度控制在 120-160 字元(中文約 60-80 字)— 超過會被截斷
- 開頭放最重要訊息 — 手機版可能只顯示前 100 字元
- 包含主要關鍵字 — 會被加粗顯示,增加視覺吸引力
- 寫成行動召喚 — 用「了解」「免費」「立即」等動詞引導點擊
- 每頁獨特描述 — 避免重複,讓每頁都有專屬的價值主張
- 使用數字和具體細節 — 「10 個技巧」「免費工具」「5 分鐘學會」更吸睛
- 定期更新 — 根據 GSC 點擊率數據優化表現差的頁面
範例
tsx
// React Helmet 或 Next.js Head
import { Helmet } from 'react-helmet-async';
function SEOHead({ title, description }) {
return (
<Helmet>
<title>{title}</title>
<meta name="description" content={description} />
{/* OG fallback */}
<meta property="og:description" content={description} />
</Helmet>
);
}
// 使用範例
<SEOHead
title="Meta Tags 生成器 - 免費 SEO 工具"
description="免費產生 Title、Description、OG Tags。支援 canonical、hreflang 與 JSON-LD,開發者友善的 SEO 工具。"
/>javascript
// 根據頁面類型動態生成 description
function generateDescription(page) {
const templates = {
product: (p) =>
`${p.name} - ${p.price}。${p.features.slice(0, 2).join('、')}。免運費,30天鑑賞期。`,
blog: (p) =>
`${p.title}:${p.excerpt.slice(0, 80)}... 閱讀完整教學。`,
category: (p) =>
`探索 ${p.count} 款${p.name}產品。${p.topBrands.join('、')}等品牌,價格 ${p.priceRange}。`,
tool: (p) =>
`免費 ${p.name}工具。${p.benefit},無需註冊,立即使用。`
};
const desc = templates[page.type]?.(page) || page.fallback;
// 確保長度適中
return desc.length > 155 ? desc.slice(0, 152) + '...' : desc;
}相關連結
常見問題
關於這個詞彙的常見問答。