Next.js Metadata API - SEO와 소셜 미디어 최적화

Next.js 13+ App Router에서는 metadata 객체나 generateMetadata 함수로 SEO 메타데이터를 선언적으로 관리할 수 있습니다.
이 글에서는 페이지별 메타데이터 설정과 동적 메타데이터 생성 방법을 정리합니다.

---

1. 정적 메타데이터

// app/about/page.tsx
export const metadata = {
  title: "About Us",
  description: "회사 소개 페이지입니다.",
  openGraph: {
    title: "About Us",
    description: "회사 소개 페이지입니다.",
    images: ["/og-image.jpg"],
  },
  twitter: {
    card: "summary_large_image",
    title: "About Us",
    description: "회사 소개 페이지입니다.",
  },
};

export default function AboutPage() {
  return <div>About</div>;
}

• metadata 객체로 정적 메타데이터를 정의할 수 있습니다.

---

2. 동적 메타데이터

// app/blog/[slug]/page.tsx
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
   post =  (slug);

   {
    : post.,
    : post.,
    : {
      : post.,
      : post.,
      : [post.],
    },
  };
}