[Nextjs] Dynamic metadata tag 생성하기 (Part.2)

2025.02.25 - [👩🏻‍💻 dev] - [Nextjs] Dynamic metadata tag 생성하기 (SEO 지표 54 ➡️ 91)

[Nextjs] Dynamic metadata tag 생성하기 (SEO 지표 54 ➡️ 91)

 

이전에는 /region 경로의 페이지들에 대한 메타데이터를 붙여줬다.
하지만 당시 중복되는 부분이 많은 거 같아서 좀 더 간결하게 할 수 있는 방법을 찾아보니, 
상위의 페이지에 공유할 메타데이터 객체를 만들어 쓸 수 있다는 점이다.

파일 구조

/regions/[regionId] 에서 예를 들면,

/regions/대한민국의 페이지가 있고,

/regions/[regionId]/articles/[articleId] 의 /regions/[지역아이디]/articles/[아이클 아이디] 가 있고 (restaurants 와 attraction은 동일)

그리고 마지막으로 regions/[regionId]/location/[locationId]처럼 regions/대한민국/location/[제주도의 아이디]가 있다.

 

근데 각각의 metaData에서 다음과 같은 값들은 공통이다.

• type: 'website'
• siteName: 'Tripie'
• title : '✈️Tripie' 라는 접미사가 있어야 한다.

그 외의 title과 description은 페이지의 데이터에 따라 달라져야 한다.

이를 반영하면 공통으로 sharedMetaData 함수를 /region 에 작성해 주면 다음과 같다.

title은 template을 활용하면 제목의 끝에 항상 ✈️Tripie가 붙도록 할 수 있다.

그리고 default 설정을 통해 fallback 을 제공할 수 있다.

import API from 'constants/api-routes';
import { Metadata } from 'next';

// http://nextjs.org/docs/app/api-reference/functions/generate-metadata#template
export const sharedMetaData: Metadata['openGraph'] = {
  title: {
    template: '%s | ✈️Tripie',
    default: '✈️Tripie',
  },
  type: 'website',
  siteName: 'Tripie',
  description: 'AI enhanced trip planner',
  images: [API.BASE_URL + '/tripie-image.png'],
};

 

그리고 /regions 의 layout.tsx 에 import해서 일반 메타데이터와 og 메타데이터에 추가해 주면 

export const metadata: Metadata = {
  title: sharedMetaData?.title,
  description: sharedMetaData?.description,
  openGraph: sharedMetaData,
};

 

https://tripie-mauve.vercel.app/regions에 접속하면 다음과 같이 디폴트 메타태그가 보인다.

✈️Tripie

 

하지만 추가적으로 검색에 대한 정보를 미리보기로 제공하고 싶어 page.tsx에 다음과 같이 추가해주고, 이전 작성했던 

layout.tsx의 코드를 제거해주면 https://tripie-mauve.vercel.app/regions은 다음과 같이 공유할 수 있다. (왜인지 모르겠지만 티스토리 에디터에서는 수정 이전의 카드만 보임)

✈️Tripie

export async function generateMetadata(): Promise<Metadata> {
  const regions = Object.keys(TRIPIE_REGION_BY_LOCATION);
  const title = `도시 별 여행 정보 살펴보기`;

  const description = `${regions
    .slice(0, 3)
    .map(key => {
      return `✔️ ${key} | ${TRIPIE_REGION_BY_LOCATION[key as keyof typeof TRIPIE_REGION_BY_LOCATION]}`;
    })
    .join('\n')}...\n👉 트리피에서 자세히 알아보기!`;

  return {
    title,
    description,
    openGraph: {
      ...sharedMetaData,
      title,
      description,

      url: `${API.BASE_URL}${ROUTE.REGIONS.href}`,
    },
  };
}

 

 

/regions/대한민국

