Meta Tags Generator 使用教學
這篇用「可直接複製」的方式，把你在 SERP 與分享預覽最常用的 meta 一次整理好：title、description、canonical、Open Graph 與 Twitter Cards。
1) 先搞定三件事：Title / Description / Canonical
- Title：最強的相關性訊號之一，也決定使用者是否點進來。
- Description：主要影響 CTR（點擊率），要像廣告文案一樣「清楚 + 有誘因」。
- Canonical：把權重集中到主版本 URL，避免參數、追蹤碼與語言路徑造成重複內容。
html
<title>Free SEO Tools – Developer SEO Hub</title>
<meta name="description" content="Free SEO tools + developer-focused tutorials for SEO/AEO." />
<link rel="canonical" href="https://example.com/tools/meta-generator" />2) 分享預覽：Open Graph / Twitter Cards
OG/Twitter 不一定直接加排名，但會影響分享預覽與點擊。工具頁很容易被轉貼，建議每個工具都設定齊全。
html
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Meta Tags Generator" />
<meta property="og:description" content="Generate SEO meta tags in seconds." />
<meta property="og:url" content="https://example.com/tools/meta-generator" />
<meta property="og:image" content="https://example.com/og-image.png" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Meta Tags Generator" />
<meta name="twitter:description" content="Generate SEO meta tags in seconds." />
<meta name="twitter:image" content="https://example.com/og-image.png" />3) 最快流程：用本站工具產生 → 用 OG Preview 驗證
- 打開 Meta Tags 生成器，填入標題、描述、canonical URL。
- 若要社群預覽，補上 OG image URL 與 Twitter handle（可選）。
- 複製輸出，貼到你的頁面 head（或 SSR head 管線）。
- 用 OG 預覽工具 檢查圖片尺寸與文字截斷。
4) 常見錯誤（會拖累 CTR 或造成重複內容）
- 全站都用同一組 title/description（SERP 看起來像模板頁）。
- canonical 指到首頁、或指到不同語言版本（語言頁會互相搶權重）。
- og:image 使用過小尺寸或比例不對（建議 1200×630）。
- 輸出內容含未 escape 的特殊字元（例如引號），導致 HTML 屬性破版。
延伸閱讀
常見問題
Meta tags 的實作與最佳實務。