16. 메타데이터 추가

메타데이터는 SEO 및 공유성에 매우 중요하다. 이 장에서는 Next.js 애플리케이션에 메타데이터를 추가하는 방법에 대해 설명한다.

이번 장에서 다룰 주제는 아래와 같다.

메타데이터란?
메타데이터 유형.
메타데이터를 사용하여 오픈 그래프 이미지를 추가하는 방법
메타데이터를 사용하여 파비콘을 추가하는 방법

메타데이터란?

웹 개발에서 메타데이터는 웹페이지에 대한 추가 세부정보를 제공한다. 페이지를 방문하는 사용자에게는 메타데이터가 표시되지 않는다. 대신 페이지의 HTML, 일반적으로 <head> 엘리먼트에 포함되어 뒤에서 작동한다. 이 숨겨진 정보는 웹페이지의 콘텐츠를 더 잘 이해해야 하는 검색 엔진 및 기타 시스템에 매우 중요하다.

메타데이터가 왜 중요한가?

메타데이터는 웹페이지의 SEO를 향상시키는 데 중요한 역할을 하며, 검색 엔진과 소셜 미디어 플랫폼에서 웹페이지에 대한 접근성과 이해도를 높인다. 적절한 메타데이터는 검색 엔진이 웹 페이지를 효과적으로 색인화하여 검색 결과에서 순위를 높이는 데 도움이 된다. 또한 Open Graph와 같은 메타데이터는 소셜 미디어에서 공유 링크의 모양을 개선하여 사용자에게 콘텐츠를 더욱 매력적이고 유익하게 만든다.

메타데이터 유형

다양한 유형의 메타데이터가 있으며 각각 고유한 목적을 제공한다. 몇 가지 일반적인 유형은 다음과 같다.

Title 메타데이터: 브라우저 탭에 표시되는 웹페이지의 제목을 담당한다. 이는 검색 엔진이 웹페이지의 내용을 이해하는 데 도움이 되므로 SEO에 매우 중요하다.

<title>Page Title</title>

Description 메타데이터: 이 메타데이터는 웹페이지 콘텐츠에 대한 간략한 개요를 제공하며 검색 엔진 결과에 자주 표시된다.

<meta name="description" content="A brief description of the page content." />

Keyword 메타데이터: 이 메타데이터에는 웹페이지 콘텐츠와 관련된 키워드가 포함되어 있어 검색 엔진이 페이지를 색인화하는 데 도움이 된다.

<meta name="keywords" content="keyword1, keyword2, keyword3" />

Open Graph 메타데이터: 이 메타데이터는 제목, 설명, 미리보기 이미지 등의 정보를 제공하여 소셜 미디어 플랫폼에서 공유할 때 웹페이지가 표시되는 방식을 향상시킨다.

<meta property="og:title" content="Title Here" />
<meta property="og:description" content="Description Here" />
<meta property="og:image" content="image_url_here" />

Favicon 메타데이터: 이 메타데이터는 파비콘(작은 아이콘)을 브라우저의 주소 표시줄이나 탭에 표시되는 웹페이지에 연결한다.

<link rel="icon" href="path/to/favicon.ico" />

메타데이터 추가

Next.js에는 애플리케이션 메타데이터를 정의하는 데 사용할 수 있는 메타데이터 API가 있다. 애플리케이션에 메타데이터를 추가하는 방법에는 두 가지가 있다.

구성 기반: 레이아웃.js 또는 page.js 파일에서 정적 메타데이터 개체 또는 동적 generateMetadata 함수를 내보낸다.
파일 기반: Next.js에는 메타데이터 목적으로 특별히 사용되는 다양한 특수 파일이 있다.
- favicon.ico, apple-icon.jpg 및 icon.jpg: 파비콘 및 아이콘에 활용된다.
- opengraph-image.jpg 및 twitter-image.jpg: 소셜 미디어 이미지에 사용된다.
- robots.txt: 검색 엔진 크롤링에 대한 지침을 제공한다.
- sitemap.xml: 웹사이트 구조에 대한 정보를 제공한다.

