En el mundo del diseño web, el término "above the fold" se refiere a la sección de las páginas que los usuarios ven a primera vista sin desplazarse hacia abajo. Aunque el concepto ha evolucionado a lo largo de los años, la comunidad SEO afirma que la información que muestras en la parte superior de tus páginas, puede influir en la experiencia de usuario, tasa de rebote y SEO.
¿Qué significa “above the fold”?
En el mundo editorial, "above the fold" hace referencia a las noticias que aparecían por encima de la “doblez” (de la forma en la que los periódicos pueden doblarse por la mitad). Los editores colocaban las historias más relevantes en la parte superior de la página para que los lectores no tuvieran que desplegar sus periódicos para seguir leyendo.
Con el contenido web, la idea sigue siendo la misma. Cuando alguien entra en tu web, el contenido above the fold es lo que ve inmediatamente sin tener que desplazarse por la página (hacer scroll).
Por regla general, un buen contenido above the fold debe incluir enlaces internos a otras páginas de tu web y estar optimizado para SEO. También debe informar a los usuarios sobre el contenido con imágenes llamativas y un encabezado H1 sólido.
Cómo podemos ver en el siguiente ejemplo, esta página de IKEA trata claramente de estanterías. Podemos ver el texto en negrita en la cabecera, una breve descripción y un enlace con más información. Si no estás buscando estanterías, sabrás inmediatamente que no estás en el lugar correcto.
Vamos a ver otro ejemplo. Supongamos que has llegado a la siguiente página. Desde un primer momento, sabes que trata sobre altavoces bluetooth portátiles. De nuevo, incluye una cabecera en negrita, una breve descripción de la página y una llamada a la acción para comprar sus artículos más recientes ("Comprar ahora").
¿Por qué es importante el contenido above the fold?
El contenido above the fold es lo primero que ven tus usuarios cuando entran en tu web. Si puedes mostrarles que su intención de búsqueda encaja con el contenido de tu página, es menos probable que vuelvan a los resultados y hagan clic en los enlaces de la competencia.
Si utilizas banners en una campaña, la posición above the fold es la mejor para colocarlos. Es menos probable que los usuarios vean tus anuncios a medida que se desplazan hacia abajo.
Elementos a tener en cuenta para los dispositivos móviles y el escritorio
Con el aumento del uso de los móviles, la norma "above the fold" ha evolucionado. A día de hoy, los dispositivos varían en tamaño y resolución, por lo que no existen unas medidas generales para todos los sitios.
Sin embargo, sigue siendo buena idea implementar las prácticas above the fold para mejorar la velocidad de carga de tus páginas en todos los dispositivos. Tras la actualización de Google sobre los Core Web Vitals, es un factor fundamental de posicionamiento, por lo que no puedes dejarlo de lado.
Utiliza un diseño versátil al crear tus páginas. Asegúrate de que el contenido, diseño e imágenes se adapten a la mayoría de las pantallas y diseña el contenido de la parte superior teniendo en cuenta a los usuarios de los móviles.
¿Cómo afecta el contenido above the fold al SEO?
No es incorrecto afirmar que el contenido above the fold es la sección de las páginas con mayor visibilidad. Los usuarios y los robots de rastreo la utilizan como una introducción para identificar el tema de tu contenido. Por lo tanto, si no se realiza correctamente, puede provocar un aumento de la tasa de rebote, perjudicando a tu SEO.
Un texto, formato y CTA sólidos suelen ser suficientes, pero no satures el espacio. Google penaliza a las webs que colocan anuncios o palabras clave en la zona above the fold.
Contenido above the fold y Core Web Vitals
La actualización de Core Web Vitals del algoritmo de Google hace hincapié en la velocidad de carga de las páginas y la experiencia del usuario. Dado que a menudo es lo primero que se carga en tu web, el contenido above the fold es un factor de posicionamiento para los CWV.
Te recomendamos leer: Velocidad de carga web: qué es, errores a evitar y mejores herramientas para medirla
El Largest Contentful Paint mide el tiempo que tarda en cargarse el contenido above the fold. Todo lo que esté por debajo de 2,5 segundos se considera una buena puntuación LCP. Por lo tanto, optimizar tu contenido above the fold para que se cargue en menos de ese tiempo, es una buena forma de obtener una buena puntuación LCP.
Para evitar tiempos de carga excesivos, intenta modificar el CSS y Javascript que utilizas en tu web. Puedes probar las siguientes tácticas:
- Implementar CSS crítico: el "CSS crítico" es una técnica que coloca el CSS para el contenido above the fold en la etiqueta <head>. Añade sólo el CSS necesario para cargar tu contenido above the fold; quieres mostrarlo lo más rápidamente posible.
- Precarga las “hero images”: las “hero images” son el elemento más importante del contenido above the fold. Cargarlas más rápido contribuye a la velocidad de carga de tu página. Utilizar "link rel=preload" reducirá significativamente los tiempos de carga de las imágenes cargadas con CSS o JS.
Analiza las Core Web Vitals de tu web
A medida que crees tu contenido above the fold, es importante que compruebes la velocidad de carga de tu página y los valores de los Core Web Vitals. Las herramientas de auditoría del sitio te ayudan a identificar rápidamente la puntuación CWV actual de tu web y cualquier problema que afecte a su velocidad de carga.
Utiliza la herramienta Auditoría del sitio para auditar la velocidad y rendimiento de tu web. El informe temático sobre Core Web Vitals muestra tus puntuaciones CWV directamente desde Google Lighthouse:
Échale un vistazo al informe temático Rendimiento del sitio para conocer la velocidad media de carga de tus páginas y obtener una visión general de su rendimiento. La herramienta te indica cualquier problema que afecte a tus tiempos de carga y cómo puedes mejorarlo:
Te recomendamos leer: Auditoría SEO: guía completa con Semrush
Cómo optimizar el contenido above the fold
Asegúrate de que cualquier contenido above the fold que incluyas, llame la atención de los usuarios e informe a los robots de rastreo. Si un usuario aterriza en tu página y está confuso o queda poco impresionado, rebotará a las SERP. Utiliza este recurso para captar su atención.
Una etiqueta H1 llamativa y atractiva puede aclarar el contenido de tus páginas y mostrarles si quieren seguir explorándolo.
Los elementos visuales captan la atención del usuario, lo mantienen en la página más tiempo y le indican que el contenido que hay más abajo puede serle útil. Un sitio ecommerce podría por ejemplo incluir imágenes y una llamada a la acción para su principal producto o servicio:
Utiliza las CTAs above the fold con moderación. Cada CTA debe incluir una acción directa ("Comprar", "Reservar", etc.) que indique a tus usuarios lo que quieres que hagan.
Si quieres que tus usuarios se pongan en contacto contigo, incluye botones que puedan identificar y pulsar fácilmente. Las direcciones de correo electrónico y los números de contacto son una buena opción, especialmente para los usuarios de móviles.
Además, el contenido above the fold es el lugar perfecto para incluir enlaces internos a otras secciones de tu sitio. Ayuda a acelerar la navegación y mejorar la experiencia del usuario, dos elementos clave para un buen SEO.
A continuación, te mostramos el contenido above the fold de una clínica para familias. Desde la zona above the fold, puedes pedir cita para ver a un médico y ver todos los servicios que ofrecen. También puedes llamar a la clínica para consultas más detalladas.
También incluye un menú de navegación que apunta a otras secciones de su web. Toda la información se presenta de forma que es fácil de seguir y no resulta abrumadora.
Principales conclusiones
El contenido above the fold es lo primero que ven los usuarios cuando cargan tu página web, así que tendrás que dejar huella. Utiliza etiquetas H1, elementos visuales de tu marca y una llamada a la acción para atraer a los usuarios.
Sin embargo, demasiado contenido puede abrumar al usuario y ralentizar la velocidad de carga de tus páginas. En su lugar, utiliza imágenes, código abreviado y un lenguaje sencillo para comunicar tu propuesta de valor.
Con unas pocas modificaciones en tu contenido above the fold, tienes muchas posibilidades de posicionarte mejor en Google.