1. Meta tag (메타 태그)
메타 태그는 페이지 태그 부분에 들어가며 해당 태그들은 사용자들이 검색엔진을 이용할 때
어떻게 표시되는지를 선언해주는 태그입니다.
2. Next.js의 meta 선언방법
next.js의 메타 선언 방법을 두 가지가 있습니다.
- 일반적인 선언방법
- metaData/Next 선언
일반적으로는 metaData/Next 를 통해 선언하며, 내부에는 태그 혹은
metaData에서 지원하지 않는 tag 를 선언합니다.
3. metaData/Next 로 선언하는 이유
가장 큰 이유는 최적화 입니다.
Next.js에서는 독자적인 메타 태그 선언을 제공하며 변환 하는 과정을 진행합니다.
이는 Next.js 실행시의 최적화 적인 부분도 존재하지만
“페이지 마다 다른 메타 선언”에 큰 편의성을 제공합니다.
“lootLayout”에서 메타를 선언하는 app router의 특성상
태그를 이용하여 각 페이지 별 메타를 선언하는것은 불가능 하기에페이지 별로 “metaData/Next”를 선언함으로써 페이지별로 다른 meta를 설정 할 수 있습니다.
4. 예시
아래는 그 예시입니다.
import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "title",
description: "description",
robots: "index, follow",
openGraph: {
type: "website",
title: "title",
description: "description",
images: "이미지 경로",
url: "https://www.url.com",
},
keywords: [
"keywords",
"keywords2",
"keywords3",
],
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko">
<head>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta
name="naver-site-verification"
content="naver_code"
/>
</head>
<body>
{children}
</body>
</html>
);
}
만약 특정 페이지에서 다른 description을 보여주고 싶다면 아래 코드와 같은 방법으로
변경하고자 하는 요소만 description에 작성 해 주면 됩니다.
import type { Metadata } from "next";
export const metadata: Metadata = {
description: "다른 description",
};
프론트엔드 개발자 ( React, Next.js ) - 업데이트 중입니다.