메타데이터 파일 규칙
SEO(Search Engine Optimization), 소셜 미디어 미리보기(Open Graph / Twitter), 앱 아이콘(favicon, app icon) 등을 Next.js 프로젝트에서 자동으로 처리하게 해주는 파일 구조 기반 규칙
개념 요약
메타데이터 : 검색 엔진과 소셜 미디어에서 사용되는 정보
NextJS에서는 이 정보(메타데이터)를 선언 가능. 이전에는 직접 HTML <head> 에 직접 써야했음.
- 페이지 <title>
- <meta name="description" ...>
- Open Graph(페이스북, 카카오톡 등 링크 미리보기)
- Twitter Card
- favicon, app icons(홈 화면 아이콘, 브라우저 탭 아이콘)
- sitemap, robots.txt(검색 크롤러용 설정)
Markdown
복사
메타데이터 예시
Metadata file convetions 사용 방법
특정 이름의 파일을 프로젝트 안에 두면 자동으로 인식해서 메타데이터로 사용됨
App icons
Open Graph & Twitter images
SEO
폴더 예제 구조
정적 메타데이터
app/
├── layout.tsx # 전체 레이아웃 (metadata export 가능)
├── page.tsx # 루트 페이지
│
├── favicon.ico # ✅ 브라우저 탭 아이콘 (16~48px)
├── icon.png # ✅ 앱 공통 아이콘 (고해상도)
├── apple-icon.png # ✅ iOS 홈화면 아이콘
│
├── opengraph-image.png # ✅ Open Graph 공유용 이미지 (페북/카톡 등)
├── twitter-image.png # ✅ Twitter 공유용 이미지
│
├── robots.txt # ✅ 검색 엔진 크롤러 제어
├── sitemap.xml # ✅ 사이트맵 (SEO용)
│
├── blog/ # 블로그 페이지 라우트
│ ├── page.tsx
│ ├── opengraph-image.png # ✅ /blog 페이지 전용 OG 이미지
│ └── twitter-image.png # ✅ /blog 페이지 전용 트위터 카드 이미지
│
└── products/ # 상품 상세 페이지 라우트
├── [id]/
│ ├── page.tsx
│ ├── opengraph-image.png # ✅ /products/[id] 전용 OG 이미지
│ └── twitter-image.png # ✅ /products/[id] 전용 트위터 이미지
└── layout.tsx
Markdown
복사
동적 메타데이터
정적 파일 기반 외에도, 각 페이지 컴포넌트에서 export const metadata 를 정의하면 동적으로 title, description, og:image 등을 지정 가능
// app/blog/page.tsx
export const metadata = {
title: "블로그 메인",
description: "시영님의 기술 블로그입니다.",
openGraph: {
title: "시영 블로그",
images: ["/blog/opengraph-image.png"],
},
twitter: {
card: "summary_large_image",
images: ["/blog/twitter-image.png"],
},
};
export default function BlogPage() {
return <h1>블로그 글 목록</h1>;
}
JavaScript
복사