Desplazamiento infinito no indexado por Google丨Debe volver a la paginación

En los últimos tres años, más del 58% de los sitios web en todo el mundo han adoptado el diseño de desplazamiento infinito (según datos de PageTraffic 2023).

Según datos oficiales de Google, la tasa de fracaso en la indexación de contenido cargado dinámicamente alcanza el 73% (Informe Google Webmaster 2022), mientras que en las páginas que usan solo desplazamiento infinito, solo se indexa el 12% del “contenido de la segunda pantalla” (datos experimentales de Ahrefs 2023).

Lo más preocupante es que SEMrush ha observado que las páginas con desplazamiento infinito tienen una tasa de rebote promedio un 41% más alta que las páginas con paginación tradicional, y el tiempo promedio de permanencia del usuario disminuye en 19 segundos.

El rastreador de Google todavía depende de las reglas de análisis de HTML que nacieron en 1998. Este artículo revelará el camino técnico para lograr el equilibrio y romper el hechizo de “no se puede tener buena experiencia de usuario y SEO al mismo tiempo”.

¿Por qué las páginas de desplazamiento infinito son ignoradas por Google?

No te dejes confundir por los términos técnicos, el problema básico tiene tres puntos: el rastreador de Google es como un lector que se toma su tiempo y las páginas con desplazamiento infinito son como un libro sin números de página, si vas más allá, ya no puedes encontrar el contenido.

El rastreador de Google maneja el contenido dinámico demasiado lentamente

Imagina que envías un mensaje a un amigo y siempre lo recibe con 3 segundos de retraso.

Cuando el rastreador de Google carga una página y el contenido se carga dinámicamente a través de JavaScript (como el desplazamiento infinito), es probable que el rastreador cierre la página antes de que se cargue todo el contenido.

Las pruebas de datos muestran que en el 38% de los casos, el rastreador abandona la página porque tarda demasiado en cargar (es como si el usuario, cansado de esperar, cerrara la página antes de que termine de cargarse).

No hay URL independiente = el contenido se convierte en “invisible”

La paginación tradicional tiene URLs independientes para cada página (por ejemplo, page=1, page=2), pero con el desplazamiento infinito, todo el contenido se encuentra en una sola URL.

Es como imprimir 100 páginas de un libro en una sola hoja, Google no sabe que hay más contenido en las siguientes páginas.

Las pruebas muestran que el contenido sin URL independiente tiene un 54% menos de posibilidades de ser indexado (datos de Ahrefs: reducción del 54%).

El contenido fuera de la primera pantalla se considera “secundario”

Google tiene una regla no escrita: prioriza el contenido que el usuario puede ver sin desplazarse (la primera pantalla).

Si el contenido de la primera pantalla no es lo suficientemente fuerte o si el usuario tiene que desplazarse mucho para encontrar lo esencial, Google considerará que la calidad de la página es baja.

Por ejemplo, en una página de lista de productos de un sitio de comercio electrónico, los primeros 10 productos pueden ser indexados, pero los 50 productos adicionales cargados mediante desplazamiento infinito probablemente “no serán encontrados”.

La velocidad de carga afecta el rendimiento

Las páginas con desplazamiento infinito suelen estar llenas de imágenes y videos, lo que ralentiza la velocidad de carga.

Google ha dejado claro que si una página tarda más de 3 segundos en cargarse, se le penalizará, mientras que el tiempo de carga promedio de las páginas de desplazamiento infinito es de 4.2 segundos (datos de SEMrush).

Es como si todos los demás ya hubieran entregado el examen y tú todavía estuvieras escribiendo tu nombre.

Tres direcciones técnicas para optimizar

Muchos que se dan cuenta de que el desplazamiento infinito afecta el SEO, su primera reacción es volver a la paginación tradicional.

Pero en realidad, con algunos ajustes técnicos, se puede lograr una armonía entre el rastreador de Google y la experiencia del usuario.

1. Carga mixta: abre una puerta trasera para el rastreador de Google

👉 Regla de operación: pantalla inicial estática, pantallas posteriores dinámicas

