nextjs
CHAPTER 9 / 34
읽기 약 2분
SYNTAX
metadata API 해부: SEO 최적화
핵심 개념
metadata 객체로 페이지별 SEO를 설정합니다. title, description, openGraph, twitter 카드를 설정합니다. generateMetadata로 동적 메타데이터도 가능합니다.
코드 분석
METADATA API
// 정적 메타데이터
export const metadata = {
title: 'CYBERDYNE SYSTEMS',
description: 'T-800 유닛 관리',
openGraph: {
title: 'CYBERDYNE',
images: ['/og.png'],
},
}
// 동적 메타데이터
export async function generateMetadata(
{ params }: { params: { id: string } }
) {
return {
title: `Unit ${params.id}`
}
}AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Next.js 'metadata API' 코드에서 서버/클라이언트 경계·use client 누락·캐시 무효화 버그를 찾아서 수정해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'metadata API'를 활용한 실전 페이지를 App Router + TypeScript + Server Actions로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Next.js 'metadata API' 사용 패턴이 빌드 크기와 LCP/INP/CLS에 미치는 영향을 분석하고 최적화 방안을 알려줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
Next.js 'metadata API' vs Remix/Astro/SvelteKit의 동일 기능 구현을 2026년 기준으로 솔직하게 비교해줘.
⭐ 이것만 기억하세요
metadata API 해부: SEO 최적화는 이 3가지만 확실히 잡으세요
1.메타 태그가 없으면 검색엔진이 페이지 내용을 파악하지 못하고, SNS 공유 시 제목과 이미지가 표시되지 않습니다
2.export const metadata 또는 generateMetadata 함수로 title·description·openGraph를 페이지별로 설정합니다
3.다음 챕터에서 이미지 크기·포맷을 자동 최적화하는 Image 컴포넌트를 배웁니다
공유하기
진행도 9 / 34