← 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+(앱 라우터)에서 OG 태그를 설정하는 가장 간단한 방법은 레이아웃이나 페이지 파일에서 metadata 내보내기입니다.

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 페이지 라우터

이전 페이지 라우터를 사용하는 경우 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>
  );
}

또는 더 깔끔한 API를 위해 next-seo를 사용하세요.

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. 동적 OG 이미지에는 @vercel/og를 사용하세요.
  5. 모든 플랫폼에서 확인하려면 Proovd로 테스트하세요.

자주 묻는 질문

Next.js는 HTML의 OG 태그를 자동으로 렌더링합니까?

예. Next.js는 메타데이터를 서버 렌더링 HTML에 태그로 삽입하므로 크롤러는 JavaScript 없이 이를 볼 수 있습니다.

Vercel Edge Functions에서 동적 OG 이미지를 사용할 수 있나요?

예. @vercel/og는 Vercel Edge에서 실행되며 즉시 이미지를 생성합니다. 이미지 URL은 메타데이터에서 참조되며 플랫폼은 페이지를 크롤링할 때 이를 가져옵니다.

관련 기사

모든 플랫폼에서 Next.js OG 태그를 확인하세요

Proovd로 Open Graph 태그를 무료로 확인하세요. URL을 붙여넣고 X, LinkedIn, Slack, Discord, WhatsApp 및 Reddit에서 미리보기를 확인하세요.