Construimos un sitio moderno en React con scroll infinito para nuestro blog. Gran experiencia de usuario, pero nuestro contenido no aparece en las respuestas de IA en absoluto.
Google lo indexa bien (tras trabajar con SSR). Pero las plataformas de IA parecen omitir la mayor parte de nuestro contenido.
Nuestra configuración:
Preguntas:
¿Algún desarrollador frontend ha lidiado con esto?
Déjame desglosar cómo diferentes crawlers de IA manejan JavaScript:
Soporte de JavaScript en crawlers de IA:
| Crawler | Renderizado JS | Simulación de scroll | Tiempo de espera |
|---|---|---|---|
| GPTBot | Limitado/Nulo | No | Mínimo |
| Google-Extended | Bueno (como Googlebot) | No | Estándar |
| ClaudeBot | Limitado | No | Mínimo |
| PerplexityBot | Variable | No | Limitado |
| Common Crawl | Ninguno | No | Ninguno |
El problema principal:
El scroll infinito requiere:
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.
Enfoques recomendados (ordenados por amigabilidad para IA):
Opción 1: Paginación tradicional (la más amigable para IA)
/blog/page/1
/blog/page/2
/blog/page/3
Opción 2: Enfoque híbrido
<!-- Página con scroll infinito -->
<link rel="canonical" href="/blog/page/1" />
<!-- Paginación siempre disponible -->
<nav>
<a href="/blog/page/1">1</a>
<a href="/blog/page/2">2</a>
</nav>
Opción 3: Prerender para crawlers de IA
Cada opción tiene sus ventajas y desventajas. La Opción 1 es la más simple y confiable para IA. La Opción 2 preserva tu UX mientras añade accesibilidad para IA.
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:
El sitemap solo incluye URLs paginadas
La página de scroll infinito carga el mismo contenido
Los enlaces internos apuntan a artículos individuales
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:
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:
Luego agrega scroll infinito como mejora:
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:
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:
Prueba desactivando JavaScript:
Prueba de ver el código fuente:
Prueba con curl:
curl -A "GPTBot/1.0" https://yoursite.com/blog/
Pruebas automáticas:
Google Search Console:
Auditoría Lighthouse:
Lo que debes observar:
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:
La página inicial siempre tiene enlaces de paginación
Los parámetros ?page= son canónicos
El sitemap incluye todas las URLs paginadas
Los productos tienen URLs individuales
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)
Fase 2: Actualizar scroll infinito existente (Semana 3)
Fase 3: Pruebas y validación (Semana 4)
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:
Gracias a todos por la detallada orientación técnica.
Get personalized help from our team. We'll respond within 24 hours.
Supervisa qué páginas están siendo descubiertas y citadas por plataformas de IA. Identifica problemas de rastreo que afectan tu visibilidad.
Aprenda cómo implementar scroll infinito manteniendo la rastreabilidad para rastreadores de IA, ChatGPT, Perplexity y motores de búsqueda tradicionales. Descubr...
Discusión comunitaria sobre cómo la paginación afecta la visibilidad en la búsqueda por IA. Usuarios comparten experiencias con scroll infinito vs paginación tr...
Discusión comunitaria sobre el renderizado de JavaScript por rastreadores de IA. Desarrolladores comparten experiencias con React, Next.js y otros frameworks JS...