Lección 12. Metadatos y SEO.

Los metadatos son información y datos que ayudan a los buscadores a relacionar nuestra pagina con contenido de búsqueda, así mismo, dependiendo de estos tipos de datos proporcionados, los buscadores tienen una breve descripción de cuan confiable y de calidad es nuestro sitio.

Podemos obtener más información, en el apartado de información dentro de la pagina oficial de Next.js:

https://nextjs.org/docs/app/getting-started/metadata-and-og-images.

Metadatos default definidos por Next.js._

En Next.js existen dos etiquetas predeterminadas que siempre se agregan incluso si una ruta no define metadatos.

Estos son:

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

Nota: Gracias a la etiqueta uft-8, es que todo este tiempo, nuestra aplicación NO ha tenido problemas con símbolos como ñ o acentos.

Agregado de metadatos estáticos._

En cualquier pagina (tanto dentro de un layout.tsx, como en un page.tsx), si deseamos colocar metadatos de texto estático, seria tan simple como agregar un objeto exportado en nuestro archivo, como el siguiente ejemplo:

export const metadata = {
  title: "Recuperar contraseña",
  description: "Página de recuperación de contraseña"
}

Nota: El código anterior, al colocarse en un archivo, colocará el title de la pagina como Recuperar contraseña, y description con valor de Página de recuperación de contraseña.

Veamos un ejemplo de un archivo completo:

export const metadata = {
  title: "Recuperar contraseña",
  description: "Pagina de recuperación de contraseña"
}

export default function forgotPassword() {
  return (
    <h1>Recuperar contraseña</h1>
  );
}

Nota: Nuestro archivo layout.tsx principal, contiene por default el código:

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}

Cualquier pagina, cuyos metadatos no sean definidos, obtendrá estos metadatos (metadatos globales del proyecto).

Agregando metadatos dinámicos._

Como realizamos anteriormente, si deseamos nombrar metadatos de manera dinámica (como sucedió con rutas dinámicas), nuestro código de lógica cambia un poco.

import { Metadata } from "next";

type Props = {
  params: {
    productId :string;
  }
}

export const generateMetadata = ({params}: Props): Metadata => {
  return {
    title: `Producto ${params.productId}`
  }
}

export default function ProductDetail ({params}: Props) {
  return (
    <h1>Producto {params.productId}</h1>
  );
}

De este modo, obtenemos el productId de una ruta dinámica y utilizamos para colocarlo como title de pagina.

Nota: Para este tipo de metadatos dinámicos, necesitamos la importar la función de Metadata, disponible de Next.js.