posted 3 months ago
검색 엔진 최적화(SEO)와 사용자 경험을 향상 시키는 데 중요합니다.
<head>
태그 내의 Metadata를 설정하는 것으로, 동적 데이터에 따라 Metadata를 변경할 수도 있다.
OpenGraph
소셜 미디어에서 웹 페이지를 공유할 때 사용되는 Metadata, 웹 페이지의 제목, 설명, 이미지를 정의
Dynamic Routes
동적 라우트를 사용할 때, 각 페이지에 대해 고유한 Metadata를 설정하는 방법
Title Template
페이지의 제목을 일관된 형식으로 유지하는 방법, 모든 페이지 제목 뒤 사이트 이름을 추가하는 경우
최상위폴더에서부터 세부 페이지까지 모든 페이지에 걸쳐 Metadata가 설정된 경우, 세부 페이지의 Metadata를 우선적으로 보여주고, 중복이 없는 Metadata Option이 최상위폴더에 존재하는 경우 최상위폴더의 Metadata Option이 세부 페이지에 적용됩니다.
예를들어 최상위폴더에 layout.tsx
Metadata(title, description, image)가 존재하고 세부 페이지 page.tsx
에 Metadata(title, description) 존재할 때, 세부 페이지는 layout.tsx
image를 가져와 사용하게 됩니다.
가장 기본적인 방법이기 때문에, 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의 경우, 기본 설정으로 부족합니다. 이후 문서 보완을 별도의 페이지에서 진행하겠습니다.
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) {}