NextJS metadata | Notion

1. 메타데이터 개요

**메타데이터(Metadata)**란, 웹 페이지 자체의 설명이나 속성을 표현하는 데이터에 대한 데이터를 말한다.

예를 들어,

브라우저 탭이나 검색 엔진(구글, 네이버 등)에서 보이는 문서 제목(title)
페이지/사이트의 요약 정보를 담은 메타 설명(description)
Open Graph(OG) 태그를 통해 페이스북, 카카오톡 등 SNS 공유 시 표시될 이미지나 요약 정보
Twitter 카드(Twitter Card) 정보를 설정하여 트위터에서 공유 시 미리보기를 더 풍성하게 만들기

이런 것들을 모두 통틀어 “메타데이터”라고 부른다.

메타데이터를 잘 작성해두면 검색 엔진 최적화(SEO)에 도움이 될 뿐 아니라, 소셜 미디어에서 링크를 공유할 때도 미리보기 카드가 보기 좋게 나타나서 사용자 경험을 높일 수 있다.

2. Next.js 13 이전 버전의 메타데이터 관리

pages 디렉터리 기반 라우팅
메타데이터 설정 시, 주로 @next/head 에서 제공하는 <Head> 컴포넌트 이용

// pages/index.js
import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>My Next.js App</title>
        <meta name="description" content="This is my Next.js 12 app!" />
      </Head>
      <div>Hello World!</div>
    </>
  );
}

3. Metadata API (권장)