Terry Yao's Blog

[seo/06] Open Graph 與社群分享：讓你的連結不再是白色方塊

閱讀時間約 10 分鐘

結論先講

分享連結時的預覽卡片不是平台自動幫你做的，是你自己用 Open Graph meta tag 控制的。 沒設定的話，Facebook 會隨機抓你頁面上的文字和圖片，結果通常很醜。設定好 OG tag，你的連結在 Facebook、LINE、Twitter、Slack、Discord 都會有漂亮的預覽卡片。

真實場景：你花了一週寫了一篇技術文章，貼到 Facebook 技術社群。但預覽卡片只顯示網站 logo 加上一行「undefined」。沒人想點。隔壁那個內容普通的文章，因為有漂亮的封面圖和清楚的標題，點擊率是你的 5 倍。

什麼是 Open Graph

Open Graph（OG）協定是 Facebook 在 2010 年推出的，目的是讓網頁可以控制在社群平台分享時的呈現方式。現在幾乎所有平台都支援：

平台支援 OG額外標籤
Facebook完整支援無
LINE完整支援無
Twitter/X支援，但優先用 Twitter Cardtwitter:card, twitter:image
Slack完整支援無
Discord完整支援無
LinkedIn完整支援無
iMessage支援基本 OG無
Telegram完整支援無

原理很簡單：平台的爬蟲拿到你的 URL 後，會去讀 HTML <head> 裡的 <meta property="og:..."> 標籤，用這些資訊來顯示預覽卡片。

必備的 OG 標籤

基本五件套

<head>
  <!-- 1. 標題 — 分享卡片的大標題 -->
  <meta property="og:title" content="RAG 實作指南：從切文件到 Vector DB">
 
  <!-- 2. 描述 — 標題下方的說明文字 -->
  <meta property="og:description" content="用 LangChain 實作 RAG：文件切割、Embedding 選型、Pinecone vs Chroma 比較，附完整 Python code。">
 
  <!-- 3. 圖片 — 預覽卡片的大圖，最重要 -->
  <meta property="og:image" content="https://your-site.com/covers/rag-guide-og.webp">
 
  <!-- 4. URL — 這頁的正式網址 -->
  <meta property="og:url" content="https://your-site.com/ai/02-rag-architecture">
 
  <!-- 5. 類型 — 通常是 article 或 website -->
  <meta property="og:type" content="article">
</head>

各標籤的規則

標籤長度限制注意事項
og:title60 字以內不要跟 <title> 完全一樣，可以更口語
og:description155 字以內重點在前 80 字，因為手機會截斷
og:image-必須是絕對 URL，不能用相對路徑
og:url-canonical URL，帶 https://
og:type-文章用 article，首頁用 website

進階標籤（選用但推薦）

<!-- 圖片的寬高，幫助平台預先計算版面 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/webp">
 
<!-- 網站名稱 -->
<meta property="og:site_name" content="Terry's Blog">
 
<!-- 語言 -->
<meta property="og:locale" content="zh_TW">
 
<!-- 文章專用 -->
<meta property="article:published_time" content="2026-03-15T00:00:00+08:00">
<meta property="article:author" content="https://your-site.com/about">
<meta property="article:tag" content="RAG">
<meta property="article:tag" content="LangChain">

Twitter Card 標籤

Twitter（現在叫 X）有自己的 meta 標籤系統，叫 Twitter Card。如果沒有 Twitter 專用標籤，它會 fallback 到 OG 標籤，但建議兩套都寫：

<!-- Twitter Card 類型 -->
<meta name="twitter:card" content="summary_large_image">
 
<!-- Twitter 帳號（選填） -->
<meta name="twitter:site" content="@your_twitter">
<meta name="twitter:creator" content="@your_twitter">
 
<!-- 標題和描述（會 fallback 到 og:title / og:description） -->
<meta name="twitter:title" content="RAG 實作指南">
<meta name="twitter:description" content="LangChain + Pinecone 的完整 RAG 實作教學">
 
<!-- 圖片 -->
<meta name="twitter:image" content="https://your-site.com/covers/rag-guide-og.webp">
<meta name="twitter:image:alt" content="RAG 架構示意圖">

Twitter Card 的兩種類型

類型效果適用場景
summary小方塊圖 + 標題描述首頁、關於頁
summary_large_image大橫幅圖 + 標題描述文章、作品集

幾乎所有情況都用 summary_large_image，因為大圖的點擊率比小圖高 2-3 倍。

OG 圖片的眉角

圖片是整個 OG 設定最容易出問題的部分。

圖片規格

推薦尺寸：1200 x 630 px（1.91:1 比例）
最低尺寸：600 x 315 px
檔案大小：< 1MB（越小越好，建議 < 300KB）
格式：WebP > PNG > JPEG

常見錯誤

❌ 用相對路徑
<meta property="og:image" content="/images/cover.png">
→ 平台爬蟲拿不到圖

✅ 用絕對 URL
<meta property="og:image" content="https://your-site.com/images/cover.png">

❌ 圖片太小
200x200 的 logo → 在卡片上變糊

✅ 至少 1200x630
專門為社群分享做的圖 → 清楚好看

❌ 圖片太大
5MB 的 PNG → 平台爬蟲 timeout，顯示不出來

✅ 壓縮到 300KB 以內
用 WebP 格式，品質 80% → 又小又清楚

批次生成 OG 圖片

如果你有很多文章，手動做圖太累。可以用程式自動生成：

