Solución: Error de Google Search Console "No se pudo obtener el sitemap" en Next.js (App Router)

Si has estado tirándote de los pelos al ver el error “No se pudo obtener el sitemap” en Google Search Console para tu proyecto de Next.js, no estás solo. Este frustrante error de sitemap de Google Search Console puede evitar que Google indexe correctamente tu sitio, perjudicando tu visibilidad. Muchos desarrolladores que utilizan el App Router de Next.js se han encontrado con este desafío de solución de problemas de sitemap de Next.js, donde GSC falla al leer el sitemap, incluso cuando parece ser perfectamente accesible en el navegador.

Afortunadamente, la comunidad de desarrolladores ha rastreado una solución fiable. Esta guía te guía a través de los pasos exactos para corregir el error “No se pudo obtener”, basándose en un hallazgo útil compartido en un issue de GitHub de Next.js.

Vamos a conseguir que tu sitemap se indexe y que tu sitio vuelva a la normalidad. Para más información y discusiones adicionales, también puedes echar un vistazo a mi respuesta en el issue de GitHub aquí.

El Problema: ¿Por Qué Google No Puede Obtener el Sitemap?

El núcleo del problema parece ser una combinación de cómo Next.js maneja el enrutamiento y el middleware, y cómo Google Search Console almacena en caché sus intentos de obtención. Cuando GSC intenta acceder a tu sitemap.xml, puede encontrar una interferencia, a menudo del middleware, que hace que la solicitud falle. Una vez que falla, GSC parece almacenar en caché ese resultado fallido para esa URL específica. Incluso después de solucionar el problema subyacente, simplemente volver a enviar la misma URL de sitemap.xml podría no desencadenar un nuevo intento.

Cómo Corregir el Error “No se pudo obtener”

Esta solución proviene del usuario de GitHub @segabrielcarvalho, quien compartió un enfoque práctico que aborda el almacenamiento en caché, el enrutamiento y los conflictos de middleware con cuatro pasos clave.

Paso 1: Forzar una Obtención Nueva del Sitemap con una Barra Diagonal Final

Este es el paso más simple pero crucial. Google Search Console parece almacenar en caché de forma agresiva los intentos de obtención fallidos. Para obligarlo a intentarlo de nuevo con una pizarra limpia, puedes utilizar una técnica simple para romper la caché.

En lugar de enviar https://tu-sitio.com/sitemap.xml, añade una barra diagonal final:

https://tu-sitio.com/sitemap.xml/

Enviar esta URL ligeramente diferente evitará la caché de GSC y desencadenará una nueva obtención. Este simple truco suele ser suficiente para que el sitemap se lea correctamente después de haber implementado las otras correcciones.

Paso 2: Sirve tu Sitemap desde una Ruta Anidada

En lugar de colocar tu archivo sitemap.ts en la raíz de tu directorio app, muévelo a una carpeta anidada. Esto ayuda a aislarlo y asegurar que se sirva correctamente sin conflictos.

1. Crea una nueva carpeta sitemap dentro de tu directorio app.
2. Mueve tu archivo sitemap.ts (o sitemap.js) dentro de ella.

Tu nueva ruta de archivo será: app/sitemap/sitemap.ts

Esto cambia la URL pública de tu sitemap. La nueva URL será:

https://tu-sitio.com/sitemap/sitemap.xml

Recuerda usar esta nueva URL cuando la envíes a Google Search Console (¡con el truco de la barra diagonal final!).

Paso 3: Excluye Archivos SEO de tu Middleware

El middleware es potente, pero también puede bloquear accidentalmente a Googlebot para que acceda a archivos importantes como tu sitemap y robots.txt. Para evitar esto, necesitas actualizar tu middleware.ts para excluir explícitamente estos archivos.

La configuración matcher en tu archivo de middleware le dice a Next.js en qué rutas debe ejecutarse el middleware. Usando una negación de búsqueda hacia adelante (negative lookahead), puedes instruirle que se ejecute en todas las rutas excepto en los archivos estáticos y los archivos SEO.

Aquí hay un ejemplo de middleware que no hace nada pero excluye correctamente los archivos necesarios. Puedes adaptar esto para tu middleware existente.

import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export default function middleware(req: NextRequest) {
  // Tu lógica de middleware puede ir aquí.
  // Si no tienes otra lógica, simplemente devuelve next().
  void req;
  return NextResponse.next();
}

export const config = {
  matcher: [
    /*
     * Coincide con todas las rutas de solicitud excepto las que comienzan con:
     * - _next/static (archivos estáticos)
     * - _next/image (archivos de optimización de imágenes)
     * - favicon.ico (archivo favicon)
     * - robots.txt (archivo robots)
     * - sitemap.xml (archivo sitemap)
     * - sitemap/ (archivos de sitemap anidados)
     * - site.webmanifest (archivo de manifiesto web)
     */
    "/((?!_next/static|_next/image|favicon\\.ico|robots\\.txt|sitemap\\.xml|sitemap/.*|site\\.webmanifest).*)",
  ],
};

Esta configuración asegura que tu robots.txt y ambas rutas potenciales de sitemap (/sitemap.xml y /sitemap/sitemap.xml) nunca sean procesadas por el middleware, evitando cualquier bloqueo o redirección potencial que pueda confundir a Googlebot.

Paso 4: Crea un Archivo robots.txt Correcto

Finalmente, asegúrate de tener un archivo robots.txt limpio y correcto en tu directorio app. Este archivo debe permitir explícitamente todos los user agents y apuntar a tu nueva URL de sitemap. Si tenías un robots.txt en tu carpeta public, es mejor eliminarlo para evitar conflictos y depender únicamente del que se genera desde tu directorio app.

Crea un archivo llamado robots.ts o robots.txt en tu directorio app con el siguiente contenido:

import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
    },
    sitemap: 'https://tu-sitio.com/sitemap/sitemap.xml',
  }
}

O, si prefieres un archivo estático:

User-agent: *
Allow: /

Sitemap: https://tu-sitio.com/sitemap/sitemap.xml

Asegúrate de reemplazar https://tu-sitio.com con tu dominio real. Este archivo dirige a los rastreadores a la nueva ubicación de tu sitemap.

Puntos Clave

Para resumir la solución:

1. Usa una barra diagonal final (/) en tu URL de sitemap al enviarlo a GSC para romper la caché.
2. Mueve tu archivo de sitemap a una ruta anidada como app/sitemap/sitemap.ts.
3. Actualiza tu middleware para excluir archivos SEO como robots.txt y sitemap.xml.
4. Apunta tu robots.txt a la nueva URL del sitemap.

Además, es importante asegurarse de que solo tienes una fuente para tu sitemap. Si tienes un sitemap.xml en tu carpeta public y también estás generando uno desde tu directorio app, pueden surgir conflictos. Elimina cualquier archivo de sitemap antiguo y quédate con uno solo, generado dinámicamente.

Siguiendo estos pasos, deberías poder resolver el error “No se pudo obtener el sitemap” y conseguir que tu sitio de Next.js se indexe correctamente en Google. ¡Feliz despliegue!