Metadata API는 어떤 역할을 하나요?

Metadata API는 App Router에서 페이지의 <title>, description, Open Graph, robots, canonical 같은 메타 정보를 선언적으로 관리하는 기능입니다. SEO와 공유 미리보기 품질에 직접 영향을 줍니다.

정적 metadata

export const metadata = {
  title: 'DevRoutine',
  description: '개발자 면접 질문 정리',
  openGraph: {
    title: 'DevRoutine',
    type: 'website',
  },
};

동적 metadata

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

상품 상세, 블로그 글처럼 데이터에 따라 메타 태그가 달라지는 페이지에 적합합니다.

장점

• 중첩 layout/page 기준으로 metadata가 병합됩니다.
• 서버에서 생성되므로 크롤러가 읽기 좋습니다.
• viewport, robots, alternates, icons 등도 구조적으로 관리할 수 있습니다.

주의점

동적 metadata에서 너무 느린 fetch를 하면 페이지 응답 지연에 영향을 줄 수 있습니다. 또한 title template을 layout에서 설정하면 하위 page title과 어떻게 합쳐지는지 확인해야 합니다.

면접 답변 포인트

Metadata API는 SEO와 소셜 공유에 필요한 head 정보를 App Router 방식으로 선언/생성하는 기능입니다. 정적 metadata와 generateMetadata를 구분해 설명하면 됩니다.