[NextJS, SEO] AppRouter Dynamic Metadata 생성하기

• 📒 [NextJS, SEO] AppRouter Dynamic Metadata 생성하기
  • 📌 정적 메타데이터 생성
  • 📌 동적 메타데이터 생성
  • 📌 실사용 예시

📒 [NextJS, SEO] AppRouter Dynamic Metadata 생성하기

---

동적인 메타데이터를 사용하면 페이지마다 맞춤화된 메타 정보를 제공할 수 있습니다.

 

이를 통해 검색 엔진이 페이지의 목적과 내용을 더 정확히 이해할 수 있어 SEO를 향상시킬 수 있고,

example.com/post/123와 example.com/post/456처럼 같은 페이지여도 독립적으로 색인될 가능성이 증가합니다.

 

📌 정적 메타데이터 생성

NextJS에서 정적 메타데이터를 생성하는 방법은 다음과 같습니다.

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

간단하게 각 layout.tsx 혹은 page.tsx에서 Metadata 객체를 내보내기 하면 됩니다.

 

📌 동적 메타데이터 생성

export function generateMetadata(): Metadata {
  return {
    title: '홈페이지',
  }
}

// or

export async function generateMetadata(
  { params, searchParams }: Props, parent: ResolvingMetadata
): Promise<Metadata> {
  const data = await fetch('...');
  return {
    title: data.title,
  }
}

각 layout.tsx 혹은 page.tsx에서 MetaData, Promise<Metadata>를 return하는 generateMetadata() 함수를 내보내기 하면 됩니다.

 

물론 이 함수는 서버 측에서 처리되며 페이지처럼 path parameter나 query parameter도 props로 받을 수 있어 동적으로 처리하기에 유리합니다.

또한 부모의 메타데이터도 ResolvingMetadata로 받아와 덮어씌우는 등 추가적인 작업을 할 수 있습니다.

 

📌 실사용 예시

적절한 예시가 될 지 모르겠지만, 제가 이번 프로젝트에서 사용했던 방식은 다음과 같습니다.

import { Metadata } from "next";

export class SeoUtil {
  static metadata(brand?: string, isGenerateDesc?: boolean) {
    const title = `${brand || "오픈프차"} | 프랜차이즈 정보분석`;
    const defaultDesc = `공정거래위원회의 가맹사업 정보공개서를 기반으로 창업 전, 프랜차이즈 본사 정보, 브랜드의 매출, 가맹점 수, 인테리어 금액, 창업 비용 정보를 편리하게 확인할 수 있습니다.`;
    const generatedDesc = `${brand}의 본사 정보, 브랜드의 매출, 가맹점 수, 인테리어 금액, 창업 비용 정보를 편리하게 확인하세요.`;
    const convertDesc = () => {
      if (brand && isGenerateDesc) return generatedDesc;
      return defaultDesc;
    };
    const description = convertDesc();

    const metadata: Metadata = {
      title,
      description,
      keywords: "프랜차이즈, 가맹사업, 프랜차이즈 정보분석, 프랜차이즈 매출, 프랜차이즈 창업, 창업, 창업 비용",
      openGraph: {
        title,
        description,
        siteName: "오픈프차 | 프랜차이즈 정보분석",
        locale: "ko_KR",
        type: "website",
        url: "https://openfranchise.kr",
        images: {
          url: "/og-image.jpg",
        },
      },
      verification: {
        google: "...",
        other: {
          "naver-site-verification": "...",
        },
      },
    };
    return metadata;
  }
}

큰 프로젝트가 아니여서 세부적으로 설정하지 않고 어느정도 템플릿을 맞춰 Metadata를 반환하는 함수를 하나 만들었습니다.

 

export const metadata = SeoUtil.metadata();

기본 메타데이터는 위와 같이 사용하고

 

type BrandPageParams = {
  params: {
    name: string;
  };
};

export async function generateMetadata({ params: { name } }: BrandPageParams) {
  try {
    const brandResponse = await BrandService.getBrand(name);
    const { brand, head } = brandResponse?.payload;
    const metadata = SeoUtil.metadata(`${brand?.brandNm} - ${head.jnghdqrtrsConmNm}`, true);
    return metadata;
  } catch (error) {
    console.error(error);
    return SeoUtil.metadata();
  }
}

가장 세부적으로 정해주어야 하는 메타데이터는 위와 같이 작동하도록 해봤습니다.