Metadata
Next.js에서는 metadata API를 활용하여 페이지의 메타데이터를 쉽게 설정할 수 있습니다.
이를 통해 검색 엔진 최적화(SEO)와 소셜 미디어 공유 미리보기를 개선할 수 있습니다.
기존 <Head> 컴포넌트를 사용하던 방식보다 더 구조적이고 최적화된 방법을 제공합니다.
Metadata 설정 방법
1) 기본 metadata 설정
Next.js의 app 디렉터리에서 metadata 객체를 사용하여 페이지의 title과 description을 설정할 수 있습니다.
// app/page.tsx
export const metadata = {
title: "Next.js에서 Metadata 사용하기",
description: "이 페이지는 Next.js에서 metadata를 설정하는 방법을 설명합니다.",
};
export default function HomePage() {
return <h1>Next.js Metadata 예제</h1>;
}- 이렇게 설정하면 Next.js가 <head> 태그에 자동으로 <title>과 <meta name="description">을 추가합니다.
2) generateMetadata로 동적 Metadata 설정
API 데이터나 동적 값에 따라 메타데이터를 설정하려면 generateMetadata 함수를 사용할 수 있습니다.
// app/blog/[id]/page.tsx
import { Metadata } from "next";
export async function generateMetadata({ params }: { params: { id: string } }): Promise {
const post = await fetch(`https://api.example.com/post/${params.id}`).then((res) => res.json());
return {
title: post.title,
description: post.excerpt,
};
}
export default function HomePage() {
return <h1>Next.js Metadata 예제</h1>;
}- 이렇게 하면 각 블로그 게시글마다 고유한 title과 description이 설정됩니다.
3) template을 사용한 제목 패턴 설정
여러 페이지에서 일관된 제목 패턴을 유지하려면 title.template을 사용할 수 있습니다.
import { Metadata } from 'next';
export const metadata: Metadata = {
title: {
template: '%s | Acme Dashboard',
default: 'Acme Dashboard',
},
description: 'The official Next.js Learn Dashboard built with App Router.',
metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};- 위 코드를 사용하면 특정 페이지에서 title을 설정할 때 기본적으로 Acme Dashboard가 적용되며, 제목을 동적으로 설정할 경우 %s 부분이 해당 제목으로 치환됩니다.
Metadata 주요 옵션
1) openGraph (OG 태그 설정)
Open Graph(OG) 메타데이터를 설정하면 Facebook, Twitter 등의 소셜 미디어에서 공유할 때 미리보기를 최적화할 수 있습니다.
export const metadata = {
openGraph: {
title: "Next.js Metadata",
description: "Next.js에서 metadata 설정하는 방법",
url: "https://example.com",
siteName: "Example",
images: [
{
url: "https://example.com/og-image.jpg",
width: 800,
height: 600,
},
],
locale: "ko_KR",
type: "website",
},
};2) twitter (트위터 카드 설정)
Twitter에서 링크를 공유할 때 미리보기 형태를 지정할 수 있습니다.
export const metadata = {
twitter: {
card: "summary_large_image",
title: "Next.js Metadata",
description: "Next.js에서 metadata 설정하는 방법",
images: ["https://example.com/twitter-image.jpg"],
},
};3) robots (검색 엔진 크롤링 설정)
검색 엔진이 페이지를 색인할지 여부를 설정할 수 있습니다.
export const metadata = {
robots: "index, follow", // 검색 엔진에 색인 허용
};또는 색인을 막으려면 다음과 같이 설정합니다.
export const metadata = {
robots: "noindex, nofollow", // 검색 엔진 색인 금지
};
Metadata 적용 범위
1) 특정 페이지에만 적용
app 디렉터리에서 특정 페이지 파일에 metadata를 설정하면 해당 페이지에만 적용됩니다.
// app/blog/page.tsx
export const metadata = {
title: "블로그 페이지",
};2) 레이아웃에서 전체 페이지에 적용
레이아웃 파일(layout.tsx)에서 metadata를 설정하면 해당 레이아웃을 사용하는 모든 페이지에 공통적으로 적용됩니다.
// app/layout.tsx
export const metadata = {
title: "사이트 제목",
description: "이 사이트는 Next.js 예제입니다.",
};
<Head> 컴포넌트와의 차이점
Next.js에서는 <Head> 컴포넌트를 사용하여 <head> 태그를 직접 수정할 수도 있습니다.
import Head from "next/head";
export default function Page() {
return (
<>
<Head>
<title>Custom Page Title</title>
<meta name="description" content="This is a custom description." />
</Head>
<h1>페이지 내용</h1>
</>
);
}- 하지만 metadata API를 사용하면 Next.js가 자동으로 최적화하고 중복을 방지하는 이점이 있습니다.
'개발 공부 > React' 카테고리의 다른 글
| React Focus Lock (0) | 2025.03.22 |
|---|---|
| Next.js LoginForm (0) | 2025.03.19 |
| Next.js Middleware (0) | 2025.03.09 |
| NextAuth.js의 보안 시크릿 키 (0) | 2025.03.07 |
| React useActionState (0) | 2025.03.06 |