Next.js 앱 라우터에서 metadata를 활용한 SEO 최적화

개요

Next.js의 앱 라우터(App Router)를 사용하면 페이지별로 metadata를 설정하여 SEO(검색 엔진 최적화)를 개선할 수 있습니다. 이 글에서는 프로젝트에서 metadata를 적용한 방법을 공유합니다.

---

metadata 설정하기

Next.js 13 이상에서는 generateMetadata 함수를 활용하여 동적으로 metadata를 생성할 수 있습니다. 저는 프로젝트에서 각 페이지에 맞는 title과 description을 설정하여 SEO를 향상시켰습니다.

1. metadataMap 정의

먼저, metadataMap 객체를 생성하여 페이지별 metadata를 관리합니다.

export const metadataMap = {
  default: {
    title: 'Wikied - 사용자 정의 위키 페이지 생성 및 편집',
    description:
      'Wikied는 위키 페이지를 사용자 정의로 생성하고 편집할 수 있는 플랫폼입니다.',
  },
  loginPage: {
    title: '로그인 - Wikied',
    description: 'Wikied에 로그인하고 다양한 위키 페이지를 확인해보세요.',
  },
  signupPage: {
    title: '회원가입 - Wikied',
    description: '지금 회원가입하고 나만의 위키 페이지를 만들어보세요.',
  },
  myPage: {
    title: '내 정보 - Wikied',
    description: '내 정보 및 활동을 관리하는 마이 페이지입니다.',
  },
};

위와 같이 metadataMap을 정의하면 여러 페이지에서 일관된 메타데이터를 쉽게 적용할 수 있습니다.

2. 기본 metadata 설정

RootLayout.tsx에서 metadataMap.default를 metadata로 설정하여 기본 메타데이터를 적용합니다.

import { metadataMap } from './metadata';

export const metadata = metadataMap.default;

3. 특정 페이지에서 동적 metadata 적용하기

유저 프로필 페이지에서는 유저 데이터를 기반으로 동적으로 metadata를 생성해야 합니다. 이를 위해 generateMetadata를 사용합니다.

import { getProfile } from '@/api/profile/profile';
import { getProfileCode } from '@/api/profile/profileCode';
import { metadataMap } from '@/app/metadata';

export async function generateMetadata({ params }: { params: { id: string } }) {
  const profileList = await getProfile(1, 200);
  const codeId = profileList?.list.find((item) => item.id === parseInt(params.id))?.code;
  const profileCodeResponse = await getProfileCode(codeId ?? '');

  if (profileCodeResponse) {
    return {
      title: `${profileCodeResponse.name}님의 프로필`,
      description: '유저의 개인 페이지입니다. 정보 및 활동을 확인할 수 있습니다.',
      openGraph: {
        title: `${profileCodeResponse.name}님의 프로필`,
        description: '유저의 개인 페이지입니다. 정보 및 활동을 확인할 수 있습니다.',
        url: `${process.env.NEXT_PUBLIC_BASE_URL}/user/${params.id}`,
        images: [
          {
            url: profileCodeResponse.image || '/default-image.jpg',
            width: 800,
            height: 600,
            alt: `${profileCodeResponse.name}님의 프로필 이미지`,
          },
        ],
      },
    };
  }
  return metadataMap.default;
}

이렇게 하면 유저의 프로필 페이지에 방문할 때, 해당 유저의 이름과 프로필 이미지가 포함된 metadata가 적용됩니다.

---

기대 효과

✅ SEO 개선

페이지별 적절한 title과 description을 설정하면 검색 엔진에서 사이트를 더 잘 인식할 수 있습니다.

✅ SNS 공유 최적화

openGraph 데이터를 설정하면 SNS에서 공유할 때 더 깔끔한 미리보기가 제공됩니다.

✅ 유지보수 용이성

metadataMap을 활용하여 각 페이지의 메타데이터를 한 곳에서 관리할 수 있어 유지보수가 쉽습니다.

---

결론

Next.js의 generateMetadata와 metadataMap을 활용하면 SEO와 SNS 공유 최적화를 효과적으로 적용할 수 있습니다.