← 전체 글
읽는 데 5분

Next.js에서 모든 페이지에 동적 OG 이미지 생성하기

라우트 하나로 각 페이지의 제목과 메타데이터를 바탕으로 브랜드가 적용된 소셜 이미지를 페이지마다 렌더링할 수 있습니다 — 디자인 도구도, 수작업 내보내기도 필요 없습니다. 그 패턴을 소개합니다.

페이지마다 공유 이미지를 따로 디자인하는 방식은 확장되지 않습니다. 더 나은 패턴은, 각 페이지의 제목과 메타데이터를 바탕으로 브랜드 카드를 요청 시 그려내는 동적 라우트 하나를 두는 것입니다.

opengraph-image 라우트

Next.js는 라우트 세그먼트의 opengraph-image 파일을 읽어, 그것이 반환하는 결과를 해당 라우트의 og:image로 제공합니다. next/og로 렌더링되며, 이미지로 그려지는 JSX일 뿐입니다.

import { ImageResponse } from "next/og";

export default function Image() {
  return new ImageResponse(
    <div style={{ fontSize: 64, padding: 60 }}>Your title</div>,
    { width: 1200, height: 630 },
  );
}

페이지별로 만들기

  • 라우트의 params나 데이터 계층에서 제목을 가져옵니다.
  • 카드에 브랜드 강조색을 입혀 사이트 전체가 일관되게 느껴지도록 합니다.
  • 항상 로드되도록 플랫폼의 크기 제한 이내로 유지합니다.

OG Image 스킬은 여러분의 사이트에 맞춰 이 라우트를 스캐폴딩하고, 여러 페이지에 openGraph.images를 연결해 어떤 두 라우트도 같은 미리보기를 공유하지 않게 합니다.

Next.js에서 모든 페이지에 동적 OG 이미지 생성하기