HJS
AboutPostsProjects

<head> 대신 metadata 객체 사용하기

1️⃣ 기존 <head> 사용 방식과 문제점

Next.js의 Pages Router에서는 _app.js 또는 _document.js 에서 <Head> 컴포넌트를 사용하여 메타태그를 관리했습니다.

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>My Next.js App</title>
        <meta name="description" content="This is a Next.js application" />
      </Head>
      <h1>Welcome to My App</h1>
    </>
  );
}

하지만, **App Router (app/ 디렉토리 사용)**에서는 이러한 방식 대신 metadata 객체를 사용하여 페이지별 SEO 데이터를 선언적으로 설정할 수 있습니다.


2️⃣ metadata 객체 사용 방식

App Router에서는 page.tsx 또는 layout.tsx 파일에서 metadata 객체를 사용하여 메타데이터를 정의할 수 있습니다.

🔹 기본적인 metadata 객체 사용

export const metadata = {
  title: "My Next.js App",
  description: "This is a Next.js application",
};

export default function Home() {
  return <h1>Welcome to My App</h1>;
}

✔️ Next.js가 자동으로 <head>에 해당하는 메타데이터를 삽입해줍니다.

🔹 generateMetadata를 사용한 동적 메타데이터 설정

정적인 metadata 객체 뿐만 아니라, 동적으로 메타데이터를 생성하려면 generateMetadata 함수를 사용할 수 있습니다.

import { Metadata } from "next";

type Props = {
  params: { id: string };
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await fetch(`https://api.example.com/posts/${params.id}`).then((res) => res.json());

  return {
    title: post.title,
    description: post.description,
  };
}

export default function PostPage({ params }: Props) {
  return <h1>Post {params.id}</h1>;
}

✔️ 페이지가 렌더링될 때 동적으로 SEO 메타데이터를 변경할 수 있습니다.


metadata 객체의 다양한 속성

metadata 객체는 단순히 title과 description뿐만 아니라, 다음과 같은 다양한 SEO 속성을 지원합니다.

export const metadata = {
  title: "My Awesome App",
  description: "This is an awesome Next.js app",
  keywords: ["Next.js", "SEO", "metadata"],
  authors: [{ name: "John Doe", url: "https://johndoe.com" }],
  openGraph: {
    title: "My Awesome App",
    description: "Best app built with Next.js!",
    url: "https://myapp.com",
    siteName: "MyApp",
    images: [
      {
        url: "https://myapp.com/og-image.jpg",
        width: 1200,
        height: 630,
      },
    ],
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    site: "@myapp",
    title: "My Awesome App",
    description: "Best app built with Next.js!",
    images: ["https://myapp.com/twitter-image.jpg"],
  },
};

4️⃣ metadata 객체를 사용할 때의 장점