App Router: Adición de Metadatos

Los metadatos son cruciales para el SEO y la capacidad de compartir contenido. En este capítulo, discutiremos cómo puedes añadir metadatos a tu aplicación Next.js.

¿Qué son los metadatos?

En el desarrollo web, los metadatos proporcionan detalles adicionales sobre una página web. Los metadatos no son visibles para los usuarios que visitan la página. En cambio, funcionan detrás de escena, incrustados dentro del HTML de la página, generalmente dentro del elemento <head>. Esta información oculta es crucial para los motores de búsqueda y otros sistemas que necesitan entender mejor el contenido de tu página web.

¿Por qué son importantes los metadatos?

Los metadatos juegan un papel significativo en la mejora del SEO de una página web, haciéndola más accesible y comprensible para los motores de búsqueda y plataformas de redes sociales. Los metadatos adecuados ayudan a los motores de búsqueda a indexar las páginas web de manera efectiva, mejorando su posicionamiento en los resultados de búsqueda. Además, metadatos como Open Graph mejoran la apariencia de los enlaces compartidos en redes sociales, haciendo el contenido más atractivo e informativo para los usuarios.

Tipos de metadatos

Existen varios tipos de metadatos, cada uno con un propósito único. Algunos tipos comunes incluyen:

Metadatos de título: Responsables del título de una página web que se muestra en la pestaña del navegador. Es crucial para el SEO ya que ayuda a los motores de búsqueda a entender de qué trata la página.

<title>Título de la página</title>

Metadatos de descripción: Estos metadatos proporcionan un breve resumen del contenido de la página y a menudo se muestran en los resultados de los motores de búsqueda.

<meta name="description" content="Una breve descripción del contenido de la página." />

Metadatos de palabras clave: Estos metadatos incluyen palabras clave relacionadas con el contenido de la página, ayudando a los motores de búsqueda a indexar la página.

<meta name="keywords" content="palabraclave1, palabraclave2, palabraclave3" />

Metadatos Open Graph: Estos metadatos mejoran la forma en que una página web se representa cuando se comparte en plataformas de redes sociales, proporcionando información como el título, descripción e imagen de vista previa.

<meta property="og:title" content="Título aquí" />
<meta property="og:description" content="Descripción aquí" />
<meta property="og:image" content="url_de_la_imagen_aquí" />

Metadatos de favicon: Estos metadatos vinculan el favicon (un icono pequeño) a la página web, mostrándose en la barra de direcciones o pestaña del navegador.

<link rel="icon" href="ruta/al/favicon.ico" />

Añadiendo metadatos

Next.js tiene una API de Metadatos que puede usarse para definir los metadatos de tu aplicación. Hay dos formas de añadir metadatos a tu aplicación:

Basado en configuración: Exporta un objeto metadata estático o una función dinámica generateMetadata en un archivo layout.js o page.js.
Basado en archivos: Next.js tiene una variedad de archivos especiales que se usan específicamente para propósitos de metadatos:
- favicon.ico, apple-icon.jpg e icon.jpg: Utilizados para favicons e iconos
- opengraph-image.jpg y twitter-image.jpg: Empleados para imágenes de redes sociales
- robots.txt: Proporciona instrucciones para el rastreo de motores de búsqueda
- sitemap.xml: Ofrece información sobre la estructura del sitio web

Tienes la flexibilidad de usar estos archivos para metadatos estáticos, o puedes generarlos programáticamente dentro de tu proyecto.

Con ambas opciones, Next.js generará automáticamente los elementos <head> relevantes para tus páginas.

Favicon e imagen Open Graph

En tu carpeta /public, notarás que tienes dos imágenes: favicon.ico y opengraph-image.jpg.

Mueve estas imágenes a la raíz de tu carpeta /app.

Después de hacer esto, Next.js identificará y usará automáticamente estos archivos como tu favicon e imagen OG. Puedes verificarlo revisando el elemento <head> de tu aplicación en las herramientas de desarrollo.

Nota útil: También puedes crear imágenes OG dinámicas usando el constructor ImageResponse.

Título y descripciones de página

También puedes incluir un objeto metadata desde cualquier archivo layout.js o page.js para añadir información adicional de la página como título y descripción. Cualquier metadato en layout.js será heredado por todas las páginas que lo usen.

En tu layout raíz, crea un nuevo objeto metadata con los siguientes campos:

/app/layout.tsx

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Panel Acme',
  description: 'El panel oficial del Curso Next.js, construido con App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};
 
export default function RootLayout() {
  // ...
}

Next.js añadirá automáticamente el título y los metadatos a tu aplicación.

Pero, ¿qué pasa si quieres añadir un título personalizado para una página específica? Puedes hacer esto añadiendo un objeto metadata a la página misma. Los metadatos en páginas anidadas sobrescribirán los metadatos del padre.

Por ejemplo, en la página /dashboard/invoices, puedes actualizar el título de la página:

/app/dashboard/invoices/page.tsx

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Facturas | Panel Acme',
};

Esto funciona, pero estamos repitiendo el título de la aplicación en cada página. Si algo cambia, como el nombre de la empresa, tendrías que actualizarlo en cada página.

En su lugar, puedes usar el campo title.template en el objeto metadata para definir una plantilla para tus títulos de página. Esta plantilla puede incluir el título de la página y cualquier otra información que quieras incluir.

En tu layout raíz, actualiza el objeto metadata para incluir una plantilla:

/app/layout.tsx

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: {
    template: '%s | Panel Acme',
    default: 'Panel Acme',
  },
  description: 'El panel oficial del Curso Next.js construido con App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};

El %s en la plantilla será reemplazado con el título específico de la página.

Ahora, en tu página /dashboard/invoices, puedes añadir el título de la página:

/app/dashboard/invoices/page.tsx

export const metadata: Metadata = {
  title: 'Facturas',
};

Navega a la página /dashboard/invoices y revisa el elemento <head>. Deberías ver que el título de la página ahora es Facturas | Panel Acme.

Práctica: Añadiendo metadatos

Ahora que has aprendido sobre metadatos, practica añadiendo títulos a tus otras páginas:

Página /login.
Página /dashboard/.
Página /dashboard/customers.
Página /dashboard/invoices/create.
Página /dashboard/invoices/[id]/edit.

La API de Metadatos de Next.js es potente y flexible, dándote control total sobre los metadatos de tu aplicación. Aquí te hemos mostrado cómo añadir algunos metadatos básicos, pero puedes añadir múltiples campos, incluyendo keywords, robots, canonical, y más. Siéntete libre de explorar la documentación, y añade cualquier metadato adicional que desees a tu aplicación.

Adición de Metadatos