¿Cómo manejan los crawlers de IA el scroll infinito? Nuestro contenido no está siendo indexado

Déjame desglosar cómo diferentes crawlers de IA manejan JavaScript:

Soporte de JavaScript en crawlers de IA:

El problema principal:

El scroll infinito requiere:

1. Ejecución de JavaScript
2. Disparar eventos de scroll
3. Solicitudes HTTP adicionales
4. Renderizado del nuevo contenido

La mayoría de los crawlers de IA fallan en el paso 1 o 2.

Por qué SSR no es suficiente:

Tu SSR sirve solo la página inicial. Pero el contenido de scroll infinito no es “inicial”: se carga con interacción. SSR no resuelve la dependencia de la interacción.

El problema fundamental:

El scroll infinito es fundamentalmente incompatible con las capacidades actuales de los crawlers de IA. Necesitas un enfoque alternativo.

Pasamos exactamente por este problema. Aquí está nuestra solución:

Implementación del enfoque híbrido:

// Estructura de URLs
/blog              // Scroll infinito (por defecto para usuarios)
/blog/archive/1    // Paginado (accesible para crawlers)
/blog/archive/2

Detalles clave de implementación:

1. El sitemap solo incluye URLs paginadas

   • Los crawlers de IA encuentran las páginas /blog/archive/*
   • Estas renderizan todo el contenido del lado del servidor

2. La página de scroll infinito carga el mismo contenido

   • Usa la API de paginación internamente
   • Mejor UX para humanos

3. Los enlaces internos apuntan a artículos individuales

   • No a la posición de scroll infinito
   • Cada artículo tiene su propia URL

4. Guía en robots.txt:

# Permitir a los crawlers enfocarse en los artículos individuales
# No en el contenedor de scroll infinito
Sitemap: /sitemap.xml

Resultados:

• Experiencia de usuario intacta (scroll infinito)
• Crawlers de IA acceden a todo el contenido vía páginas de archivo
• Todos los artículos individuales indexados
• La tasa de citación aumentó 4 veces después de la implementación

Enfoque específico para Next.js:

Usando getStaticPaths + getStaticProps:

// pages/blog/page/[page].js
export async function getStaticPaths() {
  const totalPages = await getTotalPages();
  const paths = Array.from({ length: totalPages }, (_, i) => ({
    params: { page: String(i + 1) }
  }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const posts = await getPostsForPage(params.page);
  return { props: { posts, page: params.page } };
}

Ventajas:

• Páginas estáticas para cada paginación
• Todo el contenido en el HTML en tiempo de build
• Los crawlers de IA reciben el contenido completo
• Carga rápida (estático)

Luego agrega scroll infinito como mejora:

• El scroll infinito del lado cliente usa la misma API
• Enfoque de mejora progresiva
• Funciona también sin JS

Esto te da lo mejor de ambos mundos.

Agregando el prerenderizado como opción:

Servicios de prerender para crawlers de IA:

Puedes detectar los user agents de crawlers de IA y servir contenido prerenderizado:

// middleware
if (isAICrawler(req.headers['user-agent'])) {
  return servePrerenderedVersion(req.url);
}

Detección de crawlers de IA:

const aiCrawlers = [
  'GPTBot',
  'ChatGPT-User',
  'Google-Extended',
  'ClaudeBot',
  'PerplexityBot',
  'anthropic-ai'
];

function isAICrawler(userAgent) {
  return aiCrawlers.some(crawler =>
    userAgent.includes(crawler)
  );
}

Opciones de prerender:

• Prerender.io
• Rendertron
• Solución personalizada basada en Puppeteer
• Prerenderizado en tiempo de build

Precaución:

No todos los crawlers de IA se identifican claramente. Algunos pueden no ser detectados. Este es un enfoque complementario, no un reemplazo de una paginación adecuada.

Metodología de pruebas para accesibilidad de crawlers de IA:

Pruebas manuales:

1. Prueba desactivando JavaScript:

   • Abre tu blog en el navegador
   • Desactiva JavaScript
   • ¿Qué contenido es visible?
   • Esto aproxima la vista de un crawler sin JS

2. Prueba de ver el código fuente:

   • Ver el código fuente de la página (no inspeccionar elemento)
   • ¿Tu contenido está en el HTML?
   • ¿O solo hay marcadores de JavaScript?

3. Prueba con curl:

   curl -A "GPTBot/1.0" https://yoursite.com/blog/
   

   • ¿La respuesta incluye contenido real?

Pruebas automáticas:

4. Google Search Console:

   • Herramienta de Inspección de URLs
   • “Ver página renderizada” muestra lo que ve Googlebot
   • (No crawlers de IA, pero renderizado JS similar)

5. Auditoría Lighthouse:

   • Revisa la categoría “SEO”
   • Se señalarán problemas de rastreo

Lo que debes observar:

• Contenido en la respuesta HTML inicial
• Enlaces a todas las páginas descubribles
• No se requiere JS para la visibilidad del contenido

Perspectiva e-commerce:

Tenemos más de 10.000 productos con funcionalidad de “cargar más”. Nuestra solución fue:

Estructura de página de categoría:

/category/shoes                    # Primeros 24 productos + cargar más
/category/shoes?page=2            # Productos 25-48
/category/shoes?page=3            # Productos 49-72

Implementación:

1. La página inicial siempre tiene enlaces de paginación

   • Incluso con scroll infinito habilitado
   • El pie de página contiene enlaces a página 1, 2, 3…

2. Los parámetros ?page= son canónicos

   • Cada página tiene su propio contenido
   • No es duplicado de la página principal

3. El sitemap incluye todas las URLs paginadas

   • No solo la URL base del scroll infinito

4. Los productos tienen URLs individuales

   • La paginación de categoría es para descubrimiento
   • Los productos son el contenido real

Resultado:

Las plataformas de IA citan nuestras páginas de productos individuales, que descubren gracias a la estructura de categoría paginada.

Esto ha sido increíblemente útil. Aquí está mi plan de implementación:

Enfoque: paginación híbrida

Fase 1: Agregar rutas paginadas (Semana 1-2)

• Crear rutas /blog/archive/[page]
• SSR para contenido completo en HTML
• Incluir navegación de paginación
• Actualizar el sitemap para incluir estas

Fase 2: Actualizar scroll infinito existente (Semana 3)

• Mantener scroll infinito en /blog
• Usar páginas de archivo como fuente de datos
• Canonical de /blog a /blog/archive/1

Fase 3: Pruebas y validación (Semana 4)

• Probar con JS desactivado
• Pruebas curl para user agents de IA
• Monitorear tasas de citación en IA

Implementación técnica:

/blog                 → Scroll infinito (humanos, canonical a archive/1)
/blog/archive/1       → Paginado (crawlers, canonical a sí mismo)
/blog/archive/2       → Paginado (crawlers)
/blog/[slug]          → Artículos individuales (contenido principal)

Principios clave:

• Contenido accesible sin JavaScript
• Cada pieza de contenido tiene una URL directa
• El sitemap incluye todas las páginas de contenido
• El scroll infinito es una mejora, no un requisito

Gracias a todos por la detallada orientación técnica.