Next.js에서 메타데이터 다루기

Next.js의 공식문서를 참고하여 작성하였습니다.

웹사이트의 SEO를 향상시키기 위해 Next.js의 아래의 기능을 사용하면 개발자들이 각 페이지의 맥락에 맞는 메타 데이터를 보다 유연하게 설정할 수 있게 됩니다.

Next.js의 App-router에서 사용 가능한 Config-based Metadata 옵션 및 generateMetadata 함수와 정적 metadata 객체에 대해 설명합니다.

정적 Metadata 설정

일반적인 메타데이터를 수동(정적)으로 설정하는 방법입니다.

• 파일 위치: layout.tsx 또는 page.tsx

• 용법: 특정 페이지나 레이아웃에 고정된 메타 데이터를 설정할 때 사용합니다.

• 주의사항: 서버 컴포넌트에서만 지원됩니다.

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Home Page', // 페이지 제목
  description: 'This is the home page of our site.', // 페이지 설명
};

동적 Metadata 설정

[id]같은 동적인 라우트 파일이 존재 하는 경우 정적인 메타데이터를 설정하기 어렵습니다. 이 경우 동적 메타데이터를 설정합니다.

• 파일 위치: app/products/[id]/page.tsx와 같은 동적 라우트 파일

• 용법: 페이지의 동적 데이터나 경로 매개변수에 따라 변하는 메타 데이터를 설정할 때 사용합니다.

• 주의사항: 정적 metadata 객체와 generateMetadata 함수를 같은 라우트에서 동시에 내보낼 수 없습니다.

사용되는 매개변수는 다음과 같습니다.

• props: 현재 라우트의 매개변수를 포함하는 객체입니다.

• parent: 상위 라우트 세그먼트에서 해결된 메타 데이터의 프로미스입니다.

import { Metadata, ResolvingMetadata } from 'next';

export async function generateMetadata({ params }, parent: ResolvingMetadata): Promise<Metadata> {
  const product = await fetch(`https://.../${params.id}`).then(res => res.json());

  return {
    title: product.title,
    description: product.description,
    // 추가 메타 데이터 설정
  };
};

Metadata 필드 옵션

기본 옵션:

• title: 문서의 제목을 설정합니다.
• description: 문서의 설명을 설정합니다.
• 기타 : generator, applicationName, referrer, keywords, authors, creator, publisher, formatDetection 등

title 필드의 특별 옵션을 통해 다양하게 title을 구성 할 수 있습니다.

• default: 하위 라우트 세그먼트에서 제목이 정의되지 않은 경우 사용할 기본 제목을 제공합니다.
• template: 하위 라우트 세그먼트의 제목에 접두사 또는 접미사를 추가하는 데 사용됩니다.
• absolute: 상위 세그먼트에서 설정한 title.template을 무시하고 제목을 설정하는 데 사용됩니다.

표를 통해 한 눈에 비교해보겠습니다.

Sitemap

Next.js의 공식문서에 기반한 sitemap.xml과 관련된 내용을 요약하고 표로 정리하면 다음과 같습니다.

목적: sitemap.xml은 검색 엔진 크롤러가 사이트를 보다 효율적으로 인덱스할 수 있도록 돕는 특별한 파일입니다.

이 파일은 Sitemaps XML 형식을 따르며, 웹사이트의 모든 중요한 URL을 나열합니다.

1. 정적인 파일로 생성

• sitemap.xml파일을 앱 디렉토리의 루트에 직접 생성.

2. 코드를 사용한 동적 생성(일반적인 방법)

• sitemap.js 또는 sitemap.ts 파일 내에서 URL 배열을 반환하는 기본 함수를 내보낼 수 있습니다.

import { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://sample.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    // 추가 URL 객체
  ]
}

Robots

robots.txt 파일은 검색 엔진 크롤러에게 사이트의 어떤 URL을 크롤링할 수 있는지 지시하는 데 사용됩니다.

robots.txt 파일은 sitemap과 동일하게 사이트의 루트 디렉토리에 추가될 수 있으며, 정적 파일 또는 코드를 통해 동적으로 생성될 수 있습니다.

import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: '/private/',
    },
    sitemap: 'https://sample.com/sitemap.xml',
  }
}

/* 출력 예시 */
User-Agent: *
Allow: /
Disallow: /private/
Sitemap: https://sample.com/sitemap.xml

• rules속성에 userAgent를 사용하여 다양한 검색 엔진 봇에 대해 서로 다른 규칙을 지정할 수 있습니다.