export async function generateMetadata({ params }: Props, parent: ResolvingMetadata): Promise<Metadata> {
  const regionId = (await params).regionId;

  const currentRegionId = decodeURI(regionId);
  const selected = TRIPIE_REGION_BY_LOCATION[currentRegionId as keyof typeof TRIPIE_REGION_BY_LOCATION];
  const selectedRegion = Object.keys(TRIPIE_REGION_IDS).filter(
    item => TRIPIE_REGION_IDS[item as keyof typeof TRIPIE_REGION_IDS] === selected[0]
  )?.[0];

  const dynamicBlurDataUrl = await getRegionArticles(selectedRegion);

  const previousImages = (await parent).openGraph?.images || [];
  const title = `도시 별 여행 정보 > ${currentRegionId}`;
  const sneakPeak = dynamicBlurDataUrl.slice(0, 5);
  const description = `${currentRegionId} 여행 정보\n ${sneakPeak
    .map(item => {
      return `✔️ ${item.source.title} | ${item.source.summary}`;
    })
    .join('\n')}\n...\n👉 트리피에서 자세히 알아보기!`;

  return {
    title,
    description,
    openGraph: {
      ...sharedMetaData,
      title,
      description,
      images: [...sneakPeak.map(item => item.source.image.sizes.full.url), ...previousImages],
      url: `${API.BASE_URL}${ROUTE.REGIONS.href}/${selectedRegion}`,
    },
  };
}

https://tripie-mauve.vercel.app/regions/%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD에 접속하면 다음과 같이 필터 한 정보로 덮어쓴 메타데이터를 확인할 수 있다.

도시 별 여행 정보 > 대한민국 | ✈️Tripie

 

/regions/대한민국/locationId/제주Id

export async function generateMetadata({ params }: Props, parent: ResolvingMetadata): Promise<Metadata> {
  const regionId = (await params).regionId;
  const locationId = (await params).locationId;

  const currentRegionId = decodeURI(regionId);

  const dynamicBlurDataUrl = await getRegionArticles(locationId);

  const currentCity = TRIPIE_REGION_IDS[locationId as keyof typeof TRIPIE_REGION_IDS];

  const previousImages = (await parent).openGraph?.images || [];
  const title = `도시 별 여행 정보 > ${currentRegionId} > ${currentCity}`;
  const sneakPeak = dynamicBlurDataUrl.slice(0, 5);
  const description = `${currentRegionId} > ${currentCity} 여행 정보\n${sneakPeak
    .map(item => {
      return `✔️ ${item.source.title} |  ${item.source.summary}`;
    })
    .join('\n')}\n...\n👉 트리피에서 자세히 알아보기!`;

  return {
    title,
    description,
    openGraph: {
      ...sharedMetaData,
      title,
      description,
      images: [...sneakPeak.map(item => item.source.image.sizes?.full.url), ...previousImages], // 새 이미지 먼저
      url: `${API.BASE_URL}${ROUTE.REGIONS.href}/${currentRegionId}/location/${currentCity}`,
    },
  };
}

 

https://tripie-mauve.vercel.app/regions/%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD/location/759174cc-0814-4400-a420-5668a0517edd 로 접속하면 대한민국> 제주로 덮었쓴 메타데이터가 잘 공유된다는 것을 확인할 수 있다.

도시 별 여행 정보 > 대한민국 > 제주 | ✈️Tripie

 

마찬가지로 /regions/대한민국/locationId/포항*안동Id 도 해당 페이지의 데이터로 덮어쓴 메타데이터를 확인할 수 있다.

 

https://tripie-mauve.vercel.app/regions/%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD/location/7bbb0a8b-63f6-4c41-811b-153c314ca0b2

도시 별 여행 정보 > 대한민국 > 포항·안동 | ✈️Tripie

 

!! 이때 주의할 점은 images 배열에 먼저 보이고 싶은 항목을 먼저 배치해야 한다. 만약 이전의 메타태그 이미지들이 먼저 보이도록 하고 싶다면 [...previousImages, ...다음에 보일 이미지] 순서로 변경해줘야 한다.