정적 메타데이터에 이러한 파일을 유연하게 사용하거나 프로젝트 내에서 프로그래밍 방식으로 생성할 수 있다.

이 두 가지 옵션을 모두 사용하면 Next.js가 페이지에 대한 관련 <head> 엘리먼트를 자동으로 생성한다.

파비콘 및 오픈 그래프 이미지

/public 폴더에는 favicon.ico와 opengraph-image.jpg라는 두 개의 이미지가 있음을 알 수 있다.

이 이미지를 /app 폴더의 루트로 이동하자.

이 작업을 수행한 후 Next.js는 이러한 파일을 자동으로 식별하여 파비콘 및 OG 이미지로 사용한다. 개발 도구에서 애플리케이션의 <head> 엘리먼트를 확인할 수 있다.

팁: ImageResponse 생성자를 사용하여 동적 OG 이미지를 생성할 수도 있다.

페이지 제목 및 설명

또한 레이아웃.js 또는 page.js 파일의 메타데이터 개체를 포함하여 제목 및 설명과 같은 추가 페이지 정보를 추가할 수도 있다. 레이아웃.js의 모든 메타데이터는 이를 사용하는 모든 페이지에서 상속된다.

루트 레이아웃에서 다음 필드를 사용하여 새 메타데이터 개체를 생성한다.

/app/layout.tsx

import { Metadata } from 'next';
 
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는 애플리케이션에 제목과 메타데이터를 자동으로 추가한다.

하지만 특정 페이지에 대한 사용자 정의 제목을 추가하려면 어떻게 해야 할까? 페이지 자체에 메타데이터 개체를 추가하면 된다. 중첩된 페이지의 메타데이터는 상위 페이지의 메타데이터보다 우선 적용된다.

예를 들어 /dashboard/invoices 페이지에서 페이지 제목을 업데이트할 수 있다.

/app/dashboard/invoices/page.tsx

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Invoices | Acme Dashboard',
};

위 코드는 잘 작동하지만 모든 페이지에서 애플리케이션 제목을 반복하고 있다. 회사 이름과 같은 사항이 변경되면 모든 페이지에서 이를 업데이트해야 한다.

대신 메타데이터 개체의 title.template 필드를 사용하여 페이지 제목에 대한 템플릿을 정의할 수 있다. 이 템플릿에는 페이지 제목과 포함하려는 기타 정보가 포함될 수 있다.

루트 레이아웃에서 템플릿을 포함하도록 메타데이터 개체를 업데이트한다.

/app/layout.tsx

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'),
};

템플릿의 %s는 특정 페이지 제목으로 대체된다.

이제 /dashboard/invoices 페이지에 페이지 제목을 추가할 수 있다.

/app/dashboard/invoices/page.tsx

export const metadata: Metadata = {
  title: 'Invoices',
};

/dashboard/invoices 페이지로 이동하여 <head> 엘리먼트를 확인해보자. 이제 페이지 제목이 Invoices | Acme 대시보드로 보일 것이다.

연습문제: 메타데이터 추가하기

이제 메타데이터에 대해 배웠으므로 다른 페이지에 제목을 추가하여 연습해 보자.

/login 페이지.
/dashboard/ 페이지.
/dashboard/customers 페이지.
/dashboard/invoices/create 페이지.
/dashboard/invoices/[id]/edit 페이지.

Next.js 메타데이터 API는 강력하고 유연하여 애플리케이션의 메타데이터를 완벽하게 제어할 수 있다. 여기에서는 몇 가지 기본 메타데이터를 추가하는 방법을 설명했지만 키워드, 로봇, 표준 등을 포함한 여러 필드를 추가할 수도 있다. 기본 가이드 문서를 살펴보고 애플리케이션에 원하는 메타데이터를 추가해보자.

'Next.js 개발 가이드 > 06. Learn Next.js 공식 가이드' 카테고리의 다른 글

15. 인증 (0)	2023.12.25
14. 접근성 강화 (0)	2023.12.25
13. 에러 처리 (0)	2023.12.24
12. 데이터 변경 (0)	2023.12.24
11. 검색, 페이지네이션 (0)	2023.12.24