Above the Fold: Qué es y cómo mejorarlo

Una de las publicaciones que llevaba tiempo queriendo escribir es este, la del término de Above the Fold y explicar qué es.

Sin duda, uno de los términos más conocidos en SEO/maquetación web para colocar de alguna manera una primera imagen o pantallazo de “relevancia”, por así decirlo, para el usuario nada más acceder a una de nuestras páginas de nuestro sitio web.

Pero, para no entrar tan de lleno al contenido, vamos a ir paso a paso viendo más sobre este término tan interesante para cualquier página web. ¡Vamos a ello!

Índice de contenido

¿Cómo se entiende el Above The Fold?

El término de Above the Fold o primer pantallazo se conoce como la pantalla visible tras la carga de la página web sin hacer scroll. Es decir, nada más cargar la página, es lo primero que ve el usuario al entrar a la página.

Este término, además, se ve dividido por su parte opuesta, que sería el Below the fold, dado que este término es referido como la parte que está dentro de la página web pero el usuario debe hacer scroll para llegar a alcanzar esta parte de la web.

Pero, entonces, ¿por qué es tan importante este término o práctica?

Importancia del primer pantallazo

Por lo general, en la parte superior de la página se suelen o se deberían de colocar aquellos elementos que sean de mayor relevancia para el sitio web, es decir, aquellos que están pensado para captar la atención del usuario desde el principio.

Con esto se trata de que el usuario trate de estar el mayor tiempo posible o que trate de interactuar con nuestra página web si ese es el objetivo que buscamos.

De hecho, lo ideal es que tratemos de adaptar esta práctica visual según los dispositivos desde donde se acceda a nuestra página web: móvil, tablet o pc.

¿Qué debo colocar en esta parte de mi web?

En este sentido, debemos de tratar de pensar en nuestra página concreta. ¿De qué trata?, ¿Qué queremos que suceda?, ¿Está colocado de la mejor manera?

Éstas son algunas de las preguntas que debemos hacernos para tener nuestro above the fold optimizado de cara a nuestras necesidades de negocio. Sin ir más lejos, quiero poner el ejemplo de mi home page, donde trato de dejar mi primer pantallazo lo más interesante de cara a mi web.

Leer SEO para abogados: Qué tener en cuenta

Cecomart Above the Fold en home page en PC

Aquí os dejo esta captura sobre mi primer pantallazo de la home page (para desktop o pc). Como se puede ver, dejo en la parte superior el H1 principal, seguido de un párrafo para captar la atención y un H2 de bienvenida, dado que el usuario acaba de acceder a la web.

A la derecha de la pantalla, ya se muestra el botón y la imagen para, aquellos que ya tengan claro que buscan un consultor SEO en Alicante, no pierdan tiempo y vayan interactuar conmigo para informarse.

En este sentido, tanto lo que indico a nivel de contenido como la manera de introducirlo, trata de satisfacer lo que busco, que es captación de usuarios interesados en SEO. Además, se ven los botones de acceso directo al contenido asociado al objetivo principal.

Cecomart above the fold en mobile

Aquí os dejo esta captura sobre mi primer pantallazo de la home page en la versión de mobile. En este caso, el contenido también se muestra prácticamente igual que en desktop, con la diferencia que aquí, los botones inferiores de contenido de la página no llegan a visualizarse, pero sí el H1 principal, seguido de un párrafo para captar la atención y el H2 de bienvenida, así como el botón para interactuar o informarse sobre mis servicios.

En este sentido, en ambos ejemplos de dispositivos queda claro el objetivo que busco y quiero para mi página principal.

En cada caso, deberíamos tratar de adaptar nuestro primer pantallazo según lo que busquemos de cara a los usuarios que acceden. Podríamos entrar en otras cuestiones a nivel de diseño, uso de colores u otros elementos, pero tenemos que buscar siempre nuestras necesidades de negocio.

Al final, se trata de dejar en esa primera pantalla la información de peso dado que es lo primero que se muestra, y por ello dejamos lo realmente importante en esta parte de la página.

¿Pero, todos los above the fold deben ser iguales?

Evidentemente, no. Como he comentado, cada caso es un mundo. Debemos ver de qué se trata la página: si es una ficha de producto, si queremos captar la atención, si queremos que el usuario vaya a otra página, si queremos llevarle expresamente a una parte inferior del contenido,…

En la adaptación y necesidades de negocio está la clave de todo.

Espero que os haya gustado este contenido y como siempre, cualquier mejora o comentario, será bienvenido.