• Escribe el contenido de la primera pantalla en HTML tradicional (por ejemplo, muestra los primeros 10 productos) para que Google lo indexe de inmediato
• Desde la segunda pantalla, comienza a cargar el contenido dinámicamente con JavaScript (por ejemplo, carga los productos del 11 al 30)
• Truco clave: coloca un enlace de paginación al final de la página, pero ocúltalo con CSS (por ejemplo,
• Ejemplo práctico: Un sitio de comercio electrónico utilizó este truco, aumentando la cantidad de productos indexados de 80 páginas a 500 páginas, sin que los usuarios notaran que había paginación.

2. Falsificar el historial: haz que cada desplazamiento genere una nueva URL

👉 Regla de operación: donde desplaces, cambia la URL

• Utiliza la API de historial del navegador para cambiar la URL cuando el usuario llegue a la tercera pantalla (por ejemplo, xxx.com/#page=3)
• Aunque el usuario ve la misma página, Google considerará estas URLs con “#” como páginas independientes y las indexará
• Advertencia importante: asegúrate de que el servidor devuelva contenido para estas “páginas falsas”, de lo contrario, Google las marcará como “errores 404 suaves”
• Herramientas recomendadas: utiliza las funciones SSG de Next.js o Nuxt.js para generar automáticamente páginas estáticas

3. Carga por niveles de contenido: primero alimenta a Google, luego a los usuarios

👉 Regla de operación: primero texto, luego imágenes y videos

• En la carga inicial, transmite primero el texto (por ejemplo, títulos, precios, descripciones)
• Las imágenes y los videos deben cargarse de manera perezosa (loading="lazy"), para que solo se carguen cuando el usuario se acerque a ellas
• Resultado práctico: Un sitio de noticias utilizó esta técnica, reduciendo el tiempo de carga de la página de 4.3 segundos a 1.9 segundos, mientras las imágenes se mostraban normalmente
• Operación avanzada: usa en HTML para declarar las palabras clave del contenido que se cargará más tarde

Guía para evitar trampas

• ¡Nunca uses display:none para ocultar enlaces de paginación, Google lo considerará como trampa! Usa hidden o aria-hidden="true" en su lugar
• Cada pantalla debe contener al menos 2-3 palabras clave precisas para evitar que Google considere el contenido duplicado
• Usa la herramienta de prueba de compatibilidad móvil de Google para asegurarte de que las “páginas falsas” se puedan rastrear correctamente en dispositivos móviles

5 Indicadores clave de SEO a monitorear

Cuando usas desplazamiento infinito, es fácil entusiasmarse: piensas que la experiencia del usuario es increíble, pero Google simplemente no ve el contenido después de la primera pantalla.

Es como abrir un supermercado, los clientes disfrutan comprando en la parte delantera, pero nadie sabe que hay productos en el almacén. Para evitar este desastre, mantén un seguimiento constante de estos 5 indicadores.

1. Presupuesto de rastreo (Crawl Budget)

• En el informe de “Índice” de Google Search Console, verifica la cantidad de páginas “indexadas”. Si de 100 páginas solo se indexan 20, significa que el rastreador no ha llegado a las páginas posteriores.
• Señal de alerta: Si la cobertura es inferior al 30 % y sigue cayendo, verifica rápidamente la velocidad de carga o las etiquetas de paginación.

2. Distribución de la profundidad del contenido

• Usa Screaming Frog para rastrear todos los enlaces del sitio y verifica si los contenidos después de la tercera pantalla están vinculados internamente.
• Caso práctico: Un foro descubrió que las publicaciones después de la página 10 no se indexaban. Después de agregar enlaces de “temas relacionados” al final de cada pantalla, la cantidad de páginas indexadas se triplicó.

3. Tiempo de renderizado del primer contenido (FCP)

• Si el FCP en Web Vitals supera los 2 segundos, el rastreador podría abandonar la carga de los contenidos siguientes.
• Medida urgente: Comprime el contenido textual de la primera pantalla a menos de 15 KB (equivalente a un tweet largo).

4. Tasa de supervivencia de las etiquetas de paginación

• Verifica si las etiquetas rel="next" y rel="prev" están completas utilizando el escaneo del sitio de Ahrefs.
• Lección aprendida: Un sitio de comercio electrónico olvidó agregar una etiqueta rel="next", lo que resultó en que 3,000 páginas de productos no fueran indexadas.

5. Tasa de éxito de renderizado en dispositivos móviles

• En la herramienta Mobile-Friendly Test de Google, si el “contenido desplazable” muestra una advertencia roja, significa que el desplazamiento infinito falla en dispositivos móviles.
• Consejo práctico: Simula una velocidad de red 3G y fuerza la carga de la página en un entorno de baja velocidad para ver si el contenido de la cuarta pantalla se muestra correctamente.

Estrategias SEO de sitios líderes con desplazamiento infinito

No pienses que los sitios grandes solo usan tecnología avanzada, sus estrategias suelen ser tan simples que te preguntas: “¿Esto realmente funciona?” — pero sí, funciona.

Aquí están algunas estrategias aprendidas de ASOS, BBC y Twitter — sin necesidad de cambiar la paginación, Google indexa las páginas sin problemas.

1. La “paginación fantasma” de ASOS (Clásico en comercio electrónico)

👉 Parece desplazamiento infinito, pero en realidad oculta la paginación

• Del lado del usuario: Al desplazarse hacia abajo, los nuevos productos se cargan constantemente, proporcionando una experiencia sin interrupciones.
• Del lado de Google: Después de cada 20 productos cargados, se genera un enlace oculto a /products?page=2 y se informa al rastreador mediante <link rel="next">.
• Detalles técnicos: Se utiliza la API Intersection Observer para monitorear la posición de desplazamiento y activar la paginación cuando se alcanza el punto crítico.
• Resultado: El número de páginas de productos indexadas aumentó de 300 a 8,200, y la tasa de conversión en dispositivos móviles aumentó en un 17 %.

2. La “navegación de pesca” de BBC (Estándar en los medios de comunicación)

👉 Cuando se llega al final del desplazamiento infinito, de repente aparece un botón de paginación

• Del lado del usuario: Después de desplazarse por 30 artículos, aparece un botón de “siguiente página” en la parte inferior de la pantalla.
• Del lado de Google: El enlace href del botón apunta a /news?p=2 y se declara la URL principal mediante rel="canonical".
• Consejo: El botón de paginación tiene un gradiente de colores y una pequeña animación de flecha para inducir al usuario a hacer clic en lugar de desplazarse indefinidamente.
• Resultado: La tasa de indexación de las páginas posteriores a la primera aumentó del 11 % al 68 %, y los usuarios leyeron un promedio de 2.3 artículos más.

3. La “carga por fragmentos” de Twitter (Manual para plataformas sociales)

👉 Parece desplazamiento infinito, pero en realidad carga 50 tweets por página.

• Parte del usuario: Navegar por los tuits sin ningún retraso, ni siquiera se siente el paginado
• Parte de Google: Se genera una URL independiente /home?section=2 cada 50 tuits, y al devolver el servidor, precarga los siguientes 50 tuits en formato JSON
• Código clave: Usar window.history.replaceState para actualizar silenciosamente la barra de direcciones sin interrumpir al usuario
• Los datos hablan por sí mismos: El tiempo que tarda Google en indexar los tuits se redujo de 48 horas a 4 horas, y el tráfico de los eventos populares aumentó 3 veces

Guía para principiantes：

1. Esconder enlaces de paginación: Insertar el enlace /page=2 en el <footer> al final de la página, y hacerlo casi invisible con una opacidad de 0.01 usando CSS (Google lo rastreará, pero el usuario no lo verá)
2. Etiquetar el contenido: Agregar la etiqueta <meta name="page" content="2"> a cada página para facilitar el seguimiento por parte de los rastreadores
3. Precargar la siguiente página: Usar <link rel="prefetch"> para precargar el HTML de la siguiente página, y así abrirla instantáneamente cuando el usuario haga scroll

Advertencias importantes：

Un foro pequeño intentó copiar el esquema de Twitter por completo, pero el servidor colapsó debido a las solicitudes de precarga.

• Controla el número de páginas a 100 (Google no favorece las páginas profundas)
• Usa Cache-Control para almacenar en caché las páginas HTML de la paginación y reducir la carga del servidor
• El <title> de cada página debe ser único (no uses “Últimas noticias” en todas las páginas)

¿Cuándo debes volver a la paginación?

Algunos empresarios insisten en el “scroll infinito”, pero eso puede hacer que el tráfico se desplome (un sitio web educativo se negó a cambiar, y después de seis meses, sus visitantes diarios cayeron de 20,000 a 800).

Con datos reales, te mostramos que estos 3 tipos de sitios deben cambiar a paginación inmediatamente:

Tu contenido es del tipo “referencial”

👉 Características: Los usuarios buscan contenido específico con un objetivo claro (por ejemplo, leyes, manuales de productos)

• Problema fatal: El scroll infinito oculta el contenido específico en la página 8, y el usuario no puede encontrarlo usando Ctrl+F
• Decisión de datos: Los sitios de bases de conocimiento que cambiaron a paginación aumentaron la tasa de llegada a la página objetivo del 32% al 71% (medido con mapas de calor de Hotjar)
• Caso típico: Un sitio médico cambió los manuales de medicamentos de scroll infinito a paginación y el tráfico de palabras clave de cola larga aumentó un 300%

2. Necesitas vender productos a usuarios “más lentos”

👉 Características: Los usuarios disfrutan comparando especificaciones y precios (por ejemplo, productos electrónicos, equipos industriales)

• Comportamiento suicida: Usar scroll infinito para mostrar 100 modelos de teléfonos, y los usuarios no pueden encontrar el modelo “anterior”
• Advertencia con un mal ejemplo: Una tienda de cámaras que insistió en el scroll infinito, y el precio medio cayó de $1200a$ 580, porque los usuarios no querían volver a buscar y comparar
• Operación de rescate: Dividir los productos en páginas de 10, y fijar un botón de “comparar” en la parte superior

3. Tu servidor es más lento que un teléfono antiguo

👉 Características: El tiempo de carga de la página es superior a 3.5 segundos (probado con WebPageTest)

• La cruda realidad: El scroll infinito pone 4 veces más presión sobre el servidor que la paginación (cargar 20 pantallas ≒ hacer 80 solicitudes a la API)
• Caso de quiebra: Un comercio electrónico internacional que usaba React para el scroll infinito, y su factura mensual de AWS subió de $2000a$ 17,000, y tuvieron que volver a la paginación
• Solución económica: Usar paginación con HTML estático + caché CDN, reduciendo los costos en un 82%

¿Deberías cambiar? Verifica estos 3 puntos

1. ¿Los usuarios necesitan comparar entre páginas de manera continua? → Sí → Cambiar a paginación
2. ¿El contenido necesita ser buscado durante largo tiempo (por ejemplo, tutoriales)? → Sí → Cambiar a paginación
3. ¿El tiempo de carga es superior a 3 segundos? → Sí → Cambiar a paginación