Canonical de Next.js con el dominio equivocado: causas que probamos

Si una página Next.js genera un canonical con un dominio antiguo, cambiar metadataBase puede no resolverlo. En nuestro caso con URL absoluta, la base correcta dejó intacta la dirección antigua. Hubo que modificar alternates.canonical en la página. Empieza por la URL que realmente se genera y busca la configuración que la define.

Qué probamos

El 4 de octubre de 2026 creamos un entorno App Router independiente con Next.js 15.5.22, React 19.2.6 y Node.js v25.2.1. Definimos ocho configuraciones antes de medir: un control correcto y siete casos deliberadamente incorrectos. Cada par antes/después pertenece a la misma compilación de producción y cambia un único ajuste de metadatos. El control no se modifica.

Solicitamos cada URL dos veces: 32 respuestas HTTP para 16 URL. Después inspeccionamos los 16 documentos renderizados en el navegador. Todas las respuestas devolvieron 200 y un único canonical en head; las dos series HTTP y el DOM coincidieron. Los siete errores introducidos desaparecieron tras sus respectivos cambios. No es una medición de la frecuencia de errores en sitios reales.

Las rutas /cXX/before y /cXX/after separan los casos. Los canonical declarados usan dominios reservados example.com y rutas de productos de demostración, distintas de las URL locales. El entorno tiene noindex, nofollow.

Las ocho configuraciones y su resultado real

El estado HTTP 200 no distinguió los metadatos correctos de los incorrectos. Comprueba la URL completa, incluida la ruta y el idioma. En C04, Next.js emitió la dirección de inicio sin barra final; seguía siendo el destino equivocado para el producto previsto.

Encuentra el ajuste que genera la parte incorrecta

Dominio incorrecto con canonical relativo — C02, C05 y C08. Revisa metadataBase en el layout raíz y los anidados. Eliminar la sobrescritura anidada corrigió C05. En C08 sustituimos el origen preview de la variable de compilación por el dominio público previsto.

Dominio incorrecto con canonical absoluto — C03. La página ya aportaba una URL completa del dominio antiguo. La metadataBase correcta no la sustituyó. Corrige ese valor o su fuente y vuelve a inspeccionar la etiqueta.

La ficha apunta al inicio — C04. La página heredaba el canonical del layout. Definir alternates.canonical para la página restauró la ruta prevista del producto. Revisa los demás tipos de página afectados.

Dominio correcto, ruta incorrecta — C06 y C07. El prefijo /catalog permaneció aunque el canonical empezaba por /. Quitar esa ruta no deseada de la base corrigió C06; añadir /fr corrigió C07. Conserva los prefijos que tu despliegue necesite.

Una configuración explícita para adaptar

Si el sitio está en la raíz del dominio, define el origen en el layout y la ruta en los metadatos de la página. Este es el patrón corregido de C02. Sustituye dominio y ruta; un sitio en un subdirectorio necesita su propia política de rutas.

// app/layout.tsx
export const metadata = {
  metadataBase: new URL("https://www.example.com"),
};

// app/products/widget/page.tsx
export const metadata = {
  alternates: { canonical: "/products/widget" },
};

Si la página contiene la URL absoluta antigua del siguiente ejemplo, cambiar solo el layout no basta. C03 modifica únicamente ese canonical.

// C03 — before
alternates: {
  canonical: "https://old.example.com/products/widget"
}

// C03 — after
alternates: {
  canonical: "https://www.example.com/products/widget"
}

Comprueba la compilación y el documento del navegador

1. Compila en modo producción con la configuración del dominio público previsto. Verifica también la URL desplegada si el alojamiento, middleware o CDN pueden cambiar la respuesta.
2. Guarda la respuesta HTTP e inspecciona los canonical en head: href completo, número de etiquetas y cualquier cabecera Link que indique otro canonical.
3. Inspecciona el documento renderizado con las herramientas del navegador. La expresión siguiente muestra etiquetas y ubicación. Una diferencia entre HTML y DOM requiere otro diagnóstico.
4. Repite tras el cambio en fichas, rutas anidadas y traducciones. Guarda el destino esperado junto a la dirección observada en cada control.

Array.from(document.querySelectorAll('link[rel="canonical"]'))
  .map(link => ({
    href: link.getAttribute("href"),
    inHead: link.closest("head") !== null
  }));

C08 prueba una variable, no la infraestructura de Vercel. Vercel documenta el noindex habitual de los previews y una excepción para dominios personalizados en ramas que no son de producción. Comprueba las cabeceras del despliegue concreto.

• Vercel: indexación de previews

Qué no demuestra este experimento

Los resultados corresponden a una versión, exportaciones estáticas de metadatos y un servidor local de producción. No probamos streaming metadata, Pages Router ni todas las plataformas. Un canonical conforme no demuestra que Google lo elija, indexe la página o mejore su posición. La canonicalización combina varias señales; comprueba por separado la URL elegida por Google en Search Console cuando tengas acceso.

• Documentación de Next.js 15
• Google: URL canónicas

Datos y reproducción

Repetición adicional del 13 de octubre de 2026: fijamos la copia exacta del entorno archivado en un commit Git antes de compilar. Las 32 observaciones HTTP de canonical y las 16 comprobaciones DOM coincidieron con los resultados originales. El archivo incluye las nuevas pruebas con su fecha; el estudio del 4 de octubre permanece intacto.

El paquete incluye protocolo, hashes, resultados y un entorno ejecutable. El script recoge respuestas HTTP; la inspección del navegador se explica por separado. Las dependencias directas están fijadas, pero el paquete autónomo no bloquea todas las transitivas.

• Resultados observados · JSON
• Método y reproducción · TXT
• Entorno, recolector y evidencias originales · ZIP

Cuando afecta a varios tipos de página

Entrega un registro concreto: URL afectada, canonical generado, destino previsto, configuración responsable y comprobación repetida. Si intervienen layouts, idiomas y entornos, nuestra auditoría SEO de Next.js puede documentar las dependencias y priorizar la implementación.

• Auditoría SEO de Next.js: alcance y entregables
• Comprobaciones de indexación de Next.js

Si los metadatos aparecen en body, nuestro experimento de Next.js con nueve condiciones separa el HTML recibido del DOM y revisa canonical frente a las indicaciones de Google.

• Metadatos de Next.js en body: nueve condiciones probadas

• Indexación en Google: cómo decidir el siguiente paso