什麼是 Open Graph？

Open Graph（OG）是 Facebook 在 2010 年制定的一套 meta 標籤規格，現在已被幾乎所有主流社群平台採用。

當你把一個網址分享到 LINE、Facebook、Twitter/X、Threads 時，平台會自動讀取這個頁面的 OG 標籤，產生預覽卡片。

如果沒有設定 OG 標籤：

平台可能隨機抓取頁面內的圖片（通常抓到不對的），或根本不顯示縮圖，讓你的分享看起來像空連結。

設定好 OG 標籤之後：

你的連結分享出去就是一張精心設計的卡片，標題、描述、圖片都是你控制的。

基本的 OG 標籤

<head>
  <!-- Open Graph 基本標籤 -->
  <meta property="og:title" content="你的頁面標題" />
  <meta property="og:description" content="這個頁面的描述，140 字以內" />
  <meta property="og:image" content="https://yourdomain.com/og-image.jpg" />
  <meta property="og:url" content="https://yourdomain.com/this-page" />
  <meta property="og:type" content="website" />
  
  <!-- Twitter/X Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="你的頁面標題" />
  <meta name="twitter:description" content="描述" />
  <meta name="twitter:image" content="https://yourdomain.com/og-image.jpg" />
</head>

OG 圖片規格

尺寸： 1200 × 630px（這是 Facebook 和大多數平台的最佳尺寸）

格式： JPG 或 PNG（JPG 檔案較小，PNG 適合需要透明背景的設計）

檔案大小： 建議 < 300KB

注意事項：

  • 圖片的重要內容不要放在邊緣，因為不同平台的裁切方式不同
  • 文字在圖片中不要太小（在手機上的預覽卡片很小）
  • 圖片要用完整的絕對路徑（https://...），不能用相對路徑

在 Next.js 中設定 OG 標籤

App Router（Next.js 13+）

靜態設定（每個頁面固定的標題/描述）：

// app/page.tsx 或 app/blog/[slug]/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: '品牌官網設計 | SimpleCreative',
  description: '台灣中小企業品牌官網設計工作室，30 天完成上線。',
  openGraph: {
    title: '品牌官網設計 | SimpleCreative',
    description: '台灣中小企業品牌官網設計工作室',
    url: 'https://simplecreative.tw',
    siteName: 'SimpleCreative 簡創數位工作室',
    images: [
      {
        url: 'https://simplecreative.tw/og-image.jpg',
        width: 1200,
        height: 630,
        alt: 'SimpleCreative 品牌官網設計',
      },
    ],
    locale: 'zh_TW',
    type: 'website',
  },
}

動態設定（部落格文章等動態頁面）：

// 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: [{ url: post.ogImage || '/og-default.jpg' }],
    },
  }
}

使用 Next.js 的 ImageResponse 動態生成 OG 圖片

Next.js 13+ 支援使用 React 組件自動生成 OG 圖片，不需要手動設計每篇文章的圖片：

// app/opengraph-image.tsx
import { ImageResponse } from 'next/og'

export const runtime = 'edge'
export const size = { width: 1200, height: 630 }

export default async function OgImage() {
  return new ImageResponse(
    (
      <div style={{ background: '#0f172a', width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '80px' }}>
        <p style={{ color: '#d4af37', fontSize: 32 }}>SimpleCreative</p>
        <h1 style={{ color: 'white', fontSize: 64, margin: 0 }}>台灣品牌官網設計</h1>
      </div>
    )
  )
}

在 WordPress 中設定 OG 標籤

最簡單的方式是安裝 Yoast SEO 或 Rank Math 外掛，兩者都包含 Social 頁籤，可以直接設定每個頁面的 OG 標題、描述和圖片。

設定位置：

  • Yoast SEO：每個頁面/文章底部 → Social → Facebook Image
  • Rank Math：每個頁面/文章底部 → Social → Edit Snippet

驗證工具

設定完成後，用這些工具確認效果：