OG Image
OG Image（og:image）指定社群分享預覽圖片，建議 1200×630（1.91:1），並注意快取與圖片比例裁切。
定義
OG Image 指的是 Open Graph 的 og:image，社群平台分享連結時會使用它作為預覽圖片。設定正確的圖片尺寸與可抓取的絕對 URL，能提升分享點擊與品牌一致性。
為什麼重要
- 分享預覽更清楚、提高點擊與轉貼意願
- 避免平台亂抓圖片導致預覽不一致
- 工具頁/教學頁被分享時特別重要
- 提升品牌識別度：統一的視覺風格讓使用者一眼認出你的內容
- 增加社群互動：高品質的預覽圖片更容易獲得 likes 和 shares
- 支援動態生成：可根據頁面內容自動產生客製化 OG 圖片
怎麼做（實作重點）
- 使用絕對 URL（https://...）
- 建議尺寸 1200x630（1.91:1），最低 600x315
- 避免過大檔案（建議 < 1MB），並確保圖片可被抓取（不要被 robots 擋）
- 更新圖片時做 cache busting（換檔名或加版本參數 ?v=2）
- 加上 og:image:width 和 og:image:height 屬性，加速平台渲染
- 考慮使用動態 OG 圖片服務（如 Vercel OG 或 Cloudflare Workers）
- 確保圖片 alt text 內嵌關鍵訊息（og:image:alt）
範例
html
<!-- 完整 OG Image 設定 -->
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="SEO 教學圖片 - 如何優化網站排名" />
<!-- Twitter 專用 -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og-image.png" />typescript
// 使用 Vercel OG 動態生成 OG 圖片
// pages/api/og.tsx
import { ImageResponse } from '@vercel/og';
export const config = { runtime: 'edge' };
export default function handler(req: Request) {
const { searchParams } = new URL(req.url);
const title = searchParams.get('title') ?? 'SEO Academy';
return new ImageResponse(
(
<div style={{ fontSize: 48, background: 'white', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
{title}
</div>
),
{ width: 1200, height: 630 }
);
}相關連結
常見問題
關於這個詞彙的常見問答。