// 用 @vercel/og 生成 OG 圖片（Next.js）
// app/api/og/route.tsx
import { ImageResponse } from '@vercel/og';
 
export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || '預設標題';
 
  return new ImageResponse(
    (
      <div style={{
        width: '100%', height: '100%',
        display: 'flex', flexDirection: 'column',
        justifyContent: 'center', alignItems: 'center',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        color: 'white', fontSize: 48, fontWeight: 'bold',
        padding: '40px 80px',
      }}>
        {title}
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

各框架的實作方式

Quartz（本站使用）

Quartz 會自動從 frontmatter 生成 OG 標籤。你只要在 markdown 的 frontmatter 設定：

---
title: 'RAG 實作指南'
description: '用 LangChain 實作 RAG 的完整教學'
cover: covers/rag-guide-og.webp
---

Quartz 的 Head component 會自動產生對應的 og:title、og:description、og:image。如果你需要客製化，可以在 quartz/components/Head.tsx 修改。

Next.js（App Router）

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      images: [{
        url: `https://your-site.com${post.cover}`,
        width: 1200,
        height: 630,
      }],
      type: 'article',
      publishedTime: post.date,
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.description,
      images: [`https://your-site.com${post.cover}`],
    },
  };
}

Astro

---
// src/layouts/BlogPost.astro
const { title, description, cover, date } = Astro.props;
const ogImage = new URL(cover, Astro.site).href;
---
<head>
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={ogImage} />
  <meta property="og:type" content="article" />
  <meta property="og:url" content={Astro.url.href} />
  <meta property="article:published_time" content={date} />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content={ogImage} />
</head>

測試與除錯

寫好 OG 標籤後，一定要測試。每個平台都有自己的除錯工具：

工具網址用途
Facebook Sharing Debuggerdevelopers.facebook.com/tools/debug測試 FB/LINE 預覽
Twitter Card Validatorcards-dev.twitter.com/validator測試 Twitter 預覽
LinkedIn Post Inspectorlinkedin.com/post-inspector測試 LinkedIn 預覽
Open Graph Checkopengraph.xyz通用 OG 檢查

清除快取

平台會快取你的 OG 資訊。改了 OG 標籤但預覽沒變？要清快取：

Facebook：
→ 到 Sharing Debugger 貼 URL → 點「Scrape Again」

Twitter：
→ 到 Card Validator 貼 URL → 它會自動重新抓取

LINE：
→ 沒有官方工具，等快取過期（約 1-7 天）
→ 或在 URL 後面加 query string：?v=2

LinkedIn：
→ 到 Post Inspector 貼 URL → 自動更新

Slack / Discord：
→ 等快取過期，或修改 URL（加 ?v=2）

Pro tip： 在 URL 後面加 ?v=2 或 ?og=refresh 可以騙過大部分平台的快取。每次改 OG 就遞增版號。

OG 設定檢查清單

  • og:title — 有設定，60 字以內
  • og:description — 有設定，155 字以內
  • og:image — 絕對 URL，1200x630，< 1MB
  • og:url — canonical URL
  • og:type — article 或 website
  • twitter:card — summary_large_image
  • twitter:image — 跟 og:image 一樣即可
  • 用 Facebook Debugger 測試過 — 預覽正常
  • 圖片在 HTTPS 上 — HTTP 的圖片很多平台不抓

常見問題

Open Graph 圖片一定要 1200x630 嗎？

不一定，但強烈建議。1200x630（1.91:1 比例）是 Facebook 推薦的尺寸，在所有平台上顯示效果最好。如果用正方形（1:1），在 Facebook 和 LINE 上會被裁切。用比較大的圖（如 1200x630）總比用太小的圖好。

og:title 跟 HTML 的 title 要一樣嗎？

不需要一樣，而且最好不要完全一樣。HTML 的 <title> 是給搜尋引擎看的，通常會加站名（如「RAG 指南 | Terry’s Blog」）。og:title 是給社群平台看的，可以更口語、更吸引人（如「花了一個月踩坑，RAG 實作心得全紀錄」）。

為什麼改了 OG 標籤但 Facebook 預覽沒變？

Facebook 會快取 OG 資訊。你需要去 Facebook Sharing Debugger 貼你的 URL，然後點「Scrape Again」強制更新。如果還是沒變，確認你的伺服器有正確回傳新的 HTML（可能是 CDN 快取的問題）。

LINE 分享的預覽特別差怎麼辦？

LINE 對 OG 圖片有一些額外限制：圖片必須是 HTTPS、檔案大小要小（建議 300KB 以內）、不支援 SVG。另外 LINE 的快取很頑固，改了 OG 後可能要等 1-7 天才會更新。最快的方法是在 URL 後面加 ?v=2。

一個頁面可以有多張 OG 圖片嗎？

可以。你可以設定多個 og:image 標籤，Facebook 會讓發布者選擇要用哪一張。但實務上，大部分平台只會用第一張。建議只設定一張最好的。

本系列文章

  1. SEO 基礎與注意事項
  2. 技術 SEO 實作
  3. 內容 SEO 策略
  4. 網站搬家 SEO
  5. GSC 實戰指南
  6. Open Graph 與社群分享（本篇）
  7. AEO 基礎
  8. AEO 內容策略
  9. SEO vs AEO 整合策略
  10. Core Web Vitals 效能優化
  11. AEO 監控自動化
  12. 案例：從 0 到被搜到

關係圖譜

反向連結