Next.js에서 Metadata 관리
KUKJIN LEE • 9개월 전 작성
기본적인 Metadata 사용 방법
검색 엔진 최적화(SEO)와 사용자 경험을 향상 시키는 데 중요합니다.
<head> 태그 내의 Metadata를 설정하는 것으로, 동적 데이터에 따라 Metadata를 변경할 수도 있다.
기본 설정 외 Metadata Setting
-
OpenGraph
-
소셜 미디어에서 웹 페이지를 공유할 때 사용되는 Metadata, 웹 페이지의 제목, 설명, 이미지를 정의
-
-
Dynamic Routes
-
동적 라우트를 사용할 때, 각 페이지에 대해 고유한 Metadata를 설정하는 방법
-
-
Title Template
-
페이지의 제목을 일관된 형식으로 유지하는 방법, 모든 페이지 제목 뒤 사이트 이름을 추가하는 경우
-
Metadata의 우선 순위
최상위폴더에서부터 세부 페이지까지 모든 페이지에 걸쳐 Metadata가 설정된 경우, 세부 페이지의 Metadata를 우선적으로 보여주고, 중복이 없는 Metadata Option이 최상위폴더에 존재하는 경우 최상위폴더의 Metadata Option이 세부 페이지에 적용됩니다.
예를들어 최상위폴더에 layout.tsx Metadata(title, description, image)가 존재하고 세부 페이지 page.tsx에 Metadata(title, description) 존재할 때, 세부 페이지는 layout.tsx image를 가져와 사용하게 됩니다.
가장 기본적인 Metadata 설정 방법
가장 기본적인 방법이기 때문에, options를 확인 후 설정이 필요합니다. options 확인은 웹 검색도 가능하지만, Metadata Package를 직접 열어보는 방법도 있습니다.
import { Metadata } from "next"
export const metadata = {
title: '페이지 제목',
description: '페이지 설명',
};
const page = () => {
return <div>Super.Kakao.GG</div>
}
export default page
Dynamic Metadata 기본 설정 방법
dynamic Metadata의 경우, 기본 설정으로 부족합니다. 이후 문서 보완을 별도의 페이지에서 진행하겠습니다.
import type { Metadata, ResolvingMetadata } from 'next'
type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}
export async function generateMetadata(
{ params, searchParams }: Props,
parent: ResolvingMetadata
): Promise<Metadata> {
const id = params.id
const product = await fetch(`https://.../${id}`).then((res) => res.json())
return {
title: product.title,
}
}
export default function Page({ params, searchParams }: Props) {}
