Next.js Open Graph

Next.js OG 이미지 설계

Open Graph 설정은 공유 링크가 보이는 제목, 설명, 이미지, URL을 제어하고 generateMetadata와 동적 이미지 생성으로 콘텐츠별 미리보기를 만든다.

01

공유 대상 정의

페이지가 공유될 때 보여야 할 제목, 설명, 대표 이미지를 콘텐츠 기준으로 정한다.

preview intent
02

정적 속성

metadata.openGraph와 twitter에 기본 카드 정보를 선언한다.

static OG
03

동적 생성

게시글이나 상품 상세는 params로 데이터를 읽어 generateMetadata에서 OG 값을 만든다.

per route
04

이미지 검증

og:image URL, 비율, 파일 크기, 접근 권한을 실제 공유 디버거에서 확인한다.

debugger
정적 OG
랜딩, 소개, 고정 페이지는 metadata 객체로 충분하다. 이미지는 공용 asset과 metadataBase 기준 URL을 사용한다.
simple page
동적 OG
콘텐츠 제목과 요약이 바뀌는 페이지는 generateMetadata를 사용한다. 데이터 fetch 실패 시 fallback metadata도 준비한다.
content-driven
이미지
1200x630 비율과 높은 대비 텍스트가 공유 카드에서 안정적이다. 어두운 crop이나 작은 글자는 모바일 미리보기에서 읽히지 않는다.
card quality

OG 검증

절대 경로 og:image가 외부 크롤러에서 접근 가능한 절대 URL이다.
콘텐츠 일치 공유 카드 제목이 실제 페이지 H1과 어긋나지 않는다.
fallback 삭제된 콘텐츠나 오류 상황에도 기본 OG가 제공된다.

동적 metadata

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return { openGraph: { title: post.title, images: [post.ogImage] } };
}