網頁縮圖 - SEO
網頁縮圖 — Open Graph / SEO
TL;DROpen Graph(OG)讓網頁被分享到 FB / LINE / Twitter 時 有 漂亮縮圖、標題、描述。關鍵 4 個 meta tag:og:title / og:description / og:image / og:url。圖片用 1200×630 px 最安全。Twitter 另有 twitter:card 系列,設了 OG 通常會 fallback 過去。
為什麼要設 OG
沒設 OG 的網頁分享出來:
https://example.com/article
只有純連結,沒人想點。
設好 OG 分享出來:
┌─────────────────────────────┐
│ [漂亮的縮圖 1200×630] │
├─────────────────────────────┤
│ 文章標題(粗體) │
│ 簡短描述... │
│ example.com │
└─────────────────────────────┘
點擊率提升 2-5 倍,SEO 也加分。
必設 4 個 OG tag
<head>
<meta property="og:title" content="文章標題">
<meta property="og:description" content="簡短描述,最好 150-200 字以內">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com/article-slug">
</head>
| Tag | 說明 |
|---|---|
og:title | 顯示的標題(可不同於 <title>) |
og:description | 縮圖下方描述 |
og:image | 縮圖 URL(絕對路徑) |
og:url | canonical URL,告訴 FB 這頁的「正本」是哪 |
進階 OG tag
<meta property="og:type" content="article"> <!-- website / article / video / book / profile -->
<meta property="og:site_name" content="我的部落格">
<meta property="og:locale" content="zh_TW">
<!-- 圖片細節 -->
<meta property="og:image" content="https://example.com/og.jpg">
<meta property="og:image:type" content="image/jpeg"> <!-- jpeg / png / webp -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="文章封面圖描述">
<!-- 文章專用(og:type=article 時) -->
<meta property="article:author" content="Bobo">
<meta property="article:published_time" content="2026-05-09T10:00:00+08:00">
<meta property="article:tag" content="React">
<meta property="article:tag" content="Next.js">
og:image:width / og:image:height 一定要設,否則 FB 抓回來算尺寸時會算錯。
OG 圖片尺寸建議
Facebook 官方規範
| 規格 | 值 |
|---|---|
| 最小尺寸 | 200×200 px |
| 檔案大小 | ≤ 8MB |
| 最佳尺寸 | 1200×630 px |
| 長寬比 | 1.91:1 |
| 最低高解析度 | 600×315 px |
設計時注意
會有兩種裁切顯示:
長方形(預設) 正方形(部分平台)
┌────────────────┐ ┌────────┐
│ │ │ │
│ 重要內容放中間 │ │ 中間 │
│ │ └────────┘
└────────────────┘
1200×630 600×600
設計時把重要文字 / logo 放正中間,避免被裁掉。
Twitter Card
Twitter 有自己的 meta tag,但設了 OG 通常會 fallback。要更精準控制:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@your_handle">
<meta name="twitter:title" content="標題">
<meta name="twitter:description" content="描述">
<meta name="twitter:image" content="https://example.com/twitter-card.jpg">
twitter:card 三種值:
summary— 小縮圖summary_large_image— 大縮圖(推薦,跟 FB 一致)player— 嵌入影片
Next.js 自動產生 OG
App Router(2026 推薦)
// app/layout.tsx 或 app/article/[slug]/page.tsx
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: '我的網站',
description: '網站描述',
openGraph: {
title: '我的網站',
description: '網站描述',
url: 'https://example.com',
siteName: '我的網站',
images: [
{
url: 'https://example.com/og.jpg',
width: 1200,
height: 630,
alt: '網站封面',
},
],
locale: 'zh_TW',
type: 'website',
},
twitter: {
card: 'summary_large_image',
title: '我的網站',
description: '網站描述',
images: ['https://example.com/twitter-card.jpg'],
},
};
Next.js 自動把這些轉成正確 meta tag。
動態 OG(每篇文章不同)
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
images: [post.coverImage],
type: 'article',
},
};
}
動態 OG 圖片(炫技)
每篇文章自動生成獨特 OG 圖(把標題畫上去):
Vercel @vercel/og
// app/api/og/route.tsx
import { ImageResponse } from 'next/og';
export const runtime = 'edge';
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const title = searchParams.get('title') ?? 'Default Title';
return new ImageResponse(
(
<div
style={{
fontSize: 60,
background: 'linear-gradient(135deg, #667eea, #764ba2)',
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
}}
>
{title}
</div>
),
{ width: 1200, height: 630 },
);
}
使用:
<meta property="og:image" content="https://example.com/api/og?title=React+Hooks">
每篇文章都有獨特、自動生成的 OG 圖,不用手動設計。
驗證工具
部署後 一定要實測:
| 工具 | 連結 | 用途 |
|---|---|---|
| Facebook Debugger | developers.facebook.com/tools/debug/ | FB / LINE / IG share preview |
| Twitter Card Validator | cards-dev.twitter.com/validator | |
| LinkedIn Post Inspector | linkedin.com/post-inspector | |
| OpenGraph.xyz | opengraph.xyz | 預覽多平台一站 |
FB Debugger 必跑!Facebook 會 cache 你的 OG 資料,改了 meta tag 後 FB 不會自動重抓。 必須去 Debugger 點「Scrape Again」 強制重抓。 沒這樣做 → 你改了標題,FB 還是顯示舊的。
其他 SEO meta
<head>
<!-- 標準 SEO -->
<title>頁面標題</title>
<meta name="description" content="頁面描述">
<meta name="keywords" content="React, Next.js, Web 開發"> <!-- ⚠️ Google 已不採用 -->
<!-- Robots -->
<meta name="robots" content="index, follow">
<!-- 或細項 -->
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large">
<!-- Canonical(避免重複內容懲罰) -->
<link rel="canonical" href="https://example.com/article">
<!-- 多語 hreflang -->
<link rel="alternate" hreflang="zh-TW" href="https://example.com/zh/article">
<link rel="alternate" hreflang="en" href="https://example.com/en/article">
<link rel="alternate" hreflang="x-default" href="https://example.com/article">
</head>
keywords 在 2009 年後 Google 就不看了,但其他搜尋引擎(Bing / Baidu)還會看,加上沒壞處。