← Blog

Open Graph Next.js 中的標籤：2026 年開發者指南

Next.js 使用元資料 API 讓 OG 標籤變得簡單。這裡有您需要了解的一切 - 從靜態到動態 OG 影像。

不確定您的Next.js OG標籤是否正確？

使用 Proovd 免費檢查您的 Open Graph 標籤 — 貼上 URL 並準確查看它在 X、LinkedIn、Slack、Discord、WhatsApp 和 Reddit 上的外觀。

快速解答

  • Next.js 13+ 使用 OG 標籤的元資料 API
  • 靜態頁面：導出metadata對象
  • 動態頁：使用generateMetadata()
  • 動態 OG 圖片：使用 @vercel/og

Next.js 應用程式路由器 — 靜態元數據

在 Next.js 13+ (App Router) 中，設定 OG 標籤最簡單的方法是在佈局或頁面檔案中匯出 元資料：

export const metadata = {
  title: 'My Next.js App',
  description: 'A Next.js app with OG tags',
  openGraph: {
    title: 'My Next.js App',
    description: 'A Next.js app with OG tags',
    images: ['https://yoursite.com/og-image.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Next.js App',
    description: 'A Next.js app with OG tags',
    images: ['https://yoursite.com/og-image.jpg'],
  },
};

這會自動在您的頁面中產生正確的標籤。 Next.js 處理剩下的事情。

Next.js 應用程式路由器 — 動態元數據

對於動態頁面（部落格文章、產品頁面），使用 generateMetadata()：

import { notFound } from 'next/navigation';
import { getPost } from '@/lib/posts';

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  if (!post) notFound();

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
      type: 'article',
      publishedTime: post.date,
      authors: [post.author],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

使用 @vercel/og 的動態 OG 影像

對於自訂 OG 圖像（帶有您的品牌顏色、貼文標題等），請使用 @vercel/og：

// app/api/og/route.ts
import { ImageResponse } from '@vercel/og';

export function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Default Title';

  return new ImageResponse(
    (
      

        

          {title}
        

      

    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

然後在您的元資料中引用此 API 路由：

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    openGraph: {
      images: [`https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`],
    },
    twitter: {
      images: [`https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`],
    },
  };
}

Next.js 頁面路由器

如果您使用的是舊版 Pages Router，請使用 next/head 或 next-seo 軟體套件：

import Head from 'next/head';

export default function PostPage() {
  return (
    <Head>
      <meta property="og:title" content={post.title} />
      <meta property="og:description" content={post.excerpt} />
      <meta property="og:image" content={post.coverImage} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={post.title} />
      <meta name="twitter:image" content={post.coverImage} />
    </Head>
  );
}

或使用 next-seo 來獲得更清晰的 API：

import { NextSeo } from 'next-seo';

<NextSeo
  title={post.title}
  description={post.excerpt}
  openGraph={{
    title: post.title,
    description: post.excerpt,
    images: [{ url: post.coverImage }],
    type: 'article',
  }}
  twitter={{
    type: 'summary_large_image',
  }}
/>

快速修復清單

  1. 對靜態頁面使用元資料 API
  2. 動態頁使用 generateMetadata()
  3. 設定 openGraph 和 twitter 屬性
  4. 使用 @vercel/og 取得動態 OG 影像
  5. 使用 Proovd 進行測試以在所有平台上進行驗證

常見問題解答

Next.js會自動渲染HTML中的OG標籤嗎？

是的。 Next.js 將元資料作為 標籤注入伺服器渲染的 HTML 中，因此爬蟲無需 JavaScript 即可看到它們。

我可以將動態 OG 圖像與 Vercel Edge Functions 一起使用嗎？

是的。 @vercel/og 在 Vercel Edge 上運行並即時產生圖像。圖像 URL 在您的元資料中引用，平台在抓取您的頁面時會取得它。

相關文章

跨所有平台驗證您的Next.js OG標籤

使用 Proovd 免費檢查您的 Open Graph 標籤 — 貼上 URL 並查看 X、LinkedIn、Slack、Discord、WhatsApp 和 ⟦6 上的預覽。