Los primeros segundos en una web son decisivos. El usuario escanea, evalúa y decide si se queda o se va antes de hacer un solo clic. El above the fold es exactamente ese primer territorio: lo que el visitante ve sin necesidad de hacer scroll. Optimizarlo correctamente puede duplicar las conversiones de una landing page.
Qué es el above the fold
El término proviene del periodismo impreso: el periódico doblado en el quiosco mostraba las noticias más importantes en la mitad superior, antes del doblez (fold). En diseño web, el above the fold es el área visible de una página cuando carga por primera vez, sin interacción del usuario.
No existe una altura universal: depende del dispositivo, el navegador y la resolución de pantalla. Como referencia:
| Dispositivo | Altura aproximada above the fold |
|---|---|
| Desktop (1080p) | ~900px (menos la barra del navegador) |
| Laptop (768p) | ~650-700px |
| Móvil (iPhone 14) | ~740px (menos barras del sistema) |
| Tablet (iPad) | ~960px |
Por qué el above the fold es crítico para conversiones
Los estudios de eye-tracking muestran que los usuarios dedican el 80% de su tiempo de atención al contenido above the fold. Si no comunicas tu propuesta de valor en los primeros segundos, la mayoría abandona.
Según estudios de Nielsen Norman Group, los usuarios pasan de media entre 10 y 20 segundos decidiendo si una web merece su atención. Todo ocurre above the fold.
Qué elementos deben estar en el above the fold
1. Propuesta de valor clara
El H1 debe responder en menos de 8 palabras: ¿qué haces, para quién y qué resultado obtienes? No describas tu empresa; describe el beneficio del usuario.
❌ "Somos una agencia de marketing digital con 10 años de experiencia"
✅ "Conseguimos más clientes para tu negocio con publicidad digital"
2. Subtítulo que amplía la propuesta
Una frase de 1-2 líneas que añade contexto o credibilidad sin repetir el H1. Puede mencionar el público objetivo, el método o una cifra.
3. CTA principal visible
El botón de llamada a la acción más importante debe ser visible sin scroll. Contraste alto, texto orientado a la acción (no "Enviar" sino "Solicitar presupuesto gratis").
4. Elemento de credibilidad
Logos de clientes, número de proyectos, años de experiencia, o una frase de testimonio. Reduce la fricción y construye confianza inmediata.
5. Navegación clara
El menú debe ser accesible y visible. No satures con demasiadas opciones: 4-6 ítems máximo más el CTA principal.
Errores comunes en el above the fold
Hero image o vídeo sin texto superpuesto
Una imagen grande y hermosa que no comunica nada es un desperdicio del espacio más valioso de tu web. Si usas imagen de fondo, el texto superpuesto debe ser legible y contener la propuesta de valor.
Texto demasiado largo
El above the fold no es para explicar: es para enganchar. Si necesitas muchas líneas para explicar lo que haces, es porque no está bien resumido.
CTA invisible o genérico
Botones grises, pequeños o con texto como "Más información" tienen CTR muy bajo. El CTA debe destacar visualmente y decir exactamente qué va a ocurrir al hacer clic.
Demasiados elementos compitiendo
Si hay tres CTAs, dos pop-ups y un chat widget al cargar la página, el usuario no sabe dónde mirar. Jerarquía visual clara: un único objetivo principal above the fold.
No optimizado para móvil
El tráfico móvil representa el 60-70% de la mayoría de webs. Si el above the fold en móvil está roto o el texto es ilegible, estás perdiendo la mayoría de tus visitantes.
Above the fold y SEO: la conexión
Google tiene en cuenta la experiencia above the fold mediante su Page Layout Algorithm. Las páginas con demasiada publicidad o contenido sin valor visible antes del scroll pueden ver penalizado su posicionamiento.
Además, un above the fold bien optimizado reduce el bounce rate y aumenta el tiempo en página, señales indirectas de calidad que Google valora para el ranking orgánico.
Cómo testear tu above the fold
- Herramientas de heatmap: Hotjar o Microsoft Clarity muestran dónde hace clic la gente y hasta dónde hace scroll.
- Grabaciones de sesión: observa cómo navegan usuarios reales por tu web.
- A/B testing: prueba distintas versiones del H1, CTA o imagen para medir cuál convierte más.
- Google Search Console: un bounce rate alto en páginas de entrada indica problemas en el above the fold.
¿Tu above the fold no convierte?
En Organik analizamos tu web y rediseñamos el above the fold para maximizar las conversiones sin sacrificar el SEO ni la velocidad de carga.
Solicitar análisis gratuito