Crear metadatos en el enrutamiento dinámico de Next.js

Mientras buscaba cómo añadir metadata para la optimización en motores de búsqueda, encontré en velog el artículo de Doeunnkimm y estaba inyectando los metadatos de forma estática.

Al empezar a publicar, quise poner metadata diferente para cada post en el enrutamiento dinámico.

Así que, a modo de repaso, lo dejo escrito una vez.

1. Código

Primero, el código obtenido del velog anterior es el siguiente.

// Primero se configuran los metadatos básicos necesarios.
const META = {
  title: "블로그 제목",
  siteName: "사이트이름",
  description: "블로그에 대한 대략적인 설명",
  keyword: ["배열", "형태의", "키워드"],
  url: "https://sample.kr",
  googleVerification: "xxx", //구글 서치콘솔
  naverVerification: "xxx", //네이버 서치어드바이저
  ogImage: "https://sample.kr/assets/thumbnail.png", // 썸네일,
} as const;

// Se configura la metadata utilizando la función getMetadata.
// Con la siguiente función basta para generar la mayoría de los metadatos necesarios en la mayoría de los sitios.
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;
};

Y se llama a este código desde layout.tsx para utilizarlo.

Al generar la metadata y exportarla, se crean los metadatos de la página principal.

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

// Se exporta el objeto de metadata
export const metadata: Metadata = {
  // Se trae el objeto utilizando el operador de propagación ..,
  ...getMetadata(),

  // Si se quiere usar otro título, se puede hacer de la siguiente manera.
  ...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>
  );
}

Si entras en tu propia página web, pulsas la tecla F12 y miras la etiqueta <head>, puedes comprobar la meatadata.

Crear metadatos en el enrutamiento dinámico de Next.js-1

2. Enrutamiento dinámico y metadata

En el enrutamiento dinámico utilicé la función generateMetadata.

La explicación sobre esto está en el blog anterior o en la documentación oficial de Nextjs.

Crear metadatos en el enrutamiento dinámico de Next.js-2

Lo esencial de este artículo es que, al crear metadata, se puede utilizar el objeto que se usa en el enrutamiento dinámico.

Yo utilicé un Json que contenía el slug y la lista de posts para crear los metadatos.

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

  // Se llama al json de la lista de categorías
  const categoryData = fs.readFileSync(categoryJsonPath, "utf-8");
  const categorys: postCardFrontMatter[] = JSON.parse(categoryData);

  // Se busca y devuelve un solo elemento cuyo slug y url sean iguales a los actuales.
  const baseMetaData = categorys.find(
    (category) => category.postUrlPath === slug
  );

  // Se configura la metadata utilizando esto
  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. Comentarios finales

Normalmente se utiliza mucho el depurador para compartir de Facebook.

Pero como yo no tengo cuenta de Facebook, simplemente hice pruebas con KakaoTalk.

La desventaja es que tarda un poco en mostrarse la imagen.

Crear metadatos en el enrutamiento dinámico de Next.js-3

Al principio la imagen no se veía, pero cuando volví a mirar al día siguiente, se mostraba bien.

Parece que tiene su encanto ir creándolo todo poco a poco.

목차

Crear metadatos en el enrutamiento dinámico de Next.js

1. Código

2. Enrutamiento dinámico y metadata

3. Comentarios finales