Open Graph
Open Graph 決定社群分享預覽（og:title/og:description/og:image）。不直接影響排名，但會影響點擊與分享。
定義
Open Graph 是一套用 meta property 描述分享預覽的協定（Facebook/LinkedIn 等）。它通常不直接影響搜尋排名，但會影響分享點擊率與外部引用擴散。
為什麼重要
- 工具頁與教學頁很常被分享：預覽好看更容易被點
- 提升 CTR/分享效率，間接帶動自然與社群流量
- 避免社群平台抓錯 title/圖片造成誤導
- 統一品牌形象：在不同平台都能呈現一致的視覺風格
- 提升 backlink 品質：好的預覽更容易被其他網站引用分享
- 開發者可自動化生成：搭配模板系統可批量產出一致的 OG 標籤
怎麼做（實作重點）
- 每頁都有 og:title/og:description/og:image/og:url
- og:image 建議 1200x630（1.91:1 比例），檔案小於 5MB
- 更新後用平台 debugger 刷新快取（FB/Twitter/LinkedIn）
- og:url 必須是 canonical URL，避免重複內容訊號混亂
- 使用絕對路徑：og:image 要用完整的 https:// URL
- og:type 依內容設定：article/website/product 等，幫助平台分類
- 在 SSR/SSG 時動態產生：確保爬蟲抓到正確的 OG tags
範例
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:image" content="https://seo.lucas-futures.com/og-image.png" />
<meta property="og:url" content="https://seo.lucas-futures.com/tools/meta-generator" />
<meta property="og:site_name" content="SEO Academy" />typescript
// React Helmet 動態產生 OG tags
import { Helmet } from 'react-helmet-async';
function SEOHead({ title, description, image, url }) {
return (
<Helmet>
<meta property="og:type" content="website" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
<meta property="og:url" content={url} />
</Helmet>
);
}相關連結
常見問題
關於這個詞彙的常見問答。