Cómo crear metadata dinámica en Next.js

La metadata es fundamental para mejorar el SEO de una aplicación web. En Next.js podemos definir títulos, descripciones, imágenes para redes sociales y otros datos de forma estática, pero una de las ventajas del App Router es que también podemos generar metadata dinámica según el contenido de cada página.

Esto resulta especialmente útil en blogs, tiendas online, plataformas educativas o cualquier aplicación donde cada página tenga información diferente.

Metadata estática

Para páginas cuyo contenido no cambia, podemos utilizar el objeto metadata dentro de layout.tsx o page.tsx:

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Mi Blog",
  description: "Artículos sobre desarrollo web y tecnología",
};

Next.js utilizará automáticamente estos valores para generar las etiquetas correspondientes dentro del <head>.

Metadata dinámica con generateMetadata

Cuando necesitamos que el título y la descripción dependan de un contenido específico, podemos utilizar generateMetadata.

Por ejemplo, imaginemos una ruta dinámica:

app/blog/[slug]/page.tsx

Podemos obtener el artículo y generar su metadata:

import type { Metadata } from "next";

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

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;

  const post = await getPost(slug);

  return {
    title: post.title,
    description: post.description,
  };
}

De esta manera, cada artículo puede tener automáticamente su propio título y descripción.

Agregar imágenes para redes sociales

También podemos configurar imágenes para mejorar la apariencia de nuestros enlaces cuando se comparten en Facebook, LinkedIn o X:

return {
  title: post.title,
  description: post.description,
  openGraph: {
    title: post.title,
    description: post.description,
    images: [
      {
        url: post.image,
        width: 1200,
        height: 630,
      },
    ],
  },
};

Esto permite que cada publicación tenga una imagen diferente dependiendo del contenido.

Evitar problemas de rendimiento

Una buena práctica es reutilizar las funciones que ya utilizamos para obtener los datos. Además, Next.js puede optimizar determinadas solicitudes realizadas durante la generación de metadata y el renderizado de la página.

También debemos evitar realizar consultas innecesarias. Si la página ya necesita obtener un artículo para mostrarlo, conviene estructurar el código para aprovechar correctamente la caché y las capacidades de Next.js.

Metadata como parte del SEO

La metadata dinámica no mejora directamente el contenido de una página, pero permite comunicar mejor a los buscadores y redes sociales qué contiene cada URL.

En un proyecto profesional podemos generar dinámicamente:

• title: título de la página.
• description: resumen del contenido.
• openGraph: información para Facebook, LinkedIn y otras plataformas.
• twitter: información específica para X.
• icons: favicon e iconos.
• alternates: URLs alternativas y canonical.
• robots: instrucciones para los buscadores.

generateMetadata es una herramienta especialmente útil cuando trabajamos con rutas dinámicas en Next.js. En lugar de utilizar el mismo título y descripción para todo el sitio, podemos generar metadata basada en cada producto, artículo, categoría o perfil.

La combinación de App Router + generateMetadata + datos dinámicos permite construir aplicaciones más profesionales, mejor organizadas y preparadas para SEO y para compartir contenido en redes sociales.