Next.js Metadata

Minboy·2024년 3월 4일

Next.js 14 공식 튜토리얼

목록 보기

9/9

Chapter 16

What is metadata?

메타데이터란 페이지에 방문하는 유저들에게는 보이지 않지만, 페이지의 HTML 속(주로 <head> 엘리먼트 속)에 포함되어있는 웹페이지의 추가적인 정보들을 말한다. 이 숨겨진 정보들은 서치엔진과 같은 시스템들에게 우리의 웹페이지 내용들을 더 잘 이해시키기 위해 매우 중요하다.

Why is metadata important?

메타데이터는 웹페이지의 SEO에서 중대한 역할을 차지하고 있다. 서치 엔진들과 소셜 미디어 플랫폼들이 페이지에 더 잘 접근하고 더 잘 이해할 수 있게 해주는 역할을 수행한다. 적절한 메타데이터는 서치엔진이 효율적으로 웹페이지들의 색인을 생성할 수 있게해줌으로써 검색 결과의 랭킹을 향상시키는데 도움을 준다. 추가적으로 Open Graph와 같은 메타데이터는 소셜 미디어에서 공유 링크의 모습을 향상시켜줌으로써 유저들에게 좀 더 내용을 잘 전달시킬 수 있다.

Adding metadata

Next.js는 앱의 메타데이터를 정의하는데 사용되는 Meatadata API들을 갖고있다. 앱에 메타데이터를 추가하는데는 두가지 방법이 존재한다.

Config-based : layout.js 또는 page.js 파일에서 정적 메타데이터 객체 또는 동적 generateMetadata 함수를 export 해주기
File-based : Next.js는 메타데이터를 명시하기 위한 일련의 파일들을 갖고 있다.
- favicon.ico, apple-icon.jpg , icon.jpg : 파비콘 및 아이콘 활성화
- opengraph-image.jpg , twitter-image.jpg : 소셜 미디어 이미지 적용
- robots.txt : 서치 엔진 크롤링을 위한 지시 제공
- sitemap.xml : 웹사이트 구조에 대한 정보 제공

이 모든 방법들을 유연하게 사용할 수 있다. 이 옵션들을 통해 Next.js는 자동적으로 적절한 <head> 엘리먼트를 생성해줄 것이다.

Page title and descriptions

예시로 layout.js 에서 title 메타데이터를 정의하는 방법을 알아보자. 해당 layout.js 에 존재하는 모든 메타데이터들은 그 레이아웃을 사용하는 모든 페이지에 상속될 것이다.

루트 레이아웃에서 다음 코드를 작성하자.

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가 자동적으로 메타데이터와 title을 추가해줄 것이다.

만약 특정 페이지에 커스텀 타이틀을 추가하고 싶다면 어떻게 해야할까? 그냥 해당 페이지의 page.tsx 에서 metatdata 객체를 추가해주면된다. 예를들어 /dashboard/invoices 페이지의 페이지 타이틀을 업데이트 하고 싶다면

import { Metadata } from 'next';

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

이 코드를 추가해주면된다.

이 방식은 잘 작동하지만, 모든 페이지마다 타이틀을 반복하는 것은 만약 회사명이 바뀌었다던가 뭔가가 변화했을 때 하나하나 일일히 변경해주어야하는 번거로움이 존재한다.

대신에 title.template 필드를 metadata 객체에 정의해주는 것으로 페이지 타이틀에 대한 템플릿을 정의할 수 있다.

루트 레이아웃에서 다음과 같이 작성해보자.

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 페이지에서는 다음과 같이 사용하면 된다.

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

이렇게만 하면 Invoices | Acme Dasboard 라는 타이틀을 확인할 수 있다.

Minboy

🐧

이전 포스트