🖼️ Next.js App Router 메타데이터 & OG 이미지 설정 완전 가이드

🖼️ Next.js App Router 메타데이터 & OG 이미지 설정 완전 가이드

Next.js App Router에서는 페이지별 메타데이터(SEO용 제목, 설명, OG 이미지 등)를 쉽게 설정할 수 있고,
Open Graph 이미지(소셜 공유 썸네일)도 정적 또는 동적으로 만들 수 있습니다.

---

✅ 1. 정적 Open Graph 이미지 설정 방법

📂 디렉토리에 이미지 파일 추가하기

폴더 안에 opengraph-image.png 또는 twitter-image.png를 넣으면, 해당 경로로 접근 시 자동으로 적용됩니다.

예시 폴더 구조:

app/
├── opengraph-image.png         ← 루트 메타 이미지
├── twitter-image.png
├── about/
│   ├── page.tsx
│   └── opengraph-image.png     ← about 페이지 전용 OG 이미지

• /about 페이지 공유 시: /about/opengraph-image.png가 OG 이미지로 설정됨
• 이미지 형식: .jpg, .png, .gif 등

---

🧠 metadata 객체로 메타정보 직접 설정하기

layout.tsx 또는 page.tsx 안에 metadata 객체를 export 하면, 메타데이터를 프로그래밍적으로 설정할 수 있습니다.

// app/about/page.tsx
export const metadata = {
  title: '회사 소개 - About Us',
  description: '우리 회사에 대해 알아보세요',
  openGraph: {
    title: 'About | MySite',
    description: '우리는 이렇게 일합니다.',
    images: ['/about/opengraph-image.png'],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'About Us',
    images: ['/about/twitter-image.png'],
  },
};

• openGraph.images와 twitter.images는 배열 형태로 여러 개 설정 가능
• SEO 및 공유 최적화에 매우 중요

---

⚙️ 2. 동적 OG 이미지 생성 (ImageResponse)

반응형

라우트마다 다른 OG 이미지를 렌더링하고 싶다면, Next.js의 ImageResponse API를 사용해 서버에서 이미지 생성이 가능합니다.

// app/posts/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og';

export const size = {
  width: 1200,
  height: 630,
};

export default async function OGImage({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(res => res.json());

  return new ImageResponse(
    (

{post.title}

    ),
    size
  );
}

• 각 게시글마다 동적으로 제목이나 썸네일 포함 가능
• 브라우저가 요청할 때마다 실시간 생성됨

---

📏 메타 이미지 사이즈 가이드

플랫폼 권장 크기 비고

Open Graph (Facebook 등)	1200×630 px	비율 1.91:1
Twitter Card	1200×600 px	summary_large_image 기준

가능한 한 이미지 용량은 1MB 미만으로 유지하세요.

---

🧪 활용 팁

• Open Graph, Twitter 둘 다 설정 가능 (서로 다른 이미지도 가능)
• SEO를 위해 title, description, canonical도 함께 관리
• 이미지 경로는 public 경로나 CDN 경로도 사용 가능
• 동적 생성 시 Edge Runtime 사용 가능 (빠르고 효율적)

---

✅ 요약

항목 설정 방식 위치/사용법

정적 OG 이미지	파일 직접 추가	opengraph-image.png, twitter-image.png
프로그래밍 설정	metadata export	layout.tsx, page.tsx
동적 이미지 생성	ImageResponse()	opengraph-image.tsx 파일로 생성

---

 

Next.js, App Router, 메타데이터 설정, OG 이미지, Open Graph, Twitter 카드, SEO 최적화, 동적 썸네일, ImageResponse, 페이지 공유 최적화