메타데이터는 SEO 및 공유성에 매우 중요합니다. 이 장에서는 Next.js 애플리케이션에 메타데이터를 추가하는 방법에 대해 설명합니다.
- 메타데이터란 무엇인지.
- 메타데이터 유형.
- 메타데이터를 사용하여 오픈 그래프 이미지를 추가하는 방법
- 메타데이터를 사용하여 파비콘(favicon)을 추가하는 방법
1. 메타데이터란 무엇입니까?
웹 개발에서 메타데이터는 웹페이지에 대한 추가 세부정보를 제공합니다. 페이지를 방문하는 사용자에게는 메타데이터가 표시되지 않습니다. 대신 페이지의 HTML, 일반적으로 <head> 요소 내에 삽입되어 뒤에서 작동합니다. 이 숨겨진 정보는 웹페이지의 콘텐츠를 더 잘 이해해야 하는 검색 엔진 및 기타 시스템에 매우 중요합니다.
2. 메타데이터가 왜 중요한가요?
메타데이터는 웹페이지의 SEO를 향상시키는 데 중요한 역할을 하여 검색 엔진과 소셜 미디어 플랫폼에서 웹페이지에 대한 접근성과 이해도를 높입니다. 적절한 메타데이터는 검색 엔진이 웹 페이지를 효과적으로 색인화하여 검색 결과에서 순위를 높이는 데 도움이 됩니다. 또한 Open Graph와 같은 메타데이터는 소셜 미디어에서 공유 링크의 모양을 개선하여 사용자에게 콘텐츠를 더욱 매력적이고 유익하게 만듭니다.
3. 메타데이터 유형
다양한 유형의 메타데이터가 있으며 각각 고유한 목적을 제공합니다. 몇 가지 일반적인 유형은 다음과 같습니다.
Title Metadata : 브라우저 탭에 표시되는 웹페이지의 제목을 담당합니다. 이는 검색 엔진이 웹페이지의 내용을 이해하는 데 도움이 되므로 SEO에 매우 중요합니다.
<title>Page Title</title>설명 메타데이터 : 이 메타데이터는 웹페이지 콘텐츠에 대한 간략한 개요를 제공하며 검색 엔진 결과에 자주 표시됩니다.
<meta name="description" content="A brief description of the page content." />키워드 메타데이터 : 이 메타데이터에는 웹페이지 콘텐츠와 관련된 키워드가 포함되어 있어 검색 엔진이 페이지를 색인화하는 데 도움이 됩니다.
<meta name="keywords" content="keyword1, keyword2, keyword3" />오픈 그래프 메타데이터 : 이 메타데이터는 제목, 설명, 미리보기 이미지 등의 정보를 제공하여 소셜 미디어 플랫폼에서 공유할 때 웹페이지가 표시되는 방식을 향상시킵니다.
<meta property="og:title" content="Title Here" />
<meta property="og:description" content="Description Here" />
<meta property="og:image" content="image_url_here" />파비콘 메타데이터 : 이 메타데이터는 파비콘(작은 아이콘)을 브라우저의 주소 표시줄이나 탭에 표시되는 웹페이지에 연결합니다.
<link rel="icon" href="path/to/favicon.ico" />4. 메타데이터 추가
Next.js에는 애플리케이션 메타데이터를 정의하는 데 사용할 수 있는 메타데이터 API가 있습니다. 애플리케이션에 메타데이터를 추가하는 방법에는 두 가지가 있습니다.
- 구성 기반: 정적
metadata개체 또는 동적generateMetadata함수를layout.js또는page.js파일로 내보냅니다. - 파일 기반: Next.js에는 메타데이터 목적으로 특별히 사용되는 다양한 특수 파일이 있습니다.
favicon.ico,apple-icon.jpg, 및icon.jpg: 파비콘 및 아이콘에 활용됩니다.opengraph-image.jpg및twitter-image.jpg: 소셜 미디어 이미지를 위해 고용됨robots.txt: 검색엔진 크롤링에 대한 지침을 제공합니다.sitemap.xml: 웹사이트의 구조에 대한 정보를 제공합니다.
정적 메타데이터에 이러한 파일을 유연하게 사용하거나 프로젝트 내에서 프로그래밍 방식으로 생성할 수 있습니다.
이 두 가지 옵션을 모두 사용하면 Next.js가 페이지에 대한 관련 <head> 요소를 자동으로 생성합니다.
4-1. 파비콘 및 오픈 그래프 이미지
/public 폴더에는 두 개의 이미지(favicon.ico 및 opengraph-image.jpg)가 있는 것을 확인할 수 있습니다.
이 이미지를 /app 폴더의 루트로 이동하세요.
이 작업을 수행한 후 Next.js는 이러한 파일을 자동으로 식별하여 파비콘 및 OG 이미지로 사용합니다. 개발 도구에서 애플리케이션의 <head> 요소를 확인하여 이를 확인할 수 있습니다.
알아두면 좋은 점: ImageResponse 생성자를 사용하여 동적 OG 이미지를 만들 수도 있습니다.
4-2. 페이지 제목 및 설명
layout.js 또는 page.js 파일의 metadata 개체를 포함하여 제목 및 설명과 같은 추가 페이지 정보를 추가할 수도 있습니다. layout.js의 모든 메타데이터는 이를 사용하는 모든 페이지에서 상속됩니다.
루트 레이아웃에서 다음 필드를 사용하여 새 metadata 개체를 만듭니다.
// /app/layout.tsx
import { Metadata } from 'next'; // Metadata 추가
// 새 객체 만들기
export const metadata: Metadata = {
title: 'Acme Dashboard',
description: 'The official Next.js Course Dashboard, built with App Router.',
metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};
export default function RootLayout() {
// ...
}Next.js는 애플리케이션에 제목과 메타데이터를 자동으로 추가합니다.
하지만 특정 페이지에 대한 사용자 정의 제목을 추가하려면 어떻게 해야 할까요? 페이지 자체에 metadata 개체를 추가하면 됩니다. 중첩된 페이지의 메타데이터는 상위 페이지의 메타데이터보다 우선 적용됩니다.
예를 들어 /dashboard/invoices 페이지에서 페이지 제목을 업데이트할 수 있습니다.
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Invoices | Acme Dashboard',
};이것은 작동하지만 모든 페이지에서 애플리케이션 제목을 반복하고 있습니다. 회사 이름과 같은 사항이 변경되면 모든 페이지에서 이를 업데이트해야 합니다.
대신 개체 metadata의 title.template 필드를 사용하여 페이지 제목에 대한 템플릿을 정의할 수 있습니다. 이 템플릿에는 페이지 제목과 포함하려는 기타 정보가 포함될 수 있습니다.
루트 레이아웃에서 템플릿을 포함하도록 metadata 객체를 업데이트합니다.
// /app/layout.tsx
import { Metadata } from 'next'; // Metadata 불러오기
// 객체 업데이트
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'),
};템플릿의 %s가 특정 페이지 제목으로 대체됩니다.
이제 /dashboard/invoices 페이지에 페이지 제목을 추가할 수 있습니다.
export const metadata: Metadata = {
title: 'Invoices',
};/dashboard/invoices 페이지로 이동하여 <head> 요소를 확인하세요. 이제 페이지 제목이 Invoices | Acme Dashboard로 표시됩니다.
✍ 연습문제: 메타데이터 추가하기
이제 메타데이터에 대해 배웠으므로 다른 페이지에 제목을 추가하여 연습해 보세요.
/login페이지./dashboard/페이지./dashboard/customers페이지./dashboard/invoices/create페이지./dashboard/invoices/[id]/edit페이지.
Next.js 메타데이터 API는 강력하고 유연하여 애플리케이션의 메타데이터를 완벽하게 제어할 수 있습니다. 여기서는 몇 가지 기본 메타데이터를 추가하는 방법을 설명했지만 keywords, robots, canonical 등을 포함한 여러 필드를 추가할 수도 있습니다. 자유롭게 문서를 탐색 하고 애플리케이션에 원하는 추가 메타데이터를 추가하세요.
