Metadata API — SEO 완전 정복, OG 이미지 자동 생성
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. generateMetadata 함수가 정적 metadata export보다 유리한 상황은?
💡 generateMetadata는 params, searchParams, 외부 API 데이터를 기반으로 동적으로 메타데이터를 생성할 때 사용합니다. 블로그 포스트, 제품 상세 페이지처럼 URL에 따라 제목/설명이 달라지는 페이지에 필수입니다.
Q2. OG 이미지를 생성하는 ImageResponse에서 권장되는 런타임은?
💡 ImageResponse는 Edge Runtime에서 최적으로 동작합니다. `export const runtime = "edge"` 설정으로 전 세계 엣지 서버에서 빠르게 OG 이미지를 생성할 수 있습니다.
Q3. metadataBase를 설정하는 주된 이유는?
💡 OG 이미지나 canonical URL을 상대 경로(/og.jpg)로 설정하면 소셜 미디어가 인식하지 못합니다. metadataBase에 도메인을 설정하면 Next.js가 절대 URL(https://mysite.com/og.jpg)로 자동 변환합니다.
Q4. JSON-LD 구조화 데이터의 주요 목적은?
💡 JSON-LD는 검색엔진에게 페이지의 의미(제품, 기사, 이벤트 등)를 구조적으로 전달합니다. Google은 이를 파싱하여 별점, 가격, 리뷰 수 등을 검색 결과에 리치 스니펫으로 표시합니다.
Q5. Next.js에서 sitemap.xml을 생성하는 올바른 방법은?
💡 app/sitemap.ts에서 MetadataRoute.Sitemap 타입의 배열을 반환하는 default 함수를 export하면 Next.js가 /sitemap.xml을 자동 생성합니다. DB 데이터를 포함한 동적 사이트맵도 생성 가능합니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.