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

nextjs로 해보고 싶었던 것이 있다면 Metadata API 를 활용해서 간단하게 metadata tag를 달아주는 게 아닐까 싶다.
오늘은 그 중 페이지 파람에 따라 다이내믹하게 메타태그를 생성할 수 있는 방법에 대해 다루고자 한다.

Tripie 앱은 크게 두 가지 서비스를 제공하는데,

트리플에서 스크래핑한 여행지에 대한 팁, 지역 정보나 식당 정보, 여행 일정 팁 등을 열람할 수 있다.
챗지피티 기반으로 사용자의 기호에 따라 여행일정을 작성해 준다.

이 중 메타태그로 삼을 데이터들이 모두 준비된 첫 번째인 여행지 정보에 대한 페이지들에 메타태그를 추가해주고자 한다.

공식문서를 살펴보면, 메타태그를 달 수 있는 방법은 두가지다.

Config 기반 : static metadata object나 dynamic generateMetadata 함수를 layout.js나 page.js 파일에 export하는 방식
File 기반 : static이나 dynamic 하게 생성된 아래의 특정 파일들을 route segment에 추가는 방식

위의 명시된 파일들을 활용하는 것이 아니므로 Config 기반의 generateMetadata 함수를 export하는 방식을 택한다.

‼ 여기서 중요한 점‼
generateMetadata으로 제공된 static이나 dynamic 메타데이터 모두 ServerComponent 에만 지원되고,
Fetch 요청은 generateMetadata, generateStaticParams, Layouts, Pages, and Server Components 사이에 모두 자동적으로 memoize된다. 만약 fetch 가 불가능하다면 react cache를 사용할 수 있다. nextjs는 UI를 클라이언트에게 stream 하기 전에 generateMetadata 안의 데이터 fetch 완료를 기다리기 때문에, stream되는 응답이 <head> 태그를 포함될 수 있도록 보장한다.

tripie의 아티클 종류는 3가지로 나뉘어 articles/attractions/restaurant이 있다.

예를 들어 https://tripie-mauve.vercel.app/regions/23c5965b-01ad-486b-a694-a2ced15f245c/articles/2c05edb7-0e01-4b16-99a1-ce304b4fa996를 살펴보면

나가사키 3박 4일 여행 코스

여행자들에게 추천하는 최적의 일정과 루트

tripie-mauve.vercel.app

그리고 페이지 구조는 다음과 같다.

/regions
| /[regionId] (지역 ID, 23c5965b-01ad-486b-a694-a2ced15f245c)
| | [articles] (아티클 ID, e96c2b79-849c-453f-8c0c-7950dc2754c7)
| | ㄴ page.tsx
| | [attractions] (관광명소 ID)
| | ㄴ page.tsx
| | [restaurant] (식당 ID)
| | ㄴ page.tsx
| | [location] (검색 ID, regions/일본)
| | ㄴ page.tsx
| ㄴ page.tsx
ㄴ page.tsx

attraction과 restaurant는 타입이 유사하지만 attraction은 좀 다른 형태다.

먼저 /articles를 살펴보면 다음과 같은 데이터 타입이고,

export type ArticleData = {
  body: BodyItemProps[];
  header: null;
  metadata: Metadata;
  metadataContents: MetaDataContents;
  placeId: string;
  seoMetadata: null;
  id: string;
};

export type MetaDataContents = {
  image: TripieMetaImage;
  title?: string;
  description?: string;
};

이중 metadataContents의 데이터를 사용할 예정이다. 메타태그에 설정할 수 있는 값들은 공식 문서에서 확인 가능하다.

여기서 궁금한 점 og:title이랑 그냥 title이 있는데 차이가 뭐지?

🔹 1. Open Graph Meta Tags (og:)

Purpose: Used for social media sharing (Facebook, Twitter, LinkedIn, etc.).
Effect: Controls how links appear when shared (title, description, image, etc.).
Prefix: Uses og: (e.g., og:title, og:image).

🔹 2. Regular Meta Tags (meta)

Purpose: Used for SEO and general metadata (title, description, viewport settings, etc.).
Effect: Helps search engines like Google understand and index content.
Prefix: No prefix (e.g., meta name="description").

정리하자면,

open graph 태그는 (og:)를 붙여서 'property="og:image"' 형태로 사용되며, 소셜 미디어에 공유될 링크가 보이는 모습에 관여하고,

일반 meta 태그는 name="title"과 같이 사용되며, 구글과 같이 검색 엔진이 콘텐츠를 이해하고 인덱싱 하기 위해 사용되어 SEO 향상에 도움을 준다.

