Next.js SEO
Cómo configurar la API de metadatos de Next.js: títulos, URL canónicas y Open Graph
Usa la API de metadatos de Next.js 16 para las plantillas de título, las URL canónicas, los metadatos dinámicos, las tarjetas Open Graph y las páginas de App Router basadas en datos.
Los metadatos son fiables cuando proceden de los mismos datos de ruta y reglas de URL que la página visible. Duplicar esa lógica en un segundo sistema del lado del cliente genera inconsistencias.
Usa los metadatos como datos de la ruta
El título de una página, su descripción, su URL canónica y su imagen para redes sociales describen un recurso concreto. Genéralos junto a la ruta a la que pertenece ese recurso. El layout raíz debe aportar valores predeterminados estables para el sitio; los layouts anidados pueden definir las convenciones de cada sección; y las páginas deben definir los valores específicos de cada entidad.
Esta jerarquía reduce la repetición y hace predecible el título final. También evita que un componente de cliente se encargue de los metadatos del documento después de la primera respuesta. Las exportaciones de metadatos funcionan en Server Components, el límite adecuado para acceder a datos privados y decidir las URL canónicas.
Define buenos valores predeterminados en el layout raíz
Configura metadataBase con el origen de producción y usa rutas relativas para las URL canónicas y las imágenes. Define una sola plantilla de título para que las páginas hijas aporten únicamente la parte significativa. Los valores predeterminados deben ser correctos para las rutas que no los sustituyan, en lugar de ser texto de relleno copiado en todas las páginas.
Mantén el nombre del sitio coherente entre los títulos, las tarjetas para redes sociales y los datos estructurados. Si los entornos de preproducción y producción necesitan orígenes públicos diferentes, obtén el origen permitido de la configuración del despliegue y muestra un error claro cuando falte, en lugar de generar silenciosamente URL de localhost.
export const metadata = {
metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL),
title: {
default: "Northstar",
template: "%s | Northstar",
},
openGraph: {
siteName: "Northstar",
type: "website",
},
};Genera metadatos para rutas dinámicas
generateMetadata recibe parámetros de ruta asíncronos en los proyectos actuales de App Router. Obtén la entidad, devuelve un título explícito de contenido no encontrado cuando no exista y construye la URL canónica a partir de su slug estable. No uses directamente un nombre visible en una URL, a menos que las mismas reglas de generación de slugs hayan creado la ruta.
La página y los metadatos suelen necesitar el mismo registro. Envuelve la función de datos con cache de React para evitar consultas duplicadas durante una pasada de renderizado, o usa una caché persistente adecuada si lo requiere la vida útil del contenido. El objetivo es tener una única fuente de verdad, en lugar de dos llamadas independientes a la API que puedan devolver datos diferentes.
import { cache } from "react";
const getPost = cache(async (slug: string) => {
return db.post.findUnique({ where: { slug, published: true } });
});
export async function generateMetadata({ params }) {
const { slug } = await params;
const post = await getPost(slug);
if (!post) return { title: "Article not found" };
return {
title: post.title,
description: post.excerpt,
alternates: { canonical: "/blog/" + post.slug },
};
}Define las reglas canónicas antes de escribir código
Decide si el sitio usa www, cómo trata las barras finales, a qué idioma pertenece cada página y si los parámetros de filtro crean recursos distintos. Después, haz que las redirecciones, los enlaces internos, las URL del sitemap y los metadatos coincidan. Una URL canónica construida de forma improvisada en cada página acabará dando resultados inconsistentes.
Si cambia el slug de un contenido, redirige la URL antigua a la nueva URL canónica y conserva un identificador estable en la base de datos. Si se elimina un contenido, decide si existe un reemplazo relacionado; de lo contrario, devuelve un 404 o 410 real, en lugar de una página de error soft-404 con un estado de éxito.
- —Un único origen y protocolo preferidos.
- —Una única política para las barras finales.
- —Alternativas de idioma explícitas para las páginas que realmente tienen traducción.
- —Un plan de redirecciones para los cambios de slug y el contenido retirado.
Gestiona las directivas robots y las entidades inexistentes en el servidor
Un borrador, un registro privado o una página de búsqueda interna no deben ser indexables solo porque el navegador los oculte después. Devuelve los metadatos y el estado correctos desde el servidor. Si una entidad no es pública, no expongas su título ni su descripción en los metadatos antes de comprobar la autorización.
Los metadatos robots no son un control de acceso. Las rutas privadas siguen necesitando autenticación y autorización. Para los enlaces públicos de vista previa, usa identificadores difíciles de adivinar, metadatos noindex y reglas claras de ciclo de vida. Después, comprueba que las vistas previas no aparezcan en el sitemap ni en la navegación interna.
Prueba el documento renderizado
Inspecciona el head del documento en el navegador, pero también obtén la respuesta sin procesar y consulta el código fuente de la página. Confirma que el título final, la descripción, la URL canónica, la directiva robots, los valores de Open Graph y el JSON-LD son correctos en una solicitud directa. Prueba una entidad existente, una inexistente, un borrador y un slug modificado.
Automatiza las partes estables. Una prueba básica de la ruta puede comprobar el estado, la URL canónica, un fragmento del título y la ausencia de orígenes de vista previa. Mantén la revisión humana de la calidad del contenido: una prueba puede demostrar que existe una descripción, pero no que sea útil.
Verifica los metadatos antes de promover el dominio
Despliega la versión candidata en una ruta HTTPS generada por Adios e inspecciona su salida de head con la compilación de producción. Mantén el origen público del sitio en una configuración que se pueda revisar y los valores sensibles de los proveedores detrás de referencias a secretos. Los registros de compilación y del entorno de ejecución siguen asociados a la versión candidata si falla la generación de metadatos.
Cuando la versión responda correctamente y sus metadatos sean correctos, conecta o conserva el dominio personalizado canónico. La gestión de TLS y la promoción de versiones mantienen el nombre de host público asociado a la versión que superó las comprobaciones, sin convertir los cambios de DNS en parte de cada publicación de contenido.
env:
NEXT_PUBLIC_SITE_URL: https://www.example.com
runtime:
name: node@24
port: 3000
health_path: /api/health