如何在任何網站上新增 Open Graph 標籤

方法 1：原始 HTML（任何靜態網站）

如果您可以直接存取 HTML 文件，請在每個頁面的 部分新增這些標籤：

<!-- Open Graph -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />
<meta property="og:type" content="website" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling description." />
<meta name="twitter:image" content="https://yoursite.com/images/preview.jpg" />

確保 og:image URL 是絕對 URL（以 https:// 開頭）。像 /images/preview.jpg 這樣的相對路徑將不起作用。

方法二：WordPress（Yoast SEO）

如果您將 WordPress 與 Yoast SEO 一起使用，OG 標籤會自動處理：

1. 安裝並啟用 Yoast SEO 插件
2. 編輯任何頁面或帖子
3. 向下捲動至 Yoast SEO 元框
4. 點選“社交”標籤
5. 設定“Facebook標題”、“Facebook描述”和“Facebook圖像”
6. Yoast 自動產生正確的 og: 標籤

Yoast 也會自動加入 Twitter Card 標籤。您可以在 Yoast SEO → 社交 → Twitter 下配置它們。

方法3：WordPress（RankMath）

RankMath 的工作原理與 Yoast 類似，但設定略有不同：

1. 安裝並啟動 RankMath SEO
2. 編輯任何頁面或帖子
3. 找到 RankMath 元框
4. 轉到“社交”選項卡
5. 設定社交圖像、標題和描述
6. RankMath 自動產生 OG 和 Twitter Card 標籤

方法4：Next.js（應用路由器）

在 Next.js 13+ (App Router) 中，使用元資料 API：

export const metadata = {
  title: 'Your Page Title',
  description: 'A compelling description.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
  },
};

對於動態頁面（如部落格文章），在 generateMetadata() 中產生元資料：

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

方法五：Webflow

Webflow 內建 Open Graph 設定：

1. 轉到您的項目設定
2. 點選“SEO設定”
3. 在「預設元標籤」下，設定Facebook/OG圖像、標題和描述
5. Webflow 自動產生正確的OG標籤

方法 6：自訂 CMS 或無頭設定

如果您使用的是無頭 CMS（Contentful、Sanity、Strapi 等），請在前端框架中新增 OG 標籤。過程與 Next.js 相同 — 從 CMS 資料動態產生標籤並將其註入頁面 。

快速修復清單