즉, 검색엔진에 노출시키고 싶고, 소셜 미디어로 공유할 때 링크 카드도 꾸며서 보이고 싶다면 둘 다 사용해야 한다는 것이다.

// https://nextjs.org/docs/app/building-your-application/optimizing/metadata
type Props = {
  params: Promise<{ regionId: string; articleId: string }>;
};

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

  const { data } = await getArticleDetail('article', regionId, articleId);

  const previousImages = (await parent).openGraph?.images || [];
  const description = data?.metadataContents?.description ?? '';
  const title = '✈️Tripie | '+ data?.metadataContents?.title ?? '';

  return {
    title,
    description,
    openGraph: {
      images: [data?.metadataContents.image.sizes?.full?.url ?? '', ...previousImages],
      type: 'website',
      url: `${API.BASE_URL}${ROUTE.REGIONS.href}/${regionId}/articles/${articleId}`,
      title,
      description,
      siteName: 'Tripie',
    },
  };
}

다음과 같이 작성해 주면 다음과 같이 배포된 사이트의 elements 탭을 열어봐서 메타태그가 적용된 것을 확인할 수 있다.

이번에는 restaurants와 attractions를 살펴보고자 한다. 유사하게 generateMetadata를 각 경로 [restaurants]/[articleId]/page.tsx 그리고 [attractions]/[articleId]/page.tsx에 추가해 주면 된다.

type Props = {
  params: Promise<{ regionId: string; articleId: string }>;
};

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

  const { data } = await getArticleDetail('retaurant', regionId, articleId);

  const previousImages = (await parent).openGraph?.images || [];
  const title =
    data?.source.names.primary ?? data?.source.names.ko ?? data?.source.names.en ?? data?.source.names.local ?? '';
  const description = data?.source?.comment ?? '';

  return {
    title: `✈️Tripie | ${title}`,
    description,
    openGraph: {
      images: [data?.source.image.sizes.full.url ?? '', ...previousImages],
      type: 'website',
      url: `${API.BASE_URL}${ROUTE.REGIONS.href}/restaurant/${regionId}/${articleId}`,
      title: `✈️Tripie | ${title}`,
      description,
      siteName: 'Tripie',
    },
  };
}

https://www.opengraph.xyz/url/https%3A%2F%2Ftripie-mauve.vercel.app%2Fregions%2F23c5965b-01ad-486b-a694-a2ced15f245c%2Farticles%2F8c0aae20-b057-49c9-8420-cb8026c4a41a 에서 카카오톡 이외의 소셜 미디어로 각각 공유했을 때 모습을 확인하면 다음과 같다.

(+추가) SEO 향상에 도움을 주는가 확인하려고 lighthouse로 지표를 측정해 보니, 훌쩍 뛰었다!

TODO'S

-이렇게 하니 메타 태그 추가는 되었다! 다만 중복되는 부분들을 제거할 수 있는 방법이 없나 찾아보니, 상위의 page 나 layout의 메타태그를 하위의 파일에 작성하면 덮어쓸 수 있다는 점이다. ~~하지만 현재 파일들의 구조와는 부적합하므로 좀 더 고민을 하고 개선 방안을 찾아봐야겠다.~~ (해당 포스트에서 적절하게 반영해보았다)

- 페이지별로 점수가 왔다 갔다 하는데, 확실히 도입 이전보다는 높다. 아직 최적화 단계는 도입 전이기 때문이다. 테스트 코드들을 먼저 짜고, 리펙토링을 진행 후, 그다음에 도입할 예정이다.

REFERENCES

https://nextjs.org/docs/app/building-your-application/optimizing/metadata

Optimizing: Metadata | Next.js

Use the Metadata API to define metadata in any layout or page.

nextjs.org

'👩🏻‍💻 dev' 카테고리의 다른 글

👋 굿바이 CRA (Sunsetting Create React App) (1)	2025.03.09
[Nextjs] Dynamic metadata tag 생성하기 (Part.2) (1)	2025.02.26
Nextjs blurDataUrl dynamic하게 제공하기 (1)	2025.02.15
polling mechanism으로 react ref 확인하기 (0)	2025.01.22
puppeteer aws lambda에 배포하기 (0)	2024.11.02

🥕 pyotato's dev farm

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

🔹 1. Open Graph Meta Tags (og:)

🔹 2. Regular Meta Tags (meta)

TODO'S

REFERENCES

'👩🏻‍💻 dev' 카테고리의 다른 글

티스토리툴바

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

🔹 1. Open Graph Meta Tags (og:)

🔹 2. Regular Meta Tags (meta)

TODO'S

REFERENCES

'👩🏻‍💻 dev' 카테고리의 다른 글

'👩🏻‍💻 dev' Related Articles

티스토리툴바