在 Next.js 动态路由中生成元数据（metadata）

为了进行搜索引擎优化，我在搜索如何插入 metadata 的过程中，看到了 velog 上 Doeunnkimm 的文章，于是就在静态地注入元数据。

开始写文章之后，我就希望在动态路由中，为每一篇文章设置不同的 metadata。

所以也当作复习，记录一次。

1. 代码

首先，在上面提到的 velog 中拿到的代码如下：

// 먼저 기본적으로 필요한 메타 데이터를 설정한다.
const META = {
  title: "블로그 제목",
  siteName: "사이트이름",
  description: "블로그에 대한 대략적인 설명",
  keyword: ["배열", "형태의", "키워드"],
  url: "https://sample.kr",
  googleVerification: "xxx", //구글 서치콘솔
  naverVerification: "xxx", //네이버 서치어드바이저
  ogImage: "https://sample.kr/assets/thumbnail.png", // 썸네일,
} as const;

// getMetadata 함수를 이용해 metadata를 설정한다.
// 아래 함수 하나면 대부분의 사이트에서 필요한 metadata는 끝난다.
export const getMetadata = (metadataProps?: generateMetadataProps) => {
  const { title, description, asPath, ogImage } = metadataProps || {};

  const TITLE = title ? `${title} | 블로그 제목` : META.title;
  const DESCRIPTION = description || META.description;
  const PAGE_URL = asPath ? asPath : "";
  const OG_IMAGE = ogImage || META.ogImage;

  const metadata: Metadata = {
    metadataBase: new URL(META.url),
    alternates: {
      canonical: PAGE_URL,
    },
    title: TITLE,
    description: DESCRIPTION,
    keywords: [...META.keyword],
    openGraph: {
      title: TITLE,
      description: DESCRIPTION,
      siteName: TITLE,
      locale: "ko_KR",
      type: "website",
      url: PAGE_URL,
      images: {
        url: OG_IMAGE,
      },
    },
    verification: {
      google: META.googleVerification,
      other: {
        "naver-site-verification": META.naverVerification,
      },
    },
    twitter: {
      title: TITLE,
      description: DESCRIPTION,
      images: {
        url: OG_IMAGE,
      },
    },
    icons: {
      icon: "/favicon/favicon.ico",
    },
  };

  return metadata;
};

然后在 layout.tsx 中调用这段代码来使用。

生成 metadata 并将其导出后，就可以为主页生成元数据。

import "./globals.css";
import { Metadata } from "next";
import { getMetadata } from "@/utils/getMetadata";

// 메타데이터 객체를 내보냄
export const metadata: Metadata = {
  // 전개연산자 ..,를 이용해 객체를 가져온다.
  ...getMetadata(),

  // 만일 다른 제목을 쓰고 싶다면 아래와 같이 하면 된다.
  ...getMetadata({ title: "다른제목" }),
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <body className="h-svh">
        <div>
          <div className="mx-auto max-w-7xl p-6 lg:px-8">{children}</div>
        </div>
      </body>
    </html>
  );
}

进入自己的网站后按 F12，然后查看 <head> 标签，就可以确认 metadata。

在 Next.js 动态路由中生成元数据（metadata）-1

2. 动态路由与 metadata

在动态路由中，我使用了 generateMetadata 函数。

相关说明可以参考上面那篇博客，或 Nextjs 官方文档。

在 Next.js 动态路由中生成元数据（metadata）-2

这篇文章的关键在于：在生成 metadata 时，可以利用动态路由中使用的对象。

我是通过 slug 和包含文章列表的 Json 来生成元数据的。

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}) {
  const { slug } = await params;

  //카테고리 목록 json을 호출함
  const categoryData = fs.readFileSync(categoryJsonPath, "utf-8");
  const categorys: postCardFrontMatter[] = JSON.parse(categoryData);

  // 현재의 slug와 url이 동일한 것을 1개 찾아 반환함.
  const baseMetaData = categorys.find(
    (category) => category.postUrlPath === slug
  );

  //이것을 이용해 메타데이터 설정
  const metadata: Metadata = {
    ...getMetadata({
      title: baseMetaData?.data.title,
      description: baseMetaData?.data.description,
      asPath: `https://earthscience.kr/posts/${slug}`,
      ogImage:
        baseMetaData?.data.thumbnail &&
        `https://earthscience.kr/posts/${slug}/${baseMetaData.data.thumbnail}`,
    }),
  };
  return metadata;
}

3. 后记

一般大家都经常使用 Facebook 的 分享调试工具。

不过我没有 Facebook 账号，所以就直接用 KakaoTalk 来测试了。

缺点是图片显示出来要花一点时间。

在 Next.js 动态路由中生成元数据（metadata）-3

一开始图片是看不到的，第二天再看的时候图片就能正常显示了。

一点一点地做出来，感觉还是挺有趣的。

목차

在 Next.js 动态路由中生成元数据（metadata）

1. 代码

2. 动态路由与 metadata

